Redux: Big Leap of JavaScript App Development
-
Upload
supasate-choochaisri -
Category
Technology
-
view
466 -
download
0
Transcript of Redux: Big Leap of JavaScript App Development
![Page 1: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/1.jpg)
REDUXBIG LEAP OF JAVASCRIPT APP DEVELOPMENT
SUPASATE CHOOCHAISRI #BARCAMP BANGKHEN 22 NOV 2015
![Page 2: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/2.jpg)
#BARCAMP BANGKHEN 2015
/ME
▸ Supasate Choochaisri (Ping)
Co-founder Larngear Technology, Streaming, Gad-zilla
@kaizerwing
kaizerwing
supasate
![Page 3: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/3.jpg)
#BARCAMP BANGKHEN 2015
WE ARE IN THE MV* WORLDMVC MVP MVVM MV*
![Page 4: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/4.jpg)
#BARCAMP BANGKHEN 2015
MVC WAS INTRODUCED SINCE 1979 SMALLTALK-76, SMALLTALK-80
Trygve Reenskaug
Recommended Reading : “GUI Architectures”, http://martinfowler.com/eaaDev/uiArchs.html
![Page 5: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/5.jpg)
#BARCAMP BANGKHEN 2015
IS MVC/MV* GOOD?
![Page 6: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/6.jpg)
#BARCAMP BANGKHEN 2015
IS MVC/MV* GOOD?still good in several cases
![Page 7: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/7.jpg)
#BARCAMP BANGKHEN 2015
MV* PROBLEMS
▸ two-way data direction
Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw
![Page 8: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/8.jpg)
#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
![Page 9: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/9.jpg)
#BARCAMP BANGKHEN 2015
2014 FACEBOOK
INTRODUCED FLUX
![Page 10: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/10.jpg)
#BARCAMP BANGKHEN 2015
FLUX STRUCTURE AND DATA FLOW
http://facebook.github.io/flux/docs/overview.html
![Page 11: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/11.jpg)
#BARCAMP BANGKHEN 2015
FLUX STRUCTURE AND DATA FLOW
http://staltz.com/unidirectional-user-interface-architectures.html
![Page 12: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/12.jpg)
#BARCAMP BANGKHEN 2015
2015 @DAN_ABRAMOV
INTRODUCED REDUX
![Page 13: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/13.jpg)
#BARCAMP BANGKHEN 2015
REDUX (REDUCE + FLUX)
http://staltz.com/unidirectional-user-interface-architectures.html
![Page 14: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/14.jpg)
#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
![Page 15: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/15.jpg)
#BARCAMP BANGKHEN 2015
DEMOhttps://github.com/supasate/redux-voting
![Page 16: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/16.jpg)
#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
![Page 17: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/17.jpg)
#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
![Page 18: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/18.jpg)
#BARCAMP BANGKHEN 2015
REDUX INSPIRATION
▸ CQRS, Event Sourcing
▸ Elm architecture (https://github.com/evancz/elm-architecture-tutorial)
![Page 19: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/19.jpg)
#BARCAMP BANGKHEN 2015
REDUX INSPIRATION
▸ CQRS, Event Sourcing
▸ Elm architecture (https://github.com/evancz/elm-architecture-tutorial)
http://elm-lang.org/examples/mario
![Page 20: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/20.jpg)
#BARCAMP BANGKHEN 2015
REDUX IS FUTURE
![Page 21: Redux: Big Leap of JavaScript App Development](https://reader031.fdocuments.net/reader031/viewer/2022021919/5883f1ca1a28ab34428b65a3/html5/thumbnails/21.jpg)
#BARCAMP BANGKHEN 2015
THANK YOU
@kaizerwing
kaizerwing
supasate