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.
Making React part of
something greater
DARKO KUKOVEC
JS TEAM LEAD @ INFINUM
@DarkoKukovec
WHAT AM I TALKING ABOUT?
• React
WHAT AM I TALKING ABOUT?
• React
• React state management libs
• Comparison of two libs
WHAT AM I TALKING ABOUT?
• React
• React state management libs
• Comparison of two libs
• Biased?
01REACT
REACT
• Facebook
• Not a framework
REACT - THE WEIRD PARTS
• JSX?!?
• Different way of thinking
• Component state
REACT - THE GOOD PARTS
• Virtual DOM
• Think about the end goal, not about the journey
• You render the final state
• Reac...
REACT
• Component = View + UI State + Event handling
Source: https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-...
02STATE MANAGEMENT
STATE MANAGEMENT
• React - Encapsulated UI Components
• Application State & Business logic?
STATE MANAGEMENT
Source: https...
DIY STATE MANAGEMENT
• OK for basic use cases?
• Model objects
• Services
DIY STATE MANAGEMENT
• How to (efficiently) rerender component on data change?
• setState is tricky
DIY STATE MANAGEMENT
• How to (efficiently) rerender component on data change?
• setState is tricky
• Standards…
Source: h...
MRC - MODEL-REACT-CONTROLLER
• e.g. Replace Backbone views with components
• http://todomvc.com/examples/react-backbone/
•...
FLUX
FLUX
• Facebook, 2014
• Unidirectional architecture
• Data down, actions up
FLUX
• Data down, actions up
Source: http://fluxxor.com/what-is-flux.html
FLUX
• Data down, actions up
Source: http://fluxxor.com/what-is-flux.html
FLUX
• Store
• Business logic + Application state
• Only one allowed to change application state
• All actions synchronous...
REDUX
REDUX
• Single store (with nesting)
• Application state
• UI State
• Reducers
• Business logic
• Responsible for one part ...
REDUX
Source: https://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-par...
REDUX
• Time travel
REDUX
• Time travel
REDUX
• Time travel
• Redux Dev Tools
Source: https://github.com/gaearon/redux-devtools-dock-monitor
REDUX
• A lot of boilerplate code
• Async actions very verbose
MOBX
MOBX
Actions
Observable
Observers
Computed
values
Our state
Our components
MOBX - UPDATES
• Observers & computed values notified only on relevant changes
• Topic for another talk
MOBX
• Faster than Redux
• Redux - component render on (sub)store update
• MobX - component render on specific property up...
MOBX VS. REDUX PERFORMANCE
Source: https://twitter.com/mweststrate/status/718444275239882753
MOBX VS. REDUX PERFORMANCE
Source: https://twitter.com/mweststrate/status/718444275239882753
Time in ms
MOBX
• Decorators
• @observable
• @calculated
• @action
• etc.
• TypeScript or Babel
• Not a requirement!
MORE ALTERNATIVES
RELAY
• Facebook
• GraphQL - API query language
RXJS
• not intended for this
• can mimic Redux
• “Observable states”
03REDUX VS. MOBX
REDUX VS. MOBX
Redux
Faster
Flexible
MobX
Bigger community
Better Dev Tools
REDUX VS. MOBX
Redux
Faster
Less boilerplate
Flexible
MobX
Bigger community
Better Dev Tools
Less magic
Source: https://tw...
EXAMPLE TIME!
Conference app
Load & choose talks
Setup
// ApplicationStore.js
const defaultState = {list: [], loading: false};
export default function(state = defaultState, acti...
// TalkStore.js
import {observable} from "mobx";
export const talks = observable({
list: [],
loading: false
});
MobX
Initi...
Load data
// MyComponent.js
dispatch(loadTalksAction());
// TalkActions.js
async function loadTalksAction() {
dispatch({name: TALK_L...
// MyComponent.js
loadTalksAction();
// TalkActions.js
async function loadTalksAction() {
talks.loading = true;
talks.list...
Modify data
// MyComponent.js
dispatch(selectTalkAction(this.props.talk));
// TalkActions.js
function selectTalkAction(talk) {
return ...
// MyComponent.js
selectTalkAction(this.props.talk);
// TalkActions.js
function selectTalkAction(talk) {
talk.selected = t...
MobX useStrict
import {useStrict} from "mobx";
useStrict(true);
// In a random place
function selectTalkAction(talk) {
talk.selected = tr...
04ENOUGH ABOUT MOBX,
LET’S TALK ABOUT MOBX
MOBX DEVTOOLS
• 3 options
• Redraws
MOBX DEVTOOLS
• 3 options
• Redraws
• Dependencies
MOBX DEVTOOLS
• 3 options
• Redraws
• Dependencies
• Actions/reactions
RELATED PROJECTS
• React bindings
• React Native bindings
• Meteor bindings
• Firebase
• Routers, models, forms, loggers, ...
<3 OPEN SOURCE
• https://github.com/infinum
• react-mobx-translatable
• mobx-keys-store
• mobx-jsonapi-store
• mobx-form-s...
RESOURCES
• http://mobxjs.github.io/mobx/
• https://mobxjs.github.io/mobx/getting-started.html
• https://medium.com/@mwest...
SHOULD YOU USE MOBX?
IT DEPENDSTM
Thank you!
DARKO@INFINUM.CO
@DARKOKUKOVEC
Visit infinum.co or find us on social networks:
infinum.co infinumco infinumco i...
Any questions?
DARKO@INFINUM.CO
@DARKOKUKOVEC
Visit infinum.co or find us on social networks:
infinum.co infinumco infinum...
Upcoming SlideShare
Loading in …5
×

Making react part of something greater

571 views

Published on

Webcamp Zagreb, 2016

React is a great view layer, but what about the rest of the app structure?

React is a great view layer, but if you want to create something more than a simple TODO app, you’ll need some other parts. First of, you’ll need a data structure and a way to handle the changes in it. Although the most simple way to do it could be to take parts of a framework you’re used to (e.g. Backbone Collections/Models), there is something better out there. First, there was the Flux architecture, made by Facebook itself - it forced us to change and consume our data in a certain way in order to prevent developers from shooting themselves in the foot. Then there was Redux - a state container that preaches immutability and time travel. While Redux is great, and enables us great things like hot module reloading, it is also very strict and introduces a lot of boilerplate code. MobX, on the other side, has almost no boilerplate code, can be strict when/if you want it to be, and gives you a nice performance boost for free.

https://2016.webcampzg.org/talks/view/making-react-part-of-something-greater/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Making react part of something greater

  1. 1. Making React part of something greater DARKO KUKOVEC JS TEAM LEAD @ INFINUM @DarkoKukovec
  2. 2. WHAT AM I TALKING ABOUT? • React
  3. 3. WHAT AM I TALKING ABOUT? • React • React state management libs • Comparison of two libs
  4. 4. WHAT AM I TALKING ABOUT? • React • React state management libs • Comparison of two libs • Biased?
  5. 5. 01REACT
  6. 6. REACT • Facebook • Not a framework
  7. 7. REACT - THE WEIRD PARTS • JSX?!? • Different way of thinking • Component state
  8. 8. REACT - THE GOOD PARTS • Virtual DOM • Think about the end goal, not about the journey • You render the final state • React takes care of the actual changes • Efficient
  9. 9. REACT • Component = View + UI State + Event handling Source: https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-35b4d1fe39ec
  10. 10. 02STATE MANAGEMENT
  11. 11. STATE MANAGEMENT • React - Encapsulated UI Components • Application State & Business logic? STATE MANAGEMENT Source: https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-35b4d1fe39ec
  12. 12. DIY STATE MANAGEMENT • OK for basic use cases? • Model objects • Services
  13. 13. DIY STATE MANAGEMENT • How to (efficiently) rerender component on data change? • setState is tricky
  14. 14. DIY STATE MANAGEMENT • How to (efficiently) rerender component on data change? • setState is tricky • Standards… Source: https://xkcd.com/927/
  15. 15. MRC - MODEL-REACT-CONTROLLER • e.g. Replace Backbone views with components • http://todomvc.com/examples/react-backbone/ • Backbone mutable by nature -> Bad for React perf • Legacy codebase?
  16. 16. FLUX
  17. 17. FLUX • Facebook, 2014 • Unidirectional architecture • Data down, actions up
  18. 18. FLUX • Data down, actions up Source: http://fluxxor.com/what-is-flux.html
  19. 19. FLUX • Data down, actions up Source: http://fluxxor.com/what-is-flux.html
  20. 20. FLUX • Store • Business logic + Application state • Only one allowed to change application state • All actions synchronous • Async operations trigger actions on state change
  21. 21. REDUX
  22. 22. REDUX • Single store (with nesting) • Application state • UI State • Reducers • Business logic • Responsible for one part of the store • Immutable state
  23. 23. REDUX Source: https://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/
  24. 24. REDUX • Time travel
  25. 25. REDUX • Time travel
  26. 26. REDUX • Time travel • Redux Dev Tools Source: https://github.com/gaearon/redux-devtools-dock-monitor
  27. 27. REDUX • A lot of boilerplate code • Async actions very verbose
  28. 28. MOBX
  29. 29. MOBX Actions Observable Observers Computed values Our state Our components
  30. 30. MOBX - UPDATES • Observers & computed values notified only on relevant changes • Topic for another talk
  31. 31. MOBX • Faster than Redux • Redux - component render on (sub)store update • MobX - component render on specific property update
  32. 32. MOBX VS. REDUX PERFORMANCE Source: https://twitter.com/mweststrate/status/718444275239882753
  33. 33. MOBX VS. REDUX PERFORMANCE Source: https://twitter.com/mweststrate/status/718444275239882753 Time in ms
  34. 34. MOBX • Decorators • @observable • @calculated • @action • etc. • TypeScript or Babel • Not a requirement!
  35. 35. MORE ALTERNATIVES
  36. 36. RELAY • Facebook • GraphQL - API query language
  37. 37. RXJS • not intended for this • can mimic Redux • “Observable states”
  38. 38. 03REDUX VS. MOBX
  39. 39. REDUX VS. MOBX Redux Faster Flexible MobX Bigger community Better Dev Tools
  40. 40. REDUX VS. MOBX Redux Faster Less boilerplate Flexible MobX Bigger community Better Dev Tools Less magic Source: https://twitter.com/phillip_webb/status/705909774001377280
  41. 41. EXAMPLE TIME! Conference app Load & choose talks
  42. 42. Setup
  43. 43. // ApplicationStore.js const defaultState = {list: [], loading: false}; export default function(state = defaultState, action) { switch(action.type) { default: return state; } } Redux Initial reducer setup
  44. 44. // TalkStore.js import {observable} from "mobx"; export const talks = observable({ list: [], loading: false }); MobX Initial observable setup
  45. 45. Load data
  46. 46. // MyComponent.js dispatch(loadTalksAction()); // TalkActions.js async function loadTalksAction() { dispatch({name: TALK_LIST_LOAD}); const talks = await loadTalks(); dispatch({name: TALK_LIST_LOADED, talks}); } // TalkReducer.js case TALK_LIST_LOAD: return {...state, list: [], loading: true}; case TALK_LIST_LOADED: return {...state, list: action.talks, loading: true}; Redux Load a list of items (redux-thunk)
  47. 47. // MyComponent.js loadTalksAction(); // TalkActions.js async function loadTalksAction() { talks.loading = true; talks.list = await loadTalks(); talks.loading = false; } MobX Load a list of items
  48. 48. Modify data
  49. 49. // MyComponent.js dispatch(selectTalkAction(this.props.talk)); // TalkActions.js function selectTalkAction(talk) { return {name: TALK_SELECT, talk.id}; } // TalkReducer.js case TALK_SELECT: return { ...state, list: state.list.map((item) => { if (item.id === action.talk.id) return {...item, selected: true}; else return item; }), loading: false }; Redux Choose a talk
  50. 50. // MyComponent.js selectTalkAction(this.props.talk); // TalkActions.js function selectTalkAction(talk) { talk.selected = true; } // TalkStore.js import {computed} from ’mobx’; export const talks = observable({ list: [], loading: false, @computed get selected() { return this.list.filter((item) => item.selected); } }); MobX Choose a talk
  51. 51. MobX useStrict
  52. 52. import {useStrict} from "mobx"; useStrict(true); // In a random place function selectTalkAction(talk) { talk.selected = true; } // [mobx] Invariant failed: It is not allowed to create or change state outside an `action` when MobX is in strict mode. Wrap the current method in `action` if this state change is intended // TalkActions.js @action function selectTalkAction(talk) { talk.selected = true; } MobX useStrict
  53. 53. 04ENOUGH ABOUT MOBX, LET’S TALK ABOUT MOBX
  54. 54. MOBX DEVTOOLS • 3 options • Redraws
  55. 55. MOBX DEVTOOLS • 3 options • Redraws • Dependencies
  56. 56. MOBX DEVTOOLS • 3 options • Redraws • Dependencies • Actions/reactions
  57. 57. RELATED PROJECTS • React bindings • React Native bindings • Meteor bindings • Firebase • Routers, models, forms, loggers, etc.
  58. 58. <3 OPEN SOURCE • https://github.com/infinum • react-mobx-translatable • mobx-keys-store • mobx-jsonapi-store • mobx-form-store (soon)
  59. 59. RESOURCES • http://mobxjs.github.io/mobx/ • https://mobxjs.github.io/mobx/getting-started.html • https://medium.com/@mweststrate/object-observe-is-dead-long- live-mobservable-observe-ad96930140c5 • https://medium.com/@mweststrate/3-reasons-why-i-stopped- using-react-setstate-ab73fc67a42e
  60. 60. SHOULD YOU USE MOBX?
  61. 61. IT DEPENDSTM
  62. 62. Thank you! DARKO@INFINUM.CO @DARKOKUKOVEC Visit infinum.co or find us on social networks: infinum.co infinumco infinumco infinum JOIND.IN joind.in/talk/bdddf darko.im
  63. 63. Any questions? DARKO@INFINUM.CO @DARKOKUKOVEC Visit infinum.co or find us on social networks: infinum.co infinumco infinumco infinum JOIND.IN joind.in/talk/bdddf darko.im

×