#blog

Анонс Angular v21

Данная статья посвящена релизу, который привнесёт новые мощные инструменты для создания современных веб-приложений:
- Signal Forms - реактивные формы на основе сигналов с полной типизацией и встроенной валидацией.
- Angular Aria - headless-компоненты с приоритетом на доступность, которые можно стилизовать под ваши нужды.
- MCP Server - теперь AI-агенты могут работать с новыми возможностями Angular с самого момента их появления.
- Vitest - новый стабильный тест-раннер по умолчанию.
- Zoneless change detection - улучшенная производительность, меньше зависимостей, лучший контроль над приложением.
- Обновлённая документация с гайдами по использованию AI, Signal API и Tailwind.

Бонус - обновление маскота!

Ссылка на статью: https://blog.angular.dev/announcing-angular-v21-57946c34f14b

#blog
Статья "A Practical Guide to Blobs, File APIs, and Memory Optimization" раскрывает детали и сценарии работы с Blob с практическими примерами. Тезисно о содержании:

1. Создание Blob-объектов
- Проблема: использование больших строк и data URL приводит к дублированию данных и высокому потреблению памяти.
- Решение: использование Blob.
- Пример: скачивание конфига в виде файла.

2. Работа с большими файлами по частям (Chunking)
- Проблема: чтение больших файлов целиком вызывает зависание и перерасход памяти.
- Решение: обработка файлов по частям через slice().
- Пример: класс для поочередной загрузки больших файлов на сервер.

3. Сжатие и конвертация изображений на клиенте
- Проблема: отправка тяжёлых изображений тратит трафик и замедляет загрузку.
- Решение: сжатие через <canvas> и Blob.
- Пример: загрузка аватара с предварительным сжатием.

4. Единый компонент для предпросмотра файлов
- Проблема: дублирование кода под разные типы файлов.
- Решение: класс1. Создание Blob-для унифицированного отображения изображений, текста, аудио, видео и т.д.

5. Экспорт данных с использованием Blob
- Проблема: data URL не подходят для больших объемов данных.
- Решение: централизованная служба экспорта в форматах JSON, CSV, TXT.
- Пример: класс DownloadService.

6. Управление памятью и предотвращение утечек через Blob URL
- Проблема: неосвобождённые URL из URL.createObjectURL ведут к утечкам памяти.
- Решение: централизованный BlobUrlManager с автоочисткой.
- Пример: безопасный компонент предпросмотра изображений.

7. Общие рекомендации по использованию Blob
- Когда использовать: при работе с файлами, построении потоков, сжатии, предпросмотре, экспорте, управлении памятью.
- Blob + File API + URL.createObjectURL = основа стабильной работы с файлами на клиенте.

Статья - https://jsdev.space/howto/blob-file-handling-guide/

#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/

#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
Angular pipes: время для переосмысления

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

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

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

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

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

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

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

#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
В завершение года - две небольших статьи про обновления в 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
Подробный гайд по 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
Сегодняшняя статья посвящена deepSignal - маленькой, но мощной утилите.

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

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

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

#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
Статья о проблеме "превращения всего в массивы 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
В 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/