React. Flux. Redux
Download as PPTX, PDF9 likes1,421 views
This document provides an overview of React, Flux, and Redux. It discusses the history of React and how it aims to solve issues with directly manipulating the DOM by using a virtual DOM. It also explains that React focuses on building reusable components with unidirectional data flow. Flux is then introduced as an architecture based on this one-way data flow, but it has issues with boilerplate code and complex store dependencies. Redux is presented as an improved implementation of Flux that uses a single immutable state tree and pure reducer functions to update the state, providing a more predictable state management approach. Demos are provided and useful links listed for further exploring each topic.
React. Flux. Redux
- 1. REACT. FLUX. REDUX React: The big picture and architectures over view ANDREI COLODNITCHII
- 2. AGENDA • Brief history overview • What is React? • How it differs from others? • What is Flux? • What is Redux? • Demos • Useful links History Overview 46
- 7. SO THE EVOLUTION LOOKED LIKE History Overview 51 Event Driven MVC Data- binding
- 8. WHAT THOSE DID NOT RESOLVE? • Working with DOM • Reusability • Complexity History Overview 52
- 9. What is React? React overview
- 10. WHAT IS REACT? • 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? 54
- 11. WHAT IT TRIES TO SOLVE? • Working with DOM • Reusability • Complexity What is React? 55
- 12. DOM • The major issue it was not designed for changes • Shadow DOM standard is under development • Another way to solve it is Virtual DOM What is React? 56
- 13. VIRTUAL DOM What is React? 57 Re-render entire DOM Build a new Virtual DOM tree Diff with old Compute minimal mutation Batch execute all updates
- 14. REUSABILITY – EVERYTHING IS A COMPONENT • It contains UI & logic • It has strict interface • It has to be stateless What is React? 58
- 15. IT CONTAINS UI & LOGIC What is React? 59
- 16. IT CONTAINS UI & LOGIC What is React? 60
- 17. IT CONTAINS UI & LOGIC What is React? 61
- 18. COMPLEXITY • 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 What is React? 62
- 19. DATA FLOW • Known as one way data binding • View cannot change state instead when state is changed view is re-rendered • Unidirectional data flow What is React? 63
- 20. DEMO What is React? 64
- 21. WHAT ELSE REACT BRINGS? • Good ES6 support • Browser compatibility • Fails fast and clear What is React? 65
- 22. SUM UP • 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 What is React? 66
- 23. USEFUL LINKS FOR THE SECTION • 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 What is React? 67
- 24. What is Flux? Flux overview
- 25. WHAT IS FLUX? • Application architecture • Can be treated more like a pattern • Uses unidirectional data flow • There are a lot of different implementations for What is flux? 69
- 26. FLUX PARTS What is flux? 70
- 27. 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 What is flux? 71
- 28. ACTION • Typically triggered by the View • Contains information about change made to the application What is flux? 72
- 29. STORE • Contain application state and logic • Reacts to specific actions • Issue events when data or state is updated What is flux? 73
- 30. VIEW • Has list of stores which provide data for • Triggers actions with the state change • Reacts to specific events in the store What is flux? 74
- 31. LIBRARIES • 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 What is flux? 75
- 32. DEMO What is flux? 76
- 33. SOUNDS COOL BUT DOES IT HAVE ISSUES? • 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 What is flux? 77
- 34. DISPATCHING ISSUE What is flux? 78 https://github.com/facebook/flux/issues/47
- 35. ONE MORE LOOK What is flux? 79
- 36. USEFUL LINKS FOR THE SECTION • https://facebook.github.io/flux/docs/overview.html • https://medium.com/social-tables-tech/we-compared-13-top-flux- implementations-you-won-t-believe-who-came-out-on-top- 1063db32fe73#.lpfhvx17u What is flux? 80
- 37. SUM UP • 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 What is flux? 81
- 38. What is Redux? Redux overview
- 39. WHAT IS REDUX? What is Redux? 83
- 40. WHAT IS REDUX? • 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? 84
- 41. REDUX ARCHITECTURE What is Redux? 85
- 42. WHAT IS THE MAIN DIFFERENCE? • One Store • Action creators • Reducers • Actions can dispatch and call other action creators What is Redux? 86
- 43. STORE • Holds application state • Allows state to be updated via dispatch • Register/Unregister state change listeners What is Redux? 87
- 44. 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 What is Redux? 88
- 45. 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) What is Redux? 89
- 46. TIME MACHINE What is Redux? 90 https://www.youtube.com/watch?v=xsSnOQynTHs
- 47. DEMO What is Redux? 91
- 48. USEFUL LINKS FOR THE SECTION • 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 What is Redux? 92
- 49. SUM UP • 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 What is Redux? 93
Editor's Notes
- #5: JQuery: event driven pre SPA Complex Apps are hell to write and support
- #6: Introduced MVC Designed for SPA Declarative events Works with any view engine Marionette: Message Bus Different View types
- #7: Framework Exposes MVW Designed for SPA Introduces a lot of concepts Unit testable
- #12: 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
- #14: 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
- #15: 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
- #17: 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?
- #18: 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
- #19: 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
- #20: So what that brings: Same data produces same view output Data changes are predictable and easier to track related changes
- #36: 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