🚀 Angular 22

Продолжаем тему Angular 22. Если в прошлой статье прошли по официальным новостям, то теперь разбор от Манфреда Штайера с примерами кода и практическими деталями.

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

👉 https://www.angulararchitects.io/en/blog/angular-22-the-most-important-new-features-at-a-glance/

✨ Прошел 15 собесов за месяц

Месяц назад автор статье уволился из аутсорса и думал, что найдет работу за пару недель. Вышло по-другому.

Сухая статистика:
15 собеседований за 28 дней
1 нормальный фидбек из 15
6 компаний просто пропали
4 оффера, 1 принял
Примерно 37 часов потрачено на собесы + тестовые

Паттерны по размеру компаний:
🚀 Стартапы до 30 человек: 1-2 созвона, решение за день.
🏢 100-500 человек: 3-4 этапа, 2-3 часа, решение за 1-2 недели.
🏦 Крупные банки: 4-5 этапов, 3-5 часов, решение 2-6 недель.
🏛 Гос через подрядчиков: резюме исчезает в черной дыре.

Главный инсайт:
Перед собесом подготовьте свой GitHub и не тратьте больше 4 часов на тестовое. Если не ответили через неделю, считайте отказом.

Также у нас есть профильный чат для поиска работы и людей @angular_jobs

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

🔥 Как я сжёг 17,4 миллиарда токенов за 25 дней.

Как один человек за месяц закрыл работу целой команды и не получил ни одного бана от Anthropic?

Механика этого эксперимента:
Автор использует 10 агентов: 1 оркестратора (он решает, кого звать на конкретную правку), и 9 профильных ревьюеров (Frontend, Backend, QA, DevOps, Security, Billing, Architect и др.). Они проверяют новый код под разными углами, пока не останется ни одного блокера.

97% токенов, чтение из кэша. Основные затраты идут на многократное перечитывание контекста для проверок. Без настройки кэширования счет перевалил бы за $250k. Но в итоге составил $200, за подписку.

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

Писать код больше не главный навык. Ценность инженера сместилась с генерации на верификацию и оркестрацию.

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

✨ Многофункциональные списки ng-virtual-list как замена стандартным

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

Автор open-source библиотеки ng-virtual-list рассказал, как создавал универсальный инструмент для визуализации списков, который умеет гораздо больше, чем просто отрисовывать элементы.

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

✨ WebMCP. Что скрывается за черновиком стандарта

В Angular недавно добавили экспериментальную поддержку WebMCP. И это отличный повод разобраться в новом стандарте, который способен перевернуть привычный нам веб.

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

WebMCP предлагает сайту самому объявить свои возможности через простой API. Агент получает машиночитаемый контракт и напрямую вызывает нужную функцию. Быстро и эффективно.

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

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

✨ Использование Blob API

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

В статье разбираем, как Blob API помогает решать такие задачи правильно.

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

✨ Как работала самая первая нейросеть в истории?

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

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

👉 https://habr.com/ru/companies/kemp_ai/articles/1035312/

✨ Как один человек в 1965-м добавил null

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

В 1965 году он проектировал систему типов для ALGOL W и добавил в нее null-ссылку просто потому, что это было легко реализовать. И позже назовет это решение ошибкой на миллиард долларов.

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

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

Главный урок этой истории в опасности иллюзии простых решений.

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

✨ Новый Angular UI Kit

Это не очередная обертка над Angular Material, а свежая модульная библиотека компонентов, вдохновленная принципами Material Design 3.

Главные фишки:
🧩 29 компонентов уже доступны (от кнопок и карточек до диалогов и date/time пикеров). Отдельные точки входа для каждого компонента. Импортируйте только то, что используете.
⚡️ Современный стек (Standalone, Signals и Zoneless).
🧱 Вдохновлены Material Design, но не зависят от Angular Material.
🎨 Настраиваемые темы и дизайн-токены на базе M3
🧪 Покрыто тестами на Vitest

👉 https://github.com/ngguide/ui

✨ Understand Anything

Зашли в легаси-проект на кучу строк кода и не знаете, с чего начать? Хватит читать код вслепую!

Встречайте Understand Anything - инструмент, который превращает код в интерактивный граф знаний.

Что он умеет:
Визуальный граф. Каждый файл, функция и класс кликабельный узел. Можно масштабировать, искать и исследовать связи.

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

Семантический поиск. Спросите “какие части отвечают за авторизацию?” и получите релевантные узлы графа.

Визуализация слоев. Автоматическая группировка по архитектурным слоям (API, Service, Data, UI, Utility и т.д.).

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

Посмотреть демо можно здесь.

👉 https://github.com/Egonex-AI/Understand-Anything

✨ Вышел TypeScript 7.0 RC

Команда TypeScript выпустила релиз-кандидат версии 7.0.

