✨ Тестирование анимации в Angular

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

Однако не менее важно обеспечить надежность и корректность этих анимаций.

👉 https://dev.to/this-is-angular/testing-animations-in-angular-a-comprehensive-guide-4nhp

✨ Статический анализ мультиязычности c помощью ngx-translate-lint

Если в вашем приложении есть мультиязычность и вы для нее используете пакет ngx-translate.

То вам пригодится небольшая заметка о инструменте для проверки ключей с помощью regexp.

👉 https://habr.com/ru/companies/lanit/articles/805655/

✨ Паттерны для эффектов

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

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

👉 https://dev.to/this-is-angular/efficient-angular-effects-patterns-4396

✨ Обобщенные фабрики тайпгардов в TypeScript

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

В статье рассматриваются проблемы, связанные с использованием тайпгардов и один из способов их решения — создание обобщенных фабрик.

👉 https://habr.com/ru/companies/tinkoff/articles/808655/

✨ Изучаем AbortSignal

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

Интерфейс AbortSignal, появившийся в современных веб-браузерах, предоставляет возможность изящно прервать асинхронные операции.

В этой статье рассказывается о двух малоизвестных статических методах AbortSignal.timeout() и AbortSignal.any().

👉 https://netbasal.com/harnessing-control-exploring-javascripts-abortsignal-timeout-and-any-methods-f479992a9615

✨ Event Dispatch в Angular

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

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

Подобный подход можно реализовать с помощью Angular preboot. Но вместо того чтобы воскрешать preboot, команда Angular решила использовать сотрудничество с Wiz, применив библиотеку JSAction.

👉 https://blog.angular.io/event-dispatch-in-angular-89d868d2351c

✨ Unified Control State Change Events

Одной из функций, представленных в Angular 18.0.0-next.3, является добавление нового свойства под названием events для AbstractControl.

Это свойство представляет Observable, который отслеживает различные изменения в форме.

👉 https://netbasal.com/unified-control-state-change-events-in-angular-7e83c0504c8b

✨Оптимизируем размер сборки

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

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

👉 https://angular.love/en/how-to-optimize-your-angular-bundle-size/

✨ Изучаем Angular afterRender и afterNextRender Hooks

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

Angular решает эту проблему, внедряя функции afterRender и afterNextRender.

👉 https://netbasal.com/exploring-angulars-afterrender-and-afternextrender-hooks-7133612a0287

✨ Новая эра для Angular

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

Совсем скоро в Angular 18 мы получим новый способ обнаружения изменений, без Zone.js.

👉 https://justangular.com/blog/a-new-era-for-angular-zoneless-change-detection

✨ Анонс TypeScript 5.5 Beta

Многие долго этого ждали и наконец свершилось. В новой версии TypeScript теперь выводит предикат типа для метода filter:

function makeBirdCalls(countries: string[]) {
  const birds = countries
    .map(country => nationalBirds.get(country))
    .filter(bird => bird !== undefined);

  for (const bird of birds) {
    bird.sing(); // Раньше здесь была ошибка 'bird' is possibly 'undefined'
  }
}

Так же ввели проверку синтаксиса регулярных выражений и несколько других улучшений.

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

✨ Руководство по RedirectCommand

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

При использовании RedirectCommand с опцией skipLocationChange, перенаправление происходит без изменения URL браузера.

👉 https://netbasal.com/navigating-angular-apps-a-guide-to-redirectcommand-1675e890349d

✨ Template Literal Types

Шаблонные литеральные типы обеспечивают большую гибкость и контроль над строками.

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

👉 https://claritydev.net/blog/typescript-type-literals-practical-use-cases-code-quality

✨ Angular Signal Components: input, output, model

С появлением сигналов в экосистеме Angular, появились совершенно новые способы описания логики.

В этом руководстве подробно рассматриваются примитивы для создания компонентов на основе сигналов input, output и model.

👉 https://blog.angular-university.io/angular-signal-components/

✨ Скрытый потенциал функции inject

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

Алан Маркевич рассказал, как можно ее использовать на все сто процентов.

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

✨ Что будет в Angular 18?

Angular 18 ожидается уже в этом месяце, а пока мы ждем.

Вот несколько нововведений, которые будут представлены в следующей версии.

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

✨ Как использовать оператор satisfies

В TypeScript оператор satisfies был введен в версии 4.9, как эффективный способ обеспечения безопасности типов.

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

👉 https://www.freecodecamp.org/news/typescript-satisfies-operator/

✨ Signal Store и NGXS

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

В статье описывается, как объединение NGXS с Signal Store дает новые возможности по управлению состоянием.

👉 https://angular.love/en/signal-store-ngxs-elevating-flexibility-in-state-management/

✨ Умелое использование сигналов

Новые сигналы в Angular — это простой реактивный строительный блок. Однако, как часто бывает, дьявол кроется в деталях.

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

👉 https://www.angulararchitects.io/en/blog/skillfully-using-signals-in-angular-selected-hints-for-professional-use/

✨ Обновляем Angular

Поскольку выход Angular 18 уже не за горами (запланирован на 20 мая 2024 года), пришло время обновить свой Angular.

В статье показано, как обновить Angular, включая пакеты сторонних разработчиков.

👉 https://www.angulararchitects.io/en/blog/angular-17-update-control-flow-app-builder-migration/