I’m sure you’ve been there at one point. You had a great idea. Something novel. Something new. Yet something impactful. You know it’s a bit ambitious, so you come up with a plan of attack. You vet the idea with a few peers. And then all that is left is to do the work.
At first, things are going well. That is until you realize things are going be a bit more complicated than initially thought. You push through and things are alright, but not really what you expected.
But then it happens. That moment when things align. A breakthrough! Things pick up steam and there is no stopping you as you propel yourself towards the goal. You pull that last all-nighter, tweaking the last little detail. Now all that is left is to push that submit button and wait.
… breath …
And then this happens:
This isn’t a toy demo. This the JS Frameworks Benchmark, arguably the most reputable benchmark for UI Frameworks of this nature. And your Framework’s optimized version is not only faster than VanillaJS, but the standard React-Friendly API version is faster than every other framework out there.
What’s Going On?
The refactor was a large effort since the underlying renderer in Solid (DOM Expressions) is one that I have developed to support any fine-grained reactive library. Overtime things had gotten so restrictive to allow certain performance optimizations it was limiting not only users of Solid but users of MobX and Knockout variants. So I had come up with a plan to lose the least performance. It drastically simplified things, but would require work to be done in 2 passes; once in the reactive system, and once in the DOM reconciler.
It turns out accessing the DOM less even when that access is reserved to safe properties has significant performance improvements. I’d been spinning my wheels trying to come up with the most optimal system but its complexity had stifled its performance.
For those looking for the technical solution, the answer is simple. Sometimes keeping a list of DOM nodes as an array, which has overhead to keep synchronized, is more efficient than linearly walking the DOM. For more information on how Solid works and is so performant, check the links at the bottom of the article.
I created DOM Expressions hoping to enable people to take a common runtime and bring their reactive libraries and opinions to create their perfect UI developer experience. That was a naive dream. Instead of people using my libraries they just grabbed the code wrapping it into their libraries and have started taking things their way. Six months ago I would have never imagined that someone would take my code, in the name of shaving a few kilobytes, create a library that offers only a subset of the same features, and have almost 300 stars on Github. That’s amazing. That’s what open source is about.
Solid owes its pedigree to Surplus which proved JSX was a viable solution for reactive libraries (Sorry Rich Harris, but on this, you are emphatically mistaken). And of course, localvoid(Boris Kaul), who at this point, list reconciliation routine is something that pretty much every top library uses.
Neither would have I guessed that a small community of users would through feature requests, drive a refactor that would take web performance to new heights. That whenever I had a new idea there would be people eager to discuss, or whenever I was feeling exhausted there would be kind words waiting. People are there who take time to edit my articles or correct my naive TypeScript definitions. I owe many people my gratitude, as none of this would be possible without them.
Six months ago I felt that I was mostly alone. Now, this has grown beyond just me.
Join the Revolution
It may have not happened the way I have pictured but we are definitely witnessing a shift. In the chart above 6 implementations are based on significant chunks of my DOM Expressions code. That’s 50% of the top 10 (non-vanilla) implementations. It is a slow go driven by a few individuals and small communities. You won’t find a Facebook, or Google lurking in the background. Resources are limited and we’ve only just scratched the surface of what is possible here. We are constantly pushing the limits of performance and discovering new better ways to declaratively define user interfaces. There are many topics in the coming months:
- Server-Side Rendering
- Improved Suspense (better scheduling/continuations)
- “Real World” demo app
- Official Website
Come by and become part of the future of the web.