How to use MobX without React?

[martin-braun]

I'm looking for guides, but it's hard to find something without React involved.

The reason is I have to deal with a Laravel application that uses no UI framework and not state management at the moment. Refactoring the whole application is not acceptable giving the amount of time it would take, but a who step transition seems most logical to me. I want to start slowly moving the global window objects into a state management, thus I'm looking for a library like MobX, that will work with any framework, even with vanilla JS.

How to I write observers so they update HTML elements manually in the DOM, correctly? I would enjoy a full fledged guide on using MobX with vanilla JS. Best I found so far is this article. It comes with a few samples, but lacks the overall picture, there is no example repository to explore, a proper guide would be superior for me.

I want to emphasize that we have not decided which UI framework we will implement in the app in the future, there is a lot to discuss and to evaluate. Although, the missing state management is a crucial problem and needs to be tackled asap.

Thank you.

[mweststrate]

I'd take a look at lit-html. It's good, very light and iirc they have good mobx integration

…

On Sun, 15 May 2022, 14:21 Martin Braun, ***@***.***> wrote: I'm looking for guides, but it's hard to find something without React involved. The reason is I have to deal with a Laravel application that uses no UI framework and not state management at the moment. Refactoring the whole application is not acceptable giving the amount of time it would take, but a who step transition seems most logical to me. I want to start slowly moving the global window objects into a state management, thus I'm looking for a library like MobX, that will work with any framework, even with vanilla JS. How to I write observers so they update HTML elements manually in the DOM, correctly? I would enjoy a full fledged guide on using MobX with vanilla JS. I want to emphasize that we have not decided which UI framework we will implement in the app in the future, there is a lot to discuss and to evaluate. Although, the missing state management is a crucial problem and needs to be tackled asap. Thank you. — Reply to this email directly, view it on GitHub <#3396>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBFGHUDRC43OBLUKZFLVKD24TANCNFSM5V7C2IDQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[martin-braun]

Yes, I know lit-html, thank you for refreshing my memory. I will definitely evaluate it into our decision, next to React, Vue or any other UI framework. This is not possible yet, the first step is to handle the state in a better way. This project has global variables all over the place in inline script tags within laravel views / elements and accesses them from multiple places, thus introducing circle references all over the place. The real objective is to get at least a little organization in the code by centralizing the state as I modify the project, slowly.

[kubk]

Laravel has built-in integration with React / Vue that's why I'd choose them: https://laravel.com/docs/7.x/frontend
Mobx has integrations with both React and Vue.

Here is an example how to use autorun to manually update DOM when observable data changes: https://jsfiddle.net/Lrt9pky4/
But if you want something automatic you should implement your own observer. Essentially it is autorun(() => component.rerender()) but you probably end up building a library to cover all the edge cases. It is up to you to decide if it's worth it.

[martin-braun]

Thank you for your quick reply. It's probably not worth in the long run to build any UI framework, but your recommendation in regards of the future framework is a good once, but it will also take influence on evaluations of my team members.

Back on-topic, there are a lot of script tags put into the views of laravel that have unorganized render functions that access the localStorage and the global window scope, both of which I want to move into the global state. Then I will use the autorun to pass changed data to those pre-existing functions to render the stuff that they meant to render. It's really just a matter of getting out clutter and moving all state-driven variables that are spread on multiple views into one global store.

It's really a huge mess, i.e. I have a list state object that is used in one function on every page to render something in the header, but it is also used in another function to render something on the body in one page, exclusively.

What really took me time to grasp is the fact that autorun is aware of the variables that it makes use of, probably by tracking access in the initial autorun call, so no need for using event handlers to notify any changes, neat.

Thank you!

For anyone else trying to grasp the same, please check this and that.

[martin-braun]

I want to share my (so-far) results:

Entry file app.js:

import { mobx, context } from '../ts/app';

window.mobx = mobx;
window.context = context;

TypeScipt files (combined):

import { computed, makeObservable, observable, reaction } from "mobx"

interface IBasketItem {
    code: number
    count: number
    food: string
    foodid: number
    foodprice: string
    id: number
    image: string
    plu: number
    tax: number
}

class BasketItem implements IBasketItem {
    store: BasketStore

    code: number
    count: number
    food: string
    foodid: number
    foodprice: string // DB Decimals are returned as strings from the backend
    id: number
    image: string
    plu: number
    tax: number // percentage

    constructor(obj: IBasketItem) {
        Object.assign(this, obj)

        makeObservable(this, {
            count: observable, // only count can change on existing item
            total: computed
        })
    }

    get total(): string {
        return (this.count * parseFloat(this.foodprice)).toFixed(2).toString() // DB Decimals expect strings on the backend
    }
}

class BasketStore {
    rootStore: RootStore
    items: BasketItem[] = []

    constructor(rootStore: RootStore) {
        this.rootStore = rootStore
        this.items = JSON.parse(localStorage.getItem("items") || "[]").map((item: IBasketItem) => new BasketItem(item))

        makeObservable(this, {
            items: observable
        })

        reaction(
            () => JSON.stringify(this.items),
            (json: string) => { localStorage.setItem("items", json) },
            { delay: 1000 }
        )
    }
}

class RootStore {
    basketStore

    constructor() {
        this.basketStore = new BasketStore(this)
    }
}

export * as mobx from "mobx"

export const context = new RootStore();

This is basically a basket store (for a cart in a shop) that is part of the root store that will extend. I persist the basket items using reaction instead of autorun to prevent unnecessary calls by using its delay feature. I assume it will be called by autorun, so it should only call, if something on items changes. I expose the mobx and the context (RootStore) to the window, so it can be used in the whole application.

I will then update my render functions in the views to use mobx.reaction instead of manual triggering and loading from the localStorage. If I understand all correctly, I should be able to observe even changes in count of one single basket item, since I implemented a BasketItem class that has an observer proxy for the count property.