Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Extreme Performance
Gustavo Costa
@willgmbr
N R
Pilares da Performance
Front-end
Network performance Runtime performance
Bundling
1
2 Minification…+
3 Tree-shaking
4 AOT
5 Lazy-load
6 Service Worker
Network performance
W
Webpack
Tools
B
Browserify
R
Rollup
R
SystemJS
G
Gulp
G
Grunt
G
GCC
?
…
#1 Bundling
#1 Bundling
#2 Minification…+
Dead code
Ofuscation
Minification
UglifyJS
#3 Tree Shaking
JIT AoT
#4 AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation
• Compilamos para gerar um código mais eficiente para as VMs
Compilar?
• Versão 2 > cada componente tem seu PRÓPRIO Change...
1 2
componente.js
(transpilado do typescript)
Entendendo um
Componente Angular
componente-internal.js
(ngfactory)
my-compo...
JIT
JIT
(Just in time)
Compilation
my-component.ts my-component.js
…
JIT
JIT
(Just in time)
Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, verifica se é para iniciar em JIT o...
JIT
JIT
(Just in time)
Compilation
my-component.js
• Angular precisa ‘compilar’
esse template e criar tudo
isso via javasc...
ng serve
• TODO o código do Angular foi IMPORTADO e TODO SEU
COMPILER e suas dependências também.
KEEP CALM!
• Não há ABSOLUTAMENTE...
AoT
AoT
(Ahead of time)
Compilation
ng serve —aot
ng build—aot
AoT
AoT
(Ahead of time)
Compilation
• Também tem muito benefício em runtime
performance, veremos mais na frente.
JIT AoT
Recap #4 AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation
Vue
#5 lazy-load
People
Component01 Person
Component
02
People
Module
People
Service
People
Component
Person
Module
Person
Service
Person
Component
App
Component
App
Routing
App
...
Lazy demo
HTTP2
1
2 ServiceWorker
3 Application Shell
4 CacheAPI
5 Pre-fetching
Outras técnicas
easy
Angular CLI
Build time!
ng build --prod
#5 compression
GCC + BROTLI
Em breve teremos hello world do
Angular com apenas:
40kb!
AoT
1
3 Change Detection
4 trackby
5 WebWorkers
Runtime performance
enableProdMode
2
6 Server-side rendering
JIT AoT
#1 AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation
JIT
JIT
(Just in time)
Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, verifica se é para iniciar em JIT o...
AoT
AoT
(Ahead of time)
Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, inicia com AoT
• Angular precisa c...
JIT
JIT
(Just in time)
Compilation
my-component.ts my-component.js
…
JIT
JIT
(Just in time)
Compilation
my-component.js
…
my-component-
internal.js
JIT
JIT
(Just in time)
Compilation
my-component-
internal.js
create()
JIT
JIT
(Just in time)
Compilation
my-component.tscreate()
JIT
JIT
(Just in time)
Compilation
my-component-
internal.js
detectChanges()
AoT
AoT
(Ahead of time)
Compilation
3x - 10x
#2 enableProdMode
SMARTER?
#3 Change Detection
ChangeDetection.Default
user === valorAntigoDoUser ?
user.name === valorAntigoDoUser.name ?
user.bio === valorAntigoDoUser...
ChangeDetection.OnPush
user === valorAntigoDoUser ?
run change detection! :-)
IMUTABILIDADE
ChangeDetection Demo
Notifique o
Angular!
markForCheck();
#4 trackby
#5 WebWorkers
Event Loop
Single thread
#6 Server-side rendering
AoT !== SSR
Otimiza JS Gera HTML/CSS
• Angular universal
Ferramentas
• Vue.js Server-Side
• import ReactDOMServer from 'react-dom/server';
https://github.com/mgechev/angular-performance-checklist
https://blog.thoughtram.io
https://victorsavkin.com
https://twitt...
Angular  Extreme Performance
Angular  Extreme Performance
Angular  Extreme Performance
Angular  Extreme Performance
Angular  Extreme Performance
Angular  Extreme Performance
Angular  Extreme Performance
Angular  Extreme Performance
Angular  Extreme Performance
Prochain SlideShare
Chargement dans…5
×

Angular Extreme Performance

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, Brotli 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 no Javascript vanilla.

  • Soyez le premier à commenter

