view models for component driven

54
@daloog #eatdog Component Driven …and modular UI code with ViewModel Alexey Demedetskyi

Upload: eatdog

Post on 16-Apr-2017

978 views

Category:

Software


2 download

TRANSCRIPT

Page 1: View models for component driven

@daloog#eatdog

Component Driven

…and modular UI code with ViewModel

Alexey Demedetskyi

Page 2: View models for component driven

@daloog#eatdog

“Design is never done.”

Page 3: View models for component driven

@daloog#eatdog

Page 4: View models for component driven

@daloog#eatdog

Art

Page 5: View models for component driven

@daloog#eatdog

Art

Engineering

Page 6: View models for component driven

@daloog#eatdog

Art

Engineering

UI - ?

Page 7: View models for component driven

@daloog#eatdog

Page 8: View models for component driven

@daloog#eatdog

Driver?

Page 9: View models for component driven

@daloog#eatdog

Feedback loop

Page 10: View models for component driven

@daloog#eatdog

Definition of done

Page 11: View models for component driven

@daloog#eatdog

Evolution?

Page 12: View models for component driven

@daloog#eatdog

Better result

Page 13: View models for component driven

@daloog#eatdog

Better tools

Page 14: View models for component driven

@daloog#eatdog

Art

Engineering

UI - ?

Page 15: View models for component driven

@daloog#eatdog

Art

Engineering

UI

Page 16: View models for component driven

@daloog#eatdog

UI is the hardest CS problem

Page 17: View models for component driven

@daloog#eatdog

Page 18: View models for component driven

@daloog#eatdog

Page 19: View models for component driven

@daloog#eatdog

Page 20: View models for component driven

@daloog#eatdog

Page 21: View models for component driven

@daloog#eatdog

Zero* dependency** rule

* - not actually zero** - internal is ok

Page 22: View models for component driven

@daloog#eatdog

Module

External dependency

Page 23: View models for component driven

@daloog#eatdog

TDD?

Page 24: View models for component driven

@daloog#eatdog

Page 25: View models for component driven

@daloog#eatdog

Singletons

Page 26: View models for component driven

@daloog#eatdog

Parent is always responsible for child

dependencies

Page 27: View models for component driven

@daloog#eatdog

ModuleInternal

dependency

Page 28: View models for component driven

@daloog#eatdog

Module context always should be

external

Page 29: View models for component driven

@daloog#eatdog

Zero dependency

UI?

Page 30: View models for component driven

@daloog#eatdog

ComponentUI

Page 31: View models for component driven

@daloog#eatdog

Page 32: View models for component driven

@daloog#eatdog

Action

Page 33: View models for component driven

@daloog#eatdog

VM == Props

Page 34: View models for component driven

@daloog#eatdog

MVVM

Page 35: View models for component driven

@daloog#eatdog

React

Page 36: View models for component driven

@daloog#eatdog

VM + DynamicAnimations, partial updates, etc.

Page 37: View models for component driven

@daloog#eatdog

Deposit

Time

Page 38: View models for component driven

@daloog#eatdog

Deposit

Time

Page 39: View models for component driven

@daloog#eatdog

Deposit

Time

++ - - -

Page 40: View models for component driven

@daloog#eatdog

State = f(t)

Page 41: View models for component driven

@daloog#eatdog

Event = ΔState

Page 42: View models for component driven

@daloog#eatdog

State = ∫Event

Page 43: View models for component driven

@daloog#eatdog

Page 44: View models for component driven

@daloog#eatdog

CQRS Event

sourcing

Page 45: View models for component driven

@daloog#eatdog

Page 46: View models for component driven

@daloog#eatdog

Data driven

Page 47: View models for component driven

@daloog#eatdog

VM + ComplexityContainers, transition

Page 48: View models for component driven

@daloog#eatdog

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

Page 49: View models for component driven

@daloog#eatdog

FriendsList VC

Friend VC

FriendsList VM

Friend VM

Page 50: View models for component driven

@daloog#eatdog

Page 51: View models for component driven

@daloog#eatdog

Page 52: View models for component driven

@daloog#eatdog

Shared state

Page 53: View models for component driven

@daloog#eatdog

http://redux.js.org

Page 54: View models for component driven

@daloog#eatdog

Questions?

[email protected]