Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
AROUND ANGULAR 2 the hard way
Slide 2
Slide 2 text
@MUKKOO
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
STARTING WITH NG2
Slide 7
Slide 7 text
WHAT WE NEED TO LEARN
Slide 8
Slide 8 text
REDUX WEBPACK NODEJS IMMUTABLEJS TESTING STACK
Slide 9
Slide 9 text
ES6 & TYPESCRIPT RXJS ZONEJS ANGULAR 2
Slide 10
Slide 10 text
ES6 AND TYPESCRIPT
Slide 11
Slide 11 text
TS IS A ES6 SUPERSET
Slide 12
Slide 12 text
ES6 ES5 TS
Slide 13
Slide 13 text
ES6 CLASSES export class Hero { id: number; name: string; }
Slide 14
Slide 14 text
ES6 TEMPLATE STRINGS template: `
${title}
{{hero.name}}
`
Slide 15
Slide 15 text
ES6 ARROW FUNCTIONS heroes => { this.heroes = heroes }
Slide 16
Slide 16 text
TS TYPE INFORMATIONS add(a: number, b?: number) => { return a + b; } let list: number[] = [1,2,3]; let isDone: boolean = false;
Slide 17
Slide 17 text
TS CLASSES CAN BE TYPES class Bar { bar: Foo } let bar = new Bar(new Foo()) // valid let bar = new Bar(new Baz()) // error
Slide 18
Slide 18 text
TS INTERFACES interface Person { firstName: string[]; lastName: string; } let mat_gan:Person = { firstName: ['Mohandas', 'Karamchand'], lastName: 'Gandhi' }
Slide 19
Slide 19 text
TS DECORATORS @Component({ selector: 'hero', templateUrl: 'hero.component.html', }) export class HeroComponent { … }
Slide 20
Slide 20 text
ES6 AND TYPESCRIPT recap
Slide 21
Slide 21 text
CLASSES TEMPLATE STRINGS TYPES DECORATORS
Slide 22
Slide 22 text
RXJS AKA OBSERVABLE
Slide 23
Slide 23 text
OBSERVABLE ARE THE NEW PROMISES
Slide 24
Slide 24 text
ASYNCHRONOUS DATA STREAMS
Slide 25
Slide 25 text
THIS IS REACTIVE PROGRAMMING
Slide 26
Slide 26 text
MANAGE DATA STREAM
Slide 27
Slide 27 text
this.http.get(url) .retryWhen(err => err.delay(500)) .timeout(2000, new Error(‘…’)) .map( data => { return data.json(); }) .catch(this.handleError);
Slide 28
Slide 28 text
RXJS AKA OBSERVABLE recap
Slide 29
Slide 29 text
REACTIVE PROGRAMMING
Slide 30
Slide 30 text
ZONEJS
Slide 31
Slide 31 text
IT’S AN EXECUTION CONTEXT
Slide 32
Slide 32 text
ASYNC JAVASCRIPT // code a(); setTimeout(b, 0); setTimeout(c, 0); d(); // run order // queue a b c d
Slide 33
Slide 33 text
TIMING // code start(); a(); setTimeout(b, 0); setTimeout(c, 0); d(); stop(); // start a d // stop b // missed! c // missed!
Slide 34
Slide 34 text
CONTEXT zone.run(function() { a(); setTimeout(b, 0); setTimeout(c, 0); d(); });
Slide 35
Slide 35 text
ASYNC TASKS IN THE SAME ZONE
Slide 36
Slide 36 text
TRANSITIVE function first() { setTimeout(second, 0); } function second() { setTimeout(third, 0); } function third() { … } zone.run(first);
Slide 37
Slide 37 text
PATCH CODE AT RIGHT TIME
Slide 38
Slide 38 text
DEBUG
Slide 39
Slide 39 text
PROFILING
Slide 40
Slide 40 text
ZONEJS recap
Slide 41
Slide 41 text
EXECUTION CONTEXT FOR ASYNC TASKS
Slide 42
Slide 42 text
ANGULAR IS HARD
Slide 43
Slide 43 text
ANGULAR IS HUGE
Slide 44
Slide 44 text
THERE IS A LOT OF INTERESTING THINGS
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Q&A @MUKKOO