Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular Extreme Performance

1,496 views

Published on

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.

Published in: Technology
  • Be the first to comment

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

×