Observable data. Reactive functions. Simple code.
* 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 talk on [Reactive2015](https://www.youtube.com/watch?v=FEwLwiizlk0)
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;;var Timer = mobservable;React;
In the example above the
timerData data structure is made observable and the
Timer component is turned into an
Mobservable will automatically track all relations between observable data and observing functions (or components) so that the minimum 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. This is because setter notifies the Timer observer.
The actual interesting thing about this approach are the things that are not in the code:
setIntervalmethod didn't alter. It still treats
timerDataas a plain JS object.
- If the
Timercomponent would be somewhere deep in our app; only the
Timerwould be re-rendered. Nothing else (sideways data loading).
- There are no subscriptions of any kind that need to be managed.
- There is no forced UI update in our 'controller'.
- There is no state in the component. Timer is a dumb component.
- This approach is unobtrusive; you are not forced to apply certain techniques like keeping all data denormalized and immutable.
- There is no higher order component that needs configuration; no scopes, lenses or cursors.
- There is no magic context being passed through components.
Unlike Object.observe, you cannot track added properties. So remeber to initialize any property you want to observe. Null values work if you don't have any value yet. Observing added properties is impossible to achieve without native Proxy support or dirty checking.
npm install mobservable --save.
- For (Native) React apps
npm install mobservable-react --saveas well. You might also be interested in the dev tools for React and Mobservable.
- Five minute interactive introduction to Mobservable and React
Top level api
For the full api, see the API documentation.
This is an overview of most important functions available in 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 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.
- 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.
What others are saying...
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.
npm testto run the basic test suite,
npm run converagefor the test suite with coverage and
npm run perffor the performance tests.