🦊 Angular Fox 🚀 — русскогорящие новости сообщества

✨ Последние обновления effect()

Благодаря обратной связи о effect() во время его предварительного тестирования, команда Angular выявила несколько улучшений в дизайне, которые решают проблемы как с функциональностью, так и с опытом разработки.

В целом, большинство применений API эффектов будут работать так, как и ожидалось, но есть несколько вариантов использования, о которых следует помнить.

👉 https://blog.angular.dev/latest-updates-to-effect-in-angular-f2d2648defcd

✨ Создание директивы видимости элемента

В статье автор рассказывает, как создать директиву в Angular с использованием API IntersectionObserver.

Эта директива отслеживает видимость элемента на экране и реагирует на его появление или исчезновение.

👉 https://dev.to/this-is-angular/angular-lab-lets-create-a-visibility-directive-5dpp

✨ Кастомные валидаторы

Реактивные формы предлагают надежный способ управления вводом данных, валидацией и взаимодействием с пользователем.

В этой статье показано, как реализовать собственные валидаторы для элементов, чтобы ваши формы были не только гибкими, но и безопасными и надежными.

👉 https://dev.to/this-is-angular/custom-validators-with-controlvalueaccessor-in-angular-ensuring-robust-form-validations-4jgj

✨ Дерево иерархии типов

Оказывается, все типы в TypeScript занимают свое место в иерархии и можно представить ее в виде древовидной структуры.

Эта статья — попытка проанализировать систему типов и выстроить правильную ментальную модель.

👉 https://www.zhenghao.io/posts/type-hierarchy-tree

✨ 18 вопросов для собеседования

Давно не выходило материалов с вопросами для собеседований, на этот раз эксперты обсудили ключевые темы Angular. Такие, как архитектура, директивы, сервисы, оптимизация и многое другое.

Оказалось, что у каждого эксперта свой подход к ответам, и мы надеемся, что вы сможете почерпнуть из них что-то новое.

👉 https://www.angularspace.com/18-interview-questions-answered-by-angular-experts-live-post/

✨ Эффективное использование фикстур в Playwright

Фикстуры позволяют настраивать среду выполнения тестов, управлять состоянием, ресурсами и окружением до, во время и после тестов.

Это руководство проведет вас через продвинутые техники использования фикстур во фреймворке для end-to-end, чтобы создать надежную и поддерживаемую систему тестирования.

👉 https://habr.com/ru/articles/848434/

✨ 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

✨ Angular Roadmap

Для повышения прозрачности команда Angular создала дорожную карту, которая охватывает как текущее состояние фреймворка, так и его будущее развитие.

В статье представлен обзор этой дорожной карты, включая уже реализованные нововведения и те изменения, которые улучшат фреймворк в дальнейшем.

👉 https://habr.com/ru/articles/847474/

✨ Angular Signals Implementation

Сигналы, хоть на первый взгляд и кажутся сложными, вполне доступны для понимания, а если вы стремитесь разобраться в деталях их реализации.

В статье детально рассмотрена их имплементация в Angular, а также объяснено, как именно работает их алгоритм изнутри.

👉 https://habr.com/ru/articles/847130/

✨ Создание пагинации с помощью Firebase и NgRx SignalStore

Если вы искали простое приложение, которое бы сочетало сигналы, NgRx и Firebase.

Мы нашли небольшое руководство по созданию пагинации, которое поможет улучшить ваши навыки работы с этими инструментами.

👉 https://www.angularspace.com/create-pagination-using-firebase-and-ngrx-signalstore/

✨ Использование Storybook с Angular и Vite

Storybook — это отличный инструмент для изолированной разработки и итерации компонентов перед их интеграцией в приложение.

По умолчанию Angular и Storybook используют Webpack, но в Angular уже появилась возможность задействовать Vite, поэтому вы можете быть заинтересованы в его использовании и для других частей вашего проекта.

👉 https://dev.to/brandontroberts/using-storybook-with-angular-and-vite-48ga

✨ Host directives: декомпозиция освобождена!

В Angular 15 появилась потрясающая возможность, которую часто упускают из виду — Directive Composition API. Она добавляет новое свойство в декораторы Directive/Component под названием hostDirectives.

В нем вы можете перечислить все отдельные директивы, которые вы хотите автоматически применить к своему компоненту или директиве. Это позволяет вам комбинировать логику любым удобным образом.

Александр Инкин подробно объяснил, насколько эта возможность невероятно мощна.

👉 https://www.angularspace.com/host-directives-decomposition-unleashed/

✨ Angular для всех: как адаптировать приложения для людей с ограниченными возможностями

Согласно отчету WebAIM (Web Accessibility In Mind) за 2023 год, 96,3% сайтов не соответствуют основным требованиям, необходимым для того, чтобы люди с ограниченными возможностями могли полноценно пользоваться ими.

Хорошая новость заключается в том, что Angular предлагает множество решений и техник в этой области, поэтому нам не нужно обращаться к внешним библиотекам.

👉 https://angular.love/angular-for-everyone-how-to-adapt-applications-for-people-with-disabilities

✨ Определяем неиспользуемые импорты

Одна из наиболее ожидаемых функций с момента введения standalone components — это возможность определять, используется ли компонент или директива, импортированные в компонент.

Новая диагностика выводит предупреждения, предоставляя информацию без блокировки сборки. Это может быть особенно полезно на этапе разработки, позволяя выявлять неиспользуемые импорты на ранних стадиях.

👉 https://netbasal.com/optimize-angular-apps-with-unused-standalone-imports-diagnostic-in-v19-f2e50220c302

✨ Типы или интерфейсы в TypeScript: что и когда использовать?

При работе с TypeScript многие из нас рано или поздно сталкиваются с вопросом: что выбрать — типы или интерфейсы?

Дмитрий Бердников поделится особенностями их работы, которые помогут сделать правильный выбор.

👉 https://habr.com/ru/articles/844990/

✨ Увлекательное внедрение зависимостей

Dependency Injection — мощный, но недостаточно используемый инструмент. Он позволяет повторно использовать различные ресурсы, получать доступ к встроенным механизмам, таким как HttpClient, извлекать данные из маршрутизации и многое другое.

Статья рассматривает несколько нестандартных сценариев, которые могут быть улучшены с помощью DI.

👉 https://www.angularspace.com/fascinating-dependency-injection/?ref=angular-space-all-in-one-newsletter

✨ Перенос React компонента в Angular

Во фронтенде существует множество подходов к разработке компонентов, особенно при работе с разными фреймворками, такими как React и Angular.

В статье показаны различия между React и Angular с точки зрения того, как они работают с композицией. Автор делится своим опытом, объясняя, как эффективно адаптировать код, сохраняя его функциональность, и что нужно учитывать при миграции компонентов.

👉 https://nartc.me/blog/port-react-component/

✨ RFC: Incremental Hydration

В новом RFC обсуждается добавление функции "Incremental Hydration" в Angular, что позволит улучшить ключевые метрики производительности страниц.

Эта функция будет особенно полезна для больших приложений и страниц с динамическими элементами.

👉 https://github.com/angular/angular/discussions/57664

✨ Рекомендации по настройке VS Code

Как разработчики, мы проводим много времени в редакторе, поэтому важно настроить его по своему вкусу. Правильная настройка — важный шаг для улучшения рабочего процесса.

В статье показано, как, изменив несколько настроек в VS Code, вы сможете сделать свою работу более эффективной и приятной.

👉 https://timdeschryver.dev/blog/my-recommendations-to-configure-visual-studio-code-for-angular-development

✨ Снова any

Если вы всё ещё используете any, стоит задуматься о его влиянии на качество кода.

В статье разбираются случаи, когда этот тип действительно оправдан, например, при миграции с JavaScript. Однако для повышения безопасности и предсказуемости кода лучше использовать unknown, если точный тип данных неизвестен.

👉 https://habr.com/ru/articles/843116/