Angular Meetup

#blog
Вышел Vite 8.0. Что нового:
1. Vite 8 с Rolldown — новый Rust-бандлер вместо Rollup + esbuild, в 10–30× быстрее, с полной совместимостью плагинов.

2. Расширенные возможности — full bundle mode, гибкое разделение чанков, Module Federation, кэширование на уровне модулей.

3. Vite Plugin Registry — каталог плагинов на registry.vite.dev.

4. Ускорение сборки — до 64% быстрее в реальных проектах.

5. Единая toolchain — Vite, Rolldown и Oxc работают слаженно.

6. Новые фичи — встроенные devtools, tsconfig paths, emitDecoratorMetadata, WASM в SSR, логирование в терминал.

7. @vitejs/plugin-react v6 — на Oxc, без Babel, поддержка React Compiler.

8. Поддержка Node.js — Node.js 20.19+ и 22.12+.

9. Больший размер — +15 МБ из-за lightningcss и Rolldown.

10. Постепенная миграция — через rolldown-vite на Vite 7.

11. Благодарности Rollup и esbuild — ключевые проекты для старта Vite.


Статья - https://vite.dev/blog/announcing-vite8

#blog
Команда NodeJs опубликовала обновление графика релизов. Вкратце:

1. Новый график релизов — начиная с Node.js 27.x: 1 мажорный релиз в год (вместо 2), каждый релиз становится LTS.
2. Alpha-релизы — доступны с октября по март, разрешены семантически мажорные изменения, предназначены для разработчиков библиотек.
3. Три фазы релиза: Alpha (6 мес), Current (6 мес), LTS (30 мес), всего поддержка — 36 месяцев.
4. Упрощение для мейнтейнеров — снижение нагрузки за счёт сокращения активных версий и упрощения backporting.
5. Стабильность для бизнеса — предсказуемый график обновлений: релиз в апреле, LTS в октябре.
6. Без odd/even разделения — все версии — LTS, упрощено восприятие для новичков.
7. Интеграция с CITGM — тестирование с популярными пакетами для выявления проблем до релиза.
8. Версионирование по году — версия 27 в 2027, 28 — в 2028 и т.д.
9. Без изменений в LTS-поддержке — 30 месяцев, миграционные окна сохранены.
10. V8 остаётся актуальным — обновления движка не старше 6 месяцев.
11. Node.js 26 — последний по старой схеме, LTS в октябре 2026, EOL в апреле 2029.
12. Node.js 27 — первый релиз по новой схеме, Alpha с октября 2026, LTS с октября 2027, EOL в апреле 2030.

Статья: https://nodejs.org/en/blog/announcements/evolving-the-nodejs-release-schedule

#blog

Angular постепенно отказывается от Zone.js — начиная с Angular 21 режим Zoneless становится новым стандартом. Что это значит для существующих приложений и как безопасно перейти на новую модель?
В статье разбирается:
- зачем вообще мигрировать на Zoneless
- почему OnPush и сигналы сильно упрощают переход
- как использовать unit-тесты, чтобы заранее проверить совместимость компонентов
Главная мысль: миграцию можно делать постепенно — без рискованных изменений в кодовой базе.

Ссылка: https://medium.com/javascript-in-plain-english/how-to-migrate-your-angular-app-to-zoneless-9f9350040e19

#blog
DevTools Chrome 145: фокус на стабильность, производительность и улучшение интерфейса.
- MCP-сервер обновлён до v0.14.0 с авто-подключением, унифицированной эмуляцией и сохранением логов.
- В Performance панели видны "мягкие навигации" для SPA.
- Построчный профилинг в Sources стал точнее, особенно для минифицированного кода.
- Ускорена работа с трассировками в Performance.
- В Network добавлена колонка "Render blocking" для анализа ресурсов.
- Request Conditions теперь с поддержкой ограничения скорости по умолчанию.
- Поддержка @starting-style включена для отладки анимаций.
- AI Assistance поддерживает вставку изображений.
- Улучшена доступность и мелкие элементы интерфейса.

Статья: https://developer.chrome.com/blog/new-in-devtools-145?hl=en

#blog

