Making react part of something greater
0 likes1,064 views
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, youll need some other parts. First of, youll 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 youre 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/
![// ApplicationStore.js
const defaultState = {list: [], loading: false};
export default function(state = defaultState, action) {
switch(action.type) {
default:
return state;
}
}
Redux
Initial reducer setup](https://image.slidesharecdn.com/makingreactpartofsomethinggreater-161031165748/85/Making-react-part-of-something-greater-43-320.jpg)
![// TalkStore.js
import {observable} from "mobx";
export const talks = observable({
list: [],
loading: false
});
MobX
Initial observable setup](https://image.slidesharecdn.com/makingreactpartofsomethinggreater-161031165748/85/Making-react-part-of-something-greater-44-320.jpg)
![// 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)](https://image.slidesharecdn.com/makingreactpartofsomethinggreater-161031165748/85/Making-react-part-of-something-greater-46-320.jpg)
![// 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](https://image.slidesharecdn.com/makingreactpartofsomethinggreater-161031165748/85/Making-react-part-of-something-greater-50-320.jpg)
![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](https://image.slidesharecdn.com/makingreactpartofsomethinggreater-161031165748/85/Making-react-part-of-something-greater-52-320.jpg)
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
- 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
- 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
- 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!
- 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, LETS 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