✨ Изучаем 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/

✨ Создаем табло реального времени

Традиционно, чтобы получить новые данные, страница должна отправить запрос на сервер. С помощью Server-Sent Events, сервер может отправлять новые данные на страницу в любое время, но это одностороннее соединение, поэтому вы не можете отправлять события от клиента к серверу.

В статье, на примере спортивного табло, на котором отображается результат игры, приводится базовая реализация SSE с помощью NestJS.

👉 https://dev.to/this-is-angular/building-real-time-boards-with-angular-and-nestjs-using-server-sent-events-3k9j

✨ Упрощение логики на клиенте

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

Чтобы решить эту проблему, в статье вводится класс View Model для каждой сущности. Такая инкапсуляция упрощает работу с данными и гарантирует, что пользовательский интерфейс получит только то, что ему нужно.

👉 https://netbasal.com/simplifying-client-side-logic-the-strategic-use-of-view-models-db0ae0363be4

✨ Бесплатная книга

Манфред Штайер выпустил второе издание своей бесплатной электронной книги Modern Angular.

В ней 14 глав, которые показывают, как пользоваться новыми возможностями Angular.

👉 https://www.angulararchitects.io/en/ebooks/modern-angular/

✨ Управляем состоянием в Angular

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

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

👉 https://dev.to/railsstudent/signal-in-a-service-for-state-management-in-angular-4469