Overview of Redux

1. REDUX
BIG LEAP OF JAVASCRIPT APP DEVELOPMENT
SUPASATE CHOOCHAISRI #BARCAMP BANGKHEN 22 NOV 2015

2. #BARCAMP BANGKHEN 2015
/ME
▸ Supasate Choochaisri (Ping)
Co-founder Larngear Technology, Streaming, Gad-zilla
@kaizerwing
kaizerwing
supasate

3. #BARCAMP BANGKHEN 2015
WE ARE IN THE MV* WORLD
MVC MVP MVVM MV*

4. #BARCAMP BANGKHEN 2015
MVC WAS INTRODUCED SINCE 1979
SMALLTALK-76, SMALLTALK-80
Trygve Reenskaug
Recommended Reading : “GUI Architectures”, http://martinfowler.com/eaaDev/uiArchs.html

5. #BARCAMP BANGKHEN 2015
IS MVC/MV* GOOD?

6. #BARCAMP BANGKHEN 2015
IS MVC/MV* GOOD?
still good in several cases

7. #BARCAMP BANGKHEN 2015
MV* PROBLEMS
▸ two-way data direction
Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw

8. #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

9. #BARCAMP BANGKHEN 2015
2014
FACEBOOK
INTRODUCED
FLUX

10. #BARCAMP BANGKHEN 2015
FLUX STRUCTURE AND DATA FLOW
http://facebook.github.io/flux/docs/overview.html

11. #BARCAMP BANGKHEN 2015
FLUX STRUCTURE AND DATA FLOW
http://staltz.com/unidirectional-user-interface-architectures.html

12. #BARCAMP BANGKHEN 2015
2015
@DAN_ABRAMOV
INTRODUCED
REDUX

13. #BARCAMP BANGKHEN 2015
REDUX (REDUCE + FLUX)
http://staltz.com/unidirectional-user-interface-architectures.html

14. #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

15. #BARCAMP BANGKHEN 2015
DEMO
https://github.com/supasate/redux-voting

16. #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

17. #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

18. #BARCAMP BANGKHEN 2015
REDUX INSPIRATION
▸ CQRS, Event Sourcing
▸ Elm architecture (https://github.com/evancz/elm-architecture-tutorial)

19. #BARCAMP BANGKHEN 2015
REDUX INSPIRATION
▸ CQRS, Event Sourcing
▸ Elm architecture (https://github.com/evancz/elm-architecture-tutorial)
http://elm-lang.org/examples/mario

20. #BARCAMP BANGKHEN 2015
REDUX IS FUTURE

21. #BARCAMP BANGKHEN 2015
THANK YOU
@kaizerwing
kaizerwing
supasate