Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React. Flux. Redux

981 views

Published on

Overview

Published in: Technology
  • Be the first to comment

React. Flux. Redux

  1. 1. REACT. FLUX. REDUX React: The big picture and architectures over view ANDREI COLODNITCHII
  2. 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
  3. 3. History overview Brief overview
  4. 4. History Overview 48
  5. 5. History Overview 49
  6. 6. History Overview 50
  7. 7. SO THE EVOLUTION LOOKED LIKE History Overview 51 Event Driven MVC Data- binding
  8. 8. WHAT THOSE DID NOT RESOLVE? • Working with DOM • Reusability • Complexity History Overview 52
  9. 9. What is React? React overview
  10. 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. 11. WHAT IT TRIES TO SOLVE? • Working with DOM • Reusability • Complexity What is React? 55
  12. 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. 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. 14. REUSABILITY – EVERYTHING IS A COMPONENT • It contains UI & logic • It has strict interface • It has to be stateless What is React? 58
  15. 15. IT CONTAINS UI & LOGIC What is React? 59
  16. 16. IT CONTAINS UI & LOGIC What is React? 60
  17. 17. IT CONTAINS UI & LOGIC What is React? 61
  18. 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. 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. 20. DEMO What is React? 64
  21. 21. WHAT ELSE REACT BRINGS? • Good ES6 support • Browser compatibility • Fails fast and clear What is React? 65
  22. 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. 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. 24. What is Flux? Flux overview
  25. 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. 26. FLUX PARTS What is flux? 70
  27. 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. 28. ACTION • Typically triggered by the View • Contains information about change made to the application What is flux? 72
  29. 29. STORE • Contain application state and logic • Reacts to specific actions • Issue events when data or state is updated What is flux? 73
  30. 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. 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. 32. DEMO What is flux? 76
  33. 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. 34. DISPATCHING ISSUE What is flux? 78 https://github.com/facebook/flux/issues/47
  35. 35. ONE MORE LOOK What is flux? 79
  36. 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. 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. 38. What is Redux? Redux overview
  39. 39. WHAT IS REDUX? What is Redux? 83
  40. 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. 41. REDUX ARCHITECTURE What is Redux? 85
  42. 42. WHAT IS THE MAIN DIFFERENCE? • One Store • Action creators • Reducers • Actions can dispatch and call other action creators What is Redux? 86
  43. 43. STORE • Holds application state • Allows state to be updated via dispatch • Register/Unregister state change listeners What is Redux? 87
  44. 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. 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. 46. TIME MACHINE What is Redux? 90 https://www.youtube.com/watch?v=xsSnOQynTHs
  47. 47. DEMO What is Redux? 91
  48. 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. 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
  50. 50. Questions? Thanks

×