Around Angular2

A talk about the features around Angular2 stack.

Transcript

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