Mobx - The new kid in the block
Well, that’s not quite right..
Exactly mobx (Previously known as ‘ mobservable’) is around since 2015 and currently in it’s 5.x version. In the last few moth this library became very popular with more the 13000 start in github.com and rapidly growing community of developers.
So mobx it’s a nice new buzz word , But what is it?
Like the familiar Redux and Flux, its a state management solution for client side applications. I’ts very light wight and has a lot of useful features. mobx is very performance oriented and built to support large scale application as well as small one with minimul boilerplate .
mobx is reactive and action driven, meaning that in order to change the applications state we need to emit an action. The key feature that caught my eye using mobx is it’s simplicity against other slimier state management solutions. Instead of creating a reducer, an action creator and middle weres that are hard to maintained in growing applications, mobx merges all of this complex structure into one easy to use, easy to read and easy to maintain file.
Anything that can be derived from the application state, should be derived. Automatically.
mobx is framework agnostic and can be applied in any modern JS environment like react, angular and Vue.js. Also, mobx runs on ES5 environment meaning that it’s capable with all of modern browsers.
One other aspect I want to cover is debugging. Although mobx-dev-tools are not quite impressive as redux awesome ‘time travel debugging’, Iv’e found them very useful.
With mobx-dev-tools you can print your app state log into console, be notified on change detection render occur and get component state dependencies.
I would like to expand a little bit farther about the last two features. The butty of mobx is that mobx can automate all of the application (Or parts of it) change detection cycle. With the flushing green rectangle developer can easily notice when and witch component getting re-render. If you see green rectangle where nothing changed you probably doing something wrong.
The second part is the component state structure. With this nice diagram you can isolate what data influence this component. If you seeing dependencies that aren’t suppose to be there probably something it your state is wrong and it’s worth to rethink about it’s structure.
There’s a nice short video by Michel Weststrate form egghead.io that’s talk about the mobx-dev-tools.
I’ve created a small project that’s uses mobx as it’s state management.
Place extra care on books.store.ts, This small service is all you need. No boilerplate and no multiply files
The final result:
https://ritox842.github.io/booksList-mobx/
The repository:
https://github.com/ritox842/booksList-mobx
In the above project you can see all of the basic CRUD operation by mobx preformed on the book list data.
As far as I can say mobx has only one con. It’s not a small one but with proper ahead planing and good team work it’s not so bad.
While redux has it’s reducers and state tree to be used as an interface witch team member can follow, mobx dos’t have it (In it’s vanilla form). Because mobx is not relay on interfaces and predefined structure, developers may have different approach of using it. Team members have to be synced with each other in order to avoid conflicts.
To sum up, I love redux, It’s a very good library and a great state managment solution witch I used in many past project and probably will use in the feature. But I think that in overall rating mobx gives a better experience to both developer and end user.
It’s can be easily scale up, it’s performance tuning are noticeable (For the best of curse) and it’s easy to learn and implement (Event in existing projects).
For feather reading about mobx I recommend :
Egghead.io course
MobX — Performance and Sanity — Adam Klein — AngularConnect 2017
MobX — Official documentation
