Фреймворк Angular 19 уже запущен и, благодаря добавленным новым функциям, стал быстрее и проще в использовании. Эта версия знаменует собой значительный сдвиг в развитии фреймворка, в котором особое внимание уделяется производительности и удобству для разработчиков.
В течение последних двух лет команда Angular была сосредоточена на оптимизации фундаментальных аспектов фреймворка, отдавая приоритет трем основным областям: производительности на стороне сервера, системе реактивности и удобству разработки.
Наиболее заметными улучшениями в новой версии являются:
- новая форма инкрементальной гидратации, значительно повышающая производительность;
- стабилизация Signal API, представленных в предыдущих версиях;
- новые инструменты, повышающие гибкость и продуктивность разработки.
Существенные обновления также коснулись Angular Material и CDK (Component Development Kit). Речь идет о новом элементе выбора времени и значительных улучшениях в системе тематического оформления. Кроме того, были добавлены востребованные сообществом функции, такие как обнаружение неиспользуемых импортов в автономных компонентах и новый способ объявления локальных переменных в шаблонах.
Что касается автономных компонентов, то после того, как они стали опцией по умолчанию для новых проектов с предыдущей 18-й версии, более 90 % разработчиков уже используют их (согласно последнему опросу). Это свидетельствует о зрелости данной функциональности и ее широком признании сообществом.
Все изменения сопровождаются предоставлением новых инструментов для обновления кода в соответствии с последними рекомендуемыми практиками, включая обычные автоматические миграции для безопасного и постепенного внедрения новых API. Рассмотрим каждое из этих улучшений подробнее.
Повышение производительности
Скорость и производительность — важнейшие аспекты современной веб-разработки, и Angular 19 предлагает важные нововведения в этой области. Наиболее заметным из них является инкрементальная гидратация, которая позволяет загружать и активировать части приложения независимо друг от друга.
Инкрементальная гидратация
Представьте, что у вас есть страница сайта электронной коммерции с панелью фильтров, списком товаров и корзиной:
Благодаря инкрементальной гидратации, можно активировать каждый раздел только тогда, когда он необходим пользователю:
Чтобы включить эту функцию в приложении, нужно просто добавить:
Воспроизведение событий
Что произойдет, если пользователь нажмет на кнопку до того, как загрузится связанный с ней JavaScript? Angular 19 по умолчанию включает систему воспроизведения событий, которая фиксирует ранние взаимодействия и воспроизводит их, как только код становится доступным. Эта функция, проверенная миллиардами пользователей Google Search, теперь доступна для всех приложений Angular.
Управление рендерингом на основе маршрутов
Добавленная новая система позволяет контролировать отображение каждого маршрута в приложении. Вы можете решить, будет ли маршрут отображаться на сервере, клиенте или во время сборки:
Эта конфигурация обеспечивает точный контроль над рендерингом приложения, позволяя оптимизировать каждый маршрут в соответствии с его специфическими потребностями. Кроме того, она включает в себя элегантный способ разрешения динамических параметров во время предварительной компиляции, что особенно подходит для сайтов со статическим контентом, таких как блоги или документация.
Использование renderMode дает следующие преимущества:
- Повышение производительности: время загрузки приложения может быть оптимизировано за счет серверного рендеринга частей, требующих интенсивной обработки.
- Улучшение SEO: предварительный рендеринг маршрутов позволяет поисковым системам более эффективно индексировать контент приложения.
Все эти факторы повышения производительности позволяют создавать более быстрые и отзывчивые приложения, не жертвуя при этом характерным для Angular удобством разработки. Теперь перейдем к самой разработке.
Обновления системы реактивности
Система реактивности в Angular продолжает развиваться и совершенствоваться. В этой версии появились два новых интересных API, а также стабилизировались уже известные нам функции.
Состояние Signal API в Angular v19
Состояние Signal API в Angular v19 включает в себя как стабильные, так и экспериментальные функции.
Стабильные функции
- API ввода, вывода и запроса представления.
Доступны схемы миграции:
ng generate @angular/core:output-migration;
ng generate @angular/core:signal-input-migration;
ng generate @angular/core:signal-queries-migration.
Миграция «все в одном»: ng generate @angular/core:signals.
Примечание: входы Signal, в отличие от традиционных, доступны только для чтения.
Экспериментальные API
effect: время изменяется на основе отзывов разработчиков, остается в предварительной стадии рассмотрения разработчиками.
linkedSignal: добавлен в v19, создает записываемый сигнал, отслеживающий состояние верхнего уровня.
resource: интегрирует сигналы с асинхронными операциями, включает в себя функцию запроса, асинхронный загрузчик и экземпляр ресурса.
- Беззоновый Angular: демонстрирует многообещающие перспективы, но остается экспериментальным, ожидается переход к предварительной стадии рассмотрения разработчиками.
Если ключевые Signal API стабилизировались в v19, то такие функции, как effect, linkedSignal, resource и zoneless (беззоновый Angular), остаются на стадии предварительного рассмотрения или эксперимента. Будущие обновления Angular определят статус этих API.
API linkedSignal
Новый API linkedSignal решает распространенную проблему: наличие изменяемого состояния, которое зависит от другого состояния. Например, когда есть список опций и нужно поддерживать текущий выбор:
Этот API автоматически обрабатывает состояния нагрузки и ошибок и легко интегрируется с системой сигналов.
Стабилизация существующих API
Signal API для вводов, выходов и запросов, которые были введены в предыдущих версиях, теперь стабильны. Вы можете автоматически обновлять свой код, используя новые схемы:
И что самое приятное, теперь можно вносить эти обновления прямо из редактора кода, благодаря интеграции нового языкового сервиса. Система будет предлагать доступные улучшения по мере написания кода.
Эти усовершенствования системы реактивности делают код более предсказуемым и удобным для сопровождения, особенно при работе с асинхронными данными. Далее рассмотрим инструменты для еще более удобной разработки.
Улучшение опыта разработчиков
Angular 19 вносит важные изменения в инструменты разработки, которые сделают ваш повседневный труд более продуктивным.
Горячая замена модулей
Angular теперь включает HMR (Hot Module Replacement — горячая замена модулей) по умолчанию для стилей и экспериментально для шаблонов. Это означает, что изменения в коде мгновенно отражаются в браузере без потери состояния приложения:
Чтобы активировать HMR в шаблонах, используйте:
NG_HMR_TEMPLATES=1 ng serve
Обновления в Angular Material и CDK: за рамками Material 3
Angular Material — библиотека UI-компонентов, реализующая принципы Material Design от Google, а Component Dev Kit (CDK) предоставляет инструменты для создания пользовательских компонентов.
Angular Material и CDK в этой версии эволюционировали, улучшив API и функциональность. Вслед за выходом Material 3 с системой тематизации на основе миксинов в 19-й версии появились улучшенные API для тематизации и новые возможности CDK.
Одним из самых ожидаемых дополнений к Angular Material является новый компонент Time Picker. Эта функция, получившая на GitHub более 1300 лайков, отвечает реальным потребностям разработчиков. Компонент соответствует требованиям доступности и предоставляет интуитивно понятный интерфейс для выбора времени:
В Angular CDK была добавлена поддержка двунаправленного перетаскивания (bidirectional drag & drop) — довольно востребованная сообществом функция. Используя cdkDropListOrientation=”mixed", можно создавать интерфейсы, в которых элементы можно перетаскивать как по вертикали, так и по горизонтали, что позволяет разрабатывать более гибкие интерактивные интерфейсы:
Система тем Material 3 также была улучшена. Новый API тем позволяет более эффективно настраивать компоненты. Вместо использования нескольких миксинов для каждого компонента, теперь можно применить пользовательскую тему ко всему приложению с помощью одного миксина math.theme.
Кроме того, появился новый API для перезаписи стилей отдельных компонентов с помощью mat.sidenav-overrides, что позволяет изменять конкретные аспекты компонента, не затрагивая остальную часть темы.
Заключение
Помимо внедрения новых функций, в 19-й версии Angular сделан акцент на улучшении общего опыта разработчиков.
Angular Material и CDK предлагают новые инструменты для создания более привлекательных и интерактивных пользовательских интерфейсов, расширяя возможности дизайна и кастомизации.
Словом, Angular 19 продолжает прокладывать путь к созданию более интуитивных, эффективных и, главное, удобных для разработки веб-приложений, стремясь завоевать все большую популярность среди разработчиков.
Читайте также:
- Слоты: сделайте свой Angular API гибким
- Как дуэт Angular-Wiz поменяет правила игры
- Как оптимизировать приложения на Angular
Читайте нас в Telegram, VK и Дзен
Перевод статьи Luna Rojas: OK, Angular 19 is amazing…
