✨ Улучшаем производительность

Изображения на наших сайтах сильно влияют на общий вес страницы, а метрика Largest Contentful Paint (LCP) оказывает значительное влияние на воспринимаемую скорость загрузки.

В статье исследуется директива NgOptimizedImage, а также проверяется действительно ли она полезна.

👉 https://indepth.dev/posts/1511/improve-page-performance-and-lcp-with-ngoptimizedimage

✨ Разбираем ошибку ExpressionChangedAfterItHasBeenCheckedError

Одна из самых частых тем, связанных с Angular, на StackOverflow — это печально известная ошибка ExpressionChangedAfterItHasBeenCheckedError.

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

👉 https://indepth.dev/posts/1514/deep-dive-into-the-infamous-expressionchangedafterithasbeencheckederror-in-angular

✨ Подборка материалов для погружения в Angular

Зачастую для освоения фреймворка достаточно документации — она способна ответить на большинство вопросов.

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

👉 https://habr.com/ru/company/selectel/blog/713876/

✨ Магия ContentChild, ViewChild и Template References

В Angular мы склонны писать декларативный код.

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

👉 https://medium.com/p/d1cbf7f819c4

✨ Осваиваем TypeScript

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

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

👉 https://habr.com/ru/company/ruvds/blog/712548/

✨ Angular и tRPC

tRPC — это легкий, высокопроизводительный RPC (Remote Procedure Call) фреймворк, разработанный для простого, быстрого и удобного использования.

Основное преимущество использования tRPC - безопасность типов без генерации кода.

👉 https://medium.com/p/a48c2fafd17e

✨ Jest ESM - полное руководство по ускорению тестирования

Под Jest ESM, имеется в виду работа Jest в режиме, когда он понимает и использует модули EcmaScript, особенно синтаксис импорта/экспорта ESM.

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

👉 https://angularexperts.io/blog/total-guide-to-jest-esm-and-angular

✨ Осваиваем структурные директивы

Структурные директивы — это один из самых мощных инструментов Angular. Мы сталкиваемся с ними в самом начале изучения. Однако внутренняя жизнь директив часто остается загадкой.

В этой серии статей мы разберемся в их работе.

👉 https://dev.to/this-is-angular/mastering-angular-structural-directives-the-basics-jhk

✨ Все, что вам нужно знать о Route Guard

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

В этой статье продемонстрированы возможности Guards и показано, как их использовать на примерах.

👉 https://dev.to/this-is-angular/everything-you-need-to-know-about-route-guard-in-angular-2hkn

✨ Работа с window

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

Когда мы используем SSR в Angular, объект window отсутствует. Чтобы преодолеть эту проблему и сделать приложение не зависящим от платформы, можно предоставить window через механизм Angular DI.

👉 https://medium.com/p/b20da0e02dd7

✨ Перестаньте бояться InjectionTokens

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

Эта статья дает хорошее представление об InjectionToken и о том, что они означают.

👉 https://dev.to/this-is-angular/stop-being-scared-of-injectiontokens-2406

✨ Реактивность с помощью сигналов

Команда Angular анонсировала прототип, который добавит в фреймворк реактивный примитив Signal. Реактивность с помощью сигналов может в корне изменить то, как мы пишем приложения.

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

👉 https://medium.com/p/152a2d26fe2f

✨ Изучаем Angular с помощью Open Source

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

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

👉 https://medium.com/p/c5def72e0e41

✨ Глубокое погружение в стратегию обнаружения изменений OnPush

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

Давайте рассмотрим эти стратегии более подробно.

👉 https://indepth.dev/posts/1515/deep-dive-into-the-onpush-change-detection-strategy-in-angular

✨ Введение в Directives Composition API

Directives Composition API может быть довольно полезным и простым в использовании инструментом для извлечения поведения в мелкие директивы и объединения их в более сложные.

В этой статье мы изучим новый API и посмотрим, как мы можем использовать его в наших компонентах.

👉 https://www.thisdot.co/blog/introduction-to-directives-composition-api-in-angular

🦄 История о миграции на Module Federation

Почти все монолиты похожи друг на друга, — бизнес-код, функциональщина, все перемешано.

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

👉 https://habr.com/ru/company/oleg-bunin/blog/718302/

✨ API композиции директив

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

Юрий Безруков продолжил рассказ о новом (уже старом) способе управления директивами в Angular.

👉 https://habr.com/ru/post/718692/

✨ Знакомство с DestroyRef

В Angular v16.0.0-next.1 появился новый провайдер DestroyRef, который позволяет регистрировать обратные вызовы уничтожения для определенной области жизненного цикла.

В статье объясняется, зачем может понадобиться нововведение, если уже есть метод ngOnDestroy.

👉 https://medium.com/p/9791aa096d77

✨ Будущее обнаружения изменений

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

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

👉 https://www.angulararchitects.io/en/aktuelles/angular-signals/

✨ Пишем более качественные тесты

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

Использование RouterTestingHarness, вместо того чтобы использовать заглушки Router, может сделать тесты более надежными.

👉 https://medium.com/p/bf5fc95c1c57