Interesting trends: Angular

StackOverflow : Highest # of tags

Source: https://stackoverflow.blog/2017/11/13/cliffs-insanity-dramatic-shifts-technologies-stack-overflow/

Github: Angular contributors

Developers survey: Most popular ​frameworks

Source: https://insights.stackoverflow.com/survey/2017#technology-frameworks-libraries-and-other-technologies

Angular 5: Performance

Angular CLI v1.5: Build optimizer, enabled by default

• Better tree shaking
• Removing angular decorators

Angular compiler improvements

Angular 5: Performance cont.

• Uses TypeScript transforms

•  ng serve --aot

Angular 5: Performance cont.

tsconfig.json

Per-component basis

Angular 5: New features

Forms validation

• Default change event
• Blur or submit events
• ​Form fields or entire form

Before

Template-driven form

<input name="firstName" ngModel>

After

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

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

Or

Before

Reactive forms

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

After

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

Angular 5: Upgrading from previous versions

https://angular-update-guide.firebaseapp.com/

$ npm install @angular/{animations,common,compiler,
compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,
platform-server,router}@5.0.2

$ yarn add @angular/{animations,common,compiler,compiler-cli,core,
forms,http,platform-browser,platform-browser-dynamic,
platform-server,router}@5.0.2

npm

yarn

Angular 5: Upgrading from previous versions cont.

• Upgrade to TypeScript 2.4.2
• Upgrade to RxJS 5.5.2
• Change your project’s <template> tags to <ng-template>.
• HttpClientModule over HttpModule

import { HttpClientModule } from '@angular/common/http';

Angular 5: Upgrading from previous versions cont.

• Dropped the intl api in favour of data exported from the Unicode Common Locale Data Repository (CLDR)

• Need to update pipes (date, currency or percent)

Angular 5: Upgrading from previous versions cont.

• RxJS is moving to lettable operators

• Improve 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),
);

Instead of

You can now