Вступление

С выпуском Angular v6 команда angular представила множество важных функций и изменений. Среди них Айви вызвала много шума и привлекательности. Что такое Айви и какой в ​​этом слух? Ivy - это новый конвейер рендеринга и движок просмотра Angular. Теперь возникает вопрос, что делает движок просмотра? Механизм просмотра Angular берет созданные нами шаблоны и компоненты и переводит их в обычный HTML и JavaScript, который браузер может читать и отображать.

Ivy - это следующее поколение Angular Renderer. Он занимает третье место в строке после исходного компилятора (для Angular 2) и Renderer2 (для Angular 4 и выше). Миско Хевери и Кара Эриксон впервые представили нам Айви на ngConf-2018.

Здесь следует предостеречь - Ivy все еще находится в стадии бета-тестирования и еще не завершена. Так что по умолчанию его не будет в Angular v6, но его можно включить для экспериментов и тестирования, что обсуждается позже в блоге.

Ниже приведены вопросы, которые мы попытаемся разобраться в этом посте.

  • В чем особенности плюща?
  • Разница между Renderer2 и Ivy.
  • Как это работает.
  • Пробуем в простом проекте.

Функции

Итак, нам, должно быть, интересно, какие функции предлагает Ivy. Как сообщает команда angular, Ivy будет меньше, проще и быстрее. В демонстрации, показанной Misko на ngConf 2018, размер приложения Hello World составлял всего 3,2 КБ, что очень мало. Хотя после минификации + gzip получается 3,2 КБ.

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

Раньше, с предыдущим средством визуализации, код шаблона, который работал в JIT (как раз вовремя), не компилировался в AoT (опережая время). Поскольку локальность упростила процесс, это означает, что создатели библиотек смогут отправлять код AoT через реестр NPM, и у нас будет эквивалентность между AoT и JIT.

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

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

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

Итак, с Ivy у нас есть меньшие сборки, более быстрое время перестройки, более быстрая разработка, читаемый человеком код, простой для отладки код и более простой конвейер.

Сравнение Renderer 2 и Ivy

Renderer 2 - это движок просмотра для angular v4 и новее, он сильно отличается от Ivy способами компиляции и производительности. Ниже приведены основные различия между ними.

Конвейерная обработка:

Конвейер рендеринга Renderer2:

В настоящее время в конвейере Renderer2 написанный нами шаблон HTML проходит через компилятор Angular и генерирует высокооптимизированный код JS, представляющий структуру вашего шаблона. Во время выполнения эта структура данных передается интерпретатору Angular, который использует данные для определения того, как создать DOM.

Конвейер обработки плюща:

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

Нет metadata.json:

Renderer2 выполняет статический анализ всего кода и создает файл с именем metadata.json, который можно использовать для генерации инструкций по компиляции. Эти данные шаблона затем были отправлены интерпретатору Angular для преобразования во что-то читаемое DOM. Ivy сжимает эти шаги, а HTML-код шаблона превращается в инструкции, которые затем могут быть прочитаны DOM.

Встряхивание дерева:

Встряхивание дерева выполняется как Renderer2, так и Ivy. Но в некоторых случаях предположим, что мы импортировали функцию и скрыта каким-то ложным условием, но эта функция все равно будет включена в пакет, даже если она никогда не вызывалась для средства визуализации 2.

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

Удаление зависимости от платформы и браузера и значительное упрощение кода начальной загрузки:

Ivy просто встраивает DOM Renderer в его ядро. Если нам нужно только запустить наше приложение в браузере, мы можем запустить Angular без включения кода платформы.

Все приложения Angular должны настраивать компонент начальной загрузки и инициализировать один NgModule[Factory] , но они имеют упрощенный код начальной загрузки, и этот код основан на компоненте, а Ivy основан на начальной загрузке без NgModule.

Как работает Angular Ivy?

Теперь обсудим, как работает ivy, и процесс компиляции.

Angular представил две точки входа в компилятор, ngtsc и ngcc.

  • ngtsc: это будет преобразователь TypeScript в Javascript, который преобразует декораторы Angular в статические свойства. Это минимальная оболочка для tsc, которая включает в себя набор преобразований Angular. Примечание. Пока Ivy является экспериментальным, ngc работает как ngtsc, если для параметра angularCompilerOption enableIvy установлено значение true в файле tsconfig.json для проекта.
  • ngcc (компилятор совместимости с Ng): ngcc предназначен для обработки кода, поступающего из модулей NPM, и создания эквивалентной версии Ivy, как если бы код был скомпилирован с ngtsc. Он будет работать с заданным node_modules directory и набором пакетов для компиляции и создаст эквивалентный каталог, из которого могут быть прочитаны эквиваленты Ivy этих модулей. ngcc - это отдельная точка входа в сценарий @angular/compiler-cli.

Модель компиляции Ivy

В модели Ivy декораторы Angular (@Injectable и т. Д.) Компилируются в статические свойства классов (ngInjectableDef). Этот процесс происходит без полного анализа кода и в большинстве случаев только с декоратором. Здесь единственным исключением является @Component, который требует знания метаданных из @NgModule , который объявляет компонент, чтобы правильно сгенерировать ngComponentDef. Селекторы, применимые во время компиляции шаблона компонента, определяются модулем, который объявляет этот компонент.

Информация, необходимая для инверсии ссылок и проверки типов, включена в объявление типа ngComponentDef в .d.ts. Здесь Reference Inversion - это процесс определения списка компонентов, директив и каналов, от которых зависит декоратор (который компилируется), что позволяет полностью игнорировать модуль.

Это модель, по которой код Angular будет компилироваться, отправляться в NPM и в конечном итоге объединяться в приложения.

Например, следующее объявление класса:

Приведенный выше код будет выдан ngtsc следующим образом:

Пробуем Айви в образце проекта.

Ivy все еще находится на стадии бета-тестирования и еще не завершен, и до его готовности к производству еще далеко. Итак, пока мы попробуем Ivy с небольшим приложением.

Шаги:

1. Обновите angular-cli и nodeJs соответствующей совместимой версией, поддерживающей пакеты Angular 6.

2. Создайте проект с минимальным количеством файлов. Используйте команду: $ ng new ivy-demo –minimal

3. Добавьте enableIvy в src / tsconfig.app.json.

4. Удалите BrowserModule из AppModule и используйте загрузку без NgModule.

5. Упростите компонент приложения.

6. Добавьте скрипт ngc в package.json.

7. Установите target: es2016 в tsconfig.json.

8. Запустите ngc. Используйте команду- yarn ngc -p src / tsconfig.app.json

9. Выходы находятся в каталоге tsc-out.

10. Откройте tsc-out / app / src / app / app.component.js и там есть ngComponentDef и ngInjectorDef.

Здесь AppComponent.ngComponentDef и AppModule.ngInjectorDef - это определение компонента и инжектора с использованием API-интерфейсов Ivy, а функция шаблона генерируется из HTML-шаблона компонентов.

Ниже ссылка на github:

https://github.com/himanshu61/ivy-demo

Поскольку функция Ivy не завершена, мы можем узнать статус:



Отслеживайте статус Ivy, нового слоя рендеринга Angular
Отслеживайте статус Ivy, нового слоя рендеринга Angular is-angular-ivy-ready.firebaseapp .com



Одновременно опубликовано на https://blog.imaginea.com/ivy-a-look-at-the-new-render-engine-for-angular/