Unleashing the power of patterns with angular

DMITRIY SHEKHOVTSOV

@valorkin

ngx-bootstrap

Your most used tool?

!

Patterns

- 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”

Module<pattern>

common.js

ES6

A bit of history

IIFE

- name space - encapsulation - structure code - manage dependencies

Module Concept

- accomplish a particular function

- or contain everything necessary

to accomplish a particular task

@NgModule

NgModule is Angular DI configuration point

declarations

exports

imports

providers

Typical Problems

Shared modules & Using component from child

module

Lazy loaded modules & using components from

parent module

Services with the same name

Testing module configuration

CHANGE DETECTION

JS memory notes

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>

Summary

DO NOT OVERUSE

PROS AND CONS

THANKS!@valorkin