✨ Что нового в Angular 18?

Если вы пропустили релиз Angular 18 в мае, то в нем впервые появился официальный способ работы без Zone.js, только в экспериментальном режиме, о котором мы уже писали. Кроме того, есть несколько действительно приятных улучшений в существующих API.

В этой статье рассказывается о новых возможностях.

👉 https://www.angulararchitects.io/en/blog/whats-new-in-angular-18/

✨ Работа с событиями на стероидах

Если вы задавались вопросами: как Angular работает с событиями? Что происходит, когда вы пишете (click) в шаблоне?

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

👉 https://habr.com/ru/companies/tbank/articles/826724/

✨ Анонс альфа версии xstate-ngx

Xstate-ngx — это попытка интеграции XState с Angular, представляющая собой тонкую обертку для использования механизма инъекции зависимостей и сигналов.

Альфа-релиз призван собрать отзывы о дизайне API. Ваш вклад очень важен для формирования будущего проекта.

👉 https://dev.to/angular/announcing-the-alpha-release-of-xstate-ngx-9lk

✨ Docker для Angular-приложений

Docker — это инструмент виртуализации на уровне операционной системы, который создает изолированное окружение для запуска приложений.

Артём разобрал базовые вопросы, связанные с развертыванием Angular-приложений в контейнерах.

👉 https://habr.com/ru/companies/yadro/articles/826628/

✨ Отслеживаем размер сборки

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

В статье описывается использование BundleMon — инструмента для мониторинга размера пакета. В качестве альтернативы можно рассмотреть Size Limit.

👉 https://angular.love/en/track-your-bundle-size-with-bundlemon

✨ Angular SSR — Platform Provider паттерн

При SSR можно столкнуться с проблемой, когда некоторым сервисам нужны специфические для браузера API.

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

👉 https://www.ngserve.io/angular-ssr-creating-server-and-client-side-service/

✨ Знакомство с @let в Angular

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

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

@let позволит определять переменную и повторно использовать ее значение во всем шаблоне.

👉 https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f

✨ RxJS: switchMap, concatMap, mergeMap, exhaustMap

RxJS предлагает широкий спектр возможностей для управления потоками данных. Сегодня мы углубимся в концепцию high-order observables.

Иван Черняков подробно объяснил этот подход, дополнив рассказ примерами из реальной жизни.

👉 https://www.youtube.com/watch?v=O8Pr47VyfDQ

✨ Создание локального AI-чатбота

Команда Chrome работает над тем, чтобы внедрить небольшой LLM в браузере для выполнения простых задач без необходимости использования внешнего API.

Узнайте, как создать чат-приложение с помощью Angular и запустить Gemini Nano, используя всего несколько строк кода.

👉 https://www.danywalls.com/building-a-local-ai-chatbot-with-gemini-nano-chrome-canary-angular-and-kendo-ai-prompt

✨ Погрузитесь в генеративное искусство

Если вы пропустили сессию Google I/O, посвященную Angular, то упустили не только последние обновления фреймворка, но и демонстрацию Generative Art Gallery, в которой были объединены AI, Angular и WebXR.

Однако, не стоит расстраиваться, потому что вы можете попробовать код на GitHub. Надеемся, он вдохновит вас на создание собственных проектов.

👉 https://blog.angular.dev/immerse-yourself-in-generative-art-an-angular-webxr-adventure-bd83bcd037d6

✨ Web components как альтернатива iframe

Web components — это набор стандартов, который позволяет создавать пользовательские HTML-элементы.

В Angular поставляется пакет @angular/elements для работы с ними, что делает их использование простым и удобным.

Сергей Глазырин поделился подходом к интеграции формы регистрации в лендинг на CMS с помощью web components.

👉 https://habr.com/ru/companies/tbank/articles/828940/

✨ Как создать бесшовную текстуру

Бесшовный шум используется в графике для получения естественных и реалистичных текстур и эффектов.

Виталий Дуденко рассказал, как создавал бесшовную текстуру для фона страницы с определённым узором.

👉 https://habr.com/ru/companies/pgk/articles/829678/

✨ Будущее поддержки Material в Angular

Недавно было объявлено об изменениях в Material Web Components (MWC) от Google. Поскольку Angular Material не использует MWC и не зависит от него, эти изменения на него не повлияют, и он продолжит активно поддерживаться и развиваться.

Пользуясь случаем, команда Angular решила рассказать о том, как они разрабатывают Angular Material.

👉 https://blog.angular.dev/the-future-of-material-support-in-angular-7fa0662ecc4b

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

Total TypeScript: Essentials — книга, которая проведет вас по пути от новичка до уверенного пользователя.

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

👉 https://www.totaltypescript.com/books/total-typescript-essentials/kickstart-your-typescript-setup

✨ Пользовательская проверка равенства в toSignal

Сигналы поддерживали функцию equal, когда Angular 16 только появился.

Теперь эта опция доступна в toSignal, и её можно использовать для повышения производительности.

👉 https://dev.to/railsstudent/explain-tosignal-custom-equality-checking-in-angular-18-g2i

✨ Тестирование компонентов

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

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

👉 https://www.danywalls.com/testing-components-in-angular-noerrorsschema-stub-components-and-ngmocks

✨ Улучшаем тесты на Angular Testing Library

В последней версии библиотеки Angular Testing Library (v17.1.0) появилось новое API on, которое позволяет легче тестировать компоненты.

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

👉 https://timdeschryver.dev/blog/the-new-on-property-improves-output-testing-in-angular-testing-library

✨ Выбор JavaScript фреймворка

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

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

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

✨ TypeScript в Node.js

На днях в Node.js появилась возможность выполнять файлы TypeScript, установив экспериментальный флаг --experimental-strip-types. Для этого используется SWC, который уже применяется в Deno.

Node.js транспилирует код TypeScript в JavaScript, при этом проверка типов не выполняется, а типы отбрасываются. Это означает, что использование Enum, namespaces и т.д. будет невозможно.

👉 https://github.com/nodejs/node/pull/53725

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

Dependency Injection (DI) — это мощный инструмент, который упрощает работу с зависимостями. Однако часто мы не используем его в полной мере, потому что не до конца понимаем его работу.

Дмитрий Дробышев подробно объяснил, как функционирует DI, что собой представляет иерархия инжекторов и какие изменения внесла 14-я версия Angular с появлением standalone компонентов.

👉 https://habr.com/ru/companies/zyfra/articles/817843/