Сегодня снова поговорим про сигнальные формы - новый экспериментальный API уже здесь, но есть важный нюанс. По умолчанию сигнальные формы не добавляют привычные CSS-классы состояния (ng-valid, ng-invalid, ng-touched). Если ваши стили завязаны, например, на .ng-invalid - при миграции можно неожиданно "сломать" UI.
В статье разбирается следующее:

- как вернуть классическое поведение через provideSignalFormsConfig
- как настроить собственные динамические классы
- почему использование объекта конфигурации - это продуманное решение с точки зрения дизайна API

Ссылка на статью: https://angularexperts.ch/blog/signal-forms-config

#blog
Команда Webpack выпустила Roadmap 2026. Что внутри:

CSS Modules без плагинов — интеграция в ядро webpack, экспериментальная поддержка в 2026, стабильная — в webpack 6.
Universal target — поддержка запуска кода в Node.js, Deno, Bun и браузере с выводом в ESM.
TypeScript без загрузчиков — отказ от ts-loader, улучшение встроенной поддержки.
HTML как точка входа — интеграция html-webpack-plugin в ядро webpack.
Поддержка нескольких рантаймов — улучшение совместимости с Deno, Bun и браузером, уменьшение зависимости от Node.js.
Lazy Barrel Optimization — ускорение сборки за счёт отложенной обработки неиспользуемых модулей.
Единый плагин минификации — объединение terser, css-minimizer и других в один minimizer-webpack-plugin.
Улучшение инструментов разработки — обновление CLI, упрощение dev-сервера и мидлварей.
Автоматическая документация — генерация из типов и схем для точности и актуальности.
Многопоточный API — параллелизация сборки, вдохновлённая thread-loader.

Статья - https://webpack.js.org/blog/2026-04-02-roadmap-2026/

#blog
Вышел ESLint v10.0.0 — крупное обновление с новыми функциями и критическими изменениями.
Основные моменты:
- Поддержка устаревших версий Node.js прекращена (до v20.19.0, v21.x, v23.x).
- Отказ от eslintrc-конфигураций: удалены все методы и файлы, связанные с eslintrc. Теперь используется только flat-конфигурация.
- Новый алгоритм поиска конфигурационных файлов: поиск начинается от каждого линтуемого файла, что удобно для монорепозиториев.
- Отслеживание JSX-ссылок: теперь JSX-элементы корректно обрабатываются в области видимости.
- Улучшения в RuleTester: добавлены новые опции для более строгого тестирования правил, а также улучшена отладка.
- Новая опция countThis в правиле max-params: позволяет игнорировать this при подсчёте параметров функции.
- Обновлена конфигурация eslint:recommended: добавлены важные правила.
- Удалены устаревшие методы и свойства, включая context.getCwd(), SourceCode.getTokenOrCommentBefore() и другие.
- Обновлён минимальный требуемый jiti до 2.2.0 для корректной работы с TypeScript-конфигами.
- Улучшена поддержка цветового вывода через флаги --color и --no-color.

Статья: https://eslint.org/blog/2026/02/eslint-v10.0.0-released/

#news
Мы много говорим о преимуществах сигнального стора, но стоит ли полностью отказываться от NgRx?
NgRx - мощный инструмент, но для большинства Angular-приложений он давно стал излишним. Actions, reducers, selectors, effects ради простого UI. Angular Signals меняют правила игры. Сигналы позволяют создавать реактивное и масштабируемое управление состоянием. Иммутабельные обновления через update(), производные значения через computed(), сайд-эффекты через effect() - всё типизировано, предсказуемо и легко тестируется.
В этой статье рассказывается:
- как заменить NgRx-сторы на Signals без потери контроля;
- в каких случаях разумно использовать NgRx;
- как использовать гибридный подход (NgRx для глобального стейта, сигналы для UI);
- как за ~100 строк собрать production-ready todo-приложение;
- как получить ускорение рендеринга в 2-3 раза и сократить кодовую базу примерно на 50%.

Ссылка на статью: https://javascript.plainenglish.io/how-to-replace-over-complicated-ngrx-stores-with-angular-signals-without-losing-control-ee680938942b

