От автора: краткий обзор всех обновлений, связанных с новой версией Angular 6, включая Angular элементы, улучшения Service Worker и многое другое. Релиз Angular 6 чертовски восхищает. Брэд Грин, Мишко Хевери и Кара Эриксон рассказали во все сочные подробности этого предстоящего релиза на вступительном лейбле для ng-conf 2018 . В последней версии Angular много нового. В этой статье мы рассмотрим самые интересные функции, такие как Angular Elements и новые команды CLI.
Angular элементы
Angular 6 будет первым релизом, который полностью поддерживает Angular элементы! Angular элементы были детищем возлюбленного AngularРоба Вормальда, и это одна из самых ожидаемых особенностей этого выпуска.
Angular элементы позволят нам использовать наши Angular компоненты в других средах (например, простое приложение jQuery или приложение VueJS). Он будет принимать Angular компонент и оборачивать его внутри пользовательского элемента (он же элемент DOM), что позволит использовать наши Angular компоненты в других проектах, которые не имеют полной Angular экосистемы!
Возможность создавать и публиковать веб-компонент в Angular и использовать его на любой HTML-странице будет революционной. Представьте, что вы можете упаковать свой любимый Angular date-picker и вставить его родительское приложение React. С Angular элементами вы можете это!
Новый движок рендеринга: Ivy
Ivy — следующее поколение Angular рендеринга. Разработчики не должны замечать это изменение, кроме того, что их приложения становятся все быстрее и меньше.
Это будет третий движок рендеринга Angular. Второй был между версиями 2 и 4 и назывался View Engine. После того, как они заменили его в первый раз, они увидели увеличение скорости и уменьшение размера приложения почти без сообщений о несовместимости. На этот раз они надеются увидеть такие же результаты.
Кара Эриксон подробно рассказал о новом движке. Она находится в команде и написала больше кода для механизма рендеринга, чем кто-либо другой. Ее выступление было действительно интересным, и мы предлагаем вам посмотреть его, но мы разберем основные моменты нового движка для вас здесь, если вы предпочитаете читать, а не смотреть. 😉
Локальность
Когда компилятор переводит ваш шаблон в JavaScript, разрешено использовать информацию, непосредственно доступную для компонента и его декоратора (нельзя смотреть на зависимости). Это в отличие от текущего компилятора, который фактически требует глобального анализа для запуска. Другими словами, локальность просто означает, что вы можете смотреть только отдельные файлы / компоненты в момент генерации вывода.
Это простая философия с огромными ударами. Во-первых, он позволяет отправлять AOT предварительно скомпилированный код в npm. Это означает, что разработчикам не нужно беспокоиться о компиляции определенной библиотеки в AOT, потому что она уже скомпилирована!
Это также означает, что metadata.json больше не требуется, что упрощает обработку инструментов на базе кода, и больше инструментов становятся совместимыми с пакетами npm. Это упрощает как создание, так и потребление пакетов! И, конечно же, все это означает, что будет более быстрое время перекомпиляции, изменение одного компонента с меньшей вероятностью вызовет перекомпиляцию для всего приложения. Довольно изящно!
Встряхивание дерева (Tree Shaking)
Встряхивание деревьев — это шаг оптимизации сборки, который пытается обеспечить, чтобы неиспользуемый код не использовался в конечном пакете. Средство визуализации Ivy поднимает встряхивание дерева на совершенно новый уровень. Кара прекрасно объясняет это в своем выступлении, поэтому обязательно посмотрите его!
Вместо того чтобы предоставлять данные шаблона и передавать его непосредственно в интерпретатор, который должен знать, как сделать все, новый рендеринг будет генерировать инструкции шаблона напрямую. Это означает гораздо меньшие пакеты и более быстрое время запуска. Побочная польза, которую объяснила Кара, заключалась в том, что эти сгенерированные инструкции намного читабельнее и понятнее и отлаживаются. Средство визуализации Ivy будет таким классным, что позволит использовать такие вещи, как точки останова в вашем шаблоне, например, «трассировка стека».
1 |
ng update и ng add |
Эта самая захватывающая команда автоматически обновит ваши зависимости @angular в файле package.json:
1 |
ng update |
Он будет пытаться ловить баги везде, где это возможно, для обновления вашего кода для вас и использования новых API.
Команда Angular надеется, что это начало очень низкого обслуживания кода, но при этом остается актуальным со всеми вещами, такими как:
обновление npm-зависимостей
обновление вашего кода (где он может обнаруживать нарушения)
обновление вашего кода RxJS и Angular Material кода при возникновении отсрочек
Если вы являетесь поставщиком библиотеки, вы можете создать схему, которая будет использовать ng update для обновления вашей библиотеки для людей, которые ее используют!
1 2 3 4 |
ng add @angular/pwa ng add @angular/elements ng add @angular/material ng add @nativescript/schematics |
ng add будет настолько потрясающим! Это способ легко и просто добавлять новые возможности в ваше приложение. За кулисами он добавляет немного кода здесь и там и немного меняет ваш проект. Где необходимо добавляется ровно то, что вы указали. Например, будут предусмотрены схемы, позволяющие добавлять в существующее Angular приложение такие вещи, как Angular Material, Angular Elements, Progressive Web Apps и Service workers!
NativeScript также создает схему, поэтому вы сможете ng add NativeScript из get-go в свое приложение Angular 6! Команда Angular работает рука об руку с командой NativeScript, и они предоставят дополнительные схемы для расширения Angular CLI, создания собственных мобильных приложений с помощью NativeScript, а также расширения существующих веб-приложений путем добавления мобильной среды.
Возможность отменить регистрацию Service Worker!
В своем выступлении по Service Worker я упоминаю, что вы должны быть крайне уверены, прежде чем создавать свой проект и развертывать в первый раз с Service Worker. Это также удивительно, как Service Workers (для таких вещей, как push-уведомления и перехват сети и кэширование. Я слышал, что их может быть сложно удалить.
В Angular CLI 1.7, однако, @angular/service-worker будет включать файл security-worker.js , который позволит вам деактивировать Service Worker в любое время! Ура! Для этого вам просто нужно обслуживать содержимое файла security-worker.js по URL-адресу Service Worker, который вы хотите отменить.
Помимо всех невероятных функций, перечисленных выше, Angular 6 будет поддерживать TypeScript 2.7 такими вещами, как объявления условного типа, объявления по умолчанию и строгая инициализация класса. Также будет поддержка RXJS 6, что уменьшит размеры пакетов! Мы в Progress с нетерпением ждем релиза и уже восхищаемся тем, что будет!
Чтобы отслеживать все по Angular от основ до всего современного, посетите эту обширную коллекцию ресурсов. Там вы найдете информацию не только о последних новостях Angular, но и о пользовательском интерфейсе Kendo, который, кстати, уже включает поддержку Angular 6! Если вы используете Kendo UI в более ранней версии, есть некоторые изменения, о которых вам следует знать. Мы собрали этот ресурс, чтобы помочь с обновлением до Angular 6.
Автор: Alyssa Nicoll
Источник: //www.telerik.com/
Редакция: Команда webformyself.