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.

Academy PRO: React JS. Redux & Tooling

281 views

Published on

Lecture for Binary Studio Academy PRO course about ReactJS by Oleksandr Kovalyov (JS developer at Binary Studio)

Published in: Software
  • Be the first to comment

Academy PRO: React JS. Redux & Tooling

  1. 1. ReactJS binary-studio.com
  2. 2. React JS JS library focused on UI, not a framework one-way data flow VirtualDOM
  3. 3. UI = f(x) ReactJS F - Component x - state
  4. 4. MVC
  5. 5. Problems
  6. 6. Facebook problems
  7. 7. 2014 30th of April F8 Facebook Developer Conference
  8. 8. Flux
  9. 9. Flux
  10. 10. Flux Action Dispatcher Store View ● Instead of MVC for React ● Unidirectional data flow ● Created by Facebook ● Many stores Store Store ...
  11. 11. Dispatcher Central hub that messages all data flow It is a registry of callbacks into the store => mechanism to deliver actions into the stores Action Dispatcher Store ViewStore Store ...
  12. 12. Actions triggered by the view information about changes Action Dispatcher Store ViewStore Store ...
  13. 13. Store application state reacts to specific actions issue events when data or state updated Action Dispatcher Store ViewStore Store ...
  14. 14. Views Triggers actions Reacts to specific events in the store Action Dispatcher Store ViewStore Store ...
  15. 15. Race of Flux implementations relay flux alt reflux flummox fluxible fluxxor marty.js
  16. 16. Problems of Flux Store contains store change logic and state The state is being rewritten with every action Dispatcher cannot dispatch while dispatching
  17. 17. 2015 End of the race Redux wins!
  18. 18. Why Redux? 1. One global state 2. New state after each action (Time traveling) 3. State is read-only 4. Changes are made with pure functions (reducers) 5. Hot reload
  19. 19. Redux View layer Action Dispatcher Store View Provider Connect
  20. 20. ( previousState, action ) => newState Basic principle
  21. 21. Redux flow - Action Whenever you want to change the state of the application, you shoot off an action. Action function returns a formatted action object
  22. 22. Redux flow - Reducer Every reducer: receive state return new state Not mutated old state! new one!
  23. 23. Redux flow - Store
  24. 24. Redux flow - Connect
  25. 25. Smart elements How things works no DOM markup, no styles Provide data call actions
  26. 26. Dumb elements How things look No app dependencies Just props for data and callbacks only UI state
  27. 27. Solved issues 1. Delegation is easier a. top-down props is not required 2. Separation of concerns a. Data fetching => actions b. Data decorations => reducer c. view logic 3. State management a. App-specific
  28. 28. Redux Summary One store Reducers === (previousState, action) => newState State changes only in reducers Structured code We have access to state in every moment
  29. 29. Server-side Environments Node.js ReactJS .NET Nashorn
  30. 30. Tooling
  31. 31. React DevTools
  32. 32. Redux DevTools devtools
  33. 33. Redux slider monitor https://calesce.github.io/redux-slider-monitor/?debug_session=123
  34. 34. Webpack
  35. 35. Webpack Like Grunt or Gulp, but different Bundles Uses javascript modules Reduce the amount of AJAX requests Totally configurable
  36. 36. Webpack http://webpack.github.io/docs/configuration.html Entry - entry files, which WP will use
  37. 37. Webpack http://webpack.github.io/docs/configuration.html Output: ● path - location where webpack will build the files ● publicPath - location where wwbpack serves files from.
  38. 38. Webpack http://webpack.github.io/docs/configuration.html Loaders: ● Like tasks ● Transform files ● Preprocess files as you require or import them. Preloaders - the same but before executing loaders and building bundles
  39. 39. Webpack http://webpack.github.io/docs/configuration.html Plugins: ● Like tasks ● Work with bundle
  40. 40. Webpack http://webpack.github.io/docs/configuration.html Bundles: ● Lazy loading ● Resource per page
  41. 41. Webpack Plugins Loaders Async build Chunks DevTools
  42. 42. Webpack-dev-server When you need HTTP Serves files virtually Hot reload (works on socket.io)
  43. 43. Hot reload
  44. 44. Complementary-Tools https://github.com/facebook/react/wiki/Complementary-Tools
  45. 45. Links Redux video: egghead Flux: Rus/Eng Redux: Rus/Eng
  46. 46. Demo https://bitbucket.org/oleksandrkovalov/bsa-2016-react-demo-2
  47. 47. Thank you!Let’s redux!

×