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

✨ Будущее поддержки 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

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

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

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

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

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

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

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

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

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

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

Если вы пропустили сессию 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

✨ Создание локального 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

✨ RxJS: switchMap, concatMap, mergeMap, exhaustMap

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

✨ Полное руководство по рендерингу на стороне сервера

Внедрение Server-Side Rendering (SSR), Static Site Generation (SSG), Hydration и Event Replay значительно повышает производительность начальной загрузки.

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

👉 https://www.angulararchitects.io/en/blog/complete-guide-for-server-side-rendering-ssr-in-angular/

✨ Zoneless

В Angular 18 появилась экспериментальная возможность отказаться от zone.js.

Леонид Яковлев рассказал о своем опыте с новым подходом к обнаружению изменений.

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

✨ Как выстрелить себе в ногу, не соблюдая паттерны

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

В статье автор поделился своим опытом решения подобной задачи.

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

✨ RFC: Взаимодействие с DOM в Angular

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

Однако такой подход имеет некоторые недостатки:

Поскольку эмуляция DOM реализует только подмножество DOM, она отлично работает в одних случаях, но даёт сбои в других.

Ручное управление DOM может быть полезным, но оно не позволяет Angular иметь полное представление о состоянии DOM.

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

👉 https://github.com/angular/angular/discussions/56498

✨ SSR в Angular

Уверены, вы уже слышали о рендеринге на стороне сервера (SSR).

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

👉 https://www.thisdot.co/blog/ssr-finally-a-first-class-citizen-in-angular

✨ Angular Router — все, что вам нужно знать

Маршрутизация в Angular — важнейшая функция, позволяющая создавать динамические одностраничные приложения (SPA). Этот механизм обеспечивает плавную навигацию внутри приложения, не требуя полной перезагрузки страницы.

В этой статье рассмотрены основные принципы маршрутизации, от базовых настроек до продвинутых техник.

👉 https://angular.love/en/angular-router-everything-you-need-to-know-about/

✨ Квест на Node.js — борьба с утечкой памяти

Утечки памяти — это ситуации, когда приложение продолжает потреблять больше памяти, чем необходимо, из-за того, что не освобождаются объекты, которые больше не используются.

Артём рассказал о своём опыте борьбы с ними при вызовах gRPC между микросервисами.

👉 https://habr.com/ru/companies/simbirsoft/articles/823884/