Downloaded 15 times
More Related Content
Similar to React. Flux. Redux. by Andrey Kolodnitskiy
![[@NaukriEngineering] Flux Architecture](https://cdn.slidesharecdn.com/ss_thumbnails/flux-161117094040-thumbnail.jpg?width=640&height=640&fit=bounds)
React. Flux. Redux. by Andrey Kolodnitskiy
- 1. React. Flux. Redux Thebig picture and architectures overview
- 2. • Brief historyoverview • What is React? • How it differs from others? • What is Flux? • What is Redux? • Demos • Useful links Agenda
- 6.
- 7. • Working withDOM • Reusability • Complexity What those did not resolve?
- 8. • React islibrary for building UI • It’s open source • Intended to be the view in MVC • Can be integrated with other libraries What is React?
- 9. • Working withDOM • Reusability • Complexity What it tries to solve?
- 10. • The majorissue it was not designed for changes • Shadow DOM standard is under development • Another way to solve it is Virtual DOM DOM
- 11. Re-render entire DOM Build a new Virtual DOM tree Diffwith old Compute minimal mutation Batch execute all updates Virtual DOM
- 12. • It containsUI & logic • It has strict interface • It has to be stateless Reusability – Everything is a component
- 13. It contains UI& Logic
- 14. It contains UI& Logic
- 15. It contains UI& Logic
- 16. • Application isa 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
- 17. • Known asone way data binding • View cannot change state instead when state is changed view is re-rendered • Unidirectional data flow Data Flow
- 18.
- 19. • Good ES6support • Browser compatibility • Fails fast and clear What else React brings?
- 20. • 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
- 21. • 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
- 22. • Application architecture •Can be treated more like a pattern • Uses unidirectional data flow • There are a lot of different implementations for What is Flux?
- 23.
- 24.
- 25. • A lotof 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?
- 26. • 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
- 27.
- 28.
- 29.
- 30. • Flux isarchitecture 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
- 31.
- 32. • Predictable statecontainer 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?
- 33.
- 34. • One Store •Action creators • Reducers • Actions can dispatch and call other action creators What is the main difference?
- 35.
- 36. • 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
- 37. • It’s adata 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
- 38.
Editor's Notes
- #10 Working with DOM – Virtual DOM Reusability – Everything is a component that contains logic & UI for Complexity – Application is divided into set of small independent, reusable and stateless components and follows data flow architecture
- #12 Instead of changing real DOM we are changing its lightweight in-memory representation Then diff between previous in-memory copy and new is defined Then diff is applied to the real DOM React Virtual DOM implementation knows When and How to effectively apply changes By applying changes only when needed and minimizing number of operation with real DOM we get better performance
- #13 In React everything is a component Component is self-contained and can be placed anywhere if we suit its interface Component has lifecycle events it can react to Component contains layout (UI) Component has defined interface Can contain other components Should be stateless Note: Component is meant in general sense. Let’s skip React.Element vs React.Component for simplicity reasons
- #15 UI & logic is in one file. My component is responsible for everything, what a hell! What about SRP and Separation of concerns, have you heard of?
- #16 Let’s think of it differently. The component handles everything and thus can be easily reused Normally when you adjust component logic you have to update its template So for the 1 reason of change you do change 2 files It is easier to figure out component logic and its representation when everything tied together
- #17 Application has to be split into series of small components which are responsible for small piece of logic and thus they are quite simple There is data flow concept which defines how component should get/set data which makes easy to track all the changes
- #18 So what that brings: Same data produces same view output Data changes are predictable and easier to track related changes
- #19 So what that brings: Same data produces same view output Data changes are predictable and easier to track related changes
- #20 So what that brings: Same data produces same view output Data changes are predictable and easier to track related changes
- #21 So what that brings: Same data produces same view output Data changes are predictable and easier to track related changes
- #24 Dispatcher: The dispatcher is the central hub that manages all data flow It is a registry of callbacks into the stores In other words: mechanism to deliver actions into the stores Action: Typically triggered by the View Contains information about change made to the application Store: Contain application state and logic Reacts to specific actions Issue events when data or state is updated View: Has list of stores which provide data for Triggers actions with the state change Reacts to specific events in the store
- #25 So what that brings: Same data produces same view output Data changes are predictable and easier to track related changes
- #29 The issue here is that we cannot create new actions while handling an action. As a result our code has to get back to the view which will dispatch new actions. The View now has information about application logic how/when to start new actions. Has a lot of boilerplate code which waits for the action execution to start new actions. Our views become messy
- #34 Store: Holds application state Allows state to be updated via dispatch Register/Unregister state change listeners Actions and Action creators Actions describe that fact that something happened Action creators are functions that create actions Actions and action creators can be async Can dispatch other actions Reducers Pure functions Should be stateless reducer(currentState, action) { return newState; } In case state is not changed return passed state back Do not modify passed state (State has to be Immutable)