Stay React(ive) With MobX

Ego Slide

f.strazzullo@extrategy.net

@TheStrazz86

https://github.com/francesco-strazzullo

https://medium.com/@TheStrazz86

https://slides.com/francescostrazzullo

What is MobX?

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.

MobX docs

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.

Reactive Programming

How I learned the meaning of...

The Reactive Manifesto

Responsive, Resilient, Elastic, Message Driven

In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change.

Wikipedia

RxJS

Let's try with an example

var a = b + c;

=B1+C1

const triangle = {
    base:2,
    height:3,
    color:'red',
    get area() {
        return (this.base * this.height) / 2
    }
};

const report = () => {
    console.log(triangle.area);
};

report();
const triangle = triangleFactory({
    base:2,
    height:3,
    color:'red'
});

const report = () => {
    console.log(triangle.area);
};

triangle.addChangeListener(report);

triangle.setBase(4);

So...

MobX helps you observe your Model

const triangle = observable({
    base:2,
    height:3,
    color:'red',
    get area() {
        return (this.base * this.height) / 2
    }
});

const report = () => {
    console.log(triangle.area);
};

autorun(report);

//report()
triangle.base = 4;

//no report()
triangle.color = 'blue';

Core Concepts

Observable Models

Actions

Computed values

Reactions

view = f(state)
view=f(state)view = f(state)

Demo

Is MobX good for you?

No Boilerplate

No Cargo Cult

No Constraints

Evolutionary Design

Thanks!