The document discusses methods to improve the performance of Angular 2 applications, focusing on reducing bundle size and optimizing application performance. Key strategies include using techniques like tree shaking, ahead-of-time (AOT) compilation, efficient architecture, and managing event listeners effectively. Recommendations for handling images, styles, scripts, and proper data layer management are also provided to enhance overall application efficiency.

3. HOW TO IMPROVE ANGULAR
2 PERFORMANCE?
Oleksandr Tryshchenko
Senior Front-end Developer, DataArt
tryshchenko.com

4. HOW TO IMPROVE ANGULAR
2 4 PERFORMANCE?
Oleksandr Tryshchenko
Senior Front-end Developer, DataArt
tryshchenko.com

5. 128

6. What is 128 hours
• 3 working weeks and 1 day.
• 4 / 5 of your yearly vacation plan.
• Some money.
• Put your option here.
26 April 2017 6

7. Agenda
• Why does performance matter?
• Why do we need to tweak Angular 2?
• Problems we need to solve
• Solutions
• Conclusions
26 April 2017 7

8. What can we improve?
• Bundle size
• Application performance
26 April 2017 8

9. Infrastructure Improvements
26 April 2017 9

10. Bundle size: problem
26 April 2017 10
Not optimized FE 2752kb
Images Fonts HTML Scripts CSS

11. Bundle size: problem
26 April 2017 11
Optimized FE 822 kb
Images Fonts HTML Scripts CSS

12. Bundle size: problem
26 April 2017 12
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

13. Ok. Why does it matter?
80% of internet users own a smartphone. (Smart Insights)
26 April 2017 13

14. …
Over 50% of smartphone users grab their smartphone
immediately after waking up. (ExpressPigeon, 2014)
26 April 2017 14

15. …
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)
26 April 2017 15

16. Ok. Why does it matter?

17. How can we reduce the bundle size?
• Compress pictures
• Minify styles, templates and scripts
• Remove useless code
26 April 2017 17

18. Handling images
• gulp-image-optimization
• gulp-image
• gulp-imagemin
• image-webpack-loader
…
26 April 2017 18

19. Handling styles
• A variety of Webpack loaders
• Angular CLI supports it by design
26 April 2017 19

20. Handling scripts
• A variety of Webpack loaders
• Angular CLI supports it by design
• … it is still huge. So we need to remove useless code.
26 April 2017 20

21. Tree Shaking
26 April 2017 21
0 500 1000 1500 2000 2500
Application 1
Application 2
Optimization Results
Before Tree Shaking,Kb With Tree Shaking,Kb

22. 26 April 2017 22
🎄👋

23. 26 April 2017
Tree Shaking
- Webpack marks useless code
- UglifyJsPlugin removes the code

24. How does tree shaking work?
26 April 2017 24

25. How does tree shaking work?
26 April 2017 25

26. How does tree shaking work?
26 April 2017 26

27. 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.
26 April 2017 27

28. Compilation
26 April 2017 28

29. Compilation
• Just In Time Compilation (JIT)
• Ahead Of Time Compilation (AOT)
26 April 2017 29

30. What is JIT?
• Compiles in the browser.
• No need to build after changes.
• Default compiler in Angular 2 CLI.
26 April 2017 30

31. 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.
26 April 2017 31

32. AST (Abstract Syntax Tree)
26 April 2017 32
Script
Container
Members Decorators
Container
Members Decorators
Container
Members Decorators

33. AOT (Ahead Of Time Compilation)
26 April 2017 33
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

35. What can we improve?
• Bundle size
• Application performance
26 April 2017 35

36. Architecture Improvements
26 April 2017 36

37. Does architecture matter on
Frontend?
26 April 2017 37

38. What we can achieve with good
architecture?
• Better application performance
• Fewer API requests (app drives faster)
• Faster loading speed
26 April 2017 38

39. 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.
26 April 2017 39

40. Problem: Army Of Listeners
26 April 2017 40

41. Solution: Change Detection
Strategies
• OnPush
• Default
26 April 2017 41

43. Change Detection Strategies
26 April 2017 43

45. Immutable ☺
26 April 2017 45

46. Mutable 🙁
26 April 2017 46

47. I wanna more!
26 April 2017 H T T P : / / W W W . J V A N D E M O . C O M / H O W - I - O P T I M I Z E D - M I N E S W E E P E R -
U S I N G - A N G U L A R - 2 - A N D - I M M U T A B L E - J S - T O - M A K E - I T - I N S A N E L Y - F A S T /
47
HOW I OPTIMIZED
MINESWEEPER USING
ANGULAR 2 AND
IMMUTABLE.JS TO
MAKE IT INSANELY
FAST
JURGEN VAN DE
MOERE

48. Immutable.js
26 April 2017 48

49. 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.
26 April 2017 49

51. 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.
26 April 2017 51

52. HATEAOS
26 April 2017 52

53. Why HATEOS?
• You don’t need to handle user roles on Front-End
anymore. At all.
• Server does it anyway during request/response cycle.
26 April 2017 53

54. 26 April 2017
ReactiveX (Rx.js)
• One more way to organize the
asynchronous actions using JavaScript
• Leads to a new way of the components’
composition.

55. Problem: XHR Overhead
26 April 2017 55

56. Rx.js + A2
PROS
- Allows us to remove HTTP logic from the components.
- Absolutely simple
CONS
- Leads to a new way of the components’ composition.
- It isn’t a fastest solution.
26 April 2017 56

57. What Can We Do With Component’s
Composition?
26 April 2017 57

58. Components Composition
26 April 2017 58

59. Problem: Memory Leaks
26 April 2017 59

60. 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.
26 April 2017 60

61. Zone.js, ngZones, Data Composition
26 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 / 61

62. 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.
26 April 2017 62

63. One-directional «inside»:
26 April 2017 63

64. One-directional «outside»:
26 April 2017 64

65. Two-directional:
26 April 2017 65

66. Problem: DOM
• Don’t use DOM 🙁
26 April 2017 F O O T E R H E R E 66

67. 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.
26 April 2017 67

68. THANKS!
26 April 2017 68