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

✨ Как собрать экосистему компонентов на Angular и Nx

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

Ильи Чубко показал, как построить единую экосистему компонентов, от организации структуры до настройки CI/CD с использованием nx affected. Отдельное внимание уделено Dependency Injection: показано, как через DI адаптировать приложение под разные среды выполнения.

👉 https://habr.com/ru/companies/k2tech/articles/960600/

✨ Цветовая модель OKLCH

OKLCH — современная цветовая модель, которая решает главную проблему RGB и HSL: визуальную неоднородность. Теперь цвета с одинаковой яркостью действительно выглядят одинаково, а оттенки не плывут при изменении параметров.

В основе три параметра: яркость (Lightness, 0–100%), насыщенность (Chroma, варьируется от серого до наиболее интенсивного оттенка) и оттенок (Hue, 0–360).

На практике это означает: можно создать, например, набор кнопок разных цветов, меняя только Hue и все они будут восприниматься визуально согласованно.

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

✨ Angular 21 – что нового?

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

P.S. Если вы еще не посмотрели Developer Event, очень рекомендуем глянуть запись. Там не только презентация новинок, но и знакомое лицо из русскоговорящего сообщества (возможно, вы его узнаете 😉).

👉 https://angular.love/angular-21-whats-new

✨ URL как контейнер состояния

URL — это не просто адрес ресурса, а один из самых древних и изящных инструментов для управления состоянием в веб-приложениях.

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

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

✨ Релиз Angular v21

Команда Angular представила мажорное обновление, которое фокусируется на улучшении Developer Experience, развитии реактивной модели на базе сигналов и подготовке экосистемы к работе с AI-агентами.

Ключевые нововведения:

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

Angular Aria — библиотека доступных headless-компонентов. Вы получаете готовую логику и поведение, а стилизацию настраиваете полностью под себя.

Zoneless по умолчанию в новых проектах zone.js больше не подключается автоматически.

Vitest официально стал тест-раннером по умолчанию для новых проектов.

MCP Server в CLI с инструментами для AI-агентов.

Плюс мелкие, но приятные фичи: регулярки в шаблонах, дополнительные параметры для @defer, обновление CLDR и многое другое.

Также напоминаем, что Developer Event начинается через несколько часов на YouTube.

👉 https://blog.angular.dev/announcing-angular-v21-57946c34f14b

✨ Как решать LeetCode? Легко! Нужно просто…

Знакомая ситуация: прорешал множество задач, но на интервью видишь незнакомое условие и впадаешь в ступор, не зная, с какой стороны подступиться?

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

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

✨ Кастомные формы в Angular

Создание кастомных компонентов форм в Angular долгое время означало борьбу с бойлерплейтом. Но с приходом Signal Forms и нового интерфейса FormValueControl этот процесс стал кардинально проще и логичнее.

На примере формы подачи доклада на конференцию, в статье наглядно демонстрируется, как Signal Forms превращают создание контролов из рутины в удовольствие.

👉 https://medium.com/p/3860dcdb5a03

✨ Signal Forms: Debouncing

В RxJS есть оператор debounceTime, который передает только последнее значение после того, как прошло заданное время бездействия. Это полезно при работе с событиями высокой частоты, такими как ввод текста пользователем.

Поскольку Angular активно развивает экосистему на основе сигналов и движется к тому, чтобы сделать RxJS опциональным во многих сценариях, возникает логичный вопрос: "Как реализовать дебаунс без RxJS? Писать свои утилиты?"

К счастью, в этом нет необходимости.

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

Поэтому логику дебаунса встраивают не в сигналы, а туда, где она нужнее всего, в новые Signal Forms.

👉 https://github.com/angular/angular/pull/64929

✨ Эксперимент с MCP-сервером

Angular получил экспериментальный MCP-сервер — протокол взаимодействия между ИИ-клиентами и внешними сервисами. Он умеет подсказывать best practices, искать документацию и даже работать с локальным workspace.

Алиса Дункан проверила, насколько далеко можно зайти в создании приложений почти не касаясь клавиатуры.

P.S. В Берлине только что прошла NG-DE — комьюнити-конференция по Angular в Германии. И вот вам запись с интересным докладом.

👉 https://dev.to/angular/a-quick-vibe-code-experiment-with-angulars-mcp-server-3g2h

✨ Что происходит внутри Angular и React при решении одних и тех же задач

React и Angular часто сравнивают. Оба инструмента решают одну задачу: отрисовка и обновление UI. Но делают это совершенно по-разному. React работает через Virtual DOM, а Angular с помощью Ivy генерирует инструкции, которые эффективно обновляют DOM.

Полина Цуканова разобрала шесть типовых сценариев: от рендера компонента до управления состоянием. Хотя в статье и есть небольшие неточности, она отлично иллюстрирует фундаментальные различия в их архитектуре.

👉 https://habr.com/ru/companies/selectel/articles/965586/

✨ TypeScript: краткий гайд по дистрибуции типов

Если вы когда-нибудь удивлялись, почему string | number иногда превращается в (string | number)[], а иногда в string[] | number[], добро пожаловать в мир дистрибуции типов.

Это одно из самых мощных и часто недооцененных свойств TypeScript, которое определяет, как обрабатываются union-типы в условных выражениях и шаблонных строках.

