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

✨ Внутри процесса архитектурного аудита

Компании часто сталкиваются с архитектурным коллапсом: замедление разработки, циклические зависимости, хрупкие тесты, монолит, который никто не понимает. Но это не приговор.

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

👉 https://www.angulararchitects.io/en/blog/inside-the-architecture-review-process-a-consultants-guide-to-better-software/

✨ «Я делаю рефакторинг ежечасно» или как за пять минут улучшить приложение

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

Хотите узнать, как избавиться от спагетти-кода и не выгореть?

Читайте статью Константина Логиновских и берите на вооружение лайфхаки, которые можно использовать уже сегодня.

А чтобы углубить свои знания, рекомендуем книгу Мартина Фаулера «Рефакторинг кода на JavaScript».

👉 https://habr.com/ru/companies/cloud_ru/articles/877762/

✨ Миграция крупного Angular-приложения на Standalone

Можно ли превратить огромный Angular-проект из лабиринта модулей в чистый и современный код?

Армен Варданян доказал — ДА! Его HR-система с 1000+ компонентов и множеством зависимостей теперь работает в разы быстрее и чище. И все это — всего за несколько часов.

Не верите, что такое возможно? Читайте статью и убедитесь сами: ваш проект тоже заслуживает апгрейда.

👉 https://www.angularspace.com/migrating-a-large-angular-application-to-standalone/

✨ Введение в фикстуры Playwright

Устали от тонн моков и бесконечного дублирования в тестах? Знаете, что может сократить ваш код и сэкономить часы работы?

Фикстуры в Playwright — ваш секретный инструмент для чистых и эффективных тестов!

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

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

✨ Создание пользовательских операторов RxJs

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

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

👉 https://www.angularspace.com/create-custom-rxjs-operators/

✨ TypeScript 5.8: erasableSyntaxOnly флаг

В следующем релизе TypeScript, вероятно, появится новый флаг, который будет запрещать конструкции, которые не являются "стираемыми" (erasable), такие как перечисления (enums), пространства имен (namespaces) и т.д.

Это новшество может быть связано с тем, что в Node.js 23.6.0 недавно появилась поддержка TypeScript, которая не поддерживает такие конструкции.

👉 https://www.totaltypescript.com/erasable-syntax-only

✨ Гибкость и контроль над данными: применение моков в разработке

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

Для решения этой проблемы в статье предлагается использовать MSW (Mock Service Worker), который позволяет реализовать работу с HTTP API и WebSocket прямо внутри приложения.

👉 https://habr.com/ru/companies/ntechlab/articles/869790/

✨ Улучшаем производительность с помощью NgOptimizedImage

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

Это напрямую влияет на метрики:

Largest Contentful Paint (LCP) — время, за которое загружается самый крупный контент, например, баннер. Высокий LCP ухудшает SEO и раздражает пользователей.

First Contentful Paint (FCP) — момент появления первого элемента на экране. Медленный FCP создает ощущение "зависания" сайта.

Статья посвящена использованию директивы NgOptimizedImage для оптимизации загрузки изображений.

👉 https://www.angularspace.com/boost-your-apps-performance-with-ngoptimizedimage

✨ Сохранение состояния компонента при переходе по маршруту

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

Статья рассказывает о применении RouteReuseStrategy для сохранения состояния компонентов.

👉 https://dev.to/this-is-angular/angular-lab-preserving-component-state-across-route-transitions-3f7j

✨ Рецепты Typescript: выбор одного и только одного обязательного поля в объекте

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

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

Для разминки предлагаем подумать: как можно применить такой тип и при этом не нарушить лучшие практики?

👉 https://habr.com/ru/companies/cloud_ru/articles/868762/

✨ От налогового инспектора до ведущего инженера-программиста

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

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

👉 https://www.angularspace.com/from-a-tax-officer-to-a-lead-software-engineer/

✨ Как создавать промпты для AI

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

Никита Борисов предложил структурированный подход к созданию промптов, который включает: объяснение контекста проекта, определение роли и ответственности AI, установку четких критериев успеха, обозначение технических ограничений.

👉 https://vc.ru/ai/1759281-kak-sozdavat-prompty-dlya-ai-kotorye-vydayut-zhelaemyi-rezultat

✨ Динамическая инициализация сервисов

Иногда возникает ситуация, когда у вас есть несколько сервисов, каждый из которых имеет одинаковое имя метода, но разную реализацию, и вам нужно вызвать только один из этих сервисов в зависимости от условия.

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

👉 https://www.angularspace.com/dynamic-service-instantiation-in-angular-2/

✨ Визуализатор RxJS за 4 часа с помощью нейросети

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

Это открывает дорогу на рынок компаниям с ограниченным бюджетом, стимулируя конкуренцию.

С нетерпением ждем новых прорывов в сфере ИИ, а попробовать приложение можно здесь.

👉 https://www.angularspace.com/built-rxjs-visualizer-in-4-hours-with-ai-no-coding/

✨ Стратегия развития Angular в 2025 году

За последние два года команда Angular активно работала над улучшением опыта разработчиков и повышением производительности.

В 2025 году в центре внимания окажутся:

Переход на Zoneless: повышение эффективности обнаружения изменений и ускорение загрузки приложений.

Формы на основе сигналов: улучшение масштабируемости, типизации и унификации работы с формами.

Замена Karma: внедрение современного инструмента для тестирования.

👉 https://blog.angular.dev/angular-2025-strategy-9ca333dfc334

✨ Новые миграции для Signal Input

Signal inputs готовы к продакшену, и команда Angular представила новые инструменты миграции, которые помогут вам обновиться на новое API с использованием сигналов.

Больше информации можно найти в документации на angular.dev.

👉 https://blog.angular.dev/try-out-the-new-signal-input-migrations-80783969ac9d

✨ Как Angular синхронизирует UI

Обнаружение изменений в Angular — это ключевой процесс, обеспечивающий синхронизацию состояния приложения и пользовательского интерфейса. Благодаря этому механизму, изменения в данных автоматически отражаются в UI, поддерживая его актуальность.

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

👉 https://www.angularspace.com/how-angular-keeps-your-ui-in-sync/

✨ Performance и оптимизация TypeScript

В крупных проектах на TypeScript, можно столкнуться с проблемой производительности, из-за сложных рекурсивных типов, избыточных импортов, сложных generic-типов и т.д.

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

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

✨ Реактивное программирование в Angular

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

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

👉 https://www.angularspace.com/reactive-programming-in-angular-101/

✨ Nx и Angular с Rspack и Module Federation

С выпуском @ng-rsbuild/plugin-nx, созданного участником команды Nx, теперь появилась возможность собирать Angular-приложения с использованием rsbuild в рамках Nx.

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

👉 https://www.angulararchitects.io/en/blog/nx-with-rspack-and-module-federation/