How I wrote the Fastest JavaScript UI Framework

Bold claim, I know. And tomorrow it might not even be true. But right now with the release Chrome 72, Solid has taken the coveted top spot in the JS Frameworks Benchmark. (Technically #5, but the top 4 implementations are handwritten “vanilla” reference implementations that has the implementor directly managing DOM API mutations.)

A lot more goes into writing a JS UI library than chasing benchmarks. I have the distinct advantage of a substantially smaller user base than most competitors. But I woke up this morning, on my Birthday no less, to see that while I’ve been spending my recent time improving compatibility and adding features, Solid silently crept up thanks to the latest Chrome. It was the realization that as browsers get more optimized the approach taken here will only get better that has prompted me to write this article. I didn’t really invent anything new but it’s the way Solid puts it together that makes the difference.

1. Pre-Compile your Views

This is a big one. While not necessarily producing the least overall code to transfer over the wire the work you do ahead of time pays dividends later. This compilation doesn’t need to happen during the build step and can happen in the client as long as you aren’t taking the cost on each update. The performance hit especially for smaller apps of doing this on the client can be minimal. For Solid I compile with Babel ahead of time but the important part is to do so.

JSX is a blessing for pre-compilation; clear unambiguous syntax trees. Not to say you couldn’t use other methods like HTML string parsing, but with JSX the intent is always clear even when mixed with JavaScript. You don’t need to invent your own convention to indicate what should and should not be parsed. That isn’t to say this isn’t achievable other ways with specialized template files and loaders. You just get so much for free with JSX.

Now one can note that using JSX and pre-compilation is fairly common in modern frontend, but it’s the combination with the other techniques where it shines.

2. Use Optimized DOM APIs

Most libraries use the most optimal methods to apply changes to DOM nodes — the quickest way to render text, set attributes…