REDUXBIG LEAP OF JAVASCRIPT APP DEVELOPMENT

SUPASATE CHOOCHAISRI #BARCAMP BANGKHEN 22 NOV 2015

#BARCAMP BANGKHEN 2015

/ME

▸ Supasate Choochaisri (Ping)

Co-founder Larngear Technology, Streaming, Gad-zilla

@kaizerwing

kaizerwing

supasate

#BARCAMP BANGKHEN 2015

WE ARE IN THE MV* WORLDMVC MVP MVVM MV*

#BARCAMP BANGKHEN 2015

MVC WAS INTRODUCED SINCE 1979 SMALLTALK-76, SMALLTALK-80

Trygve Reenskaug

Recommended Reading : “GUI Architectures”, http://martinfowler.com/eaaDev/uiArchs.html

#BARCAMP BANGKHEN 2015

IS MVC/MV* GOOD?

#BARCAMP BANGKHEN 2015

IS MVC/MV* GOOD?still good in several cases

#BARCAMP BANGKHEN 2015

MV* PROBLEMS

▸ two-way data direction

Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw

#BARCAMP BANGKHEN 2015

MV* PROBLEMS

▸ two-way data direction

▸ hard to trace data flow and predict app state

Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw

#BARCAMP BANGKHEN 2015

2014 FACEBOOK

INTRODUCED FLUX

#BARCAMP BANGKHEN 2015

FLUX STRUCTURE AND DATA FLOW

http://facebook.github.io/flux/docs/overview.html

#BARCAMP BANGKHEN 2015

FLUX STRUCTURE AND DATA FLOW

http://staltz.com/unidirectional-user-interface-architectures.html

#BARCAMP BANGKHEN 2015

2015 @DAN_ABRAMOV

INTRODUCED REDUX

#BARCAMP BANGKHEN 2015

REDUX (REDUCE + FLUX)

http://staltz.com/unidirectional-user-interface-architectures.html

#BARCAMP BANGKHEN 2015

3 PRINCIPLES OF REDUX

▸ Single source of truth

▸ State of whole app in single store

▸ State is read only

▸ No view, network callback will write state directly

▸ (State) mutations are written as pure functions (reducers)

▸ Reducer is (state, action) => new state

#BARCAMP BANGKHEN 2015

DEMOhttps://github.com/supasate/redux-voting

#BARCAMP BANGKHEN 2015

REDUX THE COOL PARTS

▸ Predictable state

▸ Nested reducers composition

(like nested React components)

▸ Live code editing

▸ Time travel debugging

▸ Easy to test

#BARCAMP BANGKHEN 2015

REDUX THE COOL PARTS

Thanks to

▸ Webpack Hot Module Reloading (HMR)

▸ Separate state (single store) from functions (reducers)

▸ Immutable state

▸ Pure functions

#BARCAMP BANGKHEN 2015

REDUX INSPIRATION

▸ CQRS, Event Sourcing

▸ Elm architecture (https://github.com/evancz/elm-architecture-tutorial)

#BARCAMP BANGKHEN 2015

REDUX INSPIRATION

▸ CQRS, Event Sourcing

▸ Elm architecture (https://github.com/evancz/elm-architecture-tutorial)

http://elm-lang.org/examples/mario

#BARCAMP BANGKHEN 2015

REDUX IS FUTURE

#BARCAMP BANGKHEN 2015

THANK YOU

@kaizerwing

kaizerwing

supasate