JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Mobservable

    Observable data. Reactive functions. Simple code.
    Filed under  › 

    • 🔾91%Overall
    • 22,474
    • 19 hours
    • 🕩1432
    • 👥13

    logo

    MobX

    Simple, scalable state management

    Discuss on Github npm version OpenCollective OpenCollective


    MobX is made possible by the generosity of the sponsors below, and many individual backers. Sponsoring directly impacts the longevity of this project.

    🥇Gold sponsors (\$3000+ total contribution):
    Mendix Frontend Masters Facebook Open Source Auction Frontier Guilded Coinbase Canva

    🥈Silver sponsors (\$100+ pm):
    mantro GmbH CodeFirst DCSL Software Bugsnag Curology

    🥉Bronze sponsors (\$500+ total contributions):
    Algolia talentplot DAZN Blokt


    Introduction

    Anything that can be derived from the application state, should be derived. Automatically.

    MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). The philosophy behind MobX is simple:

    😙
    Straightforward

    With MobX, you write minimalistic, boilerplate free code that captures your intent: Trying to update a record field? Use good old JavaScript assignment. Updating data in an asynchronous process? No special tools are required. The reactivity system will detect all your changes and propagate them out to where they are being used.

    🚅
    Effortless optimal rendering

    MobX tracks all updates and usages of your data at runtime, building a dependency tree that captures all relations between state and output. This guarantees that computations depending on your state, like React components, run only when strictly needed. With MobX, there is no need to manually optimize components using error-prone and sub-optimal techniques like memoization and selectors.

    🤹🏻‍♂️
    Architectural freedom

    MobX is unopinionated and allows you to manage your application state outside of any UI framework. This makes your code decoupled, portable, and above all, easily testable.

    A quick example

    So what does code that uses MobX look like?

    import React from "react"
    import ReactDOM from "react-dom"
    import { makeAutoObservable } from "mobx"
    import { observer } from "mobx-react"
    
    // Model the application state
    class Timer {
        secondsPassed = 0
    
        constructor() {
            makeAutoObservable(this)
        }
    
        increaseTimer() {
            this.secondsPassed += 1
        }
    
        resetTimer() {
            this.secondsPassed = 0
        }
    }
    
    const myTimer = new Timer()
    
    // Build a user interface for this app, that merely uses the state...
    const TimerView = observer(({ timer }) => (
        <button onClick={() => timer.resetTimer()}>Seconds passed: {timer.secondsPassed}</button>
    ))
    
    ReactDOM.render(<TimerView timer={myTimer} />, document.body)
    
    // For demo's sake, let's force some updates...
    setInterval(() => {
        myTimer.increaseTimer()
    }, 1000)
    

    The observer wrapper around the TimerView React component will automatically detect that rendering of the component depends on timer.secondsPassed, even though this relationship is not explicitly defined. MobX's reactivity system will make sure the component gets re-rendered when precisely that field is updated in the future.

    Every event (onClick and setInterval) invokes an action (increaseTimer and resetTimer functions) that updates observable state (secondsPassed class property). Changes in the observable state are propagated precisely to all computations and side-effects (TimerView component) that depend on the changes being made.

    MobX unidirectional flow

    You can apply this diagram as a conceptual picture to this simple example or any other application using MobX.

    To learn about the core concepts of MobX with a larger example, please read Concepts & Principles or take the 10 minute interactive introduction to MobX and React. The philosophy and benefits of the mental model provided by MobX are described in detail in the blogs UI as an afterthought and How to decouple state and UI (a.k.a. you don’t need componentWillMount).

    What others are saying...

    Guise, #mobx isn't pubsub, or your grandpa's observer pattern. Nay, it is a carefully orchestrated observable dimensional portal fueled by the power cosmic. It doesn't do change detection, it's actually a level 20 psionic with soul knife, slashing your viewmodel into submission.

    After using #mobx for lone projects for a few weeks, it feels awesome to introduce it to the team. Time: 1/2, Fun: 2X

    Working with #mobx is basically a continuous loop of me going “this is way too simple, it definitely won’t work” only to be proven wrong

    I have built big apps with MobX already and comparing to the one before that which was using Redux, it is simpler to read and much easier to reason about.

    The #mobx is the way I always want things to be! It's really surprising simple and fast! Totally awesome! Don't miss it!

    Further resources and documentation

    Credits

    MobX is inspired by reactive programming principles as found in spreadsheets. It is inspired by MVVM frameworks like in MeteorJS tracker, knockout and Vue.js. But MobX brings Transparent Functional Reactive Programming to the next level and provides a stand alone implementation. It implements TFRP in a glitch-free, synchronous, predictable and efficient manner.

    A ton of credits for Mendix, for providing the flexibility and support to maintain MobX and the chance to proof the philosophy of MobX in a real, complex, performance critical applications.

    Show All