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

Angular Library: Beginner to Advanced

Angular Library: Beginner to Advanced

8062b68c5fac6fa73137bb93a9b1830f?s=128

Yadong Xie

May 04, 2021
Tweet

Transcript

  1. Beginner to Advanced NGULAR LIBRARY Yadong Xie Google Developer Expert

    Twitter: @yadong_xie
  2. None
  3. Performance

  4. Change Detection Strategy • CheckOnce Instead Of CheckAlways • https://danielwiehl.github.io/edu-angular-change-detection/

    • Use markForCheck() with CheckOnce strategy • Optimize Angular's change detection • Detach Change Detector • Detach change detector to limit how often check occurs • Zone Flags • https://angular.io/guide/zone • ngZoneEventCoalescing • ngZoneRunCoalescing • ZoneLess • runOutsideAngular • markDirty
  5. Bundle Size

  6. Think twice before add dependency

  7. None
  8. Reduce Bundle Size • Think twice before add dependency •

    Rage-quit: Coder unpublished 17 lines of JavaScript and “broke the Internet” • String.prototype.padStart() • Moment bundle size • ECMAScript Modules • ECMAScript modules • How CommonJS is making your bundles larger • Creating Secondary Entry Points • https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md • Angular Package Format (APF) • Angular Official Dependency • Component Dev Kit (@angular/cdk)
  9. Usability

  10. Element Selector Attribute Selector VS

  11. Use Attribute Selector When • Supporting Original Attributes • Change

    the behavior of DOM elements • Keep DOM structure Button Input
  12. <ng-template> <ng-content> VS

  13. Use <ng-template> When • Create multiple copies • Lazy load

    child component Tabs Space
  14. Projection Child Component Virtual Child Component VS

  15. Virtual Child Component When • Customize complex template • Reorganize

    input template Table Select
  16. Q&A