#blog
В Angular v22 будет изменена стандартная стратегия обнаружения изменений (Change Detection). Вместо Default по умолчанию будет использоваться OnPush. Это решение направлено на улучшение производительности и соответствие современным практикам разработки без использования Zone.js (zoneless-режим).
Кроме того, ChangeDetectionStrategy.Default будет переименован в ChangeDetectionStrategy.Eager, чтобы точнее отражать своё поведение — агрессивную проверку изменений. Существующие проекты будут автоматически обновлены, и для сохранения прежнего поведения будет использоваться Eager.

Основные причины:
- OnPush давно рекомендовался как лучшая практика.
- Упрощение настройки и поведения фреймворка.
- Поддержка zoneless-режима становится стандартом.

Angular планирует выпустить эти изменения в мае 2026 года в версии v22.

Статья: https://habr.com/ru/news/989852/

#blog
Статья о проблеме "превращения всего в массивы JS", что внутри:
Проблема:
Традиционная обработка массивов в JS (через map, filter, slice) — тяжеловесная, потому что:
- Создаются множество промежуточных массивов
- Обрабатываются все элементы, даже если нужны только первые несколько
- Происходит лишняя работа, особенно на больших данных
Пример:

const visibleItems = items
.filter(isVisible)
.map(transform)
.slice(0, 10);

Здесь сначала фильтруются все элементы, потом преобразуются, и только потом берутся первые 10 (и каждая итерация создает новый массив).
Решение:
Использовать итераторы с lazy методами — values(), filter, map, take, toArray.
Пример с итератором:

const visibleItems = items
.values()
.filter(isVisible)
.map(transform)
.take(10)
.toArray();

Здесь обработка элементов происходит по одному, и останавливается после первых 10 найденных.
Это экономит память и процессорное время.
Польза в UI и асинхронных сценариях:
- Виртуализованные списки
- Бесконечный скролл
- Потоковая обработка данных
- Эффективная работа с большими наборами данных
Важно:
Итераторы не заменяют массивы полностью.
Они не подходят, если нужен прямой доступ к элементам (например, items[5]) или мутации.
Поддержка:
Современные браузеры и Node.js 22+.

Статья - https://allthingssmitty.com/2026/01/12/stop-turning-everything-into-arrays-and-do-less-work-instead/

#blog
Статья посвящена тому, что автор называет "великим сдвигом во фронтенде", а именно сдвигу от React к Angular в 2026 ✨
Angular постепенно возвращается в игру - и не как "сложный фреймворк из прошлого", а как ответ на усталость от хаоса во фронтенде. Standalone-компоненты, сигналы, TypeScript-first архитектура и решения "из коробки" сделали Angular быстрым, предсказуемым и удобным для больших команд. Там, где раньше выбирали гибкость React, теперь всё чаще выбирают структуру, масштабируемость и долгосрочную поддержку.
Автор пишет о том, как структура Angular ускоряет разработку, облегчает масштабные рефакторинги, упрощает онбординг новых сотрудников и повышает стабильность приложений. Производительность и интеграция с TypeScript делают фреймворк особенно привлекательным для enterprise-проектов и сложных приложений.
Это всё не про то, что React стал плох, а про то, как Angular решает проблемы команд.
Подробное сравнение здесь: https://medium.com/@satnammca/the-great-frontend-shift-react-to-angular-by-2026-1697c05e860e

#blog
Сегодняшняя статья посвящена deepSignal - маленькой, но мощной утилите.

🔹 Что делает deepSignal:
- Создаёт сигнал для вложенного свойства объекта. Потребители уведомляются только при изменении этого конкретного свойства.
- Позволяет писать значения прямо во вложенный сигнал.
- Обеспечивает высокую производительность даже для больших форм.

В статье подробно разбирается то, как deepSignal работает «под капотом» и как его используют в сигнальных формах Angular.

Статья: https://medium.com/netanelbasal/the-magic-of-deepsignal-how-angular-signal-forms-enable-true-nested-reactivity-6b9e0d73eb9d

#blog
Подробный гайд по Angular Signal Forms Validation, с примерами и кейсами. И хоть базовые правила знакомы всем (required, email, min/max, minLength/maxLength, pattern), но остальные возможности точно будут полезны для ознакомления:
- Кастомная валидация: validate(), доступ к полям и состояниям через FieldContext.
- Асинхронная валидация: validateAsync(), validateHttp(), поддержка lazy loading.
- Интеграция: validateStandartSchema() для Zod, Valibot и подобных.
- Структурные функции: applyEach(), apply(), applyWhen(), applyWhenValue() для переиспользования схем.
- Управление состоянием: debounce, disabled, hidden, readonly.

