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!

Stay React(ive) With MobX

By Francesco Strazzullo

Stay React(ive) With MobX

An introduction to MobX

  • 2,880