Unleashing the power of patterns with angular
DMITRIY SHEKHOVTSOV
Your most used tool?
- singleton - factory - pub/sub - adapter
- DI - module - IoC - CQRS
Dependency injection<pattern>
DEPENDENCY INJECTION
▸dependency injection is a technique whereby one object supplies the dependencies of another object.
DI for 5-years oldJohn Munsch, 28 October 2009
DI for 5-years old
DI for 5-years old
DI for 5-years old
Do we really need DI?
“ Dependency injection in Angular isn’t worth it
“
WITHOUT DEPENDENCY INJECTION
DI “common sense”
- name space - encapsulation - structure code - manage dependencies
- accomplish a particular function
- or contain everything necessary
to accomplish a particular task
NgModule is Angular DI configuration point
Shared modules & Using component from child
module
Lazy loaded modules & using components from
parent module
Services with the same name
Testing module configuration
Data StackPrimitive Values
Memory Heap
Object
let a = {prop:1}
Data StackPrimitive Values
Memory Heap
Object
a.prop = 2Data StackPrimitive Values
Memory Heap
Object
Memory Heap
Old Object
Object
let a = {prop:2}
Data StackPrimitive Values
DIRTY CHECKING<Angular js>
Scope
Data StackPrimitive Values
Memory Heap
Object
Object
clone
Data StackPrimitive Values
Memory Heap
Object
Object
previous scope state
previous state
Data StackPrimitive Values
Memory Heap
Object
Object
Deep diff
Data StackPrimitive Values
Memory Heap
Object
Object
Current state
Scope
Data StackPrimitive Values
Memory Heap
Object
Object
clone
Data StackPrimitive Values
Memory Heap
Old Object
Object
previous scope state
STRICT EQUALITY
<angular>
previous state
Data StackPrimitive Values
Memory Heap
Object
Object
Strict quality diff
Data StackPrimitive Values
Memory Heap
Object
Object
Current state
IMMUTABILITY<principle>
Patterns are everywhere
Single Responsibility<pattern>
Chain Of Responsibility
<pattern>
Pure functions<pattern>
Strategy<pattern>