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

✨ Обновляем Angular Поскольку выход Angular 18 уже не за горами (запланирован на 20 мая 2024 года), пришло время обновить свой Angular. В статье показано, как обновить Angular, включая пакеты сторонних разработчиков. 👉 https://www.angulararchitects.io/en/blog/angular-17-update-control-flow-app-builder-migration/

✨ Умелое использование сигналов Новые сигналы в Angular — это простой реактивный строительный блок. Однако, как часто бывает, дьявол кроется в деталях. В статье даны три совета, которые помогут использовать сигналы более эффективно. 👉 https://www.angulararchitects.io/en/blog/skillfully-using-signals-in-angular-selected-hints-for-professional-use/

✨ Signal Store и NGXS С момента появления сигналов в Angular появились способы для создания новых API на их основе, включая стейт менеджеры. В статье описывается, как объединение NGXS с Signal Store дает новые возможности по управлению состоянием. 👉 https://angular.love/en/signal-store-ngxs-elevating-flexibility-in-state-management/

✨ Как использовать оператор satisfies В TypeScript оператор satisfies был введен в версии 4.9, как эффективный способ обеспечения безопасности типов. В статье объясняется, как обстояли дела до его появления, и почему он может быть полезен. 👉 https://www.freecodecamp.org/news/typescript-satisfies-operator/

✨ Что будет в Angular 18? Angular 18 ожидается уже в этом месяце, а пока мы ждем. Вот несколько нововведений, которые будут представлены в следующей версии. 👉 https://habr.com/ru/articles/812485/

✨ Скрытый потенциал функции inject Обычно функцией inject пользуются, только для того, чтобы заменить инжект через конструктор. Алан Маркевич рассказал, как можно ее использовать на все сто процентов. 👉 https://habr.com/ru/articles/812449/

✨ Angular Signal Components: input, output, model С появлением сигналов в экосистеме Angular, появились совершенно новые способы описания логики. В этом руководстве подробно рассматриваются примитивы для создания компонентов на основе сигналов input, output и model. 👉 https://blog.angular-university.io/angular-signal-components/

✨ Template Literal Types Шаблонные литеральные типы обеспечивают большую гибкость и контроль над строками. В этой статье рассматриваются несколько практических примеров их использования. От генерации имен классов CSS до создания безопасных ключей для i18n. 👉 https://claritydev.net/blog/typescript-type-literals-practical-use-cases-code-quality

✨ Руководство по RedirectCommand В будущем Angular 18 появится возможность более тонко управлять поведением навигации. При использовании RedirectCommand с опцией skipLocationChange, перенаправление происходит без изменения URL браузера. 👉 https://netbasal.com/navigating-angular-apps-a-guide-to-redirectcommand-1675e890349d

✨ Анонс 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/

✨ Новая эра для Angular Как вы знаете Angular полагается на Zone.js, чтобы узнать, когда что-то изменилось, и это единственный фреймворк, который работает подобным образом. Совсем скоро в Angular 18 мы получим новый способ обнаружения изменений, без Zone.js. 👉 https://justangular.com/blog/a-new-era-for-angular-zoneless-change-detection

✨ Изучаем Angular afterRender и afterNextRender Hooks Иногда возникает необходимость использовать специфические для браузера API для ручного манипулирования DOM. Однако решение этой задачи становится сложным, если учесть события жизненного цикла, которые также запускаются во время пререндеринга и рендеринга на стороне сервера. Angular решает эту проблему, внедряя функции afterRender и afterNextRender. 👉 https://netbasal.com/exploring-angulars-afterrender-and-afternextrender-hooks-7133612a0287

✨Оптимизируем размер С библиотеками из npm, как никогда легко испортить производительность приложения, раздув его размер. В этой статье рассматривается важность размера вашего бандла, как правильно его измерить и некоторые общие стратегии оптимизации. 👉 https://angular.love/en/how-to-optimize-your-angular-bundle-size/

✨ 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

✨ Event Dispatch в Angular Одна из проблем с полной гидратацией приложения заключается в том, что страница может выглядеть интерактивной до того, как произойдет гидратация. Одна из стратегий, для улучшения пользовательского опыта, заключается в захвате всех событий в корне приложения и воспроизведении их после завершения гидратации. Подобный подход можно реализовать с помощью Angular preboot. Но вместо того чтобы воскрешать preboot, команда Angular решила использовать сотрудничество с Wiz, применив библиотеку JSAction. 👉 https://blog.angular.io/event-dispatch-in-angular-89d868d2351c

✨ Изучаем AbortSignal В веб-разработке управление асинхронными операциями, такими как получение данных или загрузка файлов, часто связано с ситуациями, когда операции необходимо прервать. Интерфейс AbortSignal, появившийся в современных веб-браузерах, предоставляет возможность изящно прервать асинхронные операции. В этой статье рассказывается о двух малоизвестных статических методах AbortSignal.timeout() и AbortSignal.any(). 👉 https://netbasal.com/harnessing-control-exploring-javascripts-abortsignal-timeout-and-any-methods-f479992a9615

Минко на связи! приносите свои вопросы, у нас час Можете спрашивать на русском, я переведу (или на Болгарском) twitch.tv/kirjs | youtu.be/ZryO1zl4TEM

✨ Обобщенные фабрики тайпгардов в TypeScript Несмотря на всю мощь вывода типов, TS иногда требует явного описания механизмов проверки для сужения типов. В статье рассматриваются проблемы, связанные с использованием тайпгардов и один из способов их решения — создание обобщенных фабрик. 👉 https://habr.com/ru/companies/tinkoff/articles/808655/

✨ Паттерны для эффектов Суть эффектов можно понять за несколько секунд, но в реальном коде они могут оказаться сложнее в использовании, что приводит к неожиданному поведению или ошибкам. В статье рассмотрены основы использования effect, некоторые советы и трюки, которые помогут улучшить их поведение. 👉 https://dev.to/this-is-angular/efficient-angular-effects-patterns-4396

✨ Статический анализ мультиязычности c помощью ngx-translate-lint Если в вашем приложении есть мультиязычность и вы для нее используете пакет ngx-translate. То вам пригодится небольшая заметка о инструменте для проверки ключей с помощью regexp. 👉 https://habr.com/ru/companies/lanit/articles/805655/