Redux: Big Leap of JavaScript App Development

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


WE ARE IN THE MV* WORLDMVC MVP MVVM MV*


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

Trygve Reenskaug

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

http://martinfowler.com/eaaDev/uiArchs.html


IS MVC/MV* GOOD?


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


MV* PROBLEMS

▸ two-way data direction

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

https://www.youtube.com/watch?v=nYkdrAPrdcw


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

https://www.youtube.com/watch?v=nYkdrAPrdcw


2014 FACEBOOK

INTRODUCED FLUX


FLUX STRUCTURE AND DATA FLOW

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


FLUX STRUCTURE AND DATA FLOW

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


2015 @DAN_ABRAMOV

INTRODUCED REDUX


REDUX (REDUCE + FLUX)

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


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


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


REDUX THE COOL PARTS

▸ Predictable state

▸ Nested reducers composition

(like nested React components)

▸ Live code editing

▸ Time travel debugging

▸ Easy to test


REDUX THE COOL PARTS

Thanks to

▸ Webpack Hot Module Reloading (HMR)

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

▸ Immutable state

▸ Pure functions


REDUX INSPIRATION

▸ CQRS, Event Sourcing

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

https://github.com/evancz/elm-architecture-tutorial


REDUX INSPIRATION

▸ CQRS, Event Sourcing

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

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

https://github.com/evancz/elm-architecture-tutorial

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


REDUX IS FUTURE


THANK YOU

@kaizerwing

kaizerwing

supasate