Я написал статью об основных концепциях Angular 2 год назад, во время одной из первых бета-версий. Большинство из них по-прежнему точны и актуальны, но не все. Например, я написал его до того, как мы представили NgModules, до того, как стала применяться компиляция AoT, и до того, как мы построили новый маршрутизатор.

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

В этом посте я расскажу об одной из самых важных концепций Angular: компиляции.

Компиляция

В основе Angular лежит сложный компилятор, который принимает тип NgModule и создает NgModuleFactory.

В NgModule объявлены компоненты. При создании фабрики модулей компилятор возьмет шаблон каждого компонента в модуле и, используя информацию об объявленных компонентах и ​​каналах, создаст фабрику компонентов. Фабрика компонентов - это класс JavaScript, который фреймворк может использовать для удаления компонентов.

JIT и AOT

Angular 1 - это сложный компилятор HTML, который генерирует код во время выполнения. В новых версиях Angular также есть эта опция: они могут генерировать код во время выполнения или точно во время (JIT). В этом случае компиляция происходит во время начальной загрузки приложения. Но у них есть и другой вариант: они могут запустить компилятор как часть сборки приложения или заблаговременно (AOT).

Зачем мне это делать?

Предварительная компиляция заявки выгодна по следующим причинам:

  • Нам больше не нужно отправлять компилятор клиенту. Итак, компилятор - самая большая часть фреймворка. Так что это положительно сказывается на размере загрузки.
  • Поскольку в скомпилированном приложении нет HTML, а вместо него есть сгенерированный код TypeScript, компилятор TypeScript может проанализировать его и произвести ошибки типа. Другими словами, ваши шаблоны безопасны по типу.
  • Бандлеры (например, WebPack, Rollup) могут избавиться от всего, что не используется в приложении. Это означает, что вам больше не нужно создавать модули узлов из 50 строк, чтобы уменьшить размер загружаемого приложения. Сборщик определит, какие компоненты используются, а остальные будут удалены из пакета.
  • Наконец, поскольку самый затратный этап начальной загрузки вашего приложения - это компиляция, предварительная компиляция может значительно сократить время начальной загрузки.

Подводя итог, можно сказать, что использование компиляции AOT делает ваши пакеты приложений меньше, быстрее и безопаснее. Вы можете узнать больше о преимуществах производительности AOT в следующей статье блога моего коллеги по Nrwl Джеффа Кросса.

Как это возможно?

Почему мы не сделали этого раньше, в Angular 1? Чтобы AOT работал, приложение должно иметь четкое разделение статических и динамических данных в приложении. И компилятор должен быть построен таким образом, чтобы он зависел только от статических данных. При проектировании и создании Angular мы приложили много усилий для этого. А такие примитивы, как классы и декораторы, которые поддерживают новые версии JavaScript и TypeScript, упростили задачу.

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

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

Компромиссы

Поскольку АОТ настолько выгоден, мы рекомендуем использовать его в производстве. Но, как и во всем, есть компромиссы. Чтобы Angular мог заранее скомпилировать ваше приложение, метаданные должны быть статически анализируемыми. Например, следующий код не будет работать в режиме AOT:

Свойство window.hide не будет определено. Таким образом, компиляция не сможет указать на ошибку. Была проделана большая работа, чтобы сделать компилятор умнее, чтобы он мог понимать большинство повседневных шаблонов, которые вы будете использовать при создании своего приложения. Но некоторые вещи никогда не сработают, как в примере выше.

Подведем итоги

  • Центральная часть Angular - его компилятор.
  • Компиляцию можно выполнить точно во время (во время выполнения) и заранее (как этап сборки).
  • Компиляция AOT создает пакеты меньшего размера, дерево "встряхивает" мертвый код, делает ваши шаблоны типобезопасными и сокращает время начальной загрузки вашего приложения.
  • Компиляция AOT требует, чтобы определенные метаданные были известны статически, поэтому компиляция может происходить без фактического выполнения кода.

Основная книга Angular

Эта статья основана на книге Essential Angular, которую вы можете найти здесь https://leanpub.com/essential_angular. Если вам понравилась статья, загляните в книгу!

Виктор Савкин - соучредитель Nrwl. Мы помогаем компаниям развиваться, как Google, с 2016 года. Мы предоставляем консультации, инжиниринг и инструменты.

Если вам это понравилось, нажмите 👏 ниже, чтобы другие люди увидели это здесь, на Medium. Подпишитесь на @victorsavkin, чтобы узнать больше о монорепозиториях, Nx, Angular и React.