Angular DI Processor Pattern

1a73ecdb082f212bf8d81eb9a3a53e29?s=47 Jecelyn Yeen
September 27, 2018

Angular DI Processor Pattern

Implement Processor Pattern with Angular Dependency Injection

1a73ecdb082f212bf8d81eb9a3a53e29?s=128

Jecelyn Yeen

September 27, 2018
Tweet

Transcript

  1. Angular | Dependency Injection | Processor Pattern + +

  2. @JecelynYeen From Kuala Lumpur, Malaysia • GDE - Web technologies,

    Angular • Software Architect @ Randstad Organizer:
  3. • Dependency Injection (DI) • DI in Angular • Processor

    Pattern • DI + Processor Pattern in Angular + +
  4. Dependency Injection . What & Why?

  5. Weapon is made of material (wood). Ninja needs a weapon

    (nunchakus). We have a ninja.
  6. - Single Responsibility - Tightly coupled - Hard to unit

    test
  7. Dependency Injection

  8. Hookup implementation during bootstrap inject in constructor no need to

    instantiate
  9. Replace implementation under the hood

  10. Dependency Injection • Unit testable • Reusability • Loosely coupled

    • Dependency Inversion principle
  11. DI in Angular

  12. service service hook up

  13. • UseClass • UseValue • UseFactory • UseExisting + https://offering.solutions/blog/articles/2018/08/17/using-useclass-usefactory-usevalue-

    useexisting-with-treeshakable-providers-in-angular/ https://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
  14. Dependency Injection is static

  15. Dependency Injection is static hook up only once

  16. what if our ninja need to switch weapon dynamically https://di-processor.firebaseapp.com/ninja-di

  17. what if our ninja need to switch weapon dynamically https://di-processor.firebaseapp.com/ninja-di

    nunchakus, dart, stick, sword
  18. Processor Pattern using injection token & multi-provider

  19. weapon interface name, draw(), animate() Inject into NinjaComponent as weapon[

    ] injection token processors multi-providers
  20. Injection Token + Processor Interface

  21. Processor implement the interface

  22. Multiple providers with same token one token multiple implementations set

    as multi
  23. Inject multiple providers Injection 4 processors get one processor Invoke

    processor functions
  24. Production Use Case: Chart Processors

  25. - chart type - title / menu - processing logic

    - labels & tooltips Differences - they are all charts - same interface:- - processData() - name, title, etc Similar https://di-processor.firebaseapp.com
  26. YYYY-MM what users want to see YYYY-MM-DD what backend returns

    Frontend developer
  27. what your chart library wants what you need to do

    • transform data (loop & group it by year month) • sort it • generate chart configuration
  28. What you actually do - Chart Processor https://github.com/chybie/di-processor/blob/master/src/app/chart-di/services/chart-new-starter-processor.service.ts private

  29. Injection Token + Processor Interface

  30. Multiple providers with same token

  31. Dashboard Component

  32. Other useful scenario • Data table processors • Search processors

    https://stackoverflow.com/questions/48382323/angular-lookup-all- providers-implementing-a-specific-interface/ 48383858#comment83773434_48383858
  33. Benefits • Abstraction • Plugins

  34. slides: https://speakerdeck.com/chybie/angular-di-processor-pattern demo: https://di-processor.firebaseapp.com code: https://github.com/chybie/di-processor code (inject by service):

    https://stackblitz.com/edit/ninja-weapon- processors?file=src%2Fapp%2Fninja%2Fninja.component.ts twitter: @JecelynYeen + +