Статья: https://netbasal.medium.com/master-angular-signal-forms-validation-all-functions-explained-d9b0cd1c7be6

#blog
В завершение года - две небольших статьи про обновления в Chrome. На повестке - individual requests throttle и scroll-triggered animations. О чем повествуется:
В Chrome 144 появилось индивидуальное ограничение скорости сетевых запросов в DevTools.
- Можно блокировать или замедлять отдельные URL или домены, не всю страницу.
- Настройки — через вкладку Request conditions с масками, приоритетами и профилями.
- Заблокированные запросы — красные, замедленные — желтые с иконкой часов.
- Удобно тестировать влияние медленных ресурсов (например, сторонних API или картинок).

В Chrome 145 добавлены CSS-анимации, запускаемые при прокрутке (scroll-triggered animations).
- Теперь анимации активируются при достижении определённого положения скролла.
- Используются новые свойства: animation-trigger и timeline-trigger.
- Активация и деактивация задаются через диапазоны entry/exit.
- Работают на CSS, без IntersectionObserver.
Пример:

.card {
timeline-trigger: --t view() contain 15% contain 85%;
animation: unclip 0.35s ease-in-out both;
animation-trigger: --t play-forwards play-backwards;
}

При прокрутке до нужного положения карточка плавно появляется (play-forwards), а при уходе из зоны видимости — исчезает (play-backwards).

Читать здесь:
https://developer.chrome.com/blog/throttle-individual-network-requests?hl=en
https://developer.chrome.com/blog/scroll-triggered-animations?hl=en

Всем хороших праздников и до встречи в новом году!

#blog
Сегодня сразу две статьи

Первая - о том, как Model Context Protocol (MCP) меняет взаимодействие ИИ с Angular-проектами. В ней разбирается, зачем вообще нужен MCP, как Angular MCP-сервер защищает от устаревших API и ошибок LLM, почему локальный доступ к проекту и окружению - ключ к настоящим агентным возможностям, и что всё это значит для будущего IDE и AI-ассистентов (на примере Google Antigravity).
Ссылка: https://blog.angulartraining.com/using-ai-with-angular-2025-update-5ab4b629e331

Вторая - практический эксперимент с Angular MCP-сервером и vibe-кодингом. Пошаговый разбор создания Todo-приложения с помощью ИИ: от настройки MCP и агентских инструкций до работы с сигналами, потоком управления и Angular CLI. Честный опыт с плюсами и минусами работы и выводами о том, где ИИ реально помогает, а где его всё ещё нужно жёстко контролировать.
Если вам интересно, как выглядит современная связка Angular + ИИ на практике - и почему без правильных инструкций агенту никуда - эти две статьи отлично дополняют друг друга.
Ссылка: https://dev.to/angular/a-quick-vibe-code-experiment-with-angulars-mcp-server-3g2h

#blog
Статья про возможность оптимизации загрузки JS с помощью Explicit Compile Hints. Кратко:
- Проблема: компиляция JS при запуске замедляет загрузку.
- Решение в Chrome 136: коммент //# allFunctionsCalledOnLoad для eager-компиляции всего файла.
- Выгода: средний показатель ускорения на популярных сайтах - 630 мс.
- Как работает:
Без подсказки — функции компилируются при первом вызове
С подсказкой — компиляция идёт заранее, в фоне.
- Пример:

//# allFunctionsCalledOnLoad
function testfunc2() { /* скомпилируется сразу */ }

- Важно: используйте фичу умеренно — избыточная компиляция тратит память.
- Далее: поддержка eager compilation на отдельные функции.

Статья: https://v8.dev/blog/explicit-compile-hints

#blog
Я никак не мог пройти мимо и не поделиться красивой и качественной статьей "CSS Wrapped 2025". Как понятно из названия - это подбивка из значимых улучшений в уходящем году. Крайне рекомендую посетить оригинал, а если совсем вкратце списком:
- Invoker Commands
- Dialog Light Dismiss
- popover=hint
- Customizable select
- ::scroll-marker/button()
- scroll-target-group
- Anchored container queries
- Interest invokers
- Scroll-state queries
- Tree counting functions
- scrollIntoView() container
- Nested View Transition Groups
- DOM State-Preserving Move
- Advanced attr() function
- ToggleEvent.source
- text-box features
- shape() function
- if() statements
- Custom Functions
- Expanded range syntax
- Stretch sizing keyword
- corner-shape

