Движок рендеринга нового поколения Ivy-Angular

внешний интерфейс переводчик Google Angular.js
Движок рендеринга нового поколения Ivy-Angular

The-Ivy-rendering-engine-in-Angular-cover-image

По данным на 30 ноября 2018 г.is-angular-ivy-readyЭто показывает, что Angular Ivy завершен на 93,46%, в основном близок к завершению. Тем не менее, введение в Ivy в Китае очень мало, На этот раз я переведу PPT об Angular Ivy на ng-conf2018 в апреле этого года, надеясь, что больше людей узнают некоторую информацию об Angular Ivy.

Нажмите, чтобы просмотретьPPT

2018-11-30_18-49-49

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

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

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

2018-11-30_21-53-47

Но сначала не бойтесь! То, что мы сделали здесь, на 100 % совместимо с предыдущими версиями, поэтому вам не нужно вносить какие-либо изменения в ваше приложение. Ваш опыт обновления будет таким же гладким, как вы ожидаете от команды Angular. После обновления вашей версии вы получите новые преимущества, и ваше приложение по-прежнему будет работать нормально. Обновление до Ivy означает, что ваше приложение будет продолжать работать без каких-либо изменений. Будут новые API, которые позволят вам воспользоваться некоторыми из более продвинутых функций Ivy.

2018-11-30_21-58-22

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

2018-11-30_22-03-27

У Ivy есть много вещей, но одна большая идея, стоящая за Ivy, — это то, что мы называем «местностью». Короче говоря, это означает, что когда компилятор транслирует шаблон, разрешена только информация, которая является "локальной" для него. local означает только информацию, непосредственно связанную с описанием компонента. Это контрастирует с глобальным подходом к оптимизации текущего конвейера рендеринга Angular. Итак, давайте поговорим о некоторых преимуществах, которые локальность дает Angular:

  • Locality позволяет сторонним библиотекам отправлять предварительно скомпилированные шаблоны в NPM. Это важно, поскольку значительно упростит и ускорит компиляцию для приложений, использующих эти библиотеки.
  • При локальности разница между AoT и JIT становится настолько незначительной, что почти исчезает. Позволяет свободно смешивать их, например, при тестировании и разработке. Для производства мы по-прежнему рекомендуем только AoT.
  • Населенный пункт больше не нуженMetadata.jsonдокумент. Это значительно упрощает выпуск и разработку сторонних библиотек и взаимодействие с существующими наборами инструментов.
  • Locality значительно сокращает граф компиляции. Это позволяет упростить инструменты сборки и ускорить перестроение больших проектов.
  • И мой личный фаворит: Locality поддерживает метапрограммирование. Сегодня компоненты нельзя создавать во время выполнения, можно будет с помощью Ivy. Примером метапрограммирования являются компоненты более высокого порядка. (Не просто выступая за HOC, чтобы сделать это возможным.)

Локальность — это всего лишь один из принципов, которого мы придерживаемся с Ivy. Есть и другие принципы, но у нас нет времени обсуждать их здесь.

2018-11-30_22-42-58

«сегодня» означает 18 апреля 2018 года.

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

Ниже представлено введение в PPT от главного разработчика Ivy Кары Эриксон.

2018-11-30_22-45-56

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

Все изменения, которые мы вносим, ​​остаются за кадром, поэтому, как разработчику Angular, вам на самом деле не нужно менять код, который вы пишете. Но мне потребуется некоторое время, чтобы объяснить, как работает этот новый дизайн, потому что он на самом деле довольно крут, и я очень надеюсь, что вы понимаете, почему вы видите лучшие результаты с Ivy, чем с текущей версией Angular.

Давайте сначала поговорим о встряхивании деревьев.

Если вы не слышали о tree-shaking, то это, по сути, шаг оптимизации сборки, который гарантирует, что неиспользуемый код не попадет в окончательный пакет, который вы отправляете в браузер. Часто неиспользуемый код поступает из сторонних библиотек.

2018-11-30_23-15-58

2018-11-30_23-16-24

В качестве простого примера, если вы используете стороннюю библиотекуsomeFn, но здесь не используетсяunusedFn, инструмент встряхивания дерева для обеспеченияunusedFnне будет в вашем окончательном пакете.

Для этого есть такие инструменты, как:

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

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

