Handlebars syntax is not bad at all, we can make it faster than React, Vue, or Svelte

[trusktr]

Summary

The new component system Solid.js looks like React (because it uses JSX syntax), but it compiles to something way better using dependency-tracking reactivity just like Meteor's reactive variables and tracker autoruns (called "signals" and "effects" in Solid).

This makes Solid.js an excellent pairing for Meteor because the paradigms match perfectly.

I believe we can use a package like https://www.npmjs.com/package/handlebars-to-jsx to compile Blaze templates into super fast Solid.js runtime equivalent to what Solid.js compiles JSX to.

Background

To give a brief example, here's how to use Solid inside of Meteor:

import {createEffect, createSignal} from 'solid-js'
import {ReactiveVar} from 'meteor/reactive-var'
import {Tracker} from 'meteor/tracker'

const meteorCount = new ReactiveVar(0)

setInterval(() => meteorCount.set(meteorCount.get() + 1), 1000)

// Solid's createSignal is the equivalent of Meteor's ReactiveVar
const [solidCount, setSolidCount] = createSignal(0)

Tracker.autorun(() => {
  console.log('meteor count is: ', meteorCount.get())

  // map the Meteor reactive var to the Solid signal
  setSolidCount(meteorCount.get())
})

// Solid's createEffect is the equivalent of Meteor's Tracker.autorun, any used signals become dependencies of the effect.
createEffect(() => {
  console.log('solid count is: ', solidCount())
})

function MySolidComponent() {
  // Solid's JSX
  return <div>The count is {solidCount()}</div>
}

MySolidComponent compiles to something like the following (simplified, this hand written version is less optimized):

function MySolidComponent() {
  // Solid's JSX (looks like React)
  const div = document.createElement('div')
  const staticText = new Text('The count is ')
  const dynamicText = new Text('')

  div.append(staticText)
  div.append(dynamicText)

  createEffect(() => {
    // Update the specific part of DOM any time the solidCount signal changes
    dynamicText.nodeValue = solidCount()
  })

  return div
}

How

To make this work, the best way would be to replace internals of Meteor Tracker with Solid reactivity in a backwards-compatible way. Then, with a handlebars-to-JSX transformation convert HTML to the JSX output (possibly optimized to avoid a JSX step, and just go straight to equivalent output).

Why

Solid has gained popularity because of its simplicity, and performance. It beats well-known libs in some benchmarks, without sacrificing dev experience (actually improving it in various cases, for example compared to React). The JS Framework Benchmark is one example benchmark.

(@ryansolid @edemaine)

[edemaine]

To make this work, the best way would be to replace internals of Meteor Tracker with Solid reactivity in a backwards-compatible way.

I think this is a very interesting direction; Solid's reactive system is extremely close to Tracker, but IMO is slightly better and modern (e.g. it doesn't rely on setTimeout), so it would be cool to move Meteor over. I'm not sure how practical that is, but it would be neat to explore.

As an alternative for this part, though, I wrote a function called autoTracker that (thanks to recent interoperability features in Solid) integrates Tracker and Solid so that Solid's reactivity behaves like it's also wrapped in Tracker.autorun, so in your example you could replace the Tracker.autorun with

createEffect(() => {
  console.log('meteor count is: ', meteorCount.get())

  // map the Meteor reactive var to the Solid signal
  setSolidCount(meteorCount.get());
})

And you also don't really need to synchronize Tracker and Solid state in this way, with autoTracker on; you can just use Tracker state within Solid JSX like so:

function MySolidComponent() {
  // Solid's JSX
  return <div>The count is {meteorCount.get()}</div>
}

I don't think autoTracker is as efficient as if we replaced Tracker with Solid, but this "workaround" lets us explore the original idea — Handlerbars → Solid JSX conversion — without needing to completely replace Tracker.

[StorytellerCZ]

I have just looked on Solid today after the results of State of JS. Looks interesting and I like the ideas here. Though I think the first step should be to create a Meteor skeleton to make it super easy for people to get started with Solid & Meteor. Next if we can improve Tracker with inspiration from Solid that would be a great benefit to all Meteor users. As for migrating Blaze to use Solid, I think we can first gain a lot from the above mentioned steps as they will more people to explore Solid and what it brings to table which in turn will give us more insight into this.

[edemaine]

I was also thinking a version of the tutorial for Meteor + Solid would be helpful. I started this a bit.

Is there a pointer for how to add a template to Meteor?

[StorytellerCZ]

Take a look at my old PR when I was adding the Apollo skeleton, just follow the same pattern: https://github.com/meteor/meteor/pull/11119

[trusktr]

Wow, yeah, autoTracker really makes the integration magically easy, makes it feel as if Solid came with Meteor (although not as optimized).

^{(On the side that's quite amazing in general actually: it means we can write autoMobX, autoKnockout, etc, for all the dependency-tracking reactivity libs)}