Статья - https://chrome.dev/css-wrapped-2025

#blog
Angular pipes: время для переосмысления

Статья, в которой подробно разбирается внутренняя механика пайпов в контексте Ivy: фазы создания и обновления, устройство мемоизации pure пайпов, чем отличаются пайпы с фиксированным и изменяющимся числом аргументов и какую роль в этом играют структуры TView и LView.

Отдельно рассматривается взаимодействие пайпов с DI и особенности impure пайпов. Автор также показывает, как пайпы соотносятся с новой системой реактивности, рассуждает о том, зачем они всё ещё нужны в эпоху сигналов и в каких сценариях оказываются особенно полезны.
Отличный повод взглянуть на этот инструмент под новым углом!

Ссылка на статью: https://medium.com/coreteq/angular-pipes-time-to-rethink-f616ec84fb8d

#blog
Сегодня посмотрим на обновления Chrome 144 beta. Список немалый, кратко:
1. CSS:
- Позиционирование с трансформациями через anchor().
- Стилизация поиска через ::search-text.
- @scroll-state для стилизации по направлению прокрутки.
- overscroll-behavior при прокрутке с клавиатуры.
- Поддержка @container без учёта дерева.
- Обновление каскадирования в SVG2.
2. Web API:
- XRVisibilityMaskChange для WebXR.
- onanimationcancel в GlobalEventHandlers.
- ViewTransitions.waitUntil() для контроля анимационного дерева.
- Новый элемент <geolocation>.
- WebGPU: subgroup_id, улучшения uniform-буферов.
- Новый API Temporal для дат.
- Поддержка атрибутов в SVG-ссылках.
- clipboardchange для синхронизации буфера обмена.
- Поддержка ch-ua-high-entropy-values в Permissions Policy.
- Отражение MathML-символов в RTL.
- Multicast в Direct Sockets для Isolated Apps.
- InteractionCount для анализа взаимодействий.
- Pointer Lock на Android.
- WebAuthn Signal API на iOS и Android.
3. Origin Trials:
- Расширенная работа с текстом в Canvas.
4. Депрекации:
- Все Privacy Sandbox API (Topics, Protected Audience и др.) устаревают.
- Related Website Sets и requestStorageAccessFor устаревают.
- savedTabGroups удалён из SyncTypesListDisabled.
- Запрет загрузки внешних сущностей в XML.

Статья: https://developer.chrome.com/blog/chrome-144-beta?hl=en

#blog
Error.cause в JavaScript - основные моменты:

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

throw new Error('Something went wrong: ' + err.message);

При этом теряется контекст, усложняется отладка.

Error.cause: решение проблемы
Свойство cause позволяет сохранить исходную ошибку при создании новой.
Теперь доступны оба стека вызовов: верхнего уровня и исходной ошибки.
Пример вывода:

Error: Something went wrong
    at ...
Caused by: SyntaxError: Unexpected token b in JSON at position 2
    at JSON.parse
    at ...

Более точные проверки в тестах
С cause можно проверять не только верхнеуровневую ошибку, но и её причину:

expect(err.cause).toBeInstanceOf(ValidationError);

Тесты становятся точнее и надёжнее.

Подводные камни и рекомендации
- cause не выводится автоматически через console.error(err) — нужно логировать отдельно.
- Не стоит оборачивать каждую мелкую ошибку — это может усложнить отладку.
- console.error(err.stack) выводит только стек текущей ошибки — для полного стека нужно обращаться к err.cause.stack.
Вывод полной цепочки ошибок можно реализовать через вспомогательные функции.

Поддержка в средах:
- Chrome 93+, Firefox 91+, Safari 15+, Edge 93+
- Node.js 16.9+
- Bun и Deno (актуальные версии)
Для TypeScript: требует "target": "es2022" и "lib": ["es2022"].

Статья: https://habr.com/ru/companies/timeweb/articles/967440/