Angular 16 представляет новую модель реактивности

Angular 16, последняя итерация популярной платформы веб-разработки на основе TypeScript от Google, вышла в виде рабочей версии, демонстрируя новую модель реактивности, которая обещает значительные улучшения как в производительности, так и в опыте разработчиков.

Angular 16, опубликованный 3 мая, можно найти на GitHub с несколькими предварительными версиями для разработчиков, посвященными различным аспектам фреймворка. Новая модель реактивности обратно совместима и совместима с текущей системой, предлагая лучшую производительность во время выполнения за счет сокращения количества вычислений при отклонении изменений, — сказал Минко Гечев из команды Google Angular в своем блоге. Модель предлагает более простую ментальную модель для реактивности, проясняя, каковы зависимости от представления и потока данных через приложение. Детализированная реактивность позволяет проверять изменения только в затронутых компонентах.

Для рендеринга на стороне сервера Angular 16 включает предварительную версию полной неразрушающей гидратации приложения для разработчиков, благодаря чему Angular больше не выполняет повторный рендеринг приложения с нуля. Вместо этого платформа ищет существующие узлы DOM при построении внутренних структур данных и прикрепляет прослушиватели событий к этим узлам. Среди преимуществ — отсутствие мерцания контента на странице для пользователей, простая интеграция с существующими приложениями и ориентированная на будущее архитектура, обеспечивающая загрузку мелкозернистого кода с помощью примитивов, которые должны появиться позже в этом году.

В рамках выпуска Angular 16, ng add схемы для Angular Universal были обновлены, что позволяет разработчикам добавлять рендеринг на стороне сервера в проекты с использованием автономных API. Также была введена поддержка более строгой политики безопасности содержимого для встроенных стилей. Следующие шаги для гидратации и рендеринга на стороне сервера включают частичную гидратацию, которая включает в себя отсрочку загрузки JavaScript, который не является необходимым для страницы, и гидратацию связанных компонентов позже.

Также в Angular 16:

• Система сборки на основе esbuild также входит в предварительную версию для разработчиков, при этом ранние тесты показали улучшение на 72% в холодных производственных сборках.
• Библиотека Angular Signals позволяет разработчикам определять реактивные значения и выражать зависимости между ними.
• Разработчики смогут легко «поднимать» сигналы к наблюдаемым из @angular/core/rxjs-interopв предварительной версии для разработчиков как часть Angular 16.
• Новые проекты могут быть созданы как автономные с самого начала с помощью предварительного просмотра автономных схем для разработчиков.
• Вводится экспериментальная поддержка среды тестирования Jest.
• Разработчики могут указать nonce атрибут для стилей компонентов, встроенных в Angular.
• Самозакрывающиеся теги можно использовать для закрытия тегов компонентов в шаблонах Angular.
• Для маршрутизатора в Angular 16 добавлена ​​возможность привязки параметров маршрута к входным данным соответствующего компонента, чтобы улучшить взаимодействие с разработчиком.
• Поддерживается TypeScript 5.0, выделенный декораторами ECMAScript для расширения классов JavaScript.

Angular 16 следует за выпуском Angular 15, который был представлен как производственный выпуск в ноябре 2022 года. Angular 15 стабилизировал API-интерфейсы для создания приложений без использования NgModules.