👉 https://habr.com/ru/companies/cloud_ru/articles/883872/

✨ Angular v21 переходит на Zoneless

Angular v21 станет первым мажорным релизом, в котором новые приложения по умолчанию используют "бесзонное" (zoneless) обнаружение изменений.

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

В статье вы также найдете краткое руководство о том, как перевести ваше приложение на новый режим. Спойлер: это довольно просто.

P.S. Хотите сделать Angular еще лучше? Давайте поможем Александру Инкину. Поддержите его предложение на GitHub лайком 👍

👉 https://push-based.io/article/angular-v21-goes-zoneless-by-default-what-changes-why-its-faster-and-how-to

✨Angular v21: Приключение начинается

Команда Angular анонсировала мероприятие, посвящённое релизу Angular v21, которое состоится 20 ноября на YouTube.

Что нас ждет:

🤖 Новые инструменты Angular MCP Server для улучшения рабочих процессов и генерации кода с поддержкой ИИ

🧩 Первый взгляд на Signal Forms — упрощенный подход к формам, основанный на сигналах

🧭 Интересные подробности о новом пакете Angular ARIA

И это лишь малая часть того, что готовит для нас релиз, не забудьте запастись попкорном!

Отдельное спасибо NG Stream за новость

👉 https://angular.dev/events/v21

🕒 Тесты против времени

Работа со временем в юнит-тестах один из самых болезненных аспектов. Особенно когда в коде полно setTimeout, debounce и прочих асинхронных операций.

Но есть простое решение: mock-часы, которые двигают время автоматически. Это позволяет тестам выполняться быстрее и реалистичнее, без необходимости вручную тикать таймеры и ждать фиксированное время, которое в будущем может измениться. Новая функциональность уже доступна в Jasmine 5.7, а также в @sinonjs/fake-timers 15, используемой в Jest и Vitest.

👉 https://blog.angular.dev/handling-time-and-mock-clocks-in-tests-5a393b32dd30

✨ Это будущее E2E-тестирования? Как ИИ автоматизирует браузерные тесты

Автоматизация end-to-end тестирования выходит на новый уровень. Вместо того чтобы вручную писать тесты в Playwright, теперь можно просто описать поведение приложения на естественном языке.

ИИ берет PRD (Product Requirements Document), превращает его в сценарии на Gherkin, запускает тесты через Chrome DevTools MCP и формирует подробный отчет с результатами.

В статье пошаговый пример реализации на игре "Крестики-нолики", где тестируется: от логики ходов до доступности интерфейса.

👉 https://dev.to/this-is-angular/is-this-the-future-of-e2e-testing-how-ai-automates-browser-tests-from-plain-english-requirements-1d0

✨ Краткая история JavaScript

В этом году JavaScript отмечает свое 30-летие.

За три десятилетия язык прошел впечатляющий путь: от простого скрипта, созданного Бренданом Айком в Netscape всего за десять дней, до одной из самых популярных и универсальных экосистем.

Его история полна поворотных моментов: “войны браузеров”, конкуренция с JScript от Microsoft и, конечно, появление стандарта ES2015, который определил его современный вид.

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

👉 https://habr.com/ru/companies/timeweb/articles/913894/

✨ Анонс AnalogJS 2.0

Вышел AnalogJS 2.0 — мета-фреймворк на базе Angular, Vite и Nitro.

Новая версия включает множество новых функций, среди которых: content resources, оптимизация размера установки и бандла, а также обновления экосистемы Vite.

👉 https://dev.to/analogjs/announcing-analogjs-20-348d

✨ Аутентификация в Angular с помощью cookies за 10 минут

Аутентификация на основе cookies — простое и эффективное решение, если вам не нужен полностью токен-ориентированный подход.

Статья показывает, как за пару шагов настроить cookie-аутентификацию: получить CSRF-токен, настроить interceptors, обработать истекшие сессии, защитить роуты, а также разобраны нюансы работы с SSR.

Важный момент: не забудьте корректно настроить атрибут SameSite для cookies, автор, к сожалению, это упустил.

👉 https://dev.to/this-is-angular/angular-authentication-with-cookies-in-10-minutes-41m8

✨ Мощь Intl API

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

Вместо тяжелых библиотек уже давно существует нативное решение Intl API.

Intl покрывает почти все задачи локализации:

🕒 Intl.DateTimeFormat форматирует дату и время,
💰 Intl.NumberFormat работает с валютами и единицами,
📋 Intl.ListFormat строит естественные списки,
⏳ Intl.RelativeTimeFormat выводит время “вчера” или “через 3 дня”,
🗣 Intl.PluralRules помогает в работе с множественными числами,
🔤 Intl.Collator сравнивает строки с учетом языковых особенностей,
⚙️ и многое другое.

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

👉 https://habr.com/ru/companies/timeweb/articles/939690/

✨ Как сделать селектор вариантов доступным для всех пользователей

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

Статья разбирает типичный селектор вариантов, показывая, как изначальный подход на <img> ломает клавиатурную навигацию, и предлагает семантическую разметку на базе <fieldset> и радиокнопок с поддержкой клавиатуры и скринридеров.

👉 https://angular.love/case-study-building-an-accessible-variant-selector