2018-11-30_23-23-06

Например, предположим, что у вас есть импортированный из третьей стороныsomeFn, это в твоемmainиспользуется в функции.

Tree-shaking обычно использует статический анализ ссылок, чтобы определить, какой код оставить в комплекте.

потому чтоsomeFnсуществуетmainфункции, поэтому он останется в комплекте.UnusedFnНет, поэтому его не будет в финальном пакете.

2018-11-30_23-23-24

Но давайте изменим сценарий, если только проверка условия проходит, вы можете использоватьunusedFn.

Когда вы запустите код, условие будет выглядеть какfalse, так что вам все еще не нужноunusedFn. Будет ли он удален из пакета?

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

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

2018-11-30_23-32-42

Хорошо, с вышеизложенным предзнаменованием, давайте вернемся к конвейеру рендеринга и его рефакторингу. Во-первых, краткий обзор того, как работает текущий рендерер.

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

2018-11-30_23-36-22

На практике это выглядит так. Предположим, у вас естьhello worldШаблон, это только сclassизdiv.

2018-11-30_23-37-51

В настоящее время компилятор может генерировать что-то вроде этого, некоторыеdefsПредставляет структуру шаблона. Например,viewDefВключатьdivизelementDefа такжеhello worldизtextDef.

2018-11-30_23-40-50

Затем это определение передается интерпретатору Angular во время выполнения, и Angular используетdefчтобы определить, какие операции следует выполнить для правильного создания модели DOM.

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

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

2018-11-30_23-45-42

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

Вот умное решение. Данные шаблона не генерируются и передаются интерпретатору, который затем объясняет, какие операции выполнять.

2018-11-30_23-50-14

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

2018-11-30_23-52-49

Для того же шаблона, что и раньше, мы могли бы сгенерировать что-то вроде этого. Есть три директивы:

  • elementStart — создаст элемент в DOM
  • text - текстовый узел, который будет создан в DOM
  • elementEnd - в основном выполняет некоторую внутреннюю обработку

2018-11-30_23-55-08

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

2018-11-30_23-56-23

Итак, если вы не используете определенные функции Angular, такие какcontainerилиlistenerилиpipe... их директивы не генерируются из шаблонов, которые вы пишете. Поскольку они не были сгенерированы, ссылок не будет, и их можно безопасно удалить с помощью встряхивания дерева.

2018-11-30_23-58-19

Мы использовали эту стратегию для каждой функции, о которой только могли подумать. Итак, если вы не используетеqueriesИли структурные директивы или хуки жизненного цикла, тогда код можно удалить с помощью инструментов для встряхивания дерева.

2018-12-01_00-00-48

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

2018-12-01_00-04-05

Еще одним преимуществом генерации инструкций является то, что сгенерированный Ivy код легче читать и понимать. Почему это важно?

2018-12-01_00-05-02

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

На ng-conf 2018 команда Angular представила демонстрацию todo-приложения ivy:ivy-todo-list, размер пакета этого приложения составляет 12,2 КБ, демо этого приложения todo находится в репозитории github angular, адрес:GitHub.com/angular/ang…

Для этого нужно установить Bazel для локального запуска, а затем запустить приложение через bazel.

2018-12-01_00-13-14

Вам понравились эти демо? Итак, Айви ждет нечто удивительное. Я очень рада приверженности Айви, это самое важное для нас.

Прежде чем мы закончим эту презентацию, я хочу обсудить старое пари, которое мы заключили с Брэдом. Два года назад, в мае 2016 года, Брэд дал всем вам это обещание.

2018-12-01_00-15-12

Некоторые из вас могут помнить этот слайд. Да, если мы получим Angular Hello World размером менее 10 КБ, Брэд обещает кусок пирога. Брэд не говорит, это минимизированное или сжатое число, но можно с уверенностью сказать, что мы превзошли оба.

2018-12-01_00-17-43

Это приложение Todo сжато на 12,2 КБ.

2018-12-01_00-19-13

В текущем Angular сжатый Hello World составляет около 36 КБ, и Кара обнаружила, что наш hello world уменьшен до 7,3 КБ и сжат до 2,7 КБ. Таким образом, Ivy успешно преодолела порог в 10 КБ. Мы не просто преодолели этот порог, мы преодолели его с большим отрывом.