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

✨ Signal Forms На angularspace давно не было новых статей, но вот свежий материал о Signal Forms. Той самой фиче, о которой все говорят с момента анонса. Хотя концепция уже многим знакома, стоит взглянуть на конкретику работы с экспериментальным API. 👉 https://www.angularspace.com/signal-forms/

✨Магия deepSignal Статья раскрывает, как утилита deepSignal решает проблему реактивности при работе с вложенным состоянием. Утилита создает WritableSignal для конкретного свойства передаваемого сигнала, который реагирует только на изменения этого свойства, игнорируя остальные поля. Это особенно полезно при работе с большими формами, позволяя обновлять только необходимые части без лишних перерасчетов. 👉 https://medium.com/p/6b9e0d73eb9d

✨ Angular получает поддержку стрелочных функций в шаблонах В Angular теперь можно использовать стрелочные функции прямо в шаблонах. Они работают как обычные, но с некоторыми ограничениями. Поддерживаются только функции с неявным возвратом: (a) => a + 1 разрешено, а (a) => { return a + 1 } нет. Внутри стрелочных функций нельзя использовать pipe-операторы, но их можно передавать в pipe снаружи: (a, b) => a + b | test разрешено, а (a, b) => (a + b | тест) нет. Чтобы избежать пересоздания функций при каждой проверке изменений, компилятор применяет оптимизации. 👉 https://github.com/angular/angular/commit/d9923b72a20972ba6bf728d78f1afac6936ade18

✨ Angular Three Если вы увлекаетесь 3D, обратите внимание на Angular Three. Это кастомный рендерер для Angular, который позволяет использовать THREE.js декларативно, прямо через шаблоны. 3D-сцены можно собирать так же привычно, как обычный интерфейс, но они рендерятся не в DOM, а напрямую в Canvas. 👉 https://angularthree.org/

✨ От хаоса к структуре Недавно был представлен FEOD (Fractal Entity Oriental Design) — подход к структурированию фронтенд-приложений, который объединяет лучшее из Atomic Design, FSD и модульной архитектуры. Главная цель, убрать спорную терминологию и дать разработчикам конкретные ответы на вопрос, что и куда класть. Суть FEOD: проект делится на App, Pages, Modules, Common, Global с четкими правилами импортов. Модули изолированы через публичные API, поддерживают вложенность любой глубины (фрактальность). Структура изначально разрабатывалась под Vue, но сам принцип универсален. В контексте Angular можно обсудить адаптацию подхода и поделиться опытом. Проект еще развивается, если интересно поучаствовать в доработке структуры, которая ставит архитектуру на рельсы без перегруза правилами, можете оставить заявку здесь. Отдельное спасибо Денису Чернову за то, что запустил эту инициативу. 👉 https://habr.com/ru/companies/sportmaster_lab/articles/972410/

✨ Что нового в Angular 21.1? Недавно команда Angular выпустила минорные обновления с важными улучшениями. Ключевые изменения коснулись Signal Forms, которые продолжают развиваться и приближается к production-ready состоянию. Signal Forms: директива [field] переименована в [formField] из-за возможных коллизий имен. Появилась автоматическая установка CSS-классов на основе состояния полей через provideSignalFormsConfig(). Теперь можно настроить классы типа is-invalid для интеграции с Bootstrap или Tailwind. Роутер: новая функция isActive() возвращает computed signal для отслеживания активного URL. Экспериментальная интеграция с браузерным Navigation API. Другие улучшения: @switch теперь поддерживает множественные @case для одного блока контента, в шаблонах работает spread-оператор, добавлена утилита provideStabilityDebugging() для отладки проблем с гидратацией в SSR. И это лишь малая часть из множества обновлений. 👉 https://blog.ninja-squad.com/2026/01/15/what-is-new-angular-21.1

✨ Управление фокусом в Signal Forms В новом Angular 21.1.0 Signal Forms получили метод focusBoundControl(), который позволяет программно устанавливать фокус на поля формы. Это решает типичные задачи: переход к первому полю с ошибкой после валидации, автофокус на следующий шаг в многошаговых формах или реализация клавиатурных шорткатов. Метод работает интуитивно. Вызываешь его на состоянии поля, и автоматически находится связанный контрол и устанавливает на него фокус. Также поддерживается работа с кастомными контролами. И если контрол реализует свой метод focus(), то он будет вызван. 👉 https://medium.com/p/43ef2b1b34e6

✨ Signal Forms Guide Если вы уже изучили официальную документацию по Signal Forms и даже прошли туториал, но все равно хочется больше материалов по теме. Появилось интерактивное руководство, которое помогает закрепить базу. 👉 https://signal-forms.guide/guides/core-concepts

✨ JavaScript-фреймворки: тренды на 2026 Райан Карниато, автор SolidJS, опубликовал свой ежегодный обзор JavaScript-фреймворков с взглядом в 2026 год. Он разобрал, как фреймворки смещаются в сторону AI-first, async-first и изоморфной архитектуры. 👉 https://dev.to/this-is-learning/javascript-frameworks-heading-into-2026-2hel

✨ Русскоязычный перевод документации В официальной документации Angular появилась ссылка на русскоязычный перевод. Теперь тем, кому удобнее читать документацию на русском, не нужно искать перевод отдельно. А если вы заметите неточности или ошибки в переводе, всегда можно внести свой вклад и помочь сделать документацию еще лучше (issues открыты). 👉 https://github.com/misha98857/angular-docs.ru

