* New to Mobservable? Take the [five minute, interactive introduction](https://mweststrate.github.io/mobservable/getting-started.html) * [Official documentation](https://mweststrate.github.io/mobservable/)
Mobservable enables your data structures to become observable. Next to that it can make your functions (or React components) reactive, so that they re-evaluate whenever relevant data is altered. It's like Excel for JavaScript: any data structure can be turned into a 'data cell', any function into a 'formula' that updates automatically.
This has major benefits for the simplicity, maintainability and performance of your code:
- Write complex applications which unmatched simple code.
- Enable unopiniated state management: be free to use mutable objects, cyclic references, classes and real references to store state.
- Write declarative views that track their own dependencies. No subscriptions, cursors or other redundant declarations to manage.
- Build high performing React applications without Flux or Immutable data structures.
- Predictable behavior: all views are updated synchronously and atomically.
Mobservable can be summarized in two functions that will fundamentally simplify the way you write React applications. Let's start by building a really really simple timer application:
var timerData = mobservable.observable({
secondsPassed: 0
});
setInterval(function() {
timerData.secondsPassed++;
}, 1000);
var Timer = mobservable.observer(React.createClass({
render: function() {
return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
}
}));
React.render(<Timer timerData={timerData} />, document.body);
Without Mobservable, this app would do nothing beyond the initial render.
The timer would increase every second, but the would UI never update.
To fix that, your code should trigger the UI to update each time the timerData
changes.
But there is a better way.
We shouldn't have to pull data from our state to update the UI.
Instead, the data structures should be in control and call the UI whenever it becomes stale.
The state should be pushed throughout our application.
In the example above this is achieved by making the timerDate
observable and by turning the Timer
component into an observer
.
Mobservable will automatically track all relations between observable data and observing functions (or components) so that the minum amount of observers is updated to keep all observers fresh.
Its as simple as that. In the example above the Timer
will automatically update each time the property timerData.secondsPassed
is altered.
The actual interesting thing about this approach are the things that are not in the code:
- The
setInterval
method didn't alter. It still treatstimerData
as a plain JS object. - There is no state. Timer is a dumb component.
- There is no magic context being passed through components.
- There are no subscriptions of any kind that need to be managed.
- There is no higher order component that needs configuration; no scopes, lenses or cursors.
- There is no forced UI update in our 'controller'.
- If the
Timer
component would be somewhere deep in our app; only theTimer
would be re-rendered. Nothing else.
All this missing code... it will scale well into large code-bases! It does not only work for plain objects, but also for arrays, functions, classes, deeply nested structures.
npm install mobservable --save
.- For (Native) React apps
npm install mobservable-react --save
as well. You might also be interested in the dev tools for React and Mobservable. - Five minute interactive introducton to Mobservable and React
- Online: Live edit the Todo example from the introduction.
- Online: Simple timer example on JSFiddle.
- Repo: Minimal boilerplate repostory.
- Repo: Full TodoMVC implementation.
- External example: The ports of the Notes and Kanban examples of the "SurviveJS - Webpack and React".
- Official homepage introduction
- Making React reactive: the pursuit of high performing, easily maintainable React apps
- SurviveJS interview on Mobservable, React and Flux
- Pure rendering in the light of time and state
Mobservable is inspired by Microsoft Excel and existing TFRP implementations like MeteorJS tracker, knockout and Vue.js.
For the full api, see the API documentation.
This is an overview of most important functions available in the mobservable
namespace:
observable(value, options?)
The observable
function is the swiss knife of mobservable and enriches any data structure or function with observable capabilities.
autorun(function) Turns a function into an observer so that it will automatically be re-evaluated if any data values it uses changes.
observer(reactJsComponent)
The observer
function (and ES6 decorator) from the mobservable-react
turns any Reactjs component into a reactive one.
From there on it will responds automatically to any relevant change in observable data that was used by its render method.
Elegant! I love it! ‐ Johan den Haan, CTO of Mendix
We ported the book Notes and Kanban examples to Mobservable. Check out the source to see how this worked out. Compared to the original I was definitely positively surprised. Mobservable seems like a good fit for these problems. ‐ Juho Vepsäläinen, author of "SurviveJS - Webpack and React" and jster.net curator
Great job with Mobservable! Really gives current conventions and libraries a run for their money. ‐ Daniel Dunderfelt
I was reluctant to abandon immutable data and the PureRenderMixin, but I no longer have any reservations. I can't think of any reason not to do things the simple, elegant way you have demonstrated. ‐David Schalk, fpcomplete.com
- Feel free to send pr requests.
- Use
npm start
to run the basic test suite,npm test
for the test suite with coverage andnpm run perf
for the performance tests.