Upload
rangleio
View
99
Download
0
Tags:
Embed Size (px)
Citation preview
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/