Угловой CDK

Я не был на ng-conf в прошлом году, поэтому не знаю, сколько говорили об Angular CDK, так как он, вероятно, все еще находился в стадии бета-тестирования; однако в этом году об этом много говорили. Angular CDK полезен для формирования как компонентов, так и функциональности. Вы можете построить всю сетку или форму с элементами или просто использовать функциональные возможности для наложения на страницу. Основное преимущество использования CDK заключается в том, что продуктивно редактировать существующий код и использовать полностью протестированные шаблоны для любого уровня опыта, а не создавать его с нуля. Если, как и я, вы очень привязаны к написанию кода с нуля, я все же счел полезным просто взглянуть на шаблоны кода CDK, чтобы убедиться, что я правильно создаю компоненты, например. подписка на события DOM и удаление подписок должным образом.

Сообщество Angular

Это очень впечатляющая попытка Angular принять участие в сообществе разработчиков. Команда Angular не только отлично справляется с социальным общением, но и уделяет большое внимание разнообразию инженеров. Впервые я услышал об этом в блоге Брэда Грина о разнообразии и о том, что 60% спикеров в ng-Atlanta были женщинами-инженерами. Во время выступления Брэд рассказал об организации ngGirls, которая занимается привлечением большего числа женщин на инженерные должности на рабочем месте, используя Angular в качестве отправной точки.

Будущее Angular

Я ожидал, что Angular 6 будет закончен и выпущен к моменту выхода ng-conf, но, увы, ошибся. Брэд пообещал выпустить окончательную версию через несколько недель, так как они связывают несколько функций, но посмотрим, произойдет ли это; несмотря ни на что, релиз неизбежен! Я очень взволнован этой новой версией по нескольким причинам:

  • Версии. Начиная с Angular v6 все основные фреймворки (т. е. Angular, Material и CLI) будут иметь один и тот же номер версии! Очень сложно отслеживать последние версии между тремя из них, так что это все упрощает. Это немного больше связывает эти пакеты вместе, но я не вижу в этом негативного влияния.
  • Обновления CLI: Angular CLI, кажется, получает множество обновлений в последних и будущих выпусках. Схемы были отличным введением в настройку конвейера CLI. Вы можете настроить действия сборки, изменить параметры конфигурации для создания новых компонентов и многое другое. Вы можете прочитать об этом в сообщении блога Angular о схемах (https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2). Кроме того, Schematics будет доступен для добавления таких фреймворков, как ng-bootstrap, Clarity и Nativescript. Это также будет работать для добавления и формирования модулей Angular CDK и Angular Material.

Визуализатор Ivy

Команда Angular усердно работала над новой заменой Renderer2 под названием Ivy. Цель Ivy — оптимизировать древовидную структуру, немного раскрывая конвейер сборки, что позволяет нам более эффективно отлаживать проблемы во время выполнения. Одной из основных особенностей Ivy является использование шаблона локальности для перехода от текущего глобального анализа компилятора к более локализованному анализу на уровне отдельных файлов для определения зависимостей. Проще говоря, это означает, что Angular AoT легче реализовать и использовать. Теперь разработчики могут использовать модули NPM с поддержкой AoT, а также могут использовать AoT в сочетании с модулями, скомпилированными JIT. После серьезного процесса тестирования, проведенного командой Ivy, это приведет к гораздо более быстрому времени компиляции.

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

Вернемся к текущему состоянию Angular tree-shaking. Создается viewDefinition для определения таких вещей, как структура вашего шаблона. Он передается в интерпретатор Angular, который определяет, какие функции необходимо запустить для рендеринга вашего компонента (например, рендеринг простого HTML-элемента, добавление наблюдателей и т. д.). Поскольку интерпретатор является универсальным, все символы, которые вам не нужны, по-прежнему сохраняются, добавляя нежелательный вес вашему приложению.

Итак, что нас ждет в будущем? Ivy будет выпущен с более интеллектуальным и атомарным интерпретатором для использования для рендеринга шаблонов, который называется Инструкции по шаблонам. Если вы визуализируете что-то невероятно простое без конвейеров или слушателей, интерпретатор стряхнет эти неиспользуемые инструкции. То же самое касается и таких вещей, как хуки жизненного цикла! Например, я не слишком часто использую хуки жизненного цикла, такие как ngAfterViewChecked, поэтому мне нравится эта функция, и я с нетерпением жду выхода Ivy.

Еще одно дополнительное преимущество нового интерпретатора заключается в том, что трассировку стека стало намного легче читать. Вы можете сразу понять, что пошло не так, не углубляясь в кодовую базу Angular. Ошибки читаемы и имеют смысл. Докладчик продемонстрировал это, используя слишком распространенную ошибку «ExpressionChangedAfterItHasBeenCheckedError». Мы смогли отладить и точно определить, из какой строки в нашем шаблоне это произошло!

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