Angular

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

Виртуальная прокрутка улучшает производительность приложений:

 

Как обновиться до v7

Подробную информацию и инструкцию по обновлению можно найти на update.angular.io . Но благодаря работе, проделанной нами в v6, большинство разработчиков сможет обновиться до v7 по следующей команде:

ng update @angular/cli @angular/core

Первые пользователи v7 сообщают, что версия работает быстрее предыдущих, и многие приложения можно обновить менее чем за 10 минут.

Подсказки по командной строке

Теперь при выполнении базовых команд по типу ng new или ng add @angular/material в командной строке будут появляться подсказки, которые помогут пользователям открыть для себя встроенные функции (например, маршрутизация или поддержка SCSS).

Подсказки командной строки были добавлены в Schematics. Ими можно пользоваться в любом пакете, размещенном Schematics, если добавить ключ x-prompt в коллекцию Schematics.

"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
},

Производительность приложений

Уделяя пристальное внимание вопросам производительности, разработчики системы провели анализ распространенных ошибок экосистемы. Они обнаружили, что многие разработчики включали в рабочие версии полифил (полизаполнение) reflect-metadata , хотя оно требуется только при разработке.

Поэтому одним пунктов обновления до v7 стало автоматическое удаление этого полифила из файла polyfills.ts и повторное его добавление в процессе сборки при создании приложения в режиме JIT. В рабочей версии данный полифил автоматически удаляется.

В командную строку v7 автоматически добавляются все возможности Bundle Budgets. Новые приложения будут предупреждать, когда размер пакета превысит 2 МБ, и выдавать ошибку по достижении размера в 5МБ. Настройки легко меняются в angular.json.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

Такие ограничители схожи с предупреждениями, которые показываются пользователям с установленным Data Saver (расширение «Экономия трафика») для Chrome.

Angular Material и CDK

В 2018 г. Material Design получил свою долю обновлений. Пользователям Angular Material, решившим обновиться до v7, следует приготовиться к небольшим визуальным изменениям, коснувшихся спецификации Material Design.

Material Design Refresh содержит небольшие изменения, о которых стоит знать разработчикам:

 

В CDK были добавлены виртуальная прокрутка и перетаскивание (Drag & Drop). Их можно опробовать, импортировав DragDropModule или ScrollingModule.

Виртуальная прокрутка

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

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

Почитать подробнее про виртуальную прокрутку

Перетаскивание (Drag & Drop)

Реализация перетаскивания на примере dashboard:

В CDK была добавлена поддержка перетаскивания, которая включает в себя автоматический рендеринг при перемещении элемента пользователем, а также вспомогательные методы для переупорядочивания списков ( moveItemInArray) и перемещения элементов между списками ( transferArrayItem).

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
  <div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>

 

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }

Почитать про перетаскивание

Улучшенная доступность Select

Доступность приложения теперь можно улучшить с помощью нативного элемента select внутри mat-form-field. Нативный select имеет ряд плюсов по части производительности, доступности и юзабилити. В v7 остался mat-select, который дает полный контроль над представлением опций.

Почитать про mat-select и mat-form-field

Angular Elements

Новые Angular Elements поддерживают проецирование содержимого настраиваемых элементов с помощью веб-стандартов.

<my-custom-element>This content can be projected!</my-custom-element>

Запуск партнерских проектов

Популярность Angular во многом обусловлена развитым сообществом. Поэтому создатели системы договорились о партнерстве с рядом недавно созданных проектов сообщества.

StackBlitz 2.0 поддерживает редактуру нескольких областей и Angular Language Service:

 

· Angular Console — доступная для скачивания консоль для старта и запуска Angular-проектов на локальной машине.

· @angular/fire— AngularFire обрел свой новый дом в npm и порадовал первым стабильным релизом для Angular.

· NativeScript— С NativeScript можно создавать один проект для веба и мобильных.

· StackBlitz — Уже вышел StackBlitz 2.0. В релизе присутствует Angular Language Service и многие другие функции (например, редактирование вкладок).

Обновления документации

Разработчики усердно трудятся над доработкой справочников и руководств. В документацию на angular.io был добавлен справочник по командной строке Angular.

Обновления зависимостей

Были обновлены зависимости на некоторых сторонних проектах.

· TypeScript 3.1

· RxJS 6.3

· Node 10 — добавлена поддержка Node 10, но все еще поддерживается Note 8.

А что с Ivy?

Работа над новой инициативой под названием Ivy в самом разгаре . Ivy — это потоковый рендеринг нового поколения. В настоящий момент проект находится в стадии активной разработки и не является частью v7. Уже начата проверка обратной совместимости с существующими приложениями. В течение следующих месяцев ожидается запуск предварительной версии.

 

Перевод статьи Stephen FluinVersion 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more