100% Ivy, улучшенный API компонентов, отсутствие поддержки IE11 и многое другое

Новый выпуск популярного веб-фреймворка Google на основе TypeScript доступен с 3 ноября 2020 года.

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

Table of Contents
Goodbye View Engine — 100% Ivy
Ergonomic APIs
No More Support for IE11
Update of Component API
Improved Debugging and Test Times
New Type for Forms
Router
Accessibility (A11y)
Other Changes
Final Thought

Прощай, View Engine — 100% Ivy

Angular представил свой конвейер компиляции и рендеринга Ivy следующего поколения, начиная с версии 8. Angular 9 использовал Ivy по умолчанию, сохраняя при этом поддержку предшествующего компилятора и среды выполнения View Engine.

Новая версия фреймворка теперь на 100 процентов Ivy.

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

Ivy компилирует отдельные компоненты более независимо друг от друга, что сокращает время разработки. Использование ngcc (Компилятор совместимости с Angular) больше не требуется для библиотек, созданных с помощью последней версии APF. Это ускорит выполнение для разработчиков библиотек.

Эргономичные API

Время загрузки в Angular 13 сокращается с помощью эргономичных API-интерфейсов для разделения кода и детальной разбивки кода на уровне компонентов.

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

ESBuild также поддерживает другие языки фреймворка, такие как Elm, Svelte и Vue.

Больше нет поддержки IE11

Чтобы воспользоваться собственными веб-API и современными функциями браузера, такими как веб-анимация и переменные CSS, команда Angular удалила поддержку Internet Explorer 11.

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

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

Обновление API компонентов

Теперь вы можете создавать динамические компоненты с меньшим количеством шаблонного кода благодаря усовершенствованию ViewContainerRef.createComponent API.

Вот старый способ создания динамического компонента:

А с Angular 13 нет необходимости использовать ComponentFactoryResolver:

Улучшенное время отладки и тестирования

TestBed — это основной API модульных тестов для приложений и библиотек Angular.

Чтобы сократить время тестирования в TestBed, новая версия выпущена с улучшенным тестовым API. Фреймворк теперь может настраивать и отключать тестовую среду и автоматически изучать DOM после каждого запуска теста. Это приводит к более быстрым, менее требовательным к памяти и лучше изолированным тестам.

Новый тип для форм

В Angular 13 появился новый тип форм — FormControlStatus. Это объединение всех возможных строк состояния для элементов управления формы:

  • Тип AbstractControl.status, например, теперь FormControlStatus вместо string.
  • И тип StatusChanges - Observable<FormControlStatus> вместо Observable<any>.

Маршрутизатор

  • Существует улучшение для маршрутизатора, так что он не заменяет URL-адрес браузера, когда новая навигация отменяет текущую навигацию.
  • Есть предложение исправить некорректный парсинг для навигации. Это происходит, когда сериализатор URL-адресов по умолчанию отбрасывает все после этого, как вопросительный знак в параметрах запроса: /users?start=1?&pages=15
  • Вы можете добавить отсутствующие выходные события в RouterOutletContract, что полезно, когда федерация модулей динамически визуализирует компоненты в какой-то момент в будущем.

Доступность (A11y)

В Angular Material улучшена доступность (A11y): все компоненты дизайна материалов (MDC) были проверены на предмет лучшей доступности.

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

Другие изменения

  • Ядро фреймворка теперь поддерживает TypeScript версии 4.4.
  • Добавлена ​​поддержка 7 версии библиотеки реактивного программирования RxJs (Reactive Extensions for JavaScript).
  • Встраивание шрифтов ускоряет First Contentful Paint (FCP), что может повысить производительность сети. Вот почему команда ввела поддержку встроенных шрифтов Adobe так же, как они сделали это для встроенных шрифтов Google в Angular 11.
  • Мы можем отключить или включить встроенные валидаторы, такие как min, max и minLength, динамически.
  • Мы можем установить пользовательские условия в ng_package.
  • Улучшено отображение сообщений об ошибках, таких как ошибка отсутствует триггер анимации для платформы-браузера.
  • Очистите кеш service worker в безопасности worker. Это гарантирует, что сломанный или устаревший контент не будет обслуживаться в будущих запросах.
  • Улучшение API локализации. Вы можете проверить документацию для $localize.

Последние мысли

В новом выпуске фреймворка Angular появились интересные функции. Если ваши требования не зависят от Internet Explorer 11, у вас есть возможность упростить обновление до Angular 13, запустив ng update в своем проекте.

Вы можете найти код новой версии на GitHub и в блоге, анонсирующем полную информацию о выпуске, здесь:



Angular v13 теперь доступен
Мы вернулись с новой версией Angular v13, чтобы поделиться со всеми вами! В этом последнем выпуске представлены всевозможные…blog.angular.io



В будущем возможно, что NgModules станет необязательным, так как для него есть RFC (Request For Comment) предложение на GitHub. Такое изменение позволит разработчикам создавать независимые компоненты и реализовать альтернативный API для объявления области компиляции.

Хотите связаться с автором?

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