Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Best Practices

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

Mariano Alvarez

February 16, 2019
Tweet

More Decks by Mariano Alvarez

Other Decks in Programming

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 B P # 2 S E R V

    I C E S Mariano Álvarez, Febrero 2019
  15. – 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
  16. 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
  17. 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
  18. 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
  19. malvarezcr mah.cr B P # 3 R E N D

    E R I N G Mariano Álvarez, Febrero 2019
  20. malvarezcr mah.cr B P # 3 R E N D

    E R I N G NgFor *NgFor; trackBy; Mariano Álvarez, Febrero 2019
  21. 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/
  22. malvarezcr mah.cr B P # 3 R E N D

    E R I N G Virtual Scroll @angular/cdk Mariano Álvarez, Febrero 2019
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. – 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
  32. 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
  33. 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
  34. 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
  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 BannerComponent 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? App Component WrapperComponent ContactComponent BannerComponent IconComponent InputComponent Mariano Álvarez, Febrero 2019
  37. 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
  38. 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
  39. 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
  40. – 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
  41. malvarezcr mah.cr C O N C L U S I

    O N Mariano Álvarez, Febrero 2019
  42. M A R I A N O A LVA R

    E Z ! malvarezcr mah.cr Mariano Álvarez, Febrero 2019