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.

#FrontConf2017 — Enhance your User (and Developer) Experience with React & Redux

280 views

Published on

Slides of the talk I gave at #FrontConf2017 on December 9th.

Published in: Software
  • Be the first to comment

#FrontConf2017 — Enhance your User (and Developer) Experience with React & Redux

  1. 1. Enhance your User (and Developer) Experience with React & Redux & /phacks
  2. 2. Hi! I am Nicolas Goutay. I work at Theodo, a web consultancy based in Paris & London. I build JS & Python web applications. I like music, typography and I have stage fright am excited to be here with all of you. You can find me online (Twitter & GitHub) on @phacks.
  3. 3. React & Redux A Lego analogy
  4. 4. React would be a Lego instruction manual, where bricks are DOM nodes. It takes care of how things look for the end user.
  5. 5. test te fort veau jean jean humain loup travers des gout bon bonbon cher non How to build a F1
  6. 6. On modern Web apps, how things look are usually a function of user interactions. In this analogy, the user is Elya, my 5 year-old niece. Red is her favorite color, so she wants the car to be red 🏎.
  7. 7. This is where 🤖 Redux kicks in.
  8. 8. # “I want the car to be red.” 🤖 “Dispatch the CHANGE_CAR_COLOR action with the payload color: red” $ “OK! I take note that you want your car red…” 🤖 “A reducer will process the action, and will add color: red to the Redux store” $ “…I sift through all the messy Legos to find red bricks…” 🤖 “The store passes the property color: red to React components” $ “…and I follow the instructions again with the red bricks”
  9. 9. test te fort veau jean jean humain loup travers des gout bon bonbon cher non How to build a F1 Redux store color: red
  10. 10. # “I want the car number to by my age, not yours” 🤖 “Dispatch the CHANGE_CAR_NUMBER action with the payload number: 5” $ “Oh there we go again. 5 it is…” 🤖 “A reducer will process the action, and will add number: 5 to the Redux store” $ “…Where on Earth did I put this sticker…” 🤖 “The store passes the property number: 5 to React components” $ “…there you go! Now go find your parents 😅”
  11. 11. test te fort veau jean jean humain loup travers des gout bon bonbon cher non How to build a F1 Redux store color: red number: 5
  12. 12. Redux — Now with actual code export function changeCarColor(color) { return { type: 'CHANGE_CAR_COLOR', color } } 🤖 “Dispatch the CHANGE_CAR_COLOR action with the payload color”
  13. 13. Redux — Now with actual code function formulaOneApp(state = {}, action) { switch (action.type) { case 'CHANGE_CAR_COLOR': return Object.assign({}, state, { color: action.color }) default: return state } } 🤖 “A reducer will process the action, and will add color to the Redux store”
  14. 14. Redux — Now with actual code 🤖 “The store passes the properties color and number to React components” import React from 'react' const FormulaOne = ({ color, number }) => ( <div> <CarBody color={color} /> <Decorations number={number} /> </div> )
  15. 15. Developer Experience — Easier Debugging
  16. 16. Developer Experience — Easier Debugging
  17. 17. Developer Experience — Easier Debugging This is what the Redux Store of my current project look like. I can inspect every variable, which are updated in real time.
  18. 18. User Experience — Built-in Performance
  19. 19. User Experience — Built-in Performance React components are only repainted when their props or inner state change. React API methods like shouldComponentUpdate allow us to have a finer-grained control about render performance.
  20. 20. Developer Experience — “Reasonaboutability”
  21. 21. Developer Experience — “Reasonaboutability” React developer Jani Eväkallio coined the term “reasonaboutability” (easiness to reason about). I love it, and it matches perfectly what I feel about Redux. Here are the Three Principles of Redux:
  22. 22. Developer Experience — “Reasonaboutability” React developer Jani Eväkallio coined the term “reasonaboutability” (easiness to reason about). I love it, and it matches perfectly what I feel about Redux. Here are the Three Principles of Redux: Single Source of Truth: all the data/UI state displayed on the app come from the same JS object. Facilitates debugging.
  23. 23. Developer Experience — “Reasonaboutability” React developer Jani Eväkallio coined the term “reasonaboutability” (easiness to reason about). I love it, and it matches perfectly what I feel about Redux. Here are the Three Principles of Redux: Single Source of Truth: all the data/UI state displayed on the app come from the same JS object. Facilitates debugging. State is read-only: The only way to change the state is to emit an action, an object describing what happened. Provides a single, robust & semantic way to deal with interactions.
  24. 24. Developer Experience — “Reasonaboutability” React developer Jani Eväkallio coined the term “reasonaboutability” (easiness to reason about). I love it, and it matches perfectly what I feel about Redux. Here are the Three Principles of Redux: Single Source of Truth: all the data/UI state displayed on the app come from the same JS object. Facilitates debugging. State is read-only: The only way to change the state is to emit an action, an object describing what happened. Provides a single, robust & semantic way to deal with interactions. Changes are made with pure functions: the Store can only be updated with pure functions (reducers). Prevents nasty side effects.
  25. 25. Redux comes with other benefits — and tradeoffs
  26. 26. 🤩 Tests are blissfully easy to write: Reducers are pure functions. Just test that given an input, they yield the right output. it('handles ADD_ITEM by adding the item', () => { const initialState = fromJS({ todos: [ {id: 1, text: 'React', status: 'active'} ] }); const action = { type: 'ADD_ITEM', text: 'Redux' } const nextState = reducer(initialState, action); expect(nextState).to.equal(fromJS({ todos: [ {id: 1, text: 'React', status: 'active'}, {id: 2, text: 'Redux', status: 'active'}, ] })); });
  27. 27. 🛠 Rich ecosystem: Redux has an API to plug-in middlewares. There are tons of them: for logging, offline capabilities, async, forms, optimistic UIs… Tip: 🔗 github.com/markerikson/react-redux-links is a great place to start!
  28. 28. 🤓 Code structure is key: Since all UI is derived from a single JS object, it needs to be carefully designed and constantly adjusted to business requirements. Tip: Learn from the best! Twitter & Pinterest both use Redux, and the structure is available for anybody to see with the React Dev Tools!
  29. 29. Tip: I just got used to it. After a while it even feels more productive than Angular 1, because you know exactly what to do to get everything to work together. 😓 Verbosity: to write a feature, you would usually need to write an action, a reducer, a selector, a saga… It feels quite cumbersome compared to Angular 1.
  30. 30. Conclusion React with Redux is a mature framework that empowers developers to produce better apps in a much better way.
  31. 31. Want to dive in? I wrote a full-featured, test-driven tutorial on writing a Todo List using React & Redux 🔗 http://github.com/phacks/redux-todomvc
  32. 32. Danke! Slides are available at phacks.github.io & /phacks

×