[{"_1":2,"_37":-5,"_38":-5},"loaderData",{"_3":4},"routes/_main.tags.$tag",{"_5":6,"_36":18},"posts",[7],{"_8":9,"_10":11,"_12":13,"_14":15,"_16":17,"_30":31,"_32":33,"_34":35},"slug","reactivity-in-swift-part-2","title","Reactivity in Swift, Part 2: Implementing a Batching Solution","description","In this follow-up post, I share a custom batching solution for Swift inspired by MobX. Learn how a minimal implementation of a batching function can solve UI glitch issues and improve the performance of reactive applications.","date","2023-02-22","tags",[18,19,20,21,22,23,24,25,26,27,28,29],"batching","combine","ios","javascript","mobx","performance","reactivity","rxswift","state-management","swift","swiftui","typescript","content","

While trying to solve the Reactivity in Swift issue, I could not find any existing Swift library that handled the batching issue.

I ended up using MobX as an inspiration and implementing just the batching function in the most basic way in Swift.

Here is a JavaScript version of that:

class RxTool {\n    batchCount = 0\n\n    batch<T = unknown>(fn: () => T): T {\n        let result: T\n\n        this.enterBatch()\n\n        try {\n            result = fn()\n        } finally {\n            this.exitBatch()\n        }\n\n        return result\n    }\n\n    private enterBatch() {\n        this.batchCount += 1\n    }\n\n    private exitBatch() {\n        this.batchCount -= 1\n        if (this.batchCount === 0) {\n            // flush pending reactions\n            for (const [id, reaction] of this.pendingReactions) {\n                reaction()\n                this.pendingReactions.delete(id)\n            }\n        }\n    }\n\n    private pendingReactions = new Map<string, () => void>()\n\n    scheduleSideEffect(id: string, fn: () => void) {\n        if (this.batchCount === 0) {\n            // execute immediately\n            fn()\n        } else {\n            // add to reactions to execute later\n            // if the pending reaction id already exists,\n            // it will be overwritten\n            this.pendingReactions.set(id, fn)\n        }\n    }\n}\n\nexport const rxTool = new RxTool()\n

As this is a super minimal version, instead of autorun or reaction in MobX, which automatically track changing variables and run a side effect, I added a function to schedule the side effect directly instead. A similar concept to requestAnimationFrame, but additionally deduplicating the side effect by "id", so only the latest version of that side effect is actually executed.

So the final code ended up looking something like this:

import { rxTool } from './reaction'\n\nexport class MyObjectToObserve {\n    private _tracks: number[] = []\n    set tracks(tracks: number[]) {\n        this._tracks = tracks\n        rxTool.scheduleSideEffect('set-tracks', () => {\n            const next = tracks[0]\n            if (typeof next === 'number') {\n                console.log(`next track is ${next}`)\n            } else {\n                console.log('next track is empty')\n            }\n        })\n    }\n    get tracks() {\n        return this._tracks\n    }\n\n    setTracks() {\n        rxTool.batch(() => {\n            this.tracks = []\n            this.tracks = [...this.tracks, 1]\n            this.tracks = [...this.tracks, 2]\n            this.tracks = [...this.tracks, 3]\n        })\n    }\n}\n

Except spread over many more files and more logging.

In the real app, I wrapped the suspicious functions with batch and the side effect code in scheduleSideEffect. Amazingly, the UI glitch issue disappeared almost immediately.

It was interesting to see how this batch solution could be used to resolve some glitch issues very easily. Writing the batch code itself took some effort, especially since I am new to Swift and have to look up syntax in the documentation a lot. By contrast, there was very little mental overhead for wrapping other code with the new batch and scheduleSideEffect helpers. I also did not need to move around or restructure any existing code.

I still think the MobX reaction API is easier to understand. The scheduleSideEffect here feels more advanced. Maybe this is why, in the JavaScript world, we often see reaction-type APIs together with proxy state like MobX, but it is not common to see an API like scheduleSideEffect. Even so, reducing the batch feature down to this tiny API makes it easier to port that feature to other languages as well.

","excerpt","While trying to solve the Reactivity in Swift issue, I could not find any existing Swift library that handled the batching issue.\nI ended up using MobX as an inspiration and implementing just the...","readingTime",3,"tag","actionData","errors"]

Posts tagged "batching"

Reactivity in Swift, Part 2: Implementing a Batching Solution