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

✨ Оптимизация бандла Angular

Переход Angular на новую систему сборки на базе esbuild существенно ускорил процесс разработки, однако породил скрытый компромисс в производительности.

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

👉 https://push-based.io/article/faster-builds-slower-applications-optimizing-angulars-bundle-output

✨ Полное руководство по Signal Forms

Тема новых форм в Angular уже не раз обсуждалась, но с релизом 22-й версии они официально перешел в статус stable.

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

👉 https://angular.love/signal-forms-in-angular-21-complete-guide

✨ Не скрамом единым: 10 нетривиальных концепций управления проектом

Классический подход к управлению проектами часто опирается на точные оценки, подробные планы, контроль и стремление довести начатое до конца. Но современные концепции всё чаще предлагают взглянуть на эти привычные принципы критически.

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

Почему иногда проект лучше не начинать? Зачем закрывать уже запущенные проекты? Всегда ли нужны оценки сроков и максимальная загрузка команды? И может ли меньше контроля сделать управление эффективнее?

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

✨ Как мы превратили API-контракт в отдельный артефакт и сократили генерацию клиента с 15 минут до нескольких секунд

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

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

Решением стало хранение OpenAPI-схем в Git. Бэкенд экспортирует JSON при локальном запуске, а фронт перешел на ng-openapi-gen, разбивающий код на модульные функции.

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

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

✨ Playwright для компонентных CAT-тестов

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

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

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

✨ Хайп вокруг ИИ: реальное состояние дел и будущее

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

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

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

В общем, это спокойный взгляд на ИИ без лишнего восторга и паники.

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

✨ Ленивая загрузка сервисов в Angular 22

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

Angular 22 закрывает эту брешь с помощью injectAsync, который загружает сервис только при первом запросе его инстанса.

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

👉 https://angular.love/lazy-loading-services-in-angular-22

✨ Эволюция форм 

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

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

Статья прослеживает эволюцию форм, от AngularJS с его двусторонним связыванием, через template-driven подходы и эпоху реактивных форм, до появления Signal Forms как нового стандарта.

👉 https://www.codemag.com/Article/264041/From-Template-Driven-to-Signal-Driven-The-Complete-Evolution-of-Angular-Forms

✨ Angular Signal Forms: пользовательские контролы без ControlValueAccessor

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

В статье пошагово разбирается процесс разработки современного кастомного контрола без лишнего бойлерплейта.

👉 https://angularexperts.io/blog/angular-signal-forms-custom-controls

✨ 3 хорошие привычки начинающего фронтендера

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

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

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

👉 https://habr.com/ru/companies/ruvds/articles/1066724/

✨ Размытая граница между состояниями CSS и событиями JavaScript

CSS все чаще берет на себя то, что раньше делал только JavaScript. Реагирует на состояния, которые почти неотличимы от событий. Граница между псевдоклассами и обработчиками событий становится все более размытой.

В статье разбираются примеры такого пересечения, а также рассматривается экспериментальный event-trigger, будущий механизм, который может позволить запускать CSS-анимации в ответ на события.

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

✨ От парсинга DOM к контрактам: понимание WebMCP

Сейчас агенты гадают по DOM и скриншотам, пытаясь понять, что за кнопка перед ними: кликают, ждут, перепроверяют. Это медленно, дорого по токенам и хрупко. Любой редизайн или A/B-тест может сломать всю цепочку действий.

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

И Angular v22 уже стал первым крупным фреймворком с экспериментальной поддержкой WebMCP из коробки.

👉 https://angular.love/from-dom-scraping-to-contracts-understanding-webmcp-part-1

✨ Agent Plugins

Вышла спецификация Agent Plugins 1.0.0 — открытый, независимый от вендоров формат упаковки Agent Skills и MCP-серверов в переносимые плагины. Ее развивают мейнтейнеры из Amazon, Cursor, Microsoft, OpenAI, Vercel, а теперь и Google.

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

Похоже, экосистема AI-агентов постепенно движется к общим стандартам, а не закрытым форматам.

👉 https://developers.googleblog.com/agent-plugins-package-your-skills-tools-and-more/

✨ Представляем CopilotKit для Angular

CopilotKit — SDK для создания full-stack агентных приложений, генеративного UI и чат-интерфейсов. Начинался как React-библиотека, а теперь это мультиплатформенный фреймворк.

Разработка ИИ-интерфейсов перестала быть эксклюзивом React. Команда Soverius AI официально взяла на себя развитие @copilotkit/angular в основном репозитории проекта. Теперь Angular-разработчикам из коробки доступны готовые UI-чаты и инструменты для ИИ-агентов.

👉 https://www.copilotkit.ai/blog/copilotkit-for-angular

✨ CSS-челленджи для 200 IQ

Часто ли вы ловите себя на мысли, что уперлись в невидимую стену, пытаясь решить, казалось бы, невыполнимую задачу? В моменты, когда ИИ, Stack Overflow и спецификации бессильны, на помощь приходит настоящая инженерная смекалка и упорство.

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

👉 https://dev.to/waterplea/css-challenges-for-200-iq-ghl

✨ Как обрабатывать глобальные ошибки в современном zoneless Angular

В классическом Angular библиотека Zone.js незаметно перехватывала все асинхронные операции (Promise, setTimeout, addEventListener) и автоматически пересылала необработанные ошибки в центральный ErrorHandler.

В новом zoneless-режиме этот механизм исчезает. Ошибки из отклоненных промисов, сторонних скриптов или колбэков браузерных API перестают попадать в центральную обработку и просто теряются в консоли.

Решением стал provideBrowserGlobalErrorListeners(). Новый провайдер, который вместо патчинга API просто вешает нативные слушатели на window для событий error и unhandledrejection. Пойманные ошибки перенаправляются в стандартный ErrorHandler, восстанавливая единый пайплайн обработки ошибок.

👉 https://www.angularspace.com/how-to-handle-global-errors-in-modern-zoneless-angular/

✨ Как верстали 15 лет назад

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

Сегодня все это решается парой строк на flex или grid и это отличный повод оценить, как далеко шагнул CSS.

👉 https://habr.com/ru/companies/ruvds/articles/1060630/

✨ Как я собрал на одном Angular коде: личный кабинет для сайта, Telegram Mini App, iOS и Android

Когда стартуешь соло и требования меняются каждую неделю, писать отдельные приложения для сайта, Telegram, iOS и Android верный способ утонуть.

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

Андрей Шпилевский решил это просто. Остался на Angular и вынес всю логику и экраны в общую библиотеку для всех платформ, а мобильные приложения и Telegram Mini App обернул через Capacitor. В итоге около 95% кода общее, а платформенная специфика спрятана в адаптерах.

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

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

Вышел новый минорный релиз Angular.

Основные изменения:

В linkedSignal добавлена возможность задавать кастомный сеттер для сложной логики записи.

Поддержка JSONP объявлена устаревшей из-за уязвимостей.

В CLI добавлена автоматическая миграция со старого декоратора @Injectable на новый @Service.

Ознакомиться с полным списком изменений можно здесь.

👉 https://blog.ninja-squad.com/2026/07/29/what-is-new-angular-22.1

✨ Языковую модель на 28,9 млн параметров запустили на микроконтроллере ESP32-S3

Нейросеть работает полностью локально на плате с 16 Мбайт флеш-памяти и 512 Кбайт SRAM, а сгенерированный текст выводится на небольшой дисплей.

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

Для сравнения, предыдущий похожий проект уместил на ESP32 только модель на 260 тыс. параметров.

👉 https://habr.com/ru/news/1064114/