mweststrate

// -- app.js --
import { AbstractNode } from './internal'

/* as is */

// -- internal.js --
export * from './AbstractNode'
export * from './Node'
export * from './Leaf'

mweststrate

export class AbstractNode {
  /* as is */
}

import { Node } from './Node'
import { Leaf } from './Leaf'

mweststrate

// -- AbstractNode.js --
import { Leaf } from './Leaf'
import { Node } from './Node'

export class AbstractNode {
  /* as is */ 
}

// -- Node.js --
import { AbstractNode } from './Node'

mweststrate

export class AbstractNode {
    constructor(parent) {
        this.parent = parent
    }

    getDepth() {
        if (this.parent) return this.parent.getDepth() + 1
        return 0
    }

mweststrate

Object.defineProperty(observable([]).constructor.prototype, Symbol.isConcatSpreadable, {
   enumerable: false, configurable: true, value: true
})

mweststrate

• philosophy
• overview
  • observables
  • reactions: autorun
  • derived values: computed
  • actions

Making things observable

• observable.box
• observable.object

mweststrate

import { decorate, observable, flow, onBecomeObserved, onBecomeUnobserved } from 'mobx'
import { log } from './log'

const APPID = '<secret>'

export class City {
    location
    temperature
    interval

mweststrate

import { when } from "mobx"

async() => {
  await when(() => user.loggedOut)
  alert("You have been successfully logged out!")
}

mweststrate

import { decorate, observable, flow } from "mobx"

/**
 with decorator syntax enabled
*/
class City {
    @observable location
    @observable temperature

    @action.bound

mweststrate

const CityView = observer(({ city }) => (
    <li>
        City: {city.location} - Temperature in ℃: {city.temperature || 'Loading'}
    </li>
))