Первый взгляд: Angular Ivy

Что такое Angular Ivy? Узнайте, как работает этот новый движок рендеринга для Angular, как вы можете быть в курсе последних событий, когда он развивается, и что это значит для вас.

  • Просмотров |

Что такое Angular Ivy? Узнайте, как работает этот новый движок рендеринга для Angular, как вы можете быть в курсе последних событий, когда он развивается, и что это значит для вас.

Если вы находитесь в Угловом мире, возможно, вы слышали это модное словечко «Айви(Ivy)». Но что такое Плющ? Это растение, которого вы хотите избежать? Злодей комиксов? Группа колледжей? Нет, не в этом случае. Ivy — это новый конвейер рендеринга Angular и механизм просмотра. Мишко Хевери и Кара Эриксон впервые посмотрели на Айви в лейбле ng-conf 2018 day 1. В этой статье мы рассмотрим, что такое Айви, как это работает и как вы можете быть в курсе его прогресса.

Просто предостережение: Ivy (Айви) все еще находится на ранних стадиях активного развития, поэтому эта статья может быть изменена. Ладно, давайте займемся этим!

Что такого хорошего в Ivy

Итак, Ivy — это новый конвейер рендеринга Angular и механизм просмотра. Что это значит? Проще говоря, движок Angular’s рассматривает шаблоны и компоненты, которые мы написали, и переводит их в обычные HTML и JavaScript, которые браузер может читать и отображать. Это означает, например, что ваши шаблонные переменные и привязки данных отображаются на странице с правильными данными.

Айви станет третьим воплощением этого двигателя для Angular 2+. Во-первых, был исходный компилятор (который не назывался механизмом просмотра). Затем, для версии 4, команда представила механизм просмотра, называемый «renderer2». Ivy (Айви) идет по очереди. Плющ будет меньше, быстрее и проще. На самом деле, ранние демоверсии Роба Вормальда и Игоря Минара из приложения «Hello, World» невероятно малы 3.2KB!

Angular Ivy

Вы можете проверить код для этой демонстрации здесь.

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

Местонахождение

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

Местность означает несколько преимуществ. В дополнение к более быстрой компиляции и отсутствию шага metadata.json этот упрощенный процесс означает, что создатели библиотеки смогут отправлять код AoT (заранее записанный скомпилированный) через npm. По существу, у нас будет эквивалентность между AoT и JIT (как раз вовремя). Это отличная новость для разработчиков. Одним из ранних разочарований в компиляторе и рендерере AoT было то, что часто код шаблона, который работал в JIT, не собирался с AoT.

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

Дерево-встряхивания

Ivy был спроектирован с самого начала с древовидным взором. «Встряхивание деревьев» означает удаление неиспользуемых фрагментов кода, что приводит к меньшим связям и более быстрому времени загрузки.

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

import { myCoolFunction } from './other';

const myCondition = false;

if (myCondition) {
  myCoolFunction(); // this will still be included
}

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

Проще говоря: Ivy уверяет, что если вы не используете что-то в Angular, оно не включается.

Дрожащие функции Angular включают:

  • Синтаксис шаблона
  • Внедрение зависимости
  • Контентный прогноз
  • Структурные директивы
  • Перехватчики жизненного цикла
  • Pipes
  • Запросы (Queries)
  • Слушатели (Listeners)

Вы можете понять, почему эта демонстрация «Hello World» настолько сумасшедшая — ей нужна только крошечная часть функциональных возможностей Angular’s!

Что значит Ivy (Айви) для тебя

Местность и дрожание деревьев — это полные игровые смены. Когда мы объединим два, мы получим:

  • Малые сборки (Smaller builds)
  • Более быстрое время восстановления (Faster rebuild times)
  • Более быстрое развитие (Faster development)
  • A simpler, more hackable pipeline
  • Human readable code

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

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

Обычно рендеринг не влияет на повседневную разработку. Тем не менее, для тех из нас, кто живет в реальном мире, у нас была своя доля разочарований с компилятором AoT при переходе от разработки к производству. Ivy намерена значительно улучшить наш опыт разработки, удалив большую часть «черного ящика» процесса рендеринга. Потрясающие!

Попробуй сам

Если у вас есть зуд, чтобы ткнуться в какой-нибудь примерный код, вы можете взглянуть на приложение todo, которое Kara продемонстрировала в ng-conf. Справедливое предупреждение: все это очень экспериментально и кровоточит!

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

Затем, клонируйте Angular repo:

git clone https://github.com/angular/angular.git

Open up a terminal inside of that directory and navigate to the todo app code:

cd packages/core/test/bundling/todo

Run these two commands to install the dependencies and run the development server:

bazel run @yarn//:yarn

bazel run //packages/core/test/bundling/todo:devserver

Вы также можете запустить эту последнюю команду с помощью : prodserver, чтобы увидеть сборку.

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

Angular Ivy
Как оставаться в курсе событий

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

Miško показал это слайд дорожной карты Ivy на ng-conf 2018 («сегодня» означало 18 апреля 2018 года):

Angular Ivy

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

Until Google’s done testing Ivy, it can be tested via the enableIvy: true flag of angularCompilerOptions.

Чтобы следить за прогрессом Айви, вы можете проверить этот документ GitHub и посмотреть эту проблему GitHub. Или, если это вас не устраивает, член сообщества Oussama Ben Brahim создал приложение Firebase под названием Is Ivy Ready, которое обеспечивает прекрасный небольшой пользовательский интерфейс для этой цели. Дорога, Уусама!

Где узнать больше

Вот еще несколько ресурсов, чтобы узнать больше о плющах и тройных провайдерах:

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля