От автора: что такое Angular Ivy? Узнайте, как работает этот новый движок для Angular, как следить за его обновлением по мере разработки, а также что это значит для вас?
Если вы находитесь в мире, где осуществляется Angular разработка, вы можете услышать это модное словечко «Ivy». Но что такое Ivy? Это растение, на которое не хочется наткнуться? Злодей комиксов? Группа колледжей? Нет, не в этом случае. Ivy — это новый конвейер рендеринга Angular и механизм просмотра. Мишко Хевери и Кара Эриксон впервые представили Ivy в лейбле ng-conf 2018 day 1. В этой статье мы рассмотрим, что такое Ivy, как это работает и как следить за его прогрессом.
Просто предостережение: Ivy все еще находится на ранней стадии разработки, поэтому эта статья может быть изменена. Ладно, давайте займемся делом!
Что такого хорошего в Ivy
Итак, Ivy — это новый конвейер рендеринга Angular и механизм просмотра. Что это значит? Проще говоря, движок представления Angular принимает шаблоны и компоненты, которые мы написали, и переводит их в обычные HTML и JavaScript. Это означает, например, что ваши шаблонные переменные и привязки данных отображаются на странице с правильными данными.
Айви станет третьим воплощением этого двигателя для Angular 2+. Во-первых, был исходный компилятор (который не назывался механизмом просмотра). Затем, для версии 4, команда представила механизм просмотра, называемый «renderer2». Ivy идет следом. Ivy будет меньше, быстрее и проще. На самом деле, ранние демоверсии Роба Вормальда и Игоря Минара из приложения «Hello, World» невероятно малы 3.2KB!
Вы можете проверить код для этой демонстрации здесь.
Тема меньше, быстрее и проще не только для группировки размеров, но и для процесса компиляции. Это связано, главным образом, с двумя ключевыми понятиями: локальностью и дрожанием деревьев. Давайте рассмотрим их подробнее.
Локальность
Locality означает, что Ivy составляет один файл за раз. Он только смотрит на компонент и его шаблон, а не на его зависимости, при генерации вывода. Компиляция одного файла за раз будет означать меньшие наборы инструкций, и это также означает, что мы сможем делать инкрементные сборки. Renderer2 не смог этого сделать, потому что необходимо было провести статический анализ файла с именем metadata.json, который можно было бы использовать для генерации команд компиляции. Этот шаблон был переведен на французский язык DOM. Ivy сжимает эти шаги, а HTML-шаблон превращается в операторы, которые затем читаются DOM.
Локальность дает несколько преимуществ. В дополнение к более быстрой компиляции и отсутствию шага metadata.json, этот упрощенный процесс означает, что он сможет отправить код AoT (досрочно скомпилированный) через npm. По существу, у нас будет эквивалентность между AoT и JIT (как раз вовремя). Это отличная новость для разработчиков. Одно из ранних разочарований в компиляторе и рендерере AoT заключалось в том, что часто JIT не собирался с AoT.
Одним из последних преимуществ локальности является то, что есть больше возможностей для метапрограммирования, таких как компоненты более высокого порядка и возможность динамической генерации модулей, компонентов или пайпов. Angular более сложная платформа.
Tree-Shaking
Ivy спроектирован с самого начала с древовидным взором. «Встряхивание деревьев» означает удаление частей вашего кода, что приводит к меньшим связям и более быстрому времени загрузки.
Встряхивание деревьев выполняется с использованием статического анализа, который фактически не запускает ваш код. Из-за этого можно взглянуть на то, что вы можете ожидать в комплекте. Например, если вы импортировали функцию, но она все еще находится в комплекте, хотя она никогда не вызывалась:
import { myCoolFunction } from './other'; const myCondition = false; if (myCondition) { myCoolFunction(); // this will still be included
}
Ivy был разработан с учетом этого. В Renderer2 они были бы найдены в вашем приложении. С другой стороны, Ivy разрушает вещи до меньших, более атомных функций. Эти атомные функции делают код визуализатора намного более дружественным к дрожанию дерева, потому что они генерируют код.
Проще говоря: Ivy уверяет, если вы не используете что-то в Angular, он не включается. Дрожащие функции Angular включают:
Шаблон синтаксиса
Вставка зависимостей
Контентный прогноз
Структурные рекомендации
Перехватчики жизненного цикла
пайпы
запросы
обработчики
Вы можете понять, почему этот «Hello World» настолько сумасшедший — ему нужна только крошечная часть основных функций Angular!
Что значит Ivy для тебя
Локальность и дрожание деревьев полностью меняют правила игры. Когда мы объединим два, мы получим:
Меньшие сборки
Более быстрое время восстановления
Более быстрое развитие
Чтобы упростить, более хакерский конвейер
Код для чтения человека
Но что еще это значит для вас? Когда Ivy идет вживую, это все сломает? Ответ — нет — вы не должны замечать никаких изменений, кроме лучшего процесса сборки. Весь тяжелый подъем будет сделан в фоновом режиме, полностью прозрачный для вас-разработчика.
Есть еще один способ, как Ivy повлияет на вас. Из-за резкого упрощения конвейера Ivy шаблоны будут частью трассировки стека. Когда вы сломаетесь, вам больше не придется иметь дело с загадочной ошибкой. Вы сможете перехватывать шаблоны для их отладки. Если вы похожи на меня, это огромный вздох облегчения.
Обычно рендеринг не влияет на повседневную разработку. Тем не менее, для тех из нас, кто живет в реальном мире, у нас есть доля разочарований в компиляции AoT при переходе от разработки к производству. Ivy решительно улучшит наш опыт разработки, удалив черный ящик процесса рендеринга. Отлично!
Попробуйте сами
Если вы собираетесь найти пример кода, вы можете взглянуть на приложение, которое Kara продемонстрировала в ng-conf. Справедливое предупреждение: все это очень экспериментально и кровоточит!
Во-первых, вам нужно будет установить новую систему сборки для вашей ОС. Следуйте инструкциям в документации. Затем, клонируйте репозиторий Angular:
git clone https://github.com/angular/angular.git
Откройте терминал внутри каталога и перейдите к приложению:
cd packages/core/test/bundling/todo
Запустите эти две команды, чтобы установить зависимости и запустить сервер разработки:
bazel run @yarn//:yarn bazel run //packages/core/test/bundling/todo:devserver
Вы также можете запустить со следующим :prodserver, чтобы увидеть сборку продакшен. Попытайтесь сломать вещи и взгляните на инструкции.
Как оставаться в курсе событий
Мы узнали о том, как работает Ivy, о преимуществах, которые он обещает, и о том, как это повлияет на вас. Мы также видели несколько примеров кода. Итак, когда выходит Ivy?
Мишко показал этот слайд дорожной карты Плюща на ng-conf 2018 («сегодня» означало 18 апреля 2018 года):
Вы можете видеть, что фазы временной шкалы Ivy начинаются с работы над средой выполнения, которая дублирует работу над компиляцией шаблона. Google — это процесс внутреннего поиска. Этот процесс проверки включает в себя обеспечение того, что Ivy не вносит никаких изменений в более 600 внутренних приложений Google, которые используют Angular. Эта книга будет полной, пока Айви не будет выпущена в дикую природу.
До завершения тестирования Google он может быть протестирован с помощью enableIvy: true для angularCompilerOptions.
Чтобы следить за прогрессом Ivy, вы можете проверить этот документ GitHub и посмотреть этот баг GitHub. Или, если это вас не устраивает, член сообщества Oussama Ben Brahim создал приложение Firebase под названием Is Ivy Ready, которое обеспечивает небольшой пользовательский интерфейс для этой цели. Молодец, Усама!
Автор: Sam Julien
Источник: https://www.telerik.com/
Редакция: Команда webformyself.