Two days ago I stumbled over SolidJS, a UI library for JavaScript.
Solid is a declarative Javascript library for creating user interfaces. It does not use a Virtual DOM. Instead it opts to compile its templates down to real DOM nodes and wrap updates in fine grained reactions. This way when your state updates only the code that depends on it runs.
Solid is a new contender in the saturated space of front-end libraries like React, Vue or Svelte.
The gist is declarative UI (like React) meets compiler-first approach (like Svelte).
The API resembles the React Hooks API:
const [state, setState] = createState({ firstName: 'John', lastName: 'Miller' })
setState({ firstName: 'Johnny', middleName: 'Lee' })
// ({ firstName: 'Johnny', middleName: 'Lee', lastName: 'Miller' })
Solid precompiles the code like Svelte. It seems to be even faster for medium sized apps. Svelte offers 2-way-data-binding while Solid subscribes to idea of one-directional data-flow.
TypeScript support works (Svelte doesn’t support TypeScript yet, they are working on it).
First Impressions
The project is basically a one-man-show. The creator, Ryan Carniato, has worked on the library for several years.
The library is suprisingly feature-full for such a small project.
The documentation is still sparse. This is the biggest hurdle for a beginner JavaScript dev. There are some good examples and demos which will give you a first overview, but you’ll need to be familiar with a different front-end library first.
Some concepts remain unclear (e.g., createResourceState). You’ll have to dig into the source code for those.
TypeScript support works well when bootstrapping via the provided CLI. But as a TypeScript-newbie I don’t know the correct types.
Some TypeScript examples are out-dated, so that’s no help.
Coming from React, the syntax is familiar.
I personally like one-way data-binding and JSX better than Svelte’s templating approach. Surely that’s due to familiarity. Solid delivers on that front.
On Hacker News someone asked for the big picture abstraction differences between React and Solid:
With React your Component re-renders over and over and your Hook dependencies explicitly whitelist change. With Solid your Component is a basic function that executes once closing over state getters with its Hooks, which are the only thing that run over and over as needed when state changes.
The mental models seem to resemble React the most, not so much Svelte.
The basics of Solid are trivial to pick up, but it would be challenging for me to create something that’s more complex than a todo app.
My first impression of Solid is positive, but like many good things it lacks adoption and as such a bigger and mature ecosystem (a catch-22).
It’s still early days for Solid. The library hasn’t even reached its v1.0 release.
I hope that the library will grow, as it looks like it combines the best worlds of React and Selte.