Language Support

MobX supports ES5, ES6, and Typescript. Let's compare the README example in each language to understand how to use MobX in your language ecosystem of choice.

TypeScript or ES6 + Instance Fields + Decorators

This is a great example of how using the latest JavaScript features help reduce boilerplate and increase code readability.

import {observable} from 'mobx';

class Todo {
    id = Math.random();
    @observable title = "";
    @observable finished = false;
}

Instance fields and decorators can be enabled in Babel via the transform-class-properties and transform-decorators-legacy plugin. The order is important: plugins: ['transform-decorators-legacy', 'transform-class-properties'].

ES6

Using standard ES6 requires more explicit initialization.

import {extendObservable} from 'mobx';

class Todo {
    constructor() {
        this.id = Math.random();
        extendObservable(this, {
            title: "",
            finished: false
        });
    }
}

ES5

Using standard ES5 requires a bit more boilerplate to create a class.

var m = require('mobx');

var Todo = function() {
    this.id = Math.random();
    m.extendObservable(this, {
        title: "",
        finished: false
    });
}