Догоняем Angular 19

Angular 19 продолжает свой проект по упрощению и улучшению работы разработчиков, одновременно повышая производительность. Широко разрекламированное внимание команды разработчиков к этим целям принесло свои плоды в виде общего восприятия Angular как проекта, находящегося на подъеме. Последний опрос State of JavaScript показал значительный рост позитивного отношения разработчиков к Angular.

Сейчас самое время узнать, что нового появилось в этом динамичном фреймворке. Я расскажу о нескольких инновационных идеях и изменениях, появившихся в последнем выпуске. Также читайте мою недавнюю статью о сравнении Angular с React, Vue и Svelte.

Чем отличается Angular?

Angular - это полноценный, универсальный реактивный фреймворк для JavaScript. Он начинался как архитектонизированная система, которая развивалась в ответ на реальное использование и отзывы. В последнее время изменения были направлены на повышение удобства работы разработчиков и производительности. Этот последний релиз продолжает развитие, которое будет интересно как пользователям Angular, так и тем, кто интересуется Angular.

Инкрементное увлажнение

Инкрементная гидратация - это оптимизация производительности, которая появилась в предварительной версии Angular 19 для разработчиков. Гидратация - это процесс создания интерактивных компонентов в пользовательском интерфейсе. Это ключевой элемент оптимизации в современных приложениях, где важно найти баланс между рендерингом на стороне сервера (SSR) и рендерингом на стороне клиента.

Существует множество способов нарезать этот пирог, и инкрементное увлажнение Angular 19 передает власть в руки разработчика. Разработчики, использующие Angular 19, могут определить, как именно будет загружаться страница на клиенте после того, как она будет отрисована на стороне сервера.

Разработчики Angular используют директиву @defer, чтобы описать движку, как компонент должен быть интерактивным в браузере. Движок использует эти инструкции для загрузки необходимого JavaScript. Триггеры в аннотации @defer используются для тонкой настройки этого поведения.

Хотя @defer не является чем-то новым, в версии Angular 19 вы можете контролировать процесс гидратации приложения на основе каждого компонента.

Воспроизведение событий

В документах Angular 19 подробно рассматривается повтор событий, который представляет собой в значительной степени скрытый механизм, связанный с гидрацией. По сути, воспроизведение событий отвечает на вопрос: Если компонент загружается в браузер без интерактивности, а затем задействуется пользователем, как движок «воспроизведет» это событие после загрузки компонента?

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

Гранулярный контроль над серверными маршрутами

Angular добавляет ServerRoute, чтобы позволить пользователям тонко настраивать рендеринг маршрутов на стороне сервера. Angular присоединяется к другим полнофункциональным фреймворкам, предоставляя разработчикам больше возможностей для контроля над рендерингом маршрутов. По сути, новый ServerRoute позволяет вам, как разработчику приложения, контролировать отрисовку маршрутов на каждой странице. В Angular 19 у вас теперь есть три варианта:

• Рендеринг на сервере
• Рендеринг на клиенте
• Предварительный рендеринг на сервере

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

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

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

Факторинг Zone.js

Отказ от Zone.js был принят для упрощения внутреннего дизайна и производительности Angular. Zone.js использовался движком рендеринга на стороне сервера для определения момента завершения асинхронных операций на странице (таких как запросы к хранилищу данных и API, а также загрузка ресурсов для навигации). Они должны были быть завершены до того, как страница будет отмечена как готовая («стабильная») и отправлена клиенту. Большинство разработчиков, взаимодействовавших с Zone.js, делали это для отладки или оптимизации.

Angular 19 заменяет Zone.js на RxJS, который уже используется в Angular. RxJS упрощает зависимости для Angular, приводит этот аспект движка в соответствие с существующими идиомами фреймворка и облегчает разработчикам приложений перенос отладки в движок рендеринга.

Автономные компоненты теперь используются по умолчанию

В Angular 19 автономные компоненты (т. е. компоненты, определяемые без модуля) стали использоваться по умолчанию, хотя разработчики по-прежнему могут использовать модули. Компоненты без модулей были впервые представлены в Angular 17 и уже стали стандартом де-факто для разработчиков на практике. Поразительно, насколько легче становятся компоненты после отказа от модуля.

Входы, выходы и запросы к представлению на основе сигналов

Сигналы довольно популярны, поскольку обеспечивают тонкую, универсальную реактивность в простом синтаксисе JavaScript. Angular принял сигналы с самого начала, а Angular 19 закрепил их использование во входах (Angular'овская версия дочерних реквизитов), выходах (события от дочернего к родительскому) и запросах к представлению (прямой доступ к DOM, как React'овский useRef). Это упрощает и унифицирует реактивную идиому Angular, хотя во многих случаях разница едва заметна: просто дополнительный оператор точки или круглые скобки для Signals.

Angular 19 включает команды CLI, которые автоматически переведут ваше приложение на Signals. Команда Angular также интегрировала возможности автомиграции Signals в схемы IDE. Вы можете просто щелкнуть правой кнопкой мыши, чтобы получить контекстно-зависимый доступ к поддержке преобразования Signals. В тех случаях, когда код явно изменяет значения, вам все равно придется настраивать миграцию вручную, поскольку входные данные Signals неизменяемы.

Объявления переменных окружения командной строки

Каждый инструмент CLI должен иметь возможность указывать переменные окружения для команд. Angular 19 идет дальше, добавляя возможность указывать переменные окружения для команды сборки:

ng build --define «apiKey=„$API_KEY“»

Увлекательный проект

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

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