ANGULAR 2.0

CTO, Rangle.io

Yuri Takhteyev

Some rights reserved - Creative Commons 2.0 by-sa

SURVIVE THE TRANSITION

What’s Angular 2, Anyway?

• A new front end framework inspired by Angular 1.x.

• And by other things also.

• Now in “alpha”.

What is Angular 2?

Image by mtaphotos

The Context• Angular 1.x and it’s challenges.

• Components: Web components, React JS.

• Reactive programming: ReactJS, Flux, FRP.

• ES6 classes + annotations.

• Strong typing: TypeScript, Flow.

• ES6 modules.

View Binding

What Angular 1.x Gave Us• A view binding system.

• Modules with DI.

• Utilities.

Angular 1’s View Binding• Declarative.

• Separation between templates and code.

• Two-way data binding.

• Stateful.

• Using nested $scopes.

Alternative: Components• ReactJS.

• Web components.

• Doable with “controller as” and isolated directives.

• Business logic goes into services.

Alternative: Unidirectional Flow• ReactJS: better performance, procedural, merges HTML and code.

• Flux: easier to reason about complex data flow.

• Key idea: events instead of state.

• Perhaps even better: FRP.

What Angular 2 Promises• Still very declarative.

• 3 types of directives: components, decorators, templates.

• Better support for unidirectional data flow.

• Three models: stateful, reactive, immutable.

• Componentized: no more $digest cycle.

• Controllers folded into components.

An Angular 2 Template

<foo [bar]="x+1" (baz)="doSomething()"> Hello.</foo>

Angular 2 Template

<button [disabled]="!inputIsValid" (click)="authenticate()"> Login</foo>

Angular 2 Template

<amazing-chart [series]="mySeries" (drag)="handleDrag()"/>

Classes + Decorators

ES6 Classes

class Widget { name; constructor() { name = 'No name'; } setName(newName) { name = newName; } getName() { return name; }} � Those are “maximally minimal classes”.

Classes in Angular 2• Components are classes (a bit like “controller as”).

• Services are classes.

Component as a Class