Что нового:
⚙️ Гибкий параллелизм: Парсинг и чек типов теперь идут параллельно. Добавлены флаги --checkers (по умолчанию 4 потока для проверки типов) и --builders (для сборки монорепозиториев). Для отладки есть флаг --singleThreaded.

👀 Улучшенный --watch режим: Старый вотчер заменили на Go-порт от Parcel (который годами использовался в VS Code).

🤝 Совместимость: Логика проверки типов идентична TS 6.0.

⚠️ Новые дефолты: Подтянуты строгие дефолты из 6.0 (strict: true, module: esnext и т.д.) и удалено легаси.

🎨 Адекватная работа с Unicode: Эмодзи больше не разбиваются при выведении типов.

🧹 Чистка JS/JSDoc: Поддержка JavaScript-файлов переосмыслена.

💻 Редакторы: Официальный экстеншен TypeScript Native Preview для VS Code работает поверх LSP, использует многопоточность и, по статистике, выдает в 20 раз меньше ошибок чем 6.0.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-7-0-rc/

✨ Вопросы на собеседование

Если вы готовитесь к смене работы или просто хотите прокачать скиллы, ловите подборку вопросов по рефакторингу TypeScript.

В статье разобрали типичные вопросы про рефакторинг: от as const satisfies до того, как шаблонные строковые типы спасают от опечаток в API.

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

✨ Как Angular v22 решил проблему дублирующихся host directives

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

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

Теперь Angular умеет дедуплицировать такие директивы, создает единственный экземпляр и объединяет публичный API.

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

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

✨ Как я перешёл с React на Angular и не пожалел

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

Илья Королёв рассказал о своем опыте перехода на новый стек, первых неделях работы с непривычной архитектурой, RxJS, сервисами и dependency injection, а также о том, почему Angular оказался гораздо логичнее и удобнее, чем он ожидал.

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

👉 https://habr.com/ru/companies/centicore_group/articles/1048598/

✨ Странный театр технического найма

Современные технические собеседования часто превращаются в странные представления. Нередко сеньора с 20+ летним опытом оценивают по скорости решения алгоритмических задач в вакууме.

И проблема не в том, что интервью сложные, а в том, что они сложные не в том, что важно.

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

👉 https://www.angularspace.com/the-strange-theatre-of-technical-hiring/

✨ Vibecode по дешевке

Недавно Anthropic одним решением отключила Fable 5 для большинства пользователей. И это хороший повод задуматься, насколько безопасно строить свой рабочий процесс вокруг облачной модели, доступ к которой в любой момент может исчезнуть?

В статье рассказывается, как собрать свой сервер по цене смартфона, который запускает Qwen Code локально, ни от кого не зависит и способен выдавать до 85 токенов в секунду.

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

✨ Разбираемся в A2UI

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

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

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

👉 https://blog.angular.dev/demystifying-a2ui-how-to-make-ai-agents-speak-ui-in-your-app-e1ffea2303bd

✨ Эволюция сложных форм

Помните недавний пост про переход с React на Angular? В самом тексте статьи слегка резануло использование старых подходов. Да и в комментариях метко подметили: “Я как будто прочитал статью из 2020. Ни одной свежей фичи…”.

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

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

Статья была опубликована около месяца назад, и за это время Signal Forms перестали быть экспериментальными. Заодно в релизе слегка изменился API, так что примеры из статьи местами устарели (и за актуальным состоянием лучше обратиться к документации), например, директива в шаблоне теперь называется formField вместо field.

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

✨ State Management в Angular 19+

Раньше выбор стоял между четырьмя подходами. Простое решение на Service + BehaviorSubject, мощный, но громоздкий NgRx, более легкая NGXS и Akita которая, впрочем, уже мертва, репозиторий заархивирован, а ее преемник Elf разделил ту же судьбу.

В статье автор разобрал сильные и слабые стороны каждого подхода и объяснил, почему NgRx Signal Store стал главным кандидатом для новых проектов.

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

✨ Компиляция Angular, проверка типов и узкие места сборки

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

Брэндон Робертс протестировал билд большого проекта четырьмя разными пайплайнами, от легаси Webpack до экспериментального компилятора на Rust, и выяснил, что главным бутылочным горлышком является строгая проверка типов.

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

Но в будущем переход TypeScript на Go сможет кардинально срезать время тайпчекинга, а значит, и сборки больших проектов.

👉 https://dev.to/brandontroberts/angular-compilation-type-checking-and-build-bottlenecks-4n2f

✨ Passkey без Apple, Google и облаков

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

В то же время техногиганты активно навязывают облачные Passkey, намертво привязывая нас к своим экосистемам.

На помощь приходит open-source проект Pico Keys, позволяющий превратить дешевый микроконтроллер в персональный аппаратный ключ. Достаточно взять плату на базе чипа RP2350 или ESP32-S3, которая обойдется в копейки, и прошить самостоятельно.

👉 https://habr.com/ru/companies/ru_mts/articles/1053522/