[{"_1":2,"_36":-5,"_37":-5},"loaderData",{"_3":4},"routes/_main.tags.$tag",{"_5":6,"_35":21},"posts",[7],{"_8":9,"_10":11,"_12":13,"_14":15,"_16":17,"_29":30,"_31":32,"_33":34},"slug","reactivity-in-swift","title","Exploring Reactivity in Swift: A Comparison with JavaScript Frameworks","description","A developer's exploration of Swift's reactive programming capabilities, comparing them to popular JavaScript libraries like MobX and SolidJS. This post delves into the challenges of managing state changes and batching updates in Swift's Key-Value Observing (KVO) system.","date","2023-02-18","tags",[18,19,20,21,22,23,24,25,26,27,28],"combine","ios","javascript","kvo","mobx","reactivity","rxswift","solidjs","state-management","swift","swiftui","content","

I mostly work with JavaScript, but I've become in charge of some Swift code recently.

I also realized today that Swift has some built-in mechanisms for observing changing properties. That is pretty cool—kind of like the Swift equivalent of MobX or SolidJS?

class MyObjectToObserve: NSObject {\n  var observation: NSKeyValueObservation?\n\n  @objc dynamic var tracks: [Int] = []\n\n  override init() {\n    super.init()\n    observation = observe(\n      \\.tracks,\n      options: .new\n    ) { [self] _, _ in\n      let next = tracks.first\n      switch next {\n      case .none:\n        print("next track is empty")\n      case let .some(next):\n        print("next track is \\(next)")\n      }\n    }\n  }\n\n  func setTracks() {\n    tracks.removeAll()\n    tracks.append(1)\n    tracks.append(2)\n    tracks.append(3)\n  }\n}\n

Basically it observes a list of (media) tracks, and emits some update events when the next track changes.

However, I am running into a bug because the Swift implementation emits a change event for every intermediate step. Is there a good way to perform multiple modifications, similar to a batch (SolidJS) or action (MobX)?

Here is what happens when I call setTracks():

> swift run\nnext track is empty\nnext track is 1\nnext track is 1\nnext track is 1\n

SolidJS

Here is the same thing in Solid:

import { batch, createEffect, createSignal, on } from 'solid-js'\n\nconst [tracks, setTracks] = createSignal([])\n\nclass MyObjectToObserve {\n    constructor() {\n        createEffect(\n            on(\n                tracks,\n                (tracks) => {\n                    const next = tracks[0]\n\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                    defer: true,\n                }\n            )\n        )\n    }\n\n    setTracks() {\n        batch(() => {\n            setTracks([])\n            setTracks((tracks) => [...tracks, 1])\n            setTracks((tracks) => [...tracks, 2])\n            setTracks((tracks) => [...tracks, 3])\n        })\n    }\n}\n

The output of the SolidJS program is:

$ node --conditions=browser solid.mjs\nnext track is 1\n

MobX

Or in MobX:

import { action, makeObservable, reaction } from 'mobx'\n\nclass MyObjectToObserve {\n    tracks = []\n\n    constructor() {\n        makeObservable(this, {\n            tracks: true,\n            setTracks: action,\n        })\n\n        reaction(\n            () => this.tracks,\n            (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    }\n\n    setTracks() {\n        this.tracks = []\n        this.tracks = [...this.tracks, 1]\n        this.tracks = [...this.tracks, 2]\n        this.tracks = [...this.tracks, 3]\n    }\n}\n

$ node mobx.mjs\nnext track is 1\n

","excerpt","I mostly work with JavaScript, but I've become in charge of some Swift code recently.\nI also realized today that Swift has some built-in mechanisms for observing changing properties. That is...","readingTime",2,"tag","actionData","errors"]

Posts tagged "kvo"

Exploring Reactivity in Swift: A Comparison with JavaScript Frameworks