react. flux. redux. by andrey kolodnitskiy
TRANSCRIPT
![Page 1: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/1.jpg)
React. Flux. ReduxThe big picture and architectures overview
![Page 2: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/2.jpg)
• Brief history overview• What is React?• How it differs from others?• What is Flux?• What is Redux?• Demos• Useful links
Agenda
![Page 3: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/3.jpg)
![Page 4: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/4.jpg)
![Page 5: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/5.jpg)
![Page 6: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/6.jpg)
Event driven MVC Data-
binding
The evolution looked like
![Page 7: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/7.jpg)
• Working with DOM
• Reusability
• Complexity
What those did not resolve?
![Page 8: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/8.jpg)
• React is library for building UI
• It’s open source
• Intended to be the view in MVC
• Can be integrated with other libraries
What is React?
![Page 9: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/9.jpg)
• Working with DOM
• Reusability
• Complexity
What it tries to solve?
![Page 10: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/10.jpg)
• The major issue it was not designed for changes
• Shadow DOM standard is under development
• Another way to solve it is Virtual DOM
DOM
![Page 11: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/11.jpg)
Re-render entire DOM
Build a new Virtual DOM tree
Diff with old
Compute minimal mutation
Batch execute all updates
Virtual DOM
![Page 12: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/12.jpg)
• It contains UI & logic
• It has strict interface
• It has to be stateless
Reusability – Everything is a component
![Page 13: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/13.jpg)
It contains UI & Logic
![Page 14: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/14.jpg)
It contains UI & Logic
![Page 15: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/15.jpg)
It contains UI & Logic
![Page 16: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/16.jpg)
• Application is a set of small components• Components have strict interface & data is
immutable• There is data flow concept• Ryan Anklam:
React & The Art of Managing Complexity
Complexity
![Page 17: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/17.jpg)
• Known as one way data binding
• View cannot change state instead when state is changed view is re-rendered
• Unidirectional data flow
Data Flow
![Page 18: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/18.jpg)
Demo
![Page 19: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/19.jpg)
• Good ES6 support
• Browser compatibility
• Fails fast and clear
What else React brings?
![Page 20: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/20.jpg)
• Mental shift – you need to think in terms of the components– you need to control data flow in the app– your components should be stateless
• What you’d get:– Fast DOM manipulations– Reusable, small and easy to support components– Browser compatibility– Unit testable code– Ability to integrate in the existing app or library
Sum up
![Page 21: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/21.jpg)
• https://facebook.github.io/react/docs/getting-started.html
• https://facebook.github.io/react/docs/thinking-in-react.html
• https://www.youtube.com/watch?v=nYkdrAPrdcw• Dev tools: https://github.com/facebook/react-devtools
Useful links
![Page 22: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/22.jpg)
• Application architecture
• Can be treated more like a pattern
• Uses unidirectional data flow
• There are a lot of different implementations for
What is Flux?
![Page 23: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/23.jpg)
Flux
![Page 24: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/24.jpg)
Demo
![Page 25: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/25.jpg)
• A lot of boilerplate code• Code is specific to the Flux framework you are
using• Store logic has dependency on its state• Dispatcher cannot dispatch while dispatching
Sounds cool but does it have issues?
![Page 26: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/26.jpg)
• Flummox• Alt• Fluxxor• And many others:
https://medium.com/social-tables-tech/we-compared-13-top-flux-implementations-you-won-t-believe-who-came-out-on-top-1063db32fe73#.lpfhvx17u
Libraries
![Page 27: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/27.jpg)
Dispatching issue
https://github.com/facebook/flux/issues/47
![Page 28: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/28.jpg)
One more look
![Page 29: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/29.jpg)
• https://facebook.github.io/flux/docs/overview.html• https://medium.com/social-tables-tech/we-compared-13-top-flux-imple
mentations-you-won-t-believe-who-came-out-on-top-1063db32fe73#.lpfhvx17u
Useful links
![Page 30: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/30.jpg)
• Flux is architecture based on unidirectional data flow
• It has certain issues the major one is that in real life change in the store would create new actions
• There are a lot of libraries that implement Flux • Flux-enabling libraries race is finished with the
Redux win
Sum up
![Page 31: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/31.jpg)
Redux
![Page 32: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/32.jpg)
• Predictable state container for React developed by Dan Abramov
• Inspired by Elm• Based on 3 principles:
– Single source of truth. The state of your application is stored in a single store– State is read-only. The only way to mutate the state is through emitting an action– Changes are made with pure functions. You specify how your state transformed in
reducer function.
What is Redux?
![Page 33: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/33.jpg)
Redux architecture
![Page 34: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/34.jpg)
• One Store
• Action creators
• Reducers
• Actions can dispatch and call other action creators
What is the main difference?
![Page 36: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/36.jpg)
• http://redux.js.org/index.html• https://www.youtube.com/watch?v=DfRibIkjhew• https://www.youtube.com/watch?v=xsSnOQynTHs• http://redux.js.org/docs/introduction/Ecosystem.html• https://egghead.io/lessons/javascript-redux-the-single-immutable-state
-tree
Useful links
![Page 37: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/37.jpg)
• It’s a data flow architecture• Redux introduces limitations to the way you
work with application state• Has time machine. Which allows to easily
replicate issues• Supports hot reloading• Has nice tools and community around• Just go and try it
Sum up
![Page 38: React. Flux. Redux. by Andrey Kolodnitskiy](https://reader035.vdocuments.net/reader035/viewer/2022062310/5882f4e51a28ab3f1e8b6617/html5/thumbnails/38.jpg)
Thank You!