Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev
Transcript of Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev
![Page 1: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/1.jpg)
ANGULAR 2.0
CTO, Rangle.io
Yuri Takhteyev
Some rights reserved - Creative Commons 2.0 by-sa
SURVIVE THE TRANSITION
![Page 2: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/2.jpg)
What’s Angular 2, Anyway?
![Page 3: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/5.jpg)
View Binding
![Page 6: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/6.jpg)
What Angular 1.x Gave Us• A view binding system.
• Modules with DI.
• Utilities.
![Page 7: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/7.jpg)
Angular 1’s View Binding• Declarative.
• Separation between templates and code.
• Two-way data binding.
• Stateful.
• Using nested $scopes.
![Page 8: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/8.jpg)
Alternative: Components• ReactJS.
• Web components.
• Doable with “controller as” and isolated directives.
• Business logic goes into services.
![Page 9: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/10.jpg)
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.
![Page 11: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/11.jpg)
An Angular 2 Template
<foo [bar]="x+1" (baz)="doSomething()"> Hello.</foo>
![Page 12: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/12.jpg)
Angular 2 Template
<button [disabled]="!inputIsValid" (click)="authenticate()"> Login</foo>
![Page 13: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/13.jpg)
Angular 2 Template
<amazing-chart [series]="mySeries" (drag)="handleDrag()"/>
![Page 14: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/14.jpg)
Classes + Decorators
![Page 15: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/15.jpg)
ES6 Classes
class Widget { name; constructor() { name = 'No name'; } setName(newName) { name = newName; } getName() { return name; }} � Those are “maximally minimal classes”.
![Page 16: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/16.jpg)
Classes in Angular 2• Components are classes (a bit like “controller as”).
• Services are classes.
![Page 17: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/19.jpg)
Decorators in ES5
LoginFormComponent.annotate = [ new Component({ selector: 'acme-login-form' }), new View({ templateUrl: 'authenticate.html', })];
![Page 20: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/20.jpg)
In AtScript / TypeScript / ES7*
@Component({ selector: 'acme-login-form'})@View({ templateUrl: 'authenticate.html',})class LoginFormComponent { ...}
![Page 21: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/21.jpg)
TypeScript
![Page 22: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/22.jpg)
Types
class LoginFormComponent { name: string; inputIsValid: boolean; username: string; password: string; ...
validate(field:string, value:string) { ... }
� A bit closer to real classes.
![Page 23: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/23.jpg)
Types and DI
constructor(someService: SomeService) { ...}
![Page 24: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/24.jpg)
@Injectable
@Injectableclass SomeService { name; constructor() {} setName(newName) { this.name = newName; } getName() { return this.name; }}
![Page 25: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/25.jpg)
Modules
![Page 26: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/28.jpg)
Using ES6 Modules
import {Injectable} from 'angular2/di';import {Component, View} from ‘angular2/angular2';...export {SomeService, SomeOtherService};
![Page 29: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/29.jpg)
Trying Angular 2
![Page 30: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/31.jpg)
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)
![Page 32: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/32.jpg)
But What Do We Do Now?
![Page 33: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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 */); } }]);
� Learn about arrow functions (and “this”).
![Page 36: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/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: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/37.jpg)
Importing
import {LoginFormComponent} from 'some/path';
angular.module('myapp') .controller(['authService', LoginFormComponent]);
![Page 38: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/38.jpg)
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.)
![Page 39: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/39.jpg)
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/
![Page 40: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/40.jpg)
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!
![Page 41: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/41.jpg)
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().
![Page 42: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/42.jpg)
Organize Your Code as Components
Image by the Angular team.
![Page 43: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/43.jpg)
Linking Components• “Minion” components: not aware of your app.
• “Master” components: hook into the rest of your app.
• “Leutenant” components: in between.
![Page 44: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/44.jpg)
“Minion” Component
Parent
Child
PropertyChanges Events
� Maximize your use of “minions”.
PropertyChanges
![Page 45: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/45.jpg)
“Master” Components
Component
� Use “master” components sparingly.
Update events
Action events Services
Services
![Page 46: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/46.jpg)
“Leutenant" Component
Parent
Child
PropertyChanges
Action events
![Page 47: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/47.jpg)
Flux Architecture
Component
Dispatcher
Action
Store
API, etc.
Component
![Page 48: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/48.jpg)
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.
![Page 49: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/49.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 50: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/50.jpg)
ES5 “Controller As” Directive
controller: function() { var vm = this; vm.name = 'Alice'; vm.change = function() { vm.name = vm.nextName; }},
![Page 51: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/51.jpg)
ES6
controller: class AcmeUserComponent { constructor() { this.name = 'Alice'; } change() { this.name = this.nextName; }}
![Page 52: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/52.jpg)
Implementing Flux Streams• RxJS or Bacon.JS
• ImmutableJS.
• In Angular 2, use of reactive / immutable architecture will also speed things up.
![Page 53: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/53.jpg)
Learning More• Our blog: http://blog.rangle.io/
• Rangle.io Angular Transition Training: 2 or 5 days. http://rangle.io/javascript-training.html
![Page 54: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/54.jpg)
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.
![Page 55: Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev](https://reader033.fdocuments.net/reader033/viewer/2022042819/55cba5cdbb61ebf80b8b45f5/html5/thumbnails/55.jpg)
THANK YOU!
Yuri Takhteyev
@rangleio, @qaramazov
rangle, yuri
CTO, Rangle.io
http://blog.rangle.io/