@daloog#eatdog

Component Driven

…and modular UI code with ViewModel

Alexey Demedetskyi

@daloog#eatdog

“Design is never done.”

@daloog#eatdog

@daloog#eatdog

Art

@daloog#eatdog

Art

Engineering

@daloog#eatdog

Art

Engineering

UI - ?

@daloog#eatdog

@daloog#eatdog

Driver?

@daloog#eatdog

Feedback loop

@daloog#eatdog

Definition of done

@daloog#eatdog

Evolution?

@daloog#eatdog

Better result

@daloog#eatdog

Better tools

@daloog#eatdog

Art

Engineering

UI - ?

@daloog#eatdog

Art

Engineering

UI

@daloog#eatdog

UI is the hardest CS problem

@daloog#eatdog

@daloog#eatdog

@daloog#eatdog

@daloog#eatdog

@daloog#eatdog

Zero* dependency** rule

* - not actually zero** - internal is ok

@daloog#eatdog

Module

External dependency

@daloog#eatdog

TDD?

@daloog#eatdog

@daloog#eatdog

Singletons

@daloog#eatdog

Parent is always responsible for child

dependencies

@daloog#eatdog

ModuleInternal

dependency

@daloog#eatdog

Module context always should be

external

@daloog#eatdog

Zero dependency

UI?

@daloog#eatdog

ComponentUI

@daloog#eatdog

@daloog#eatdog

Action

@daloog#eatdog

VM == Props

@daloog#eatdog

MVVM

@daloog#eatdog

React

@daloog#eatdog

VM + DynamicAnimations, partial updates, etc.

@daloog#eatdog

Deposit

Time

@daloog#eatdog

Deposit

Time

@daloog#eatdog

Deposit

Time

++ - - -

@daloog#eatdog

State = f(t)

@daloog#eatdog

Event = ΔState

@daloog#eatdog

State = ∫Event

@daloog#eatdog

@daloog#eatdog

CQRS Event

sourcing

@daloog#eatdog

@daloog#eatdog

Data driven

@daloog#eatdog

VM + ComplexityContainers, transition

@daloog#eatdog

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.62d4jggzw

@daloog#eatdog

FriendsList VC

Friend VC

FriendsList VM

Friend VM

@daloog#eatdog

@daloog#eatdog

@daloog#eatdog

Shared state

@daloog#eatdog

http://redux.js.org

@daloog#eatdog

Questions?

dalog@me.com