making react part of something greater
TRANSCRIPT
Making React part of something greater
DARKO KUKOVECJS 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• React takes care of the actual changes• Efficient
REACT
• Component = View + UI State + Event handling
Source: https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-35b4d1fe39ec
02STATE MANAGEMENT
STATE MANAGEMENT
• React - Encapsulated UI Components• Application State & Business logic?
STATE MANAGEMENT
Source: https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-35b4d1fe39ec
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: https://xkcd.com/927/
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?
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• Async operations trigger actions on state change
REDUX
REDUX
• Single store (with nesting)• Application state• UI State
• Reducers• Business logic• Responsible for one part of the store
• Immutable state
REDUX
Source: https://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/
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
Computedvalues
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 update
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://twitter.com/phillip_webb/status/705909774001377280
EXAMPLE TIME!Conference app
Load & choose talks
Setup
// ApplicationStore.jsconst defaultState = {list: [], loading: false};
export default function(state = defaultState, action) {switch(action.type) {default:return state;
}}
ReduxInitial reducer setup
// TalkStore.jsimport {observable} from "mobx";
export const talks = observable({list: [],loading: false
});
MobXInitial observable setup
Load data
// MyComponent.jsdispatch(loadTalksAction());
// TalkActions.jsasync function loadTalksAction() {
dispatch({name: TALK_LIST_LOAD});const talks = await loadTalks();dispatch({name: TALK_LIST_LOADED, talks});
}
// TalkReducer.jscase TALK_LIST_LOAD:
return {...state, list: [], loading: true};case TALK_LIST_LOADED:
return {...state, list: action.talks, loading: true};
ReduxLoad a list of items (redux-thunk)
// MyComponent.jsloadTalksAction();
// TalkActions.jsasync function loadTalksAction() {
talks.loading = true;talks.list = await loadTalks();talks.loading = false;
}
MobXLoad a list of items
Modify data
// MyComponent.jsdispatch(selectTalkAction(this.props.talk));
// TalkActions.jsfunction selectTalkAction(talk) {
return {name: TALK_SELECT, talk.id};}
// TalkReducer.jscase TALK_SELECT:
return {...state,list: state.list.map((item) => {if (item.id === action.talk.id)return {...item, selected: true};
else return item;}),loading: false
};
ReduxChoose a talk
// MyComponent.jsselectTalkAction(this.props.talk);
// TalkActions.jsfunction selectTalkAction(talk) {
talk.selected = true;}
// TalkStore.jsimport {computed} from ’mobx’;
export const talks = observable({list: [],loading: false,@computed get selected() {return this.list.filter((item) => item.selected);
}});
MobXChoose a talk
MobX useStrict
import {useStrict} from "mobx";useStrict(true);
// In a random placefunction 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;}
MobXuseStrict
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, etc.
<3 OPEN SOURCE
• https://github.com/infinum• react-mobx-translatable• mobx-keys-store• mobx-jsonapi-store
• mobx-form-store (soon)
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
SHOULD YOU USE MOBX?
IT DEPENDSTM
Thank [email protected]@DARKOKUKOVEC
Visit infinum.co or find us on social networks:
infinum.co infinumco infinumco infinum
JOIND.INjoind.in/talk/bdddfdarko.im
Any [email protected]@DARKOKUKOVEC
Visit infinum.co or find us on social networks:
infinum.co infinumco infinumco infinum
JOIND.INjoind.in/talk/bdddfdarko.im