The magic behind. Angular 2+

Transcription

1 The magic behind Angular 2+

2 Agnès

3 Cédric

4 @NinjaSquad

5 Lyon, France - April 20-21

6

7 Learn some french!

8 Bonjour!

9 Announced in March 2014

10 Released in September 2016

11

12 Become a Ninja with Angular

13 and an online training the Pro Pack with exercices, and ponies!

14

15 Under the hood Why Angular is a kind of magic

16 10min Hello World just to be sure everybody knows what we are talking about

17 Angular is a framework

18 Write your app with...

19 ES5 (don't do that)

20 ES6 Modules Classes Promises Arrow functions Block scope variables Collections

21 TypeScript (yes it's Microsoft) Types (but nice ones) Decorators...

22 Dart Great right? I'm kidding. Nobody cares.

23 Everything is a Component (even the app)

24

25

26 Web Components

27

28 Template + Logic

29 The tree of life of components

30 Ponyracer MenuCmp RaceCmp FooterCmp PonyCmp PonyCmp PonyCmp

31 AppModule

32 AppModule AdminModule

33 Ponyracer MenuCmp RaceCmp FooterCmp PonyCmp PonyCmp PonyCmp

34 Ponyracer MenuCmp RaceCmp FooterCmp PonyCmp PonyCmp PonyCmp

35 import { Component } from }) class PonyComponent { }

36 @Component({ selector: 'ns-pony', templateurl: './pony.component.html' }) class PonyComponent { }

37 <div> </div> <ns-pony></ns-pony>

38 @Component({ selector: 'ns-pony', templateurl: './pony.component.html' }) class PonyComponent { } pony = { name: 'Secretariat', color: 'blue' };

39 @Component({ selector: 'ns-pony', templateurl: './pony.component.html' }) class PonyComponent { pony = { name: 'Secretariat', color: 'blue' }; } getponyimage() { return `pony-${this.pony.color}.gif`; }

40 Powerful Templating Syntax

41 <p>{{pony.name}}</p>

42 Moustaches Mustaches

43 <p>{{pony.name}}</p> <img [src]="getponyimage()"/>

44

45 class PonyComponent { //... constructor() { settimeout( () => this.pony.color = 'orange', 3000 ); } //...

46

47 A n g u l a r i s

48 Change Detection

49 A change occurs!

50 A change occurs settimeout( () => /* does something */, 3000 );

51 App's state updates settimeout( () => this.pony.color = 'orange', 3000 );

52 Angular detects the change

53 Angular updates the DOM <img [src]="getponyimage()"/>

54 UI is up to date!

55 When How

56 AngularJS 1.x

57 When

58 1.x Always use the framework $http, $timeout() or $scope.$apply() manually

59 How

60 1.x digest

61 1.x <input ng-model="user.username"> <strong>{{user.username}}</strong> <input type="password" ng-model="user.password"> <strong>{{strength}}</strong>

62 1.x Watchers "user.username" "user.password" "strength"

63 1.x

64 1.x $scope.$watch( 'user.password', (val, oldval) => { $scope.strength = computestrength(val); } ); $scope.$watch( 'strength', (val, oldval) => { $scope.secure = issecure(val); } );

65 1.x $$watchers 'user.password' = 'abc' 'strength' = 2 'secure' = false... $$watchers 'user.password' = 'abc' 'strength' = 3 'secure' = false... $$watchers 'user.password' = 'abc' 'strength' = 3 'secure' = true... $$watchers 'user.password' = 'abc' 'strength' = 3 'secure' = true...

66 1.x ~500 watchers ~4x cycle = 2000 evaluations... on every key press

67 Angular (2+) 2+

68 When

69 Zone.js 2+

70 2+ Your app settimeout(() =>..., 3000) Browser settimeout

71 2+ Your app settimeout(() =>..., 3000) Zone.js settimeout Browser settimeout

72 How

73 Ponyracer 2+ MenuCmp RaceCmp FooterCmp PonyCmp PonyCmp PonyCmp

74 Ponyracer 2+ MenuCmp RaceCmp FooterCmp PonyCmp PonyCmp PonyCmp

75 No cycle anymore! 2+

76 Optimized for JS VM 2+

77 Inline caching 2+

78 function greetings(animal) { return 'hello ' + animal.name; }

79 Where is 'name' in an object of shape ' Human'? Dynamic lookup Offset 0x00ab Ok I'll store that!

80 Cache monomorphic Human (name) 0x00ab

81 Where is 'name' in an object of shape ' Human'? Cache lookup Let's go! Super fast!!

82 Where is 'name' in an object of shape ' Pony'? Dynamic lookup Offset 0x00de Ok I'll store that!

83 Cache polymorphic Human (name) Pony (name) 0x00ab 0x00de

84 Ça fait chier Fuck this shit

85 Where is 'name' in an object of shape ' Manager'? Dynamic lookup Offset 0x00fg Fuck this shit I'll check every time

86 No Cache megamorphic Slower (like 10x slower)

87 1.x AngularJS 1.x eval("expr", context)

88 1.x AngularJS 1.x megamorphic calls

89 2+ Angular generates code for each component

90 2+ PonyCmp_View.prototype. detectinternalchanges(cmp) { } var val = cmp.getponyimage(); if (val!== this.lastval) { this.node1.setelementproperty('src', val); this.lastval = val; }

91 2+ Angular monomorphic calls

92 2+ Change detection is a lot faster!

93 Ça pète sa mère It's soooo cool It breaks his mom

94 Compilation

95 Slower start

96 Just in Time compilation

97 Just in Time build run TS JS HTML JS

98 Ahead of Time compilation

99 Ahead of Time build TS JS HTML TS JS

100 Faster start

101 Type checking

102 const val = this.component.getponyimage(); if (val!== this.lastval) { this.node1.setelementproperty('src', val); this.lastval = val; }

103 Package size

104 On ne peut pas savoir We can't really know

105 No compiler Tree shaking JS generated

106 Fast and Small?

107 AppModule app.bundle.js (150K)

108 / index.html app.bundle.js

109 Lazy loading

110 AppModule main.bundle.js (100K) AdminModule admin.bundle.js (50K)

111 Router

112 / index.html main.bundle.js /admin admin.bundle.js

113 Multiple (mini) bundles \o/

114 Preloading strategy

115 / index.html main.bundle.js admin.bundle.js /admin

116 No more magic! Change detection AoT compilation Bundle size Lazy loading

117 C'était génial! This talk was awesome! (thank you!)

118 Thanks! 30% with discount @NinjaSquad