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

✨ Тестирование компонентов Тестировать компоненты Angular легко, но всё усложняется, когда в процесс вовлекаются такие зависимости, как внешние библиотеки и дочерние компоненты. Сегодня мы узнаем, как тестировать компоненты и справляться с подобными ситуациями. 👉 https://www.danywalls.com/testing-components-in-angular-noerrorsschema-stub-components-and-ngmocks

✨ Пользовательская проверка равенства в toSignal Сигналы поддерживали функцию equal, когда Angular 16 только появился. Теперь эта опция доступна в toSignal, и её можно использовать для повышения производительности. 👉 https://dev.to/railsstudent/explain-tosignal-custom-equality-checking-in-angular-18-g2i

✨ Бесплатная книга по TypeScript Total TypeScript: Essentials — книга, которая проведет вас по пути от новичка до уверенного пользователя. Она охватывая большое количество тем, начиная с установки и заканчивая продвинутой работой с типами и реальными паттернами разработки. 👉 https://www.totaltypescript.com/books/total-typescript-essentials/kickstart-your-typescript-setup

✨ Будущее поддержки 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 значительно повышает производительность начальной загрузки Angular приложений. Следуя шагам, описанным в этом руководстве, вы сможете добиться лучшей производительности загрузки ваших приложений с минимальными усилиями. 👉 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