class LoginFormComponent { constructor() { }

validate(field, value) { this[field] = value; this.inputIsValid = (!!this.username && !!this.password); }

authenticate(username, password) { // tbd }}

Component Template

Enter username:<input #username name="username" (keyup)="validate('username', username.value)"><br>

Password:<input #password type="password" name="password" (keyup)="validate('password', password.value)"><br>

<button id="login-button" (click)="authenticate" [disabled]="!!inputIsValid">Login</button>

Decorators in ES5

LoginFormComponent.annotate = [ new Component({ selector: 'acme-login-form' }), new View({ templateUrl: 'authenticate.html', })];

In AtScript / TypeScript / ES7*

@Component({ selector: 'acme-login-form'})@View({ templateUrl: 'authenticate.html',})class LoginFormComponent { ...}

TypeScript

Types

class LoginFormComponent { name: string; inputIsValid: boolean; username: string; password: string; ...

validate(field:string, value:string) { ... }

� A bit closer to real classes.

Types and DI

constructor(someService: SomeService) { ...}

@Injectable

@Injectableclass SomeService { name; constructor() {} setName(newName) { this.name = newName; } getName() { return this.name; }}

Modules

Angular 1.x• ES5 has no modules.

• Angular 1’s modules do not provide much isolation.

• Alternative: CommonJS (easy but synchronous only).

• Alternative: AMD (asynchronous but complicated).

• Neither really solves Angular 1’s module problem.

Going Forward• ES6 introduces the concept of module.

• Easy.

• Asynchronous when you want it to be.

• Angular 2 is leveraging it.

• Use SystemJS to load ES6 modules today.

• TypeScript introduces a few quirks.

Using ES6 Modules

import {Injectable} from 'angular2/di';import {Component, View} from ‘angular2/angular2';...export {SomeService, SomeOtherService};

Trying Angular 2

Playground Projects• https://github.com/SekibOmazic/angular2-playground (elaborate, but uses Traceur)

• https://github.com/angular/ts-quickstart (uses TypeScript, but very bare)

Docs• https://angular.io/ (not much there yet)

• https://www.youtube.com/user/ngconfvideos

• https://angularu.com/ng/session

• http://bit.ly/ngdocs (design docs, go here to deep-dive)

But What Do We Do Now?

Get Started on ES6 or TypeScript• Babel or Traceur are easiest to get started with.

• TypeScript is what you’ll probably end up using eventually.

• ES5 ⊆ ES6, so your code is already ES6.

• Write your controllers and services as ES6 classes.

ES5 Controller

angular.module('myapp') .controller(['authService', function(authService) { var vm = this; vm.authenticate = function(username, password) { authService.authenticate(username, password) .then(function() { // do something }); }; }]);

ES6 Controller

angular.module('myapp') .controller(['authService', class LoginFormComponent { constructor(authService) { this.authService = authService; } authenticate(username, password) { this.authService.authenticate(username, password) .then(() => /* do something */); } }]);

� Learn about arrow functions (and “this”).

Consider Modules Too

export class LoginFormComponent { constructor(authService) { this.authService = authService; } authenticate(username, password) { this.authService.authenticate(username, password) .then(() => /* do something */); }}

Importing

import {LoginFormComponent} from 'some/path';

angular.module('myapp') .controller(['authService', LoginFormComponent]);

Modules vs Injected Services• Not everything needs to be a service. Some code can be just imported.

• Services are singletons.

• Services are stateful. (Not always a good thing.)

• Services are configurable. (Often useful.)

Your Tooling May Need to Change• Gulp is still the tool of choice.

• Just serving a folder won’t do it.

• Concatenating transpiled modules is a bit of a pain.

• JSPM is probably the way to go. The next version of TypeScript should make things easier.

• We’ll have a blog post on all of this soon.

� http://blog.rangle.io/

Unit Testing• A topic strangely missing from Angular 2 discussion.

• You want to make sure you can migrate your tests too!

• But even getting tests to run at all is a bit of an adventure.

• But we’ll have a blog post on this soon!

Decorator Libraries• Libraries can give you @Component, @View, etc.

• But why? Just so that your code looks like Angular 2?

• More important to focus on architectural alignment.

• We are using our own implementation of @Inject, but generate components with makeComponent().

Organize Your Code as Components

Image by the Angular team.

Linking Components• “Minion” components: not aware of your app.

• “Master” components: hook into the rest of your app.

• “Leutenant” components: in between.

“Minion” Component

Parent

Child

PropertyChanges Events

� Maximize your use of “minions”.

PropertyChanges

“Master” Components

Component

� Use “master” components sparingly.

Update events

Action events Services

Services

“Leutenant" Component

Parent

Child

PropertyChanges

Action events

Flux Architecture

Component

Dispatcher

Action

Store

API, etc.

Component

Writing Components Today• Use isolated directives with “Controller as”

• If your controller is written as an ES6 class, you are getting close to Angular 2 controllers.

ES5 “Controller As” Directive

.directive('acme-user', function () { return { restrict: 'E', scope: { nextName: '@' }, bindToController: true, template: ‘...', controllerAs: ‘vm', controller: function() { var vm = this; vm.name = 'Alice'; vm.change = function() { vm.name = vm.nextName; } } };});

ES5 “Controller As” Directive

controller: function() { var vm = this; vm.name = 'Alice'; vm.change = function() { vm.name = vm.nextName; }},

ES6

controller: class AcmeUserComponent { constructor() { this.name = 'Alice'; } change() { this.name = this.nextName; }}

Implementing Flux Streams• RxJS or Bacon.JS

• ImmutableJS.

• In Angular 2, use of reactive / immutable architecture will also speed things up.

Learning More• Our blog: http://blog.rangle.io/

• Rangle.io Angular Transition Training: 2 or 5 days. http://rangle.io/javascript-training.html

Kudos• This has been a group effort.

• Special thanks to Igor Krivanov, Varun Vachhar, Cosmin Bucur, Christine Davis, Brian Olynyk, Evan Schultz, Neil Fenton, Bertrand Karerangabo.

THANK YOU!

Yuri Takhteyev

@rangleio, @qaramazov

rangle, yuri

CTO, Rangle.io

http://blog.rangle.io/