Designing SolidJS: Components
SolidJS is a high-performance JavaScript UI Library. This article series goes deep into the technology and decisions that went into designing the library. You do not need to understand this content to use Solid. Today’s article focuses on Solid’s Component System.
Cost of Components
Sometimes I feel like I spend so much time in benchmarks and micro-optimizations that I might be losing touch on the actual development experience. I mean when was the last time you saw a benchmark break up the solution into Components when it wasn’t a Virtual DOM library like React? Different libraries carry different costs when approaching how to modularizing code. Yet modularization is an undeniable truth when trying to scale out any sort of solution that is more involved than a simple benchmark. Yet we rarely look at the cost there.
The truth is the cost of Components isn’t black and white. Virtual DOM libraries like React require Components to handle efficient change management and in so are built in a way that breaking code into Components has a minimal cost. In fact, doing so often improves performance. The initial rendering is already a bunch of document.createElements due to the separate HyperScript calls. And more Components just allow finer-grained memoization.
