Performance compared to mikado

[zhaoyao91]

In the recente benchmark, I found mikado has exceeded solid-js. Curious about what magic is applied to this project to gain such an effect.

[ryansolid]

Yeah sure. Mikado uses a direct DOM proxy. Sinuous actually uses a trick for this too. Basically you can think of it like:

const state = {
  get title() { return this._title; }
  set title(v) {
    el2.setAttribute("title", this._title = v);
  }
}

// in your action
state.title = newTitle; // literally sets the DOM element on assignment

Basically it is like a reactive system with no subscriptions since things are directly bound to the DOM. What's cool about this is there is no disposal. The proxies live and die with their DOM elements. There is no potential for leaky observer pattern. This makes a huge impact on benchmark 9. And mildly impacts benchmarks 2, 6, and 7.

Ignoring run variance (our current select row(4) had a bad run, you can see that when solid-state, vuerx-jsx are outperforming it using the exact same renderer but heavier reactive implementations). That makes up for the majority of the performance difference.

While we've addressed most of the performance overhead of creating subscriptions, disposal still is where Solid gets hit. 1more is the best top down rendering approach and solid the best granular reactive, but Mikado has more or combined the benefits of both approaches.

However as you can imagine there is some downsides to Mikado's approach. Um.. how do you share state? What if the data needs to be used in more than one view? The model is much more suited for one off templates and not synchronizing data across the app. Sure you could invest in state library solutions but they would all need to be synchronized locally for the template to work effectively (couldn't bind to it directly). And that is the key difference. Solid proxies data, Mikado proxies DOM nodes.

Not that Mikado doesn't have a different solution for Shared data but it opts out of using the ES proxy. At which point it isn't data-driven. You basically are doing direct DOM calls. That version of Mikado is actually the fastest but it isn't in the JS Framework Benchmark because it is considered cheating. Basically if you had the knowledge to do this you might as well just write the vanilla JS. I mean it's better than Vanilla because it provides jQuery like utility but there has been reasonable concern about how approaches like this scale in real apps. Stage0 had similar criticism.

Also what about batching updates. Solid doesn't batch by default, and neither does Mikado, but when you want to batch updates subscriptions are a natural queuing mechanism. There is no opportunity here with the direct 1 for 1 proxy. This isn't a problem in this benchmark but definitely something to consider when you have apps actually updating state in multiple places that are related. You could batch stuff yourself on the outside but you couldn't just use the data for it, you'd need to explicitly maintain a queue.

So in general I've looked at Mikado a decent amount. Even considered if a compiler could be used to overcome these shortcomings. Because trust me I'm always looking for the fastest approaches. But I keep landing on the fact that declarative and shared data is critical for developing applications. So Mikado's approach is basically a non-starter as the generic approach. It is theoretically possible with sufficient cross module compiler analysis you could get this direct update mechanism in a shallow sense with shared data, but I'm unsure if we could ever handle nested updates. And having both this and the nested updates is what gives Mikado it's performance. Without the nested updates it's basically the same as 1more as far as this benchmark is concerned. In reality it would be slightly better (and basically what the next version of Marko is). But it isn't going to benchmark better.

Now I could do something like Sinuous to game this benchmark and pull out similar numbers to Mikado. But it makes way more sense to work on and represent Solid's approach which applies to all apps and not just the narrow benchmark.

[zhaoyao91]

Solid proxies data, Mikado proxies DOM nodes.

[ghost]

zhaoyano91, is there any real-world project application with mikado, lol?

[ryansolid]

We could say that about anything that isn't React or a small subset of popular libraries. We've been there and been leveled the same criticism. I have reasons for why Mikado's approach isn't applicable to the work I've done or will do, but any project that can put out numbers like that at least has my attention.