Angular Extreme Performance

  1. 1. Extreme Performance
  2. 2. Gustavo Costa
  3. 3. @willgmbr
  4. 4. N R Pilares da Performance Front-end Network performance Runtime performance
  5. 5. Bundling 1 2 Minification…+ 3 Tree-shaking 4 AOT 5 Lazy-load 6 Service Worker Network performance
  6. 6. W Webpack Tools B Browserify R Rollup R SystemJS G Gulp G Grunt G GCC ? …
  7. 7. #1 Bundling
  8. 8. #1 Bundling
  9. 9. #2 Minification…+ Dead code Ofuscation Minification UglifyJS
  10. 10. #3 Tree Shaking
  11. 11. JIT AoT #4 AoT JIT (Just in time) Compilation AoT (Ahead of time) Compilation
  12. 12. • Compilamos para gerar um código mais eficiente para as VMs Compilar? • Versão 2 > cada componente tem seu PRÓPRIO Change detector. • O Angular precisa ‘compilar' todo o template para também conseguir aplicar o tree shaking
  13. 13. 1 2 componente.js (transpilado do typescript) Entendendo um Componente Angular componente-internal.js (ngfactory) my-component
  14. 14. JIT JIT (Just in time) Compilation my-component.ts my-component.js …
  15. 15. JIT JIT (Just in time) Compilation • Baixa todos os Javascripts. • Angular é iniciado, verifica se é para iniciar em JIT ou AoT. • Angular precisa compilar TODOS os componentes em JIT • A aplicação é iniciada.
  16. 16. JIT JIT (Just in time) Compilation my-component.js • Angular precisa ‘compilar’ esse template e criar tudo isso via javascript, nosso internal component ou (ngfactory) • Com isso criar o Change detector desse componente. …
  17. 17. ng serve
  18. 18. • TODO o código do Angular foi IMPORTADO e TODO SEU COMPILER e suas dependências também. KEEP CALM! • Não há ABSOLUTAMENTE NENHUMA técnica de performance nesse código (minificação, tree shaking etc…) • Isso é que faz deixar o ‘auto reload’ rápido desenvolvendo uma aplicação Angular
  19. 19. AoT AoT (Ahead of time) Compilation ng serve —aot ng build—aot
  20. 20. AoT AoT (Ahead of time) Compilation • Também tem muito benefício em runtime performance, veremos mais na frente.
  21. 21. JIT AoT Recap #4 AoT JIT (Just in time) Compilation AoT (Ahead of time) Compilation
  22. 22. Vue
  23. 23. #5 lazy-load People Component01 Person Component 02
  24. 24. People Module People Service People Component Person Module Person Service Person Component App Component App Routing App Module / /person/:id lazylazy eager #5 lazy-load
  25. 25. Lazy demo
  26. 26. HTTP2 1 2 ServiceWorker 3 Application Shell 4 CacheAPI 5 Pre-fetching Outras técnicas
  27. 27. easy
  28. 28. Angular CLI
  29. 29. Build time! ng build --prod
  30. 30. #5 compression
  31. 31. GCC + BROTLI
  32. 32. Em breve teremos hello world do Angular com apenas: 40kb!
  33. 33. AoT 1 3 Change Detection 4 trackby 5 WebWorkers Runtime performance enableProdMode 2 6 Server-side rendering
  34. 34. JIT AoT #1 AoT JIT (Just in time) Compilation AoT (Ahead of time) Compilation
  35. 35. JIT JIT (Just in time) Compilation • Baixa todos os Javascripts. • Angular é iniciado, verifica se é para iniciar em JIT ou AoT. • Angular precisa compilar TODOS os componentes em JIT • A aplicação é iniciada.
  36. 36. AoT AoT (Ahead of time) Compilation • Baixa todos os Javascripts. • Angular é iniciado, inicia com AoT • Angular precisa compilar TODOS os componentes em JIT • A aplicação é iniciada.
  37. 37. JIT JIT (Just in time) Compilation my-component.ts my-component.js …
  38. 38. JIT JIT (Just in time) Compilation my-component.js … my-component- internal.js
  39. 39. JIT JIT (Just in time) Compilation my-component- internal.js create()
  40. 40. JIT JIT (Just in time) Compilation my-component.tscreate()
  41. 41. JIT JIT (Just in time) Compilation my-component- internal.js detectChanges()
  42. 42. AoT AoT (Ahead of time) Compilation
  43. 43. 3x - 10x
  44. 44. #2 enableProdMode
  45. 45. SMARTER? #3 Change Detection
  46. 46. ChangeDetection.Default user === valorAntigoDoUser ? user.name === valorAntigoDoUser.name ? user.bio === valorAntigoDoUser.bio ? user.propsInView * n MUTABILIDADE
  47. 47. ChangeDetection.OnPush user === valorAntigoDoUser ? run change detection! :-) IMUTABILIDADE
  48. 48. ChangeDetection Demo
  49. 49. Notifique o Angular!
  50. 50. markForCheck();
  51. 51. #4 trackby
  52. 52. #5 WebWorkers Event Loop Single thread
  53. 53. #6 Server-side rendering
  54. 54. AoT !== SSR Otimiza JS Gera HTML/CSS
  55. 55. • Angular universal Ferramentas • Vue.js Server-Side • import ReactDOMServer from 'react-dom/server';
  56. 56. https://github.com/mgechev/angular-performance-checklist https://blog.thoughtram.io https://victorsavkin.com https://twitter.com/jeffbcross Referências https://angular.io

×