It’s not often you come across a programmer who used to be a touring musician – but Ryan has experience both slinging code with SolidJS as well as some sweet tunes with his band Mr. Solid (both named after a tasty Canadian treat).
What is SolidJS and what is it used for?
Boiled down to it’s essence, Ryan calls Solid a “state library” that has slightly different primitives than React. Ryan built Solid to have “blazing-fast performance, declarative nature, feature set, and [a] small bundle size,” all while supporting most major features in React.
Solid is heavily influenced by Knockout.js, which came out around 2010 and was made for creating declarative UIs; it has often been compared to React Components. Both React and Knockout have been strong inspirations for SolidJS – down to Knockout’s tutorials that let you run the code in the browser.
> Interested in learning more about the history of front end web components? Check out our blog post on Web Components 101: History
The signals are associated with a set of subscribed listeners; when the tracked value changes the signal notifies the listeners and they carry out their respective processing actions. This is a lightweight way to improve reactivity and performance in Solid.
Here’s an example of a “Hello World” in SolidJS:
Front end frameworks may be a dime-a-dozen, but Solid lives up to it’s jet-speed reputation:
SolidJS is also smaller than a lot of its competition. In an implementation of the RealWorld Demo SolidJS was able to bundle to just 11.1kb – about 8% the size of the same implementation using Angular.
According to Ryan, it’s also fully featured and “supports most React features like Fragments, Portals, Context, Suspense, Error Boundaries, Lazy Components, Async and Concurrent Rendering, Implicit Event Delegation, SSR and Hydration(although there is no Next.js equivalent yet). It supports a few things not yet in React like Suspense for Async Data Loading, and Streaming SSR with Suspense.”
Differences between SolidJS and React
SolidJS can be thought of as a faster and lighter-weight version of React. They both are declarative and support JSX, but Solid cuts out a lot of overhead processes that allow it to render much faster than React.
Bye Bye Virtual DOM
You read that right – instead of updating a virtual DOM like React, SolidJS updates the DOM itself. Ryan designed this to increase the speed of rendering as there is now less overhead pushing changes from the virtual DOM to the real DOM.
You can find more on how Solid does this and more differences between SolidJS and React here.
Web Components Not Included
While Solid is a great fit to integrate into web components, it actually does not use web components “under-the-hood” to generate component instances. Ryan’s reasoning is that while there are certainly uses for web components, they come with performance trade-offs. He found that for Solid he wanted the lightest possible abstraction for a component, which is simply a function that runs once.
If you’re interested in learning more about the pros and cons of different web component frameworks, check out this article from CoderPad Developer Advocate Corbin Crutchley here.
More Differences With React
Because of Solid’s ability to utilize functions as the reactivity system, you don’t need to rely on dependency arrays like you do with React’s hooks. That means stale closures are dramatically reduced in the Solid ecosystem.
For example, our HelloWorld might look like this before being transformed with Solid’s JSX transform:
And after the transform, looks like this:
Want to earn some cash and learn more about Solid? They’re hosting a Solid-based hackathon where winners can end up with a few thousand dollars in their pockets to help improve the SolidJS ecosystem. Anybody of any skill level can enter and you don’t have to give up your weekend to participate – entries aren’t due until April 7th.
To find out more about the hackathon, check out the info page here.
Ryan has a very unique and substantial development background which is why it’s no surprise that Solid definitely hits its mark in being an extremely fast and lightweight frontend library. If you’re interested in watching the whole discussion between Ryan and Corbin you can find it on the CoderPad Twitch channel here.