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

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

Помните лет 20 назад был комикс, на котором оратор спрашивал у людей “Кто может починить интернет без google и stackoverflow”? Помогите найти.

✨ TypeScript WTF Думаешь, что знаешь TypeScript? А вот и нет! Оказывается, даже опытные разработчики регулярно натыкаются на поведение, которое заставляет воскликнуть "WTF?!" или по-русски "Какого...?!" Читай полную статью с разбором 5 самых неожиданных особенностей TypeScript и сохрани себе, чтобы не попасться на эти грабли в продакшене! 👉 https://habr.com/ru/articles/927182/

✨ От Аристотеля до Тьюринга: что такое функциональное программирование Пока одни разработчики спорят “ФП vs ООП”, другие уже понимают: функциональное программирование — это не модная парадигма, а мощный инструмент, корни которого уходят к Аристотелю и теории категорий. В статье тимлид Avito Марат Зимнуров раскрывает суть ФП: от математических основ (теория категорий, функторы, монады) до практических примеров. 👉 https://habr.com/ru/companies/avito/articles/926544/

✨ Экстремально большие списки Обычные списки в рендерят все элементы в DOM, даже те, что не видны пользователю. Представьте список из миллиона записей — браузер просто встанет. Но есть элегантное решение: виртуализированные списки. Концепция проста: рендерим только элементы во вьюпорте + буферная зона. В DOM всегда остается фиксированное количество элементов, а производительность не страдает даже на 100k записей. 👉 https://habr.com/ru/articles/923120/

✨ Angular без @angular/animations Мы уже писали, что команда Angular рекомендует отказаться от использования @angular/animations и вместо него перейти на CSS-анимации. Это логично: пакет весит 60 кБ, а современным браузерам он уже не нужен. Но есть одно но: как анимировать удаление элементов из DOM, если Angular пока не поддерживает состояние :leave без этого пакета? Хорошая новость в том, что в Taiga UI эту проблему уже решили. Давайте посмотрим, как это реализовано. 👉 https://www.angularspace.com/how-to-get-rid-of-angular-animations-right-now/

✨ Введение в WebRTC WebRTC — это технология, которая позволяет браузерам и мобильным приложениям обмениваться аудио и видео в реальном времени. Это идеальное решение для видеозвонков, стриминга и аудиосвязи. Хочешь разобраться в деталях, посмотреть примеры кода и понять, как правильно его настроить для стабильного соединения? Читай статью и делись с друзьями. 👉 https://habr.com/ru/articles/925644/

✨ Animation In and Out Команда Angular планирует отказаться от пакета @angular/animations. Причина — современные возможности CSS делают его устаревшим, а сам пакет тормозит развитие: он тяжелый, не использует аппаратное ускорение и ограничивает разработчиков. На смену придут новые функции animate.in и animate.out, которые упрощают работу с CSS-анимациями и сторонними библиотеками вроде GSAP и Anime.js. Также команда подготовила руководство по миграции, где пошагово показано, как перейти с @angular/animations на нативные CSS-анимации. 👉 https://github.com/angular/angular/discussions/62212

✨ Spot the F-ups: Story Points, Days, and Planning Нереалистичные оценки и микроменеджмент приводят к бесконечному кругу хаоса: завышенные ожидания -> стресс -> грязный код -> баги -> пропущенные сроки. Когда все, что действительно важно, это результат, сделанные фичи, а не часы в трекере. Даниэль Глейзнер поделился своим подходом к планированию IT-проектов: как избегать типичных ошибок, выстраивать доверие в команде, выбирать релевантные метрики и не дать нереалистичным ожиданиям сорвать работу. 👉 https://www.angularspace.com/spot-the-f-ups-story-points-days-and-planning/

✨ Скрытые части Angular: ViewProviders Не для кого не секрет, что Angular — это мощный и многофункциональный фреймворк, предоставляющий разработчикам огромный спектр возможностей. В этой статье рассматривается одна из его скрытых особенностей, viewProviders. Хотя она редко используется в повседневной разработке, понимание ее принципов работы позволяет получить более тонкий контроль над архитектурой компонентов и областью действия сервисов. 👉 https://www.angularspace.com/hidden-parts-of-angular-view-providers/

✨ Angular теперь встроен в Chrome DevTools Команды Angular и Chrome объединили усилия, чтобы интегрировать Angular-специфичные данные в панель производительности Chrome DevTools. Теперь профилирование стало максимально наглядным. Данные о компонентах, хуках жизненного цикла, шаблонах и т.д. отображаются прямо в панели Performance, что упрощает диагностику узких мест и дает полноценный обзор производительности. 👉 https://blog.angular.dev/the-angular-custom-profiling-track-is-now-available-0f9d8d36218a

✨ Zoneless Angular Zone.js годами незаметно управлял обнаружением изменений в Angular, но скоро он будет заменен на Zoneless подход. Начиная с Angular 20, данный функционал больше не считается экспериментальным и официально переведен в стадию Developer Preview. В статье рассматриваются распространенные сценарии, сравнивается их поведение в режимах Zone.js и Zoneless, а также отмечаются возможные подводные камни. 👉 https://angularexperts.io/blog/zoneless-angular

✨ Все о DDD для фронтенд‑архитектур Масштабные фронтенд-приложения нередко превращаются в неуправляемых монстров. Код запутывается, добавление новых функций становится мучением, а поддержка превращается в кошмар для разработчиков. Заимствование подходов из Domain-Driven Design (DDD), может улучшить ситуацию. Ключевая идея статьи: вместо традиционного разделения на технические слои (компоненты, сервисы, утилиты), мы делим систему на бизнес‑ориентированные блоки. 👉 https://www.angulararchitects.io/en/blog/all-about-ddd-for-frontend-architectures-with-angular-co/

✨ Понимание Angular Deferrable Views Если вы пропустили появление Deferrable Views в Angular 17–18, сейчас отличная возможность наверстать упущенное. Deferrable Views представляют собой революционный подход к ленивой загрузке компонентов прямо в шаблонах. Больше никаких сложных манипуляций, теперь все реализуется элегантно и просто. 👉 https://www.angularspace.com/understanding-angular-deferrable-views/