Angular DI Processor Pattern

Slide 1

Slide 1 text

Angular | Dependency Injection | Processor Pattern + +

Slide 2

Slide 2 text

@JecelynYeen From Kuala Lumpur, Malaysia • GDE - Web technologies, Angular • Software Architect @ Randstad Organizer:

Slide 3

Slide 3 text

• Dependency Injection (DI) • DI in Angular • Processor Pattern • DI + Processor Pattern in Angular + +

Slide 4

Slide 4 text

Dependency Injection . What & Why?

Slide 5

Slide 5 text

Weapon is made of material (wood). Ninja needs a weapon (nunchakus). We have a ninja.

Slide 6

Slide 6 text

- Single Responsibility - Tightly coupled - Hard to unit test

Slide 7

Slide 7 text

Dependency Injection

Slide 8

Slide 8 text

Hookup implementation during bootstrap inject in constructor no need to instantiate

Slide 9

Slide 9 text

Replace implementation under the hood

Slide 10

Slide 10 text

Dependency Injection • Unit testable • Reusability • Loosely coupled • Dependency Inversion principle

Slide 11

Slide 11 text

DI in Angular

Slide 12

Slide 12 text

service service hook up

Slide 13

Slide 13 text

• 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

Slide 14

Slide 14 text

Dependency Injection is static

Slide 15

Slide 15 text

Dependency Injection is static hook up only once

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

what if our ninja need to switch weapon dynamically https://di-processor.ﬁrebaseapp.com/ninja-di nunchakus, dart, stick, sword

Slide 18

Slide 18 text

Processor Pattern using injection token & multi-provider

Slide 19

Slide 19 text

weapon interface name, draw(), animate() Inject into NinjaComponent as weapon[ ] injection token processors multi-providers

Slide 20

Slide 20 text

Injection Token + Processor Interface

Slide 21

Slide 21 text

Processor implement the interface

Slide 22

Slide 22 text

Multiple providers with same token one token multiple implementations set as multi

Slide 23

Slide 23 text

Inject multiple providers Injection 4 processors get one processor Invoke processor functions

Slide 24

Slide 24 text

Production Use Case: Chart Processors

Slide 25

Slide 25 text

- chart type - title / menu - processing logic - labels & tooltips Differences - they are all charts - same interface:- - processData() - name, title, etc Similar https://di-processor.ﬁrebaseapp.com

Slide 26

Slide 26 text

YYYY-MM what users want to see YYYY-MM-DD what backend returns Frontend developer

Slide 27

Slide 27 text

what your chart library wants what you need to do • transform data (loop & group it by year month) • sort it • generate chart conﬁguration

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Injection Token + Processor Interface

Slide 30

Slide 30 text

Multiple providers with same token

Slide 31

Slide 31 text

Dashboard Component

Slide 32

Slide 32 text

Other useful scenario • Data table processors • Search processors https://stackoverﬂow.com/questions/48382323/angular-lookup-all- providers-implementing-a-speciﬁc-interface/ 48383858#comment83773434_48383858

Slide 33

Slide 33 text

Beneﬁts • Abstraction • Plugins

Slide 34

Slide 34 text

slides: https://speakerdeck.com/chybie/angular-di-processor-pattern demo: https://di-processor.ﬁrebaseapp.com code: https://github.com/chybie/di-processor code (inject by service): https://stackblitz.com/edit/ninja-weapon- processors?ﬁle=src%2Fapp%2Fninja%2Fninja.component.ts twitter: @JecelynYeen + +