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

✨ 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

✨ Обобщенные фабрики тайпгардов в 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/

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

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

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

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

✨ Пробуем Analog SFC

Не так давно вышел Analog 1.0 и представил сообществу Angular стабильный мета-фреймворк, но самым большим вопросом к нему стали Single File Components (SFC).

Этот формат файлов и API является экспериментальным, поэтому команда разработчиков будем рада, если вы попробуете SFC и оставите свои отзывы.

👉 https://dev.to/analogjs/bridging-analog-to-angular-with-esbuild-and-vite-472j

✨ Тестирование сигналов с помощью Angular Testing Library

Наверняка вы задавались вопросом, как сигналы повлияют на ваши тесты. Но если вы используете Angular Testing Library, то вам повезло.

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

👉 https://timdeschryver.dev/blog/testing-signals-with-angular-testing-library

✨ Типизируем process.env

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

В статье даны пара советов, для строгого определения типов process.env.

👉 https://www.totaltypescript.com/how-to-strongly-type-process-env

✨Angular прикроет вас, когда дело дойдет до XSS

Межсайтовый скриптинг (XSS) — это уязвимость, которая позволяет злоумышленнику внедрить вредоносный код в веб-приложение. На протяжении многих лет она входит в список OWASP Top 10 наиболее критичных рисков безопасности.

Если вы впервые слышите об XSS, то эта статья поможет вам защитить ваши приложения.

👉 https://timdeschryver.dev/blog/angular-has-your-back-when-it-comes-to-xss

✨ Успешная работа с сигналами

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

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

👉 https://www.angulararchitects.io/en/blog/successful-with-signals-in-angular-3-effective-rules-for-your-architecture/

✨ Signals standard proposal

Обычно мы считаем, что сигналы — это функция веб-фреймворков, но скоро это может измениться. Есть шанс, что сигналы станут частью JavaScript.

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

👉 https://github.com/proposal-signals/proposal-signals

✨ Исключения для any

Использование any справедливо считается вредным в большинстве сценариев. Даже существуют правила ESLint, запрещающие его использование.

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

👉 https://www.totaltypescript.com/any-considered-harmful