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

✨ История одного бага Редкие баги, которые воспроизводятся раз в сто попыток — настоящая головная боль. Они появляются в самый неподходящий момент, исчезают при попытке показать коллегам и возвращаются снова, когда код уже попал в продакшн. Ростислав Терехов рассказал историю о легаси проекте на Angular 11, в котором контент приложения иногда смещался влево за навигационную панель, и поделился подробным расследованием причин этой проблемы. 👉 https://habr.com/ru/articles/935972/

✨ Angular Signals + RxJS С появлением сигналов многие разработчики задаются вопросом: пора ли забыть про RxJS? Спойлер — нет! Сигналы и RxJS не конкуренты, а дополняющие друг друга инструменты. Читай статью, чтобы узнать, как правильно их сочетать и написать свой стейт-менеджер с красивым API. 👉 https://habr.com/ru/articles/935526/

✨ Что такое инкрементальная гидратация в Angular Инкрементная гидратация — это продвинутый подход, который позволяет оставлять части приложения дегидратированными и запускать их гидратацию по мере необходимости, улучшая производительность и пользовательский опыт. Она уменьшает размер начальных бандлов, сокращает First Input Delay (FID) и Cumulative Layout Shift (CLS). 👉 https://habr.com/ru/articles/933794/

✨ Как ИИ меняет разработку на Angular В интервью Даниэль Зогль, специалист по ИИ, рассказал, как БЯМ (Большая Языковая Модель) трансформирует работу с Angular. Он поделился своими мыслями о текущих инструментах, их достоинствах и недостатках. Отметил, что из-за частых обновлений Angular, БЯМ иногда генерирует устаревший код, однако это можно легко решить. 👉 https://www.angulararchitects.io/en/blog/interview-how-ai-is-transforming-angular-development-a-conversation-with-daniel/

✨ Почему стоит использовать Tagged Unions при разработке на TypeScript Сталкивались с ситуацией, когда TypeScript не может точно определить тип в объединении A | B? Это приводит к небезопасным проверкам и потенциальным багам. Tagged Unions (дискриминантное объединение) — добавляет уникальное свойство “тег” в каждый тип, позволяя компилятору безошибочно определять конкретный тип и гарантировать надежность. 👉 https://habr.com/ru/companies/megafon/articles/933752/

✨ Изучаем Go: руководство для JavaScript-разработчиков. Часть 1 Поскольку TypeScript переписывают на Go — это отличный повод присмотреться к этому языку. В Go ты столкнешься с компиляцией, статической типизацией, указателями и другими концепциями, которые отличают его от TypeScript. Однако автор подробно объясняет ключевые особенности, сравнивая их с аналогами, что делает переход более понятным. 👉 https://habr.com/ru/companies/timeweb/articles/933118/

✨ Анонс TypeScript 5.9 Что нового: - Упрощенный tsc --init с лаконичным tsconfig.json. - import defer для отложенного выполнения модулей и оптимизации производительности. - Опция --module node20. - Улучшенные подсказки в DOM API и настраиваемые ховер-тултипы. - Оптимизации, ускоряющие работу с большими проектами. 👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-9/

✨ Сам ты вайб-кодер Вайб-кодеры мыслят фичами и юзер-стори, их цель рабочий продукт. Разработчики же требуют от ИИ качественный код: без дублирования, по стандартам проекта. Проблемы? У вайб-кодеров — тех.долг, у разработчиков — ожидание идеального кода с первого промпта. Читай статью, чтобы разобраться в терминах. 👉 https://habr.com/ru/articles/920794/

✨ Сердце Фреймворка: Философия и Практика Dependency Injection в Angular Dependency Injection в Angular — это не просто механизм для получения сервисов. Это философия архитектуры, которая превращает хаотичные связи между компонентами в элегантную, предсказуемую систему. Статья раскрывает DI от основ инверсии контроля (IoC) до тонкостей иерархического инжектора. 👉 https://habr.com/ru/articles/931400/

✨ Вопросы на собеседование для Angular-сеньора Многие разработчики живут в «пузыре», годами решая однотипные задачи. Это создает иллюзию мастерства, которая рушится на первом же собеседовании с вопросами поглубже. Статья раскрывает, что быть Angular-сеньором — это не только про вызов API и отображение данных. Это про глубокое понимание фреймворка, умение решать сложные задачи и вести команду к результатам. 👉 https://www.angularspace.com/senior-angular-interview-questions/

