How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)
1 like235 views
The document discusses strategies for improving Angular applications by focusing on bundle size and application performance. It emphasizes the significance of tree shaking, ahead-of-time compilation (AOT), and efficient architecture for enhanced performance and reduced loading times. Various techniques, including image optimization, event management, and effective data layer usage, are presented to address existing issues and optimize user experience.
![22 April 2017
Binding
One-directional «inside»:
• {{expression}}
• [target] = "expression"
• bind-target = "expression"](https://image.slidesharecdn.com/v4tweakingofanglar2performance-170430105006/85/How-To-Tweak-Angular-2-Performance-JavaScript-Frameworks-Day-2017-Kiev-47-320.jpg)
![22 April 2017
Binding
Two-directional:
• [(target)] = "expression"
• bindon-target = "expression"](https://image.slidesharecdn.com/v4tweakingofanglar2performance-170430105006/85/How-To-Tweak-Angular-2-Performance-JavaScript-Frameworks-Day-2017-Kiev-51-320.jpg)
How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)
- 2. 12822 April 2017 2
- 3. What is 128 hours • 3 working weeks and 1 day. • 4 / 5 of your yearly vacation plan. • Some money. • Put your option here. 22 April 2017 3
- 4. Agenda • Why does performance matter? • Why do we need to tweak Angular 2? • Problems we need to solve • Solutions • Conclusions 22 April 2017 4
- 5. What can we improve? • Bundle size • Application performance 22 April 2017 5
- 6. Infrastructure Improvements 22 April 2017 6
- 7. Bundle size: problem 22 April 2017 7 Not optimized FE 2752kb Images Fonts HTML Scripts CSS
- 8. Bundle size: problem 22 April 2017 8 Optimized FE 822 kb Images Fonts HTML Scripts CSS
- 9. Bundle size: problem 22 April 2017 9 0 50 100 150 200 250 300 350 400 2.5 Mb 1.5 Mb 0.5Mb Loadingtime 56,6 kbit/s 1 Mbit/s 5 Mbit/s 50 Mbit/s
- 10. Ok. Why does it matter? 80% of internet users own a smartphone. (Smart Insights) 22 April 2017 10
- 11. … Over 50% of smartphone users grab their smartphone immediately after waking up. (ExpressPigeon, 2014) 22 April 2017 11
- 12. … Google says 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead. (MicKinsey & Company) 22 April 2017 12
- 13. Ok. Why does it matter?
- 14. How can we reduce the bundle size? • Compress pictures • Minify styles, templates and scripts • Remove useless code 22 April 2017 14
- 15. Handling images • gulp-image-optimization • gulp-image • gulp-imagemin • image-webpack-loader … 22 April 2017 15
- 16. Handling styles • A variety of Webpack loaders • Angular CLI supports it by design 22 April 2017 16
- 17. Handling scripts • A variety of Webpack loaders • Angular CLI supports it by design • … it is still huge. So we need to remove useless code. 22 April 2017 17
- 18. Tree Shaking 22 April 2017 18 0 500 1000 1500 2000 2500 Application 1 Application 2 Optimization Results Before Tree Shaking,Kb With Tree Shaking,Kb
- 19. 22 April 2017 Tree Shaking - Webpack marks useless code - UglifyJsPlugin removes the code
- 20. How does tree shaking work? 22 April 2017 20
- 21. How does tree shaking work? 22 April 2017 21
- 22. How does tree shaking work? 22 April 2017 22
- 23. Tree Shaking • For the moment Angular CLI has problems with tree shaking. • Use the latest version of Angular CLI. • You need TypeScript 2 and WebPack 2. 22 April 2017 23
- 24. Compilation 22 April 2017 24
- 25. Compilation • Just In Time Compilation (JIT) • Ahead Of Time Compilation (AOT) 22 April 2017 25
- 26. What is JIT? • Compiles in the browser. • No need to build after changes. • Default compiler in Angular 2 CLI. 22 April 2017 26
- 27. Why is AOT better? • You don’t need to load compiler anymore. • Faster loading. • Better runtime performance. • AOT is more secure, because JIT uses eval. 22 April 2017 27
- 28. AST (Abstract Syntax Tree) 22 April 2017 28 Script Container Members Decorators Container Members Decorators Container Members Decorators
- 29. AOT (Ahead Of Time Compilation) 22 April 2017 29 0 0.5 1 1.5 2 2.5 3 Bundle size, mb AngularCLI defaultprojectsize Compression,tree shaking and AOT Compression with Tree Shaking Raw
- 30. What can we improve? • Bundle size • Application performance 22 April 2017 30
- 31. Architecture Improvements 22 April 2017 31
- 32. Does architecture matter on Frontend? 22 April 2017 32
- 33. What we can achieve with good architecture? • Better application performance • Fewer API requests (app drives faster) • Faster loading speed 22 April 2017 33
- 34. What architecture features are we talking about? • Make sure we’re using events efficiently. • Make sure our data layer uses data efficiently. • Control assets loading process. • Organize correct components composition. • Reduce DOM overhead. 22 April 2017 34
- 35. What to do with events? • Use correct lifecycle hooks in the app. • Be careful with your own events and use destructors. • Avoid duplication of events. • Avoid creation of useless events. 22 April 2017 35
- 36. What can we do with a data layer? • Store static data in the browser. (Caching) • Use pure RESTAPI (With HATEOAS) • Use debouncing. Really. • Background services. 22 April 2017 36
- 37. HATEAOS 22 April 2017 37
- 38. 22 April 2017 ReactiveX (Rx.js) • One more way to organize the asynchronous actions using JavaScript • Leads to a new way of the components’ composition.
- 39. Problem: XHR Overhead 22 April 2017 39
- 40. Rx.js + A2 PROS - Allows us to remove HTTP logic from the components. - Very easy to use with the ‘async’ pipe. CONS - Leads to a new way of the components’ composition. - It isn’t a fastest solution. 22 April 2017 40
- 41. What can we do with component’s composition? 22 April 2017 41
- 42. Components Composition 22 April 2017 42
- 43. Problem: Memory Leaks 22 April 2017 43
- 44. Solution: Zone.js, ngZones, Data Composition • Dying zone will remove the subscriptions for local streams, but won’t do it to current ones in service, upper- level components. • Use ngOnDestroy lifecycle hook for removing such subscriptions. 22 April 2017 44
- 45. Zone.js, ngZones, Data Composition 22 April 2017 H T T P S : / / G I T H U B . C O M / A N G U L A R / Z O N E . J S / 45
- 46. Problem: Binding Overhead • A simple rule: don’t use two-way binding when you don’t need it. • ‘Singular’ binding isn’t shipped out of the box, but there are several ways to implement it. 22 April 2017 46
- 47. 22 April 2017 Binding One-directional «inside»: • {{expression}} • [target] = "expression" • bind-target = "expression"
- 48. One-directional «inside»: 22 April 2017 48
- 49. 22 April 2017 Binding One-directional «outside»: • (target) = "statement" • on-target = "statement"
- 50. One-directional «outside»: 22 April 2017 50
- 51. 22 April 2017 Binding Two-directional: • [(target)] = "expression" • bindon-target = "expression"
- 53. Problem: army of listeners 22 April 2017 53
- 54. Solution: Change Detection Strategies • OnPush • Default 22 April 2017 54
- 55. Change Detection Strategies 22 April 2017 55
- 56. What to with the DOM? • Remove and add the elements back instead of hiding / displaying. • Don’t call DOM directly if it’s possible. • When it isn’t possible use ElementRef, @ViewChild/@ViewChildren. 22 April 2017 56
- 57. THANKS! 22 April 2017 57