✨ Мне этот Chrome DevTools теперь абсолютно понятен Если вы открываете DevTools только ради console.log() или инспектирования элементов, вы используете лишь малую часть возможностей. Узнаете про полезные мелочи: от обращения к выбранным элементам через $0 и monitorEvents() для отслеживания событий до профилирования Web Vitals. 👉https://habr.com/ru/companies/timeweb/articles/976266/

✨ Спред оператор в шаблонах Пока все празднуют, команда Angular добавила поддержку синтаксиса spread/rest в следующих местах синтаксиса шаблонов. Объектов {a: 1, ...foo} Массивов [1, ...foo] Вызовы функций fn(1, ...foo) 👉 https://github.com/angular/angular/pull/66213

✨ Практическое руководство по Blob, File API и оптимизации памяти Если при обработке файлов вкладка подвисает или падает, это классический признак неправильной работы с памятью и большими данными на клиенте. В статье разбираются шесть практических приемов работы с Blob и File API: правильное создание блобов, разбивка больших файлов на chunks, сжатие изображений через Canvas и многое другое. 👉 https://habr.com/ru/companies/timeweb/articles/976774/

✨ LeetCode для любителей TypeScript Если затянувшиеся новогодние праздники слегка выбили вас из ритма и TypeScript вспоминается с усилием… В комментариях к предыдущему посту поделились отличным сервисом, который поможет мозгу снова включиться. 👉 https://typehero.dev/

✨ Типы TypeScript как язык программирования Знали ли вы, что TypeScript является тьюринг-полным? Система типов TypeScript не просто инструмент проверки типов, а полноценный язык программирования. Вы можете использовать дженерики как функции, условные типы для ветвления логики, рекурсию для итераций, а infer как переменные для деструктуризации значений. Статья показывает практические примеры: генератор типов для CRUD-операций, вывод типов из middleware и многое другое. 👉 https://marmelab.com/blog/2025/12/04/typescript-type-as-a-programming-language.html

✨ Итоги года и планы на будущее Чем вам запомнился 2025 год в Angular? Из всего многообразия хочется выделить появление Signal Forms и Resource API, а также переход на стабильный Zoneless и Vitest. Что вы ожидаете от Angular в этом году? Какие фичи или улучшения вы хотели бы увидеть? Пишите свои предложения в комментариях. Самые интересные и технически обоснованные предложения мы передадим команде разработчиков. 👉 https://dev.to/this-is-angular/ng-news-angular-in-2025-307a

✨ Ультимативный гайд по Clean Architecture Если вы уже пересмотрели Иронию судьбы, Один дома и даже Ёлки по десятому кругу. Вот идеальный новогодний контент для тех, кто хочет разобраться, как строить чистую архитектуру и писать чистый код. Начните 2026-й правильно. Пока все доедают прошлогодний тазик оливье, вы наконец разберетесь, как писать код, за который не стыдно через год. Выжившим после 12 часового разбора HR сами будут звонить с офферами на позицию архитектора. 👉 https://www.youtube.com/watch?v=WlCDcr8JYFU

✨ Основы виртуальной памяти Надеюсь, ваш uptime в норме после новогоднего застолья? Если система еще пытается загрузиться, давайте немного разгоним нейроны. И разбираемся, как на самом деле устроена виртуальная память и как ОС создает для каждого процесса иллюзию владения непрерывным адресным пространством. 👉 https://habr.com/ru/articles/981844/

✨ Как я полюбил вайбкодинг Специально для тех, кто весь 2025-й ставил клоунов 🤡 и какашки 💩 под каждый пост про ИИ. Нашел доклад, который идеально подойдет именно вам. Сергей Вахрамов (Tech lead с 7+ годами опыта на Angular и организатор сообщества UfaJS) честно рассказывает, как сам начинал с ненависти к вайбкодингу, а потом за 1,5 недели закрывал MVP, на который по оценкам должно было уйти 3 недели. Коротко, что внутри: Разница между ассистентами и агентами Как писать промпты, чтобы даже слабая модель не косячила MCP-серверы против галлюцинаций Лайфхаки для новичков Посмотрите, вдруг в 2026-м перестанете ставить какашки и сами начнете кодить с нейронками в 2 раза быстрее? 😉 Всех с наступающим Новым годом! 🎄 Желаю, чтобы в 2026-м код писался легко, баги фиксились сами, а офферы в личку сыпались чаще, чем спам. 👉 https://www.youtube.com/watch?v=fQSs5HCPqYE

✨ Создание идеальной кнопки Александр Инкин выступил на Angular TLV с докладом о том, как создавать гибкие и мощного UI-элементы. Если вам интересно посмотреть про то, как устроена Taiga UI, взглянуть на смесь хост-директив, Dependency Injection и других подходов, которые разрабатывались годами, то крайне рекомендуем уделить время этому разбору. Маст хэв для тех, кто разрабатывает UI-киты или хочет глубже понять возможности современного Angular. P.S. Забавно, что организаторы залили видео в раздел для детей. Видимо, DI и хост-директивы теперь входят в обязательную программу детского сада. 👉 https://www.youtube.com/watch?v=vc5sYiWK7aE