✨ Как @empty в Angular упрощает работу с пустыми коллекциями С появлением нового control flow в Angular, блок @empty стал нативным решением для обработки пустых коллекций в цикле @for. Раньше приходилось писать отдельную проверку *ngIf="items.length === 0". Теперь же @empty становится частью цикла @for, делая шаблон понятнее. Внутрь него можно разместить любой контент: от простого текста «Ничего не найдено» до компонента с иконками и подсказками, что напрямую улучшает UX. 👉 https://habr.com/ru/articles/931634/

✨ 6 CSS-сниппетов, которые должен знать каждый фронтенд-разработчик в 2025 году В этом году веб становится еще более интерактивным. Теперь можно легко добавлять переходы между страницами, анимировать модальные окна, создавать сложные анимации и типизированные CSS-переменные. Все это с минимальным количеством кода. Читай статью, чтобы узнать, как внедрить эти техники в свои проекты и сделать интерфейсы живее. 👉 https://www.angularspace.com/6-css-snippets-every-front-end-developer-should-know-in-2025/

✨ Разработка браузерного расширения Хотите узнать, как превратить идею в расширение для Chrome Web Store и Firefox Add-ons? Автор статьи делится опытом разработки инструмента для поиска по закладкам и вкладкам — от прототипа до публикации за две недели. С помощью Quasar, Telegram Payments API и Litestar он сделал интерфейс, монетизацию и бэкенд, решив задачи с HTTPS, авторизацией через Telegram и требованиями Chrome. 👉 https://habr.com/ru/companies/ntechlab/articles/930732/

✨ Angular переходит с Rollup на Rolldown В Angular решили заменить rollup на rolldown для экспериментальной функции оптимизации чанков. Ожидается, что это изменение улучшит производительность. Спасибо Hey 👋, I'm Samvel 🦊 за новость. 👉 https://github.com/angular/angular-cli/pull/30765

✨ Angular 20.1: что нового? Angular 20.1 вышел с обновлениями, которые упрощают жизнь разработчикам и ускоряют работу приложений. В центре внимания — удобство кода, оптимизация запросов и улучшения в тестировании. Теперь в шаблонах поддерживаются новые операторы, NgOptimizedImage обзавелась параметром decoding, а в HttpResource добавили cache и priority для гибкости HTTP-запросов. Тестирование стало проще благодаря bindings. 👉 https://angular.love/angular-20-1-whats-new

✨ Простое введение в SVG SVG — это не очередной формат изображений, а мощная технология на основе XML. Главная фишка в том, что инлайновый SVG-код становится частью DOM, которым можно управлять с помощью CSS и JavaScript. Это позволяет стилизовать графику привычными CSS-свойствами и создавать сложные анимации. Читай статью, чтобы разобраться в основах и добавить мощный инструмент в свой арсенал. 👉 https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/

✨ Angular-компилятор Angular-компилятор преобразует ваши компоненты в легковесный, минифицированный JavaScript. В статье автор отключил оптимизацию, чтобы заглянуть в результаты компиляции и продемонстрировать, как исходный код превращается в набор инструкций для создания и обновления интерфейса. 👉 https://blog.angulartraining.com/the-angular-compiler-from-your-code-to-browser-code-9b20ac2cbac6

✨ Асинхронные редиректы в Angular 20 В Angular 20 появилась возможность делать редиректы асинхронно. Теперь RedirectFn может возвращать Observable или Promise. Это позволяет определять, куда перенаправить пользователя, на лету: по ответам API, проверкам прав, feature‑флагам, геолокации и другим условиям во время выполнения. 👉 https://netbasal.medium.com/angulars-new-asynchronous-redirects-334f144c3ed0

✨ Прощай, Zone.js: ускоряем Angular с Signal API и Zoneless-подходом Всем уже известно, что Angular делает шаг вперед, отказываясь от Zone.js в пользу Signal API. Оно дает точный контроль — обновляются только те части интерфейса, которые зависят от измененных данных. Например, в приложении с таблицей на 5000 строк время отрисовки сократилось на 10%, а с глубокой вложенностью компонентов до 85%. Хотите ускорить свои проекты? Читай статью и узнай, как Signal API меняет правила игры. 👉 https://habr.com/ru/companies/tbank/articles/928206/

✨ Async pipe нечистый Async Pipe упрощает работу с RxJS, автоматически отписываясь от потоков и обновляя UI. Однако за этой простотой скрываются неочевидные нюансы и подводные камни. Именно их и раскрывает в своей статье Максим Иванов, объясняя, почему этот пайп на самом деле “нечистый”. 👉 https://habr.com/ru/articles/889990/