Выпущено обновление JS-фреймворка Angular 5.0.0

Представлена очередная версия JavaScript-фреймворка Angular 5.0.0 Pentagonal Donut — мажорное обновление с новым функционалом и исправлением багов. По словам разработчиков, теперь Angular стал еще компактнее, быстрее и проще в использовании.

Оптимизатор сборки

Теперь продакшн-сборка, созданная при помощи CLI, по умолчанию снабжена оптимизатором — это инструмент, встроенный в командную строку для уменьшения размера приложений с помощью семантического анализа кода.

В первую очередь это позволяет разработчикам помечать части своего приложения как pure. Удаление лишних кусков кода улучшает tree shaking, предусмотренный в уже существующих инструментах. Также оптимизатор сборки удаляет лишние после компиляции декораторы Angular из кода среды исполнения.

Каждая из этих функций не только сокращает объем кода JavaScript, но и существенно увеличивает скорость работы приложения со стороны пользователей.

Универсальный StateTransfer API и поддержка DOM

Теперь можно легко обмениваться состоянием между серверной и клиентской версиями приложения.

Angular Universal — проект, призванный помочь разработчикам осуществлять рендеринг на сервере (SSR) в Angular-приложениях. Рендеринг приложений на сервере с их последующей загрузкой в сгенерированный HTML существенно облегчает нахождение соответствующего контента поисковыми роботами, что положительно сказывается на производительности.

Наряду с SSR в пятую версию были добавлены ServerTransferStateModule и соответствующий BrowserTransferStateModule. Наличие этих модулей устраняет необходимость посылать второй HTTP-запрос клиенту со стороны приложения.

Еще одно примечательное обновление — добавление Domino к platform-server. Оно сделало доступным большее число манипуляций с DOM на стороне сервера, что улучшило поддержку сторонних сервер-не-ориентированных JS-библиотек.

Улучшенный компилятор

Разработчики реализовали поддержку инкрементной компиляции и усовершенствовали декораторы, тем самым ускорив процесс сборки с AOT.

TypeScript Transforms

Компилятор Angular стал еще быстрее, переняв все полезные функции TypeScript transform. По словам разработчиков, переосмысленние стандартного конвейера TypeScript позволило сократить время инкрементной сборки AOT на 95% (2 секунды вместо прежних 40).

Стоит попробовать, не говоря уже о том, что в новой версии CLI программисты обещают сделать это нововведение функцией по умолчанию.

Запуск обновленного компилятора:

			ng serve --aot
		

Сохранение пробелов

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

			@Component({
  templateUrl: 'about.component.html',
  preserveWhitespaces: false
}
export class AboutComponent {}
		

либо применить сразу ко всему приложению через tsconfig.json:

			{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}
		

Теги <pre> обрабатываются как положено.

Улучшенная поддержка декораторов

В новой версии Angular стали доступными анонимные функции, позволяющие запускать код, не затрагивая d.ts и открытый API.

			Component({
  provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}
		

Также планируется использование этого приема в качестве составной части useValue:

			Component({
  provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyClass {}
		

“Интернационализированные” конвейеры Date, Number и Currency

Разработчики представили обновленные и более стандартизированные конвейеры Date, Number и Currency, устранив необходимость в использовании полифиллов i18n.

В Angular 5.0.0 конвейеры опираются на CLDR, реализована поддержка широкого спектра локальных стандартов и конфигураций. Про различия в устройстве конвейеров 4 и 5 версий фреймворка можно прочитать тут.

Для возвращения к старой версии конвейеров можно импортировать DeprecatedI18NPipesModule.

Замена ReflectiveInjector на StaticInjector

Избавиться от еще большего количества полифиллов помогла замена ReflectiveInjector на StaticInjector. Новому injector’у больше не нужен полифилл Reflect, что позволило большинству разработчиков существенно сократить код.

До:

			ReflectiveInjector.resolveAndCreate(providers);
		

После:

			Injector.create(providers);
		

Ускоренная Zone

Zones в Angular по умолчанию стали еще быстрее. Добавлена возможность полностью пропускать их при создании приложений, ориентированных на производительность.

Пропускать zones можно с помощью ngZone:'noop':

			platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );
		

exportAs

Добавлена поддержка нескольких имен для компонентов/папок проекта. Это поможет пользователям легко переносить компоненты без необходимости вносить какие-либо изменения в код.

Пример:

			@Component({
  moduleId: module.id,
  selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
  exportAs: 'matButton, matAnchor',
  .
  .
  .
}
		

HttpClient

В Angular 4.3 более компактный, простой и мощный HttpClient был перенесен в @angular/common. Обновленный инструмент получил широкое признание среди разработчиков, и в новой версии фреймворка он рекомендуется к использованию во всех приложениях. Предыдущий @angular/http library считается устаревшим.

CLI v1.5

Поддержка Angular v5.0.0 добавлена во все CLI, начиная с версии 1.5. Теперь по умолчанию все проекты генерируются на пятой версии фреймворка.

Также в целях более строгого соответствия новым стандартам TypeScript были обновлены правила использования tsconfig.json.

Angular Forms и On Blur / Submit

Теперь валидацию и обновление значений можно применять только для blur или submit, а не всех событий ввода. Программисты могут определять тайминг и «зону охвата» этих важных процессов самостоятельно. Также asyncValidator теперь можно определять прямо в объекте options.

Шаблонные формы

До:

			<input name="firstName" ngModel>
		

После:

			<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">
		

или

			<form [ngFormOptions]="{updateOn: 'submit'}">
		

Реактивные формы

До:

			new FormGroup(value);
new FormControl(value, [], [myValidator])
		

После:

			new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
		

RxJS 5.5

Поддержка RxJS обновлена до версии 5.5.2+. С новыми «lettable operators» разработчики могут спокойно избегать проблем, связанных со старым механизмом импорта. Устранены все недостатки предыдущего метода patch, включая проблемы splitting / tree shaking.

Вместо:

			import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);
		

Теперь можно:

			import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
  map(user => user.name),
  filter(name => name),
);
		

Новые Router Lifecycle Events

Разработчики теперь могут отслеживать полный цикл маршрутизатора. Это полезно для измерения производительности guards и/или resolvers или при отображении счетчика во время обновления дочернего элемента.

Новые события (последовательно):

1. GuardsCheckStart,
2. ChildActivationStart,
3. ActivationStart,
4. GuardsCheckEnd,
5. ResolveStart,
6. ResolveEnd,
7. ActivationEnd,
8. ChildActivationEnd.

Пример кода для старта/остановки счетчика:

			class MyComponent {
  constructor(public router: Router, spinner: Spinner) {
    router.events.subscribe(e => {
      if (e instanceof ChildActivationStart) {
        spinner.start(e.route);
      } else if (e instanceof ChildActivationEnd) {
        spinner.end(e.route);
      }
    });
  }
}
		

С полным списком нововведений и инструкцией к обновлению можно ознакомиться в документации на Github.