Redux: Big Leap of JavaScript App Development
0 likes698 views
Redux is a new approach to JavaScript application development that was introduced in 2015. It is based on Flux and uses a single store to hold the entire state of the application. State is never written directly but instead updated through pure reducer functions. This makes state predictable and easy to trace. Redux enables features like live code editing, time travel debugging, and easy testing. It draws inspiration from architectures like CQRS and Elm and is positioned to be an important part of the future of JavaScript apps.
More Related Content
Similar to Redux: Big Leap of JavaScript App Development (20)
![[Webinar] Expanding future mobile commerce with Magento PWA Studio](https://cdn.slidesharecdn.com/ss_thumbnails/copyofcedcommercemagentopwawebinar-191206092046-thumbnail.jpg?width=560&fit=bounds)
Redux: Big Leap of JavaScript App Development
- 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
- 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
- 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
- 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