MobX is a reactive state management library that is presented as an alternative to Redux. It aims to have less boilerplate code than Redux and be simpler to use. MobX uses observable objects and computed values, along with the @observer decorator for React components. According to a performance test, MobX had faster performance than Redux for common operations like adding, removing, and updating items in a Todo list app with 10,000 items. MobX is praised for its flexibility and less code compared to Redux, but it also lacks strict best practices and conventions that Redux provides.

1. MobX Intro
Unhappy with Redux? Try MobX!

2. Redux is awesome, but...
Too many boilerplates / rules
A lot of code
action, dispatch const, reducer...you need them when every simple job
You need learn more to make your project perfect
Smart / Dumb component
Immutable.js
redux-thunk
redux-saga

4. What is MobX
An Reactive Programing lib
Base on Observer patten
State managment, like redux, flux
Works perfect with React

5. Why MobX
No boilerplate or rule
just focus on your logic
Less code, less work
and go home earlier
Simple and scalable
you don’t need any mobx-*

6. How it works

7. How it works
observable()
autorun()
https://jsbin.com/batefip/1/edit?js,console

8. How it works

9. How it works
https://github.com/mobxjs/mobx/blob/gh-pages/docs/best/react.md
TL;DR: MobX reacts to any an existing observable property that is read during
the execution of a tracked function.

10. How it works
@observable
@computed
@action
autorun()
https://jsbin.com/vakedu/1/edit?js,console

11. Work with React
@observer
https://jsbin.com/pakabaqona/edit?js,output

12. Performance test
Todo MVC with 10,000 items
https://github.com/mweststrate/mobx-todomvc
https://github.com/mweststrate/redux-todomvc (optimized by Dan Abramov)

13. Performance test
Add 1 item
MobX: 148.1 + 284.1 + 17.9 = 450.1ms
Redux: 215.1 + 248.1 + 42.5 = 505.7ms

14. Performance test
Remove 1 item
MobX: 382.8 + 312.6 + 31.7 = 727.1ms
Redux: 307.5 + 537.4 + 79.4 = 924.3ms

15. Performance test
Change 1 item
MobX: 60.6 + 160.3 + 213.8 = 434.7ms
Redux: 140.2 + 149.3 + 261.0 = 550.5ms

16. MobX vs Redux
Pros
No boilerplates, very flexble
Less code
Simple and easy to learn
Easy to get high performance

17. MobX vs Redux
Cons
No best practice, depends on your ablity.
Too much freedom, you can do something great … or terrible.

18. Q & A

19. Thank you : ^ )
Unhappy with Redux? Try MobX!