Sabemos que os frameworks Javascript modernos estão usando o que há de melhor e mais moderno no mercado e disponibilizando no seu ecossistema para os dois maiores pilares da performance de uma aplicação front-end: network e runtime, mas quais são as ferramentas que eu posso usar no build do meu projeto? O que essa sopa de letrinhas: JIT, AOT, Tree-shaking, Uglify, GCC, Lazy loading, Ivy … são capazes de fazer para melhorar a performance de network do meu projeto? Também veremos sobre Server Rendering, trackBy, Angular OnPush Component, React Pure Component, Imutabilidade, AOT… Eles podem fazer milagres na performance de runtime do seu projeto, e várias dessas técnicas e ferramentas existem e são aplicáveis seja no Angular, React, Vue ou o velho Javascript vanilla.

1. Extreme Performance
v2

2. Gustavo Costa
Javascript, Angular, AngularJS, RxJS, Reactive
Programming, Performance, GDG Organizer
twitter.com/GustavoCostaW
Translucent - CA
linkedin.com/in/GustavoCostaW

3. Disclaimer framework
friendly

4. N R
Front-end performance
has two main sections
Network performance Runtime performance

5. Bundling
*
* Minification/Obfuscation
* Tree-shaking
* AOT
* Lazy-load
* Service Worker
Network performance
* Ivy

6. W
Webpack
Tools
B
Browserify
R
Rollup
R
SystemJS
G
Gulp
G
Grunt
G
GCC
?
…

7. Bundling

8. Bundling

9. HTTP 1.1 vs HTTP2

10. Minification…+
Dead code01
Obfuscation02
Minification03
UglifyJS

11. Tree Shaking

12. Tree Shakable providers

13. Tree Shakable providers

14. Tools
Webpack Bundler Analyzer
Chrome Dev Tools

15. *-es2015.js

16. JIT AoT
AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation

19. • We compile to generate VMs friendly code
Why the need to compile?
• Since the new Angular version, each component has its
own change detector
• Techniques as tree shaking can be only applied after
processing the code.

20. AoT
AoT
(Ahead of time)
Compilation
app.component.ts app.component.js
* Ivy updated

21. <span>
My name is
{{name}}
</span>
* Ivy updated

22. JIT
JIT
(Just in time)
Compilation
generated_js_from_angular.js
app.component.js
* Ivy updated
module.exports =
"<span>My name is {{name}}</span>"

23. JIT
JIT
(Just in time)
Compilation
• The browser downloads all Javascript
• Angular is started, it needs to check if JIT or AoT is enabled
• Angular needs to compile all components in JIT mode
• The application is started

25. Let’s check our
application Network

27. • All Angular compiler code and its dependencies have been
included.
KEEP CALM!
• There are not any techniques applied (minification,
obfuscation, tree shaking…).
• It makes the auto reload faster when we are developing.

28. AoT
AoT
(Ahead of time)
Compilation
ng serve —aot
ng serve —aot

29. AoT
AoT
(Ahead of time)
Compilation
• AoT is better for Runtime Performance, right?

30. JIT AoT
Recap AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation

32. Easy

34. ng build --prod

35. Compression

36. gzip

40. *
Angular
Material
*
Angular
Flex Layout
*
Browser
Animations

41. facebook.com - async *.js > 1mb
*
* airbnb.com - async - *.js > 1mb
* linkedin.com - async *.js > 1mb
Comparison
Accessing the home page

42. Topics
Module
Topics
Service
…
…
TopicsList
Component
/ or /topics
/profile
Lazy-load
App
Module
App
Routing
…
…
App
Component
Profile
Module
Profile
Service
…
…
Profile
Component
lazylazy eager

48. Looking forward

49. Easy debugging
*
* Tree shaking
* Smaller
Ivy

51. Ivy
https://www.youtube.com/watch?v=dIxknqPOWms

52. Ivy is coming
Demo app ~ 5KB
"enableIvy": true

53. * ServiceWorker
* Application Shell
* CacheAPI
* Pre-fetching
Other techniques
* Image optimization

54. Change Detection
*
* TrackBy
* WebWorkers
* Server-Side Rendering
* DOM Interactions
Runtime performance
* Pure pipes

55. 3x - 10x
ChangeDetection

56. <app-topic-item
*ngFor="let topic of topics$ | async"
[topic]="topic">
</app-topic-item>

57. Zone.JS
* setTimeOut
setInterval
* addEventListener
* xHR/fetch
* ALL async events
* running change detection
ChangeDetection.Default

58. Memory
0xABCD
0xADDG
0xAXAB
topic === newTopic
0xABCD === 0xADDG
'Gustavo' === ‘Gustavo'

59. 1 component * 4 bindings = 4 checks
100 components * 4 bindings = 400 checks

60. app.component topic.item.component

62. SMARTER?
ChangeDetection

63. ChangeDetection.OnPush

64. * running change detection
ChangeDetection.OnPush
* zone has notified angular
topic !== topic ?
check view

66. ChangeDetection.OnPush
* The async event is a DOM event and came from the branch
* Let angular knows about changes with ChangeDetectRef
* @Input properties are new references
Enforces immutability*
When the detection comes is?

67. Nothing has changed

68. ChangeDetectionRef.markForCheck();

70. Presentation and container components

71. DOM
Interactions

72. trackBy

73. WebWorkers

74. Pure pipes

75. @jeffbcross slides

76. @jeffbcross slides

77. Angular universal
*
* Vue.js Server-Side
* import ReactDOMServer from 'react-dom/server';
Tools

78. * RxJS memory leak
(don’t forget to
unsubscribe)
* Memory Leak
* DOM API
Other techniques
* Javascript optimization

79. https://github.com/mgechev/angular-performance-checklist
https://blog.thoughtram.io
https://blog.angularindepth.com
https://angular.io
Sources
https://web.dev

80.
twitter/GustavoCostaW
linkedin/GustavoCostaW
instagram/GustavoCostaW
facebook/GustavoCostaW