Angular Best Practices

Best Practices and real scenarios.

Examples
1. Lazy Loading
2. Services
3. Rendering
4. Ng-content vs Ng-template
5. Change detection
6. Pipes vs Functions

Repo: https://github.com/mahcr/angular-costarica-best-practices

Transcript

1. B E S T P R A C T I C E S A N G U L A R C O S TA R I C A Mariano Álvarez, Febrero 2019
2. W H O A M I ? ! malvarezcr mah.cr Mariano Álvarez, Febrero 2019
3. S P E E D U P Y O U R A P P malvarezcr mah.cr Mariano Álvarez, Febrero 2019
4. malvarezcr mah.cr B E F O R E W E S TA R T https://github.com/mahcr/angular-costarica-examples Mariano Álvarez, Febrero 2019
5. malvarezcr mah.cr B U N D L I N G ⚒ AoT Mariano Álvarez, Febrero 2019
6. malvarezcr mah.cr --P R O D N G B U I L D Mariano Álvarez, Febrero 2019
7. malvarezcr mah.cr B P # 1 L A Z Y L O A D I N G Mariano Álvarez, Febrero 2019
8. malvarezcr mah.cr B P # 1 L A Z Y L O A D I N G VS Mariano Álvarez, Febrero 2019
9. malvarezcr mah.cr B P # 1 L A Z Y L O A D I N G Syntaxis Mariano Álvarez, Febrero 2019
10. malvarezcr mah.cr B P # 1 L A Z Y L O A D I N G Syntaxis Mariano Álvarez, Febrero 2019
11. malvarezcr mah.cr B P # 1 L A Z Y L O A D I N G Syntaxis Mariano Álvarez, Febrero 2019
12. malvarezcr mah.cr B P # 1 L A Z Y L O A D I N G Before Mariano Álvarez, Febrero 2019
13. malvarezcr mah.cr B P # 1 L A Z Y L O A D I N G After Mariano Álvarez, Febrero 2019
14. malvarezcr mah.cr D E M O Mariano Álvarez, Febrero 2019
15. malvarezcr mah.cr B P # 2 S E R V I C E S Mariano Álvarez, Febrero 2019
16. malvarezcr mah.cr D E M O Mariano Álvarez, Febrero 2019
17. – A N G U L A R D O C U M E N TAT I O N “When the Angular router lazy-loads a module, it creates a new injector. This injector is a child of the root application injector.” Mariano Álvarez, Febrero 2019
18. malvarezcr mah.cr B P # 2 S E R V I C E S Injector Tree Root Injector Child Injector Child Injector Mariano Álvarez, Febrero 2019
19. malvarezcr mah.cr B P # 2 S E R V I C E S How to fix it? NgModule.forRoot() vs ProvidedIn: “root” Mariano Álvarez, Febrero 2019
20. malvarezcr mah.cr B U N D L E S I Z E M AT T E R S B U T I S N O T E V E RY T H I N G Mariano Álvarez, Febrero 2019
21. malvarezcr mah.cr B P # 3 R E N D E R I N G Mariano Álvarez, Febrero 2019
22. malvarezcr mah.cr B P # 3 R E N D E R I N G NgFor *NgFor; trackBy; Mariano Álvarez, Febrero 2019
23. malvarezcr mah.cr D E M O Mariano Álvarez, Febrero 2019
24. malvarezcr mah.cr B P # 3 R E N D E R I N G Virtual Scroll Mariano Álvarez, Febrero 2019 Ref: https://www.joshmorony.com/boosting-scroll-performance-in-ionic-2/
25. malvarezcr mah.cr B P # 3 R E N D E R I N G Virtual Scroll @angular/cdk Mariano Álvarez, Febrero 2019
26. malvarezcr mah.cr D E M O Mariano Álvarez, Febrero 2019
27. malvarezcr mah.cr B P # 4 C O N T E N T P R O J E C T I O N Mariano Álvarez, Febrero 2019
28. malvarezcr mah.cr B P # 4 C O N T E N T P R O J E C T I O N ng-content usage Mariano Álvarez, Febrero 2019
29. malvarezcr mah.cr D E M O Mariano Álvarez, Febrero 2019
30. malvarezcr mah.cr B P # 4 C O N T E N T P R O J E C T I O N ng-content usage WHY??? Mariano Álvarez, Febrero 2019
31. malvarezcr mah.cr B P # 4 C O N T E N T P R O J E C T I O N ng-content usage “Consistency of expectations” Mariano Álvarez, Febrero 2019
32. malvarezcr mah.cr B P # 4 C O N T E N T P R O J E C T I O N ng-content usage “Performance” Mariano Álvarez, Febrero 2019
33. malvarezcr mah.cr D E M O Mariano Álvarez, Febrero 2019
34. malvarezcr mah.cr B P # 5 C H A N G E D E T E C T I O N S T R AT E G Y Mariano Álvarez, Febrero 2019
35. malvarezcr mah.cr B P # 5 C H A N G E D E T E C T I O N What’s it? App Component ContactComponent ListComponent TodoListComponent IconComponent Mariano Álvarez, Febrero 2019
36. malvarezcr mah.cr B P # 5 C H A N G E D E T E C T I O N What’s it? • Default • OnPush Mariano Álvarez, Febrero 2019
37. – M I N K O G E C H E V “With, OnPush change detection will be triggered determines that any of the inputs of a component has changed or when an event in the component is triggered” Mariano Álvarez, Febrero 2019
38. malvarezcr mah.cr B P # 5 C H A N G E D E T E C T I O N What’s it? App Component TodoListComponent IconComponent App Component BannerComponent IconComponent ContactComponent ListComponent Mariano Álvarez, Febrero 2019
39. malvarezcr mah.cr D E M O Mariano Álvarez, Febrero 2019
40. malvarezcr mah.cr B P # 5 C H A N G E D E T E C T I O N What’s it? App Component BannerComponent IconComponent ContactComponent ListComponent Mariano Álvarez, Febrero 2019
41. malvarezcr mah.cr B P # 5 C H A N G E D E T E C T I O N What’s it? App Component TodoListComponent IconComponent App Component BannerComponent IconComponent ContactComponent ListComponent Mariano Álvarez, Febrero 2019
42. malvarezcr mah.cr B P # 5 C H A N G E D E T E C T I O N What’s it? App Component ContactComponent ListComponent BannerComponent IconComponent Mariano Álvarez, Febrero 2019
43. malvarezcr mah.cr B P # 5 C H A N G E D E T E C T I O N What’s it? App Component WrapperComponent ContactComponent BannerComponent IconComponent InputComponent Mariano Álvarez, Febrero 2019
44. malvarezcr mah.cr B P # 6 P I P E S V S F U N C T I O N S Mariano Álvarez, Febrero 2019
45. malvarezcr mah.cr B P # 6 P I P E S V S F U N C T I O N S Pure functions • No side effects • Always return the same value e.g 2 + 2 = 4 Mariano Álvarez, Febrero 2019
46. malvarezcr mah.cr B P # 6 P I P E S V S F U N C T I O N S Pipes • Pure pipes Angular executes a pure pipe only when it detects a pure change to the input value. • Impure pipes Angular executes an impure pipe during every component change detection cycle. Mariano Álvarez, Febrero 2019
47. – W I K I P E D I A “memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again” Mariano Álvarez, Febrero 2019 Mariano Álvarez, Febrero 2019
48. malvarezcr mah.cr C O N C L U S I O N Mariano Álvarez, Febrero 2019
49. M A R I A N O A LVA R E Z ! malvarezcr mah.cr Mariano Álvarez, Febrero 2019