Angular & MobX,

Where magic happens

• Laurent Wroblewski

• Full Stack developer

• Davidson consulting

• Why am I here?

• Because Angular is a lier.

• It does not do everything for us.

• Nothing about the state management? Really?

MobX

State Container Manager

• MobX purposes

• Functional Reactive Programming

• No brain fucking

• Less code

• Freedom

• Mobx concepts

1) Actions:

• Event handler

• Incoming socket

• ...

1) Actions:

• Updates observable state

 

• @action('[USER] ADD')

• useStrict(true)

1) Actions:

• Transactions:

transaction(() => {
  action1();
  action2();
});

2) State

• Any type

• Do not care about immutability

• Make data Observable

observable({})

OR

@observable

2) State:

• @observable/*.deep*/

• @observable.ref

• @observable.shallow

2) State:

class Store {
    @observable collection1 = []
    @observable.ref collection2 = []
    @observable.shallow collection3 = []
}

const todos = [{ test: "value }]
const store = new Store()

store.collection1 = todos;
store.collection2 = todos;
store.collection3 = todos;

3) Derivations:

• @computed

Values based on observable data.

3) Derivations:

• autorun

• reaction

• when

MobX Efficiency

• Only computed values used in reactions are kept in sync with the observable state.

• Complex dependency tree

How to use?

• npm i --save mobx mobx-angular

• import MobxAngularModule

• That's all.

 

... or...

 

• npm i --save mobx

Need help?

• mobxAngularDebug(true)

• trace() (or whyRun())

 

• Plugin MobX developer tools

Demo time...

• So, suited for me?

• +

• Less refactoring and boilerplate

• Easy to use and to understand

• -

• Coding conventions are mandatory

• Little to medium dev teams?

• rxjs, where are you?

Any questions?

Thanks for your time.

Have a nice beer.