Что нового в Angular 6

Что нового в Angular 6

От автора: краткий обзор всех обновлений, связанных с новой версией Angular 6, включая Angular элементы, улучшения Service Worker и многое другое. Релиз Angular 6 чертовски восхищает. Брэд Грин, Мишко Хевери и Кара Эриксон рассказали во все сочные подробности этого предстоящего релиза на вступительном лейбле для ng-conf 2018 . В последней версии Angular много нового. В этой статье мы рассмотрим самые интересные функции, такие как Angular Elements и новые команды CLI.

Что нового в Angular 6

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)

Что нового в Angular 6

Встряхивание деревьев — это шаг оптимизации сборки, который пытается обеспечить, чтобы неиспользуемый код не использовался в конечном пакете. Средство визуализации Ivy поднимает встряхивание дерева на совершенно новый уровень. Кара прекрасно объясняет это в своем выступлении, поэтому обязательно посмотрите его!

Вместо того чтобы предоставлять данные шаблона и передавать его непосредственно в интерпретатор, который должен знать, как сделать все, новый рендеринг будет генерировать инструкции шаблона напрямую. Это означает гораздо меньшие пакеты и более быстрое время запуска. Побочная польза, которую объяснила Кара, заключалась в том, что эти сгенерированные инструкции намного читабельнее и понятнее и отлаживаются. Средство визуализации Ivy будет таким классным, что позволит использовать такие вещи, как точки останова в вашем шаблоне, например, «трассировка стека».

Эта самая захватывающая команда автоматически обновит ваши зависимости @angular в файле package.json:

Он будет пытаться ловить баги везде, где это возможно, для обновления вашего кода для вас и использования новых API.

Что нового в Angular 6

Команда Angular надеется, что это начало очень низкого обслуживания кода, но при этом остается актуальным со всеми вещами, такими как:

обновление npm-зависимостей

обновление вашего кода (где он может обнаруживать нарушения)

обновление вашего кода RxJS и Angular Material кода при возникновении отсрочек

Если вы являетесь поставщиком библиотеки, вы можете создать схему, которая будет использовать ng update для обновления вашей библиотеки для людей, которые ее используют!

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.

Метки:

Похожие статьи:

Комментарии Вконтакте: