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/

1. Making React part of
something greater
DARKO KUKOVEC
JS TEAM LEAD @ INFINUM
@DarkoKukovec

2. WHAT AM I TALKING ABOUT?
• React

3. WHAT AM I TALKING ABOUT?
• React
• React state management libs
• Comparison of two libs

4. WHAT AM I TALKING ABOUT?
• React
• React state management libs
• Comparison of two libs
• Biased?

5. 01REACT

6. REACT
• Facebook
• Not a framework

7. REACT - THE WEIRD PARTS
• JSX?!?
• Different way of thinking
• Component state

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. REACT
• Component = View + UI State + Event handling
Source: https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-35b4d1fe39ec

10. 02STATE MANAGEMENT

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. DIY STATE MANAGEMENT
• OK for basic use cases?
• Model objects
• Services

13. DIY STATE MANAGEMENT
• How to (efficiently) rerender component on data change?
• setState is tricky

14. DIY STATE MANAGEMENT
• How to (efficiently) rerender component on data change?
• setState is tricky
• Standards…
Source: https://xkcd.com/927/

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. FLUX

17. FLUX
• Facebook, 2014
• Unidirectional architecture
• Data down, actions up

18. FLUX
• Data down, actions up
Source: http://fluxxor.com/what-is-flux.html

19. FLUX
• Data down, actions up
Source: http://fluxxor.com/what-is-flux.html

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. REDUX

22. REDUX
• Single store (with nesting)
• Application state
• UI State
• Reducers
• Business logic
• Responsible for one part of the store
• Immutable state

23. REDUX
Source: https://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/

24. REDUX
• Time travel

25. REDUX
• Time travel

26. REDUX
• Time travel
• Redux Dev Tools
Source: https://github.com/gaearon/redux-devtools-dock-monitor

27. REDUX
• A lot of boilerplate code
• Async actions very verbose

28. MOBX

29. MOBX
Actions
Observable
Observers
Computed
values
Our state
Our components

30. MOBX - UPDATES
• Observers & computed values notified only on relevant changes
• Topic for another talk

31. MOBX
• Faster than Redux
• Redux - component render on (sub)store update
• MobX - component render on specific property update

32. MOBX VS. REDUX PERFORMANCE
Source: https://twitter.com/mweststrate/status/718444275239882753

33. MOBX VS. REDUX PERFORMANCE
Source: https://twitter.com/mweststrate/status/718444275239882753
Time in ms

34. MOBX
• Decorators
• @observable
• @calculated
• @action
• etc.
• TypeScript or Babel
• Not a requirement!

35. MORE ALTERNATIVES

36. RELAY
• Facebook
• GraphQL - API query language

37. RXJS
• not intended for this
• can mimic Redux
• “Observable states”

38. 03REDUX VS. MOBX

39. REDUX VS. MOBX
Redux
Faster
Flexible
MobX
Bigger community
Better Dev Tools

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. EXAMPLE TIME!
Conference app
Load & choose talks

42. Setup

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. // TalkStore.js
import {observable} from "mobx";
export const talks = observable({
list: [],
loading: false
});
MobX
Initial observable setup

45. Load data

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. // 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. Modify data

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. // 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. MobX useStrict

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. 04ENOUGH ABOUT MOBX,
LET’S TALK ABOUT MOBX

54. MOBX DEVTOOLS
• 3 options
• Redraws

55. MOBX DEVTOOLS
• 3 options
• Redraws
• Dependencies

56. MOBX DEVTOOLS
• 3 options
• Redraws
• Dependencies
• Actions/reactions

57. RELATED PROJECTS
• React bindings
• React Native bindings
• Meteor bindings
• Firebase
• Routers, models, forms, loggers, etc.

58. <3 OPEN SOURCE
• https://github.com/infinum
• react-mobx-translatable
• mobx-keys-store
• mobx-jsonapi-store
• mobx-form-store (soon)

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. SHOULD YOU USE MOBX?

61. IT DEPENDSTM

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. 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