✨ Angular Signals Implementation
Сигналы, хоть на первый взгляд и кажутся сложными, вполне доступны для понимания, а если вы стремитесь разобраться в деталях их реализации.
В статье детально рассмотрена их имплементация в Angular, а также объяснено, как именно работает их алгоритм изнутри.
👉 https://habr.com/ru/articles/847130/
Сигналы, хоть на первый взгляд и кажутся сложными, вполне доступны для понимания, а если вы стремитесь разобраться в деталях их реализации.
В статье детально рассмотрена их имплементация в Angular, а также объяснено, как именно работает их алгоритм изнутри.
👉 https://habr.com/ru/articles/847130/
🔥10👍2🤯2
✨ Angular Roadmap
Для повышения прозрачности команда Angular создала дорожную карту, которая охватывает как текущее состояние фреймворка, так и его будущее развитие.
В статье представлен обзор этой дорожной карты, включая уже реализованные нововведения и те изменения, которые улучшат фреймворк в дальнейшем.
👉 https://habr.com/ru/articles/847474/
Для повышения прозрачности команда Angular создала дорожную карту, которая охватывает как текущее состояние фреймворка, так и его будущее развитие.
В статье представлен обзор этой дорожной карты, включая уже реализованные нововведения и те изменения, которые улучшат фреймворк в дальнейшем.
👉 https://habr.com/ru/articles/847474/
👍7❤5
✨ Angular's effect(): Use Cases & Enforced Asynchrony
Сигналы разработаны с акцентом на простоту и предлагают три основные функции: signal() для создания сигналов, computed() для вычисляемых сигналов и effect() для обработки побочных эффектов.
Последний, effect(), выделяется и вызывает множество споров. Многие предлагают вообще избегать его, а некоторые даже говорят, что его не должно быть.
В статье приводятся аргументы в пользу effect() и рассматриваются возможные сценарии его использования.
👉 https://dev.to/this-is-angular/angulars-effect-use-cases-enforced-asynchrony-4hb
Сигналы разработаны с акцентом на простоту и предлагают три основные функции: signal() для создания сигналов, computed() для вычисляемых сигналов и effect() для обработки побочных эффектов.
Последний, effect(), выделяется и вызывает множество споров. Многие предлагают вообще избегать его, а некоторые даже говорят, что его не должно быть.
В статье приводятся аргументы в пользу effect() и рассматриваются возможные сценарии его использования.
👉 https://dev.to/this-is-angular/angulars-effect-use-cases-enforced-asynchrony-4hb
👍6🔥3👏3✍1❤1💯1
✨ Эффективное использование фикстур в Playwright
Фикстуры позволяют настраивать среду выполнения тестов, управлять состоянием, ресурсами и окружением до, во время и после тестов.
Это руководство проведет вас через продвинутые техники использования фикстур во фреймворке для end-to-end, чтобы создать надежную и поддерживаемую систему тестирования.
👉 https://habr.com/ru/articles/848434/
Фикстуры позволяют настраивать среду выполнения тестов, управлять состоянием, ресурсами и окружением до, во время и после тестов.
Это руководство проведет вас через продвинутые техники использования фикстур во фреймворке для end-to-end, чтобы создать надежную и поддерживаемую систему тестирования.
👉 https://habr.com/ru/articles/848434/
👍3🔥1
✨ 18 вопросов для собеседования
Давно не выходило материалов с вопросами для собеседований, на этот раз эксперты обсудили ключевые темы Angular. Такие, как архитектура, директивы, сервисы, оптимизация и многое другое.
Оказалось, что у каждого эксперта свой подход к ответам, и мы надеемся, что вы сможете почерпнуть из них что-то новое.
👉 https://www.angularspace.com/18-interview-questions-answered-by-angular-experts-live-post/
Давно не выходило материалов с вопросами для собеседований, на этот раз эксперты обсудили ключевые темы Angular. Такие, как архитектура, директивы, сервисы, оптимизация и многое другое.
Оказалось, что у каждого эксперта свой подход к ответам, и мы надеемся, что вы сможете почерпнуть из них что-то новое.
👉 https://www.angularspace.com/18-interview-questions-answered-by-angular-experts-live-post/
🔥12🤡5👍4
✨ Дерево иерархии типов
Оказывается, все типы в TypeScript занимают свое место в иерархии и можно представить ее в виде древовидной структуры.
Эта статья — попытка проанализировать систему типов и выстроить правильную ментальную модель.
👉 https://www.zhenghao.io/posts/type-hierarchy-tree
Оказывается, все типы в TypeScript занимают свое место в иерархии и можно представить ее в виде древовидной структуры.
Эта статья — попытка проанализировать систему типов и выстроить правильную ментальную модель.
👉 https://www.zhenghao.io/posts/type-hierarchy-tree
👍5🔥1👏1
✨ Кастомные валидаторы
Реактивные формы предлагают надежный способ управления вводом данных, валидацией и взаимодействием с пользователем.
В этой статье показано, как реализовать собственные валидаторы для элементов, чтобы ваши формы были не только гибкими, но и безопасными и надежными.
👉 https://dev.to/this-is-angular/custom-validators-with-controlvalueaccessor-in-angular-ensuring-robust-form-validations-4jgj
Реактивные формы предлагают надежный способ управления вводом данных, валидацией и взаимодействием с пользователем.
В этой статье показано, как реализовать собственные валидаторы для элементов, чтобы ваши формы были не только гибкими, но и безопасными и надежными.
👉 https://dev.to/this-is-angular/custom-validators-with-controlvalueaccessor-in-angular-ensuring-robust-form-validations-4jgj
👍5❤2🔥1
✨ Создание директивы видимости элемента
В статье автор рассказывает, как создать директиву в Angular с использованием API IntersectionObserver.
Эта директива отслеживает видимость элемента на экране и реагирует на его появление или исчезновение.
👉 https://dev.to/this-is-angular/angular-lab-lets-create-a-visibility-directive-5dpp
В статье автор рассказывает, как создать директиву в Angular с использованием API IntersectionObserver.
Эта директива отслеживает видимость элемента на экране и реагирует на его появление или исчезновение.
👉 https://dev.to/this-is-angular/angular-lab-lets-create-a-visibility-directive-5dpp
👍9👏2
✨ Последние обновления effect()
Благодаря обратной связи о effect() во время его предварительного тестирования, команда Angular выявила несколько улучшений в дизайне, которые решают проблемы как с функциональностью, так и с опытом разработки.
В целом, большинство применений API эффектов будут работать так, как и ожидалось, но есть несколько вариантов использования, о которых следует помнить.
👉 https://blog.angular.dev/latest-updates-to-effect-in-angular-f2d2648defcd
Благодаря обратной связи о effect() во время его предварительного тестирования, команда Angular выявила несколько улучшений в дизайне, которые решают проблемы как с функциональностью, так и с опытом разработки.
В целом, большинство применений API эффектов будут работать так, как и ожидалось, но есть несколько вариантов использования, о которых следует помнить.
👉 https://blog.angular.dev/latest-updates-to-effect-in-angular-f2d2648defcd
👍7❤2🔥2
✨ Анимация списков
Angular включает в себя сложную систему анимации, которая особенно полезна для элементов при их появлении или исчезновении на экране.
Давайте рассмотрим, как она работает на примере анимаций списков.
👉 https://dev.to/this-is-angular/angular-lab-animating-lists-and-using-animationbuilder-for-imperative-animations-1e9j
Angular включает в себя сложную систему анимации, которая особенно полезна для элементов при их появлении или исчезновении на экране.
Давайте рассмотрим, как она работает на примере анимаций списков.
👉 https://dev.to/this-is-angular/angular-lab-animating-lists-and-using-animationbuilder-for-imperative-animations-1e9j
👍4👏1
✨ Maskito: то, что вы давно искали
Существует множество случаев, когда пользовательский ввод необходимо форматировать на лету, например, при вводе номера кредитной карты, телефона, даты рождения и т.д.
Александр Инкин рассказал, почему Maskito заслуживает вашего внимания.
👉 https://habr.com/ru/companies/tbank/articles/850790/
Существует множество случаев, когда пользовательский ввод необходимо форматировать на лету, например, при вводе номера кредитной карты, телефона, даты рождения и т.д.
Александр Инкин рассказал, почему Maskito заслуживает вашего внимания.
👉 https://habr.com/ru/companies/tbank/articles/850790/
🔥21👍6😁4🤮1
✨ Анонс TypeScript 5.7 Beta
Недавно вышла бета-версия TypeScript 5.7, и среди нововведений можно выделить следующие:
- Проверки для переменных, которые никогда не инициализировались.
- Перезапись путей для относительных путей.
- Поддержка --target es2024 и --lib es2024.
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/
Недавно вышла бета-версия TypeScript 5.7, и среди нововведений можно выделить следующие:
- Проверки для переменных, которые никогда не инициализировались.
- Перезапись путей для относительных путей.
- Поддержка --target es2024 и --lib es2024.
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/
👍2
✨ Разные точки зрения при работе с Angular
В Angular в некоторых ситуациях доступно два или более инструмента или подхода, и разработчику приходится выбирать тот, который наилучшим образом соответствует его задачам. Однако такая вариативность иногда вызывает жаркие споры.
В этой статье рассматриваются различные спорные моменты, которые порождают эти дискуссии.
👉 https://www.angularspace.com/angular-friction-points/
В Angular в некоторых ситуациях доступно два или более инструмента или подхода, и разработчику приходится выбирать тот, который наилучшим образом соответствует его задачам. Однако такая вариативность иногда вызывает жаркие споры.
В этой статье рассматриваются различные спорные моменты, которые порождают эти дискуссии.
👉 https://www.angularspace.com/angular-friction-points/
👍17🔥2👏1
✨ Как использовать менеджер состояний NgRx для Angular-проектов
NgRx предлагает управление глобальным и локальным состоянием, работу с побочными эффектами, интеграцию с Angular Router и многое другое. Однако важно заранее понять, стоит ли использовать его в вашем проекте, так как временные затраты на разработку могут не окупиться.
В статье рассматриваются ключевые особенности NgRx с попыткой выделить его преимущества и недостатки.
👉 https://habr.com/ru/companies/simbirsoft/articles/851362/
NgRx предлагает управление глобальным и локальным состоянием, работу с побочными эффектами, интеграцию с Angular Router и многое другое. Однако важно заранее понять, стоит ли использовать его в вашем проекте, так как временные затраты на разработку могут не окупиться.
В статье рассматриваются ключевые особенности NgRx с попыткой выделить его преимущества и недостатки.
👉 https://habr.com/ru/companies/simbirsoft/articles/851362/
👍8👎2🔥1👏1
✨ Chrome расширение на Angular 18
Иногда возникает желание изменить функционал стороннего сайта или подкорректировать его дизайн.
Автор решил поделиться своим опытом разработки расширения для Chrome, рассказав о возникших трудностях и путях их решения.
👉 https://habr.com/ru/articles/851234/
Иногда возникает желание изменить функционал стороннего сайта или подкорректировать его дизайн.
Автор решил поделиться своим опытом разработки расширения для Chrome, рассказав о возникших трудностях и путях их решения.
👉 https://habr.com/ru/articles/851234/
👍9🔥2❤1
✨ Angular Incremental Hydration
В современных веб-приложениях оптимизация производительности и пользовательского опыта является ключевой задачей, особенно при работе с масштабируемым контентом.
В Angular, используя блок defer, можно контролировать, когда и каким образом отдельные части приложения становятся интерактивными. Контент может быть гидратирован по мере действий пользователя, видимости элементов или по определённым условиям.
👉 https://dev.to/this-is-angular/keep-hydrated-with-angular-incremental-hydration-2apa
В современных веб-приложениях оптимизация производительности и пользовательского опыта является ключевой задачей, особенно при работе с масштабируемым контентом.
В Angular, используя блок defer, можно контролировать, когда и каким образом отдельные части приложения становятся интерактивными. Контент может быть гидратирован по мере действий пользователя, видимости элементов или по определённым условиям.
👉 https://dev.to/this-is-angular/keep-hydrated-with-angular-incremental-hydration-2apa
👍7🐳2
✨ ИИ в современных Angular-проектах
Пересечение ИИ и фронтенд-разработки меняет подход к созданию, тестированию и управлению приложениями.
Интеграция нейросетей в наши проекты, например, с помощью Cursor IDE, позволяет значительно упростить многие процессы, такие как автоматизация утилитарных функций, создание юнит-тестов и рефакторинг. Он также может следить за соблюдением архитектурных правил и выполнять другие задачи.
👉 https://www.angularspace.com/ai-in-modern-angular-workspaces-the-future-is-now/
Пересечение ИИ и фронтенд-разработки меняет подход к созданию, тестированию и управлению приложениями.
Интеграция нейросетей в наши проекты, например, с помощью Cursor IDE, позволяет значительно упростить многие процессы, такие как автоматизация утилитарных функций, создание юнит-тестов и рефакторинг. Он также может следить за соблюдением архитектурных правил и выполнять другие задачи.
👉 https://www.angularspace.com/ai-in-modern-angular-workspaces-the-future-is-now/
👎6👍4👏1
✨ Мощь CSS-масок
Наконец, CSS-свойство mask получило полную поддержку во всех современных браузерах без необходимости вендорных префиксов. Это значит, что осталось лишь привыкнуть к его использованию и не бояться применять.
Барсуков Никита напомнил теорию и поделился практическими примерами на основе опыта работы с Taiga UI.
👉 https://habr.com/ru/companies/tbank/articles/853042/
Наконец, CSS-свойство mask получило полную поддержку во всех современных браузерах без необходимости вендорных префиксов. Это значит, что осталось лишь привыкнуть к его использованию и не бояться применять.
Барсуков Никита напомнил теорию и поделился практическими примерами на основе опыта работы с Taiga UI.
👉 https://habr.com/ru/companies/tbank/articles/853042/
🔥14👍10👏1
✨ Введение в Vitest и Angular
Теперь, когда в новых версиях Angular используется Vite, мы можем применять Vitest в наших Angular-проектах. Процесс установки прост, а синтаксис легко освоить.
В этой статье рассказывается, как настроить Vitest в приложении на Angular 18 для замены Karma, а также добавить покрытие кода, чтобы отслеживать, какой процент приложения охватывается юнит-тестами.
👉 https://www.angularspace.com/introduction-to-vitest-and-angular/
Теперь, когда в новых версиях Angular используется Vite, мы можем применять Vitest в наших Angular-проектах. Процесс установки прост, а синтаксис легко освоить.
В этой статье рассказывается, как настроить Vitest в приложении на Angular 18 для замены Karma, а также добавить покрытие кода, чтобы отслеживать, какой процент приложения охватывается юнит-тестами.
👉 https://www.angularspace.com/introduction-to-vitest-and-angular/
👍9🔥4🤔1
✨ Лучшие практики для директив
Директивы — это мощный и универсальный инструмент, который, как и любой другой инструмент, может быть неправильно использован.
Однако, следуя рекомендациям, представленным в этой статье, вы сможете создавать более простые и понятные директивы, раскрыв их полный потенциал.
👉 https://www.angularspace.com/directive-best-practices/
Директивы — это мощный и универсальный инструмент, который, как и любой другой инструмент, может быть неправильно использован.
Однако, следуя рекомендациям, представленным в этой статье, вы сможете создавать более простые и понятные директивы, раскрыв их полный потенциал.
👉 https://www.angularspace.com/directive-best-practices/
👍9🔥5