getting ready for angular 2 - yuri takhteyevyto.io/slides/getting-ready-for-angular-2-2015.pdf ·...
TRANSCRIPT
![Page 1: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/1.jpg)
GETTING READY FOR
CTO, Rangle.io
Yuri Takhteyev
Some rights reserved - Creative Commons 2.0 by-sa
ANGULAR 2
![Page 2: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/2.jpg)
What’s Angular 2, Anyway?
![Page 3: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/3.jpg)
• 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
![Page 4: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/4.jpg)
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
![Page 5: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/5.jpg)
The View and the Event System
![Page 6: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/6.jpg)
What Angular 1.x Gave Us• A view synchronization system
• Modules with DI
• Utilities
![Page 7: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/7.jpg)
Angular 1’s View Synchronization• Declarative
• Separation between templates and code
• Two-way data binding
• Stateful
• Using nested $scopes
![Page 8: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/8.jpg)
Alternative: Components• ReactJS
• Web components
• Doable with “controller as” and isolated directives
• Business logic goes into services
![Page 9: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/9.jpg)
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
![Page 10: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/10.jpg)
What Angular 2 Promises• Still very declarative
• 3 types of directives: components, decorators, templates
• Support for unidirectional data flow
• Three models: stateful, reactive, immutable
• Componentized: no more $digest cycle
• Controllers folded into components
![Page 11: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/11.jpg)
An Angular 2 Template
<foo [bar]=“x+1” (baz)=“doSomething()”> Hello.</foo>
![Page 12: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/12.jpg)
Angular 2 Template
<button [disabled]=“!inputIsValid” (click)=“authenticate()”> Login</foo>
![Page 13: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/13.jpg)
Angular 2 Template
<amazing-chart [series]=“mySeries” (drag)=“handleDrag()”/>
![Page 14: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/14.jpg)
Classes + Annotations
![Page 15: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/15.jpg)
ES6 Classes
class Widget { name; constructor() { name = 'No name'; } setName(newName) { name = newName; } getName() { return name; }}
![Page 16: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/16.jpg)
Classes in Angular 2• Components are classes (a bit like “controller as”)
• Services are classes
![Page 17: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/17.jpg)
Component as a Class
class LoginFormComponent { constructor() { }
validate(field, value) { this[field] = value; this.inputIsValid = (!!this.username && !!this.password); }
authenticate(username, password) { // tbd }}
![Page 18: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/18.jpg)
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>
![Page 19: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/19.jpg)
Annotations in ES5
LoginFormComponent.annotate = [ new Component({ selector: 'acme-login-form' }), new View({ templateUrl: 'authenticate.html', })];
![Page 20: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/20.jpg)
In AtScript / TypeScript / ES7*
@Component({ selector: 'acme-login-form'})@View({ templateUrl: 'authenticate.html',})class LoginFormComponent { ...}
![Page 21: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/21.jpg)
TypeScript
![Page 22: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/22.jpg)
Types
class LoginFormComponent { name: string; inputIsValid: boolean; username: string; password: string; ...
validate(field:string, value:string) { ... }
![Page 23: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/23.jpg)
Types and DI
constructor(someService: SomeService) { ...}
![Page 24: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/24.jpg)
@Injectable
@Injectableclass SomeService { name; constructor() {} setName(newName) { this.name = newName; } getName() { return this.name; }}
![Page 25: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/25.jpg)
Modules
![Page 26: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/26.jpg)
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
![Page 27: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/27.jpg)
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
![Page 28: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/28.jpg)
Using ES6 Modules
import {Injectable} from 'angular2/di';import {Component, View} from ‘angular2/angular2';...export {SomeService, SomeOtherService};
![Page 29: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/29.jpg)
Trying Angular 2
![Page 30: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/30.jpg)
Playground Projects• https://github.com/SekibOmazic/angular2-playground (elaborate, but uses Traceur)
• https://github.com/angular/ts-quickstart (uses TypeScript, but very bare)
![Page 31: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/31.jpg)
Docs• https://angular.io/ (not much there yet)
• https://www.youtube.com/user/ngconfvideos
• http://bit.ly/ngdocs (design docs, go here to deep-dive)
![Page 32: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/32.jpg)
But What Do We Do Now?
![Page 33: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/33.jpg)
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
![Page 34: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/34.jpg)
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 }); }; }]);
![Page 35: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/35.jpg)
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 */); } }]);
![Page 36: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/36.jpg)
Consider Modules Too
export class LoginFormComponent { constructor(authService) { this.authService = authService; } authenticate(username, password) { this.authService.authenticate(username, password) .then(() => /* do something */); }}
![Page 37: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/37.jpg)
Importing
import {LoginFormComponent} from 'some/path';
angular.module('myapp') .controller(['authService', LoginFormComponent]);
![Page 38: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/38.jpg)
Organize Your Code as Components• Use isolated directives with “Controller as”
• If your controller is written as an ES6 class, you are getting close to Angular 2 controllers.
![Page 39: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/39.jpg)
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; } } };});
![Page 40: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/40.jpg)
ES5 “Controller As” Directive
controller: function() { var vm = this; vm.name = 'Alice'; vm.change = function() { vm.name = vm.nextName; }},
![Page 41: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/41.jpg)
ES6
controller: class AcmeUserComponent { constructor() { this.name = 'Alice'; } change() { this.name = this.nextName; }}
![Page 42: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/42.jpg)
Consider Using the New Router• Angular 1.4 introduces a new router
• It promises to allow use of Angular 1.x and Angular 2 state controllers side by side.
![Page 43: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/43.jpg)
Consider Flux Architecture• Unidirectional data flow can simplify your architecture
• In Angular 2, use of reactive architecture will also speed things up
![Page 44: GETTING READY FOR ANGULAR 2 - Yuri Takhteyevyto.io/slides/Getting-Ready-for-Angular-2-2015.pdf · The Context • Angular 1.x and it’s challenges • Components: Web components,](https://reader031.vdocuments.us/reader031/viewer/2022013021/5ecad5df600730616c1815d0/html5/thumbnails/44.jpg)
THANK YOU!
Yuri Takhteyev
@qaramazov
yuri
CTO, Rangle.io