johnsoncodehk

These are some notes on the performance work that went into alien-signals. I'm sharing them not as a definitive guide, but as a log of a few key discoveries. The hope is that some of these findings might be useful to others tackling similar problems in high-performance JavaScript.

The Origin: Push-Pull-Push

My journey into the depths of reactivity performance began with Vue. I was trying to solve a specific problem in Vue 3.4: even if a computed's value didn't change, it would still trigger downstream computations and effects. This seemed inefficient. My attempt to fix this resulted in a pull request (vuejs/core#5912) that, after a year of discussions, was eventually merged. This PR introduced the Push-Pull-Push model to Vue 3.4, a model also adopted by libraries like reactivity.

For a time, I thought this was near-perfect. Then I saw the plans for Vue 3.5, which adopted a doubly-linked list but also moved to a pure pull-based model. I was still convinced

unixzii

import SwiftUI

struct HeaderView: View {
    var body: some View {
        HStack {
            Image(systemName: "info.circle.fill")
                .resizable()
                .frame(width: 12, height: 12)
            Text("Section Header")
                .font(.system(size: 13))

Raiondesu

// Credit to https://stackoverflow.com/a/49651719 and https://stackoverflow.com/a/60323358

const isProxy = obj => {
    try {
        postMessage(obj, window);
    } catch (error) {
        return error && error.code === 25;
    }
    
    return false;