✨ Будущее за standalone

В Angular 14 были представлены standalone-компоненты, которые впервые позволили создавать приложения, не зависящие от NgModules.

Теперь в Angular 19 опция standalone: true будет использоваться по умолчанию для компонентов, директив и пайпов.

👉 https://blog.angular.dev/the-future-is-standalone-475d7edbc706

✨ Получаем тип элемента массива

Вы наверняка встречались со странным синтаксисом Array[number], который позволяет получить тип элемента массива.

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

👉 https://www.totaltypescript.com/get-the-type-of-an-array-element

✨ Аутентификация по отпечатку пальца и Face ID

Web Authentication API (WebAuthn) — это современный способ улучшить пользовательский опыт, обеспечивая более высокую безопасность и удобство при входе в приложение.

В этом руководстве рассматривается интеграция биометрической аутентификации с Angular с использованием WebAuthn.

👉 https://dev.to/this-is-angular/integrate-fingerprint-and-face-id-authentication-in-your-angular-app-using-webauthn-a-step-by-step-guide-3o2b

✨ Ваша архитектура как место преступления

Хорошие границы домена помогают сделать систему поддерживаемой в долгосрочной перспективе. Но как определить, жизнеспособна ли изначальная структура?

Статья показывает, что криминалистический анализ, который рассматривает не только текущий код, но и историческое развитие проекта, может выявить скрытые проблемы в архитектуре Angular-приложения. Для этого используется инструмент Detective, основанный на идеях книги Your Code as a Crime Scene.

👉 https://www.angulararchitects.io/en/blog/your-architecture-as-a-crime-scene-forensic-analysis-for-your-angular-solutions/

✨ Сверхспособности с Директивами и Внедрением Зависимостей

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

Следующая недооцененная вещь — это внедрение зависимостей (Dependency Injection). Это отличный концепт для создания повторно используемых компонентов, но 95% использования DI в Angular сводится к сервисам.

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

👉 https://www.angularspace.com/mega-article-superpowers-with-directives-and-dependency-injection/

✨ Анонс TypeScript 5.6

Вышел TypeScript 5.6, о beta и RC версиях которого мы уже писали ранее.

В этом релизе не удалось решить проблему с открытием множества связанных проектов, поэтому было возвращено прежнее поведение. Новое поведение для поиска tsconfig.json ожидается в TypeScript 5.7.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-6/

✨ Когда (не) стоит использовать эффекты

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

Manfred Steyer постарался осветить эту тему объективно и без эмоций.

👉 https://www.angulararchitects.io/en/blog/when-not-to-use-effects-in-angular-and-what-to-do-instead/

✨ Топ-10 ошибок в архитектуре Angular, которых стоит избегать

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

Надеемся, вы найдете в этой статье хотя бы пару действенных советов, которые сможете применить на практике.

👉 https://angularexperts.io/blog/top-10-angular-architecture-mistakes

✨ Разработка веб приложения для поиска авиабилетов

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

Александр Серенко описал весь процесс создания, начиная с генерации и заканчивая интеграцией с внешним API.

👉 https://dev.to/fafnur/razrabotka-vieb-prilozhieniia-dlia-poiska-aviabilietov-na-angular-18-4clf

✨ Снова any

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

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

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

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

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

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

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

✨ RFC: Incremental Hydration

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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