Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular DI Processor Pattern
Search
Jecelyn Yeen
September 27, 2018
Programming
0
900
Angular DI Processor Pattern
Implement Processor Pattern with Angular Dependency Injection
Jecelyn Yeen
September 27, 2018
Tweet
Share
More Decks by Jecelyn Yeen
See All by Jecelyn Yeen
WorkerConf 2021 - Browser automation with Puppeteer
jecfish
0
1.4k
My Journey as Technical Presenter
jecfish
0
780
Becoming a GDE
jecfish
0
3.4k
How to get started in IT Freelancing
jecfish
1
250
New Web API & Stylings
jecfish
3
590
如何打造高性能且SEO友好的单页应用(SPA)
jecfish
2
690
JS SEO
jecfish
4
1.3k
Web Performance Optimization
jecfish
5
1.6k
Have Fun with Angular
jecfish
0
80
Other Decks in Programming
See All in Programming
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
640
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
560
Implementing Design Systems in Swift
seyfoyun
0
370
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
850
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
890
What We Can Learn From OSS
inouehi
0
430
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
160
Ruby Function Composition
bkuhlmann
1
340
Featured
See All Featured
The Invisible Customer
myddelton
114
12k
Infographics Made Easy
chrislema
238
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Faster Mobile Websites
deanohume
300
30k
GraphQLとの向き合い方2022年版
quramy
33
12k
Facilitating Awesome Meetings
lara
43
5.6k
Automating Front-end Workflow
addyosmani
1357
200k
We Have a Design System, Now What?
morganepeng
44
6.8k
Designing with Data
zakiwarfel
96
4.8k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
Transcript
Angular | Dependency Injection | Processor Pattern + +
@JecelynYeen From Kuala Lumpur, Malaysia • GDE - Web technologies,
Angular • Software Architect @ Randstad Organizer:
• Dependency Injection (DI) • DI in Angular • Processor
Pattern • DI + Processor Pattern in Angular + +
Dependency Injection . What & Why?
Weapon is made of material (wood). Ninja needs a weapon
(nunchakus). We have a ninja.
- Single Responsibility - Tightly coupled - Hard to unit
test
Dependency Injection
Hookup implementation during bootstrap inject in constructor no need to
instantiate
Replace implementation under the hood
Dependency Injection • Unit testable • Reusability • Loosely coupled
• Dependency Inversion principle
DI in Angular
service service hook up
• 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
Dependency Injection is static
Dependency Injection is static hook up only once
what if our ninja need to switch weapon dynamically https://di-processor.firebaseapp.com/ninja-di
what if our ninja need to switch weapon dynamically https://di-processor.firebaseapp.com/ninja-di
nunchakus, dart, stick, sword
Processor Pattern using injection token & multi-provider
weapon interface name, draw(), animate() Inject into NinjaComponent as weapon[
] injection token processors multi-providers
Injection Token + Processor Interface
Processor implement the interface
Multiple providers with same token one token multiple implementations set
as multi
Inject multiple providers Injection 4 processors get one processor Invoke
processor functions
Production Use Case: Chart Processors
- 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
YYYY-MM what users want to see YYYY-MM-DD what backend returns
Frontend developer
what your chart library wants what you need to do
• transform data (loop & group it by year month) • sort it • generate chart configuration
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
Injection Token + Processor Interface
Multiple providers with same token
Dashboard Component
Other useful scenario • Data table processors • Search processors
https://stackoverflow.com/questions/48382323/angular-lookup-all- providers-implementing-a-specific-interface/ 48383858#comment83773434_48383858
Benefits • Abstraction • Plugins
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 + +