Angular 2.0 - Core concepts

DaFED#36
Speaker: Dušan Stanković
Angular je možda jedan od najpoznatijih framework-a u moru JavaScript framework-a. S obzirom da je u prethodnih nekoliko godina web eksponencijalno evoluirao, javila se potreba za boljom i moćnijom alatkom koja će pratiti najnovije web standarde. Iako još uvek u alfa fazi, Angular 2.0 uskoro dolazi i obećava da će popuniti nedostatke njegovog prethodnika i zadovoljiti trenutne potrebe tržišta.

Transcript

1. Angular 2.0 Angular 2.0 core concepts
2. slack.jsbelgrade.org
3. Dušan Stanković Full-stack developer @ Embroker @dulerock me@dulerock.com
4. Zašto Angular 1.x? Zašto Angular 1.x? Lak za testiranje (karma + jasmine, protractor) Ekspresivan Dependency Injection Directives Two-way data binding Built-in stuff (promises($q), ajax($http), jqlite...)
5. TO BRE!
6. Zašto onda Angular 2? Zašto onda Angular 2? Performanse (change-detection, template caching...) Web standardi (ES6, Web components...) Lak za razumevanje i korišćenje
7. Change detection Change detection Model Directive DOM (graph) Model Component DOM SLOW? SLOW? (tree)
8. Change detection Change detection Monomorfni vs polimorfni kod 1 klasa po komponenti za change detection 3-10x brže Immutable Observable
9. Komponente Komponente
10. Komponenta Komponenta import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector: 'dafed-app' }) @View({ template: `<h1>Dobrodosli na predavanje {{name}}</h1>` }) class DafedApp{ name: string; constructor(){ this.name = "Angular 2.0 - core concepts"; } } bootstrap(DafedApp); Type anotacije Meta anotacije
11. Komponenta (ES5) Komponenta (ES5) var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decor switch (arguments.length) { case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target); case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0 case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o } }; var __metadata = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metad }; var angular2_1 = require('angular2/angular2'); var DafedApp = (function () { function DafedApp() { this.name = "Angular 2.0 - core concepts"; } DafedApp = __decorate([ angular2_1.Component({ selector: 'dafed-app' }), angular2_1.View({ template: "<h1>Dobrodosli na predavanje {{name}}</h1>" }), __metadata('design:paramtypes', []) ], DafedApp); return DafedApp; })(); angular2_1.bootstrap(DafedApp);
13. Komunikacija Komunikacija DOM eventi umesto event na scope-u DI <predavanja> <predavanje title="Angular 2.0">...</predavanje> <predavanje title="ReactJS">...</predavanje> </predavanja> @Component({ selector: 'predavanja' }) @View({ templateUrl: 'views/predavanja.html' }) class Predavanja { lista: QueryList<Predavanje> constructor(@Query(Predavanje) lista:QueryList<Predavanje>) { this.lista = lista; } }
14. Arhitektura Arhitektura
15. 1.x 2.0 Model View Controller View Controller Directive DI: Service, Provider, Factory, Value... Directive View Component Injectable Model
16. Bindings Bindings
17. Element property binding Element property binding import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector: 'dafed-prijava' }) @View({ template: `<h1>Prijavi se za Dafed</h1> <input type="text" [value]="defaultValue"/> <button [type]="buttonType">Prijavi se odmah</button> ` }) export class DafedComponent{ defaultValue: string; buttonType: string; constructor(){ this.defaultValue = "Pera Kojot"; this.buttonType = "submit"; } }
18. Event bindings Event bindings import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector: 'dafed-prijava' }) @View({ template: `<h1>Prijavi se za Dafed</h1> <button (click)="prijaviSe($event)" (obavesti)="obavestiKorisnika()"> Prijavi se odmah</button>` }) export class DafedPrijavaComponent{ prijaviSe(event) { event.currentTarget.dispatchEvent(new Event('obavesti')); } obavestiKorisnika(){ alert("Uspesno prijavljen"); } }
19. TWO-WAY BINDINGS TWO-WAY BINDINGS
20. Direktive Direktive import PassInput from './pass.js'; @Component({ selector: 'dafed-login' }) @View({ template: ` <input type="password" (pass-match)="onPassOk($event)"> directives: [PassInput] }) class DafedLogin { onPassOk(event) { alert('pass has 6 chars'); } } @Directive({ selector: 'input', events: ['passMatch'], hostListeners: { keyup: 'onKeyup($event.target.value)' } }) class PassInput { passMatch:EventEmitter = new EventEmitter(); onKeyup(value) { if(/^[a-zA-Z0-9]{6}$/.test(value)) { this.passMatch.next('matched'); } } }
21. Dependency Injection Dependency Injection pre-injectors component injectors element injectors
22. PRODUCTION READY? NOT! NOT!
23. Hvala! Hvala! Pitanja? Pitanja? @dulerock