✨ NG-BE 2024

Недавно прошла конференция NG-BE в Бельгии, и все записи теперь доступны онлайн.

В основном докладе Минко Гечев (Minko Gechev) поделился достижениями Angular за последние несколько лет и заглянул в будущее фреймворка.

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

👉 https://youtube.com/playlist?list=PL9pV_RwZceNg6bl_hBEgGevOP-QvLXHRt

✨ Анонс NgRx 19

Библиотека NgRx Signals, впервые представленная в версии 18, была разработана с нуля на основе Angular Signals.

В этом выпуске она получила обновления и улучшения, направленные на повышение удобства работы разработчиков. Полный список изменений доступен в репозитории на GitHub.

👉 https://dev.to/ngrx/announcing-ngrx-19-ngrx-signals-features-action-signals-and-more-2b35

✨ Использование Resource API с NgRx SignalStore

В новом релизе NgRx представил функцию withProps, которая позволяет добавлять произвольные свойства в стор.

Эта статья показывает, как использовать withProps для работы с Resource API внутри SignalStore.

👉 https://www.angulararchitects.io/en/blog/using-the-resource-api-with-the-ngrx-signal-store/

✨ Основные способы взаимодействия компонентов

В Angular существует множество методов взаимодействия между компонентами.

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

👉 https://www.angularspace.com/mastering-component-communication-in-angular/

✨ State of JS 2024

State of JS был создан для выявления новых тенденций в экосистеме веба, чтобы помочь разработчикам принимать технологические решения.

В этом году он проводился с 13 ноября по 10 декабря и собрал 14015 ответов.

👉 https://2024.stateofjs.com/en-US/

✨ Новый стиль написания кода

Если вы интересуетесь современными подходами к разработке на Angular.

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

👉 https://angularexperts.io/blog/new-angular-coding-style

✨ Интеграция CSS-фреймворков в Angular

При интеграции CSS-фреймворков в Angular могут возникнуть трудности, связанные с инкапсуляцией стилей, динамическим изменением классов и использованием JavaScript-компонентов.

Статья подробно объясняет причины этих сложностей и дает рекомендации, как правильно интегрировать CSS-фреймворки в Angular.

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

✨ 5 CSS-сниппетов, которые должен знать каждый front-end разработчик в 2024 году

Если вы пропустили все последние новшества в CSS, то самое время наверстать упущенное.

В статье представлены пять мощных CSS-инструментов, которые уже доступны для использования.

👉 https://www.angularspace.com/5-css-snippets-every-front-end-developer-should-know-in-2024/

✨ Создание приложения для перевода

Перевод контента в интернете традиционно требует использования серверной инфраструктуры. Однако с недавнего времени в Chrome стала доступна локальная языковая модель (LLM), которая позволяет использовать Translator API.

Это открывает возможность создавать приложения для перевода без настройки серверной части и дополнительных затрат на использование LLM.

👉 https://dev.to/railsstudent/build-a-translation-app-with-chrome-built-in-ai-in-angular-5636

✨ Что такое реактивное программирование?

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

Эта статья станет вашим первым шагом в мир реактивного программирования, предоставляя понятное и доступное введение для начинающих.

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

✨ Прототип форм на основе сигналов

Формы являются центральной частью многих Angular приложений, и официальное решение на основе сигналов с нетерпением ожидается сообществом.

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

👉 https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental

✨ Type-level программирование в TypeScript

Основная идея type-level программирования — перенести часть логики в систему типов, используя такие механизмы, как Conditional Types, Mapped Types, Template Literal Types и т.д.

Статья раскрывает, как использовать возможности TypeScript для решения задач на этапе компиляции, опираясь на систему типов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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