RealWorld Demo

The RealWorld Demo is a large community-backed open source project that showcases all web frameworks client or server-side through a building an example app that is much more substantial than the typical TodoMVC toy demos or the stripped out scenarios you find in benchmarks. As Conduit, a Medium clone of sorts, your application has to handle real issues like authentication, routing, and async data loading. It has a standardized specification making it an even better place to shop for your next library or framework.

Of course, that doesn’t keep us performance junkies out. Instead of it being about rendering 10000 spinning cubes or rows in a table, we get to look at loading optimizations, code size, and user and developer experience. So being ambitious the task seemed simple enough. Make the smallest and fastest implementation that everyone would see and want to use in their projects. For Solid, this meant highlighting its strengths, and in so testing the limits of what can be done with a purely client rendered single-page app. In the course of this process Solid would have to go up against other libraries including Svelte, the reigning king of this demo, using SSR. So I wanted to test a hypothesis.

I’ve witnessed on lower-powered devices especially the gap in render performance gets wider between higher and lower performing libraries. If a library like Solid is already a few hundred milliseconds faster to render a large number of nodes at what points do earlier first meaningful content times that come from using SSR not have a meaningful impact?

The Test

So right off I’m going to say the testing method here is hardly conclusive. I simply ran every implementation 10 times and averaged the top 3 results. I based this comparison on the one they do yearly. For the 2019 edition see:

This comparison tests on 3 metrics Performance, Size, and LOC. I’ve gathered a few other metrics from my runs to give greater insight but it’s essentially the same test. Performance is run through Chrome Inspectors Lighthouse Audits. Size is the total size in kb of JavaScript sent to render the initial landing page. Finally, LOCs are measured using cloc to add up total lines of JS, CSS, and HTML found in the src folder (ie. not including library code).

This is in no way an official comparison. Solid is currently waiting to be merged so I wanted to take this opportunity to see how it fared. I picked the best performers from the 2019 comparison + popular libraries React, Angular, and Vue and gave it a run. You can try Solid’s App here: