A few reasons why I love Solid.js

Solid is such an amazing reactive declarative tool for composing and manipulating DOM with simple reactive declarative templates! By far the best component system that currently exists for web. The Solid dev experience is really good, and Ryan is so meticulous with performance: you'll be on the shoulder of a giant that can go anywhere.

Here are some reasons why.

The Solid playground sets a new high bar for all other frameworks by not only making it very easy to share snippets of how to do things with Solid, but by explaining (via it's compile output) why and how Solid is super fast at reactive templating despite the clean and simple declarative API.

Solid's magic is right here in plain sight, in the visible compile output of any playground example:

This sort of openness is the type of thing that can change a technology segment for the better.

Not only is what you see in the playground open, but Solid openly invites reactive library developers to challenge boundaries: Solid's JSX compiler allows reactive authors to power JSX templates with their own reactive primitives. This invites any author to challenge Solid at its own speed, and sets up a foundation for open innovation. See that here:

Solid effectively changes the component world because it is so open, that other frameworks will have no choice but to adapt or else fall behind in the dust of innovation. Just like React was impactful in it's debut, Solid is the next big move in how reactive declarative UI trees can be manipulated with raw speed while not sacrificing dev experience.

As an example of no sacrifice of dev experience, in Solid we can animate anything declaratively by passing animated values directly into templates and modifying any state as we wish, even in rapid animation loops (like loops found in games and other rich experiences).

In contrast, animating state or props in an animation loop in a React component is considered a bad practice and can easily lead to performance issues. For example, react-three-fiber (React components that render with Three.js for 3D experiences such as games) mentions specifically not to do this in it's Performance Pitfalls guide:

Never, ever, setState animations!
Avoid forcing a full component (+ its children) through React and its diffing mechanism 60 times per second.

Solid makes declarative templating a first class citizen without the performance caveats. Write everything declaratively and rest assured it'll be compiled to an essentially-vanilla fast equivalent. Animate props at 60fps as much as you want in Solid!

All parts of Solid are independently reusable, which makes it possible to build a variety of different types of projects with it, and due to the simplicity of Solid's reactive system it is very easy to hook any other state system into Solid components. For example see how simple Storeon's Solid bindings are:

In contrast, one can not independently import React's state system and use it standalone, and one often has a difficult time integrating external state systems into React components (just ask the Mobx team what sorts of problems they faced with double rendering, for example).

On top of things being more difficult in React, they are simply more verbose and difficult to understand with the strange Hooks rules that often trip up newcomers in a way that is much less than desirable. You'll write more in React, and you'll have less-understandable code.

Solid is very modular: one can use its reactive primitives while skipping out on declarative templating (for example) to create a reactive state machine, or to create a reactive backend server, both of which could have nothing to do with making UIs. Such projects only need to import APIs like createSignal, createStore, or createMutable and leave everything else behind.

In Solid, DOM is a first-class citizen: the DOM is not hidden behind an abstract virtual dom and therefore is fully accessible. It's just DOM! JSX expressions give you elements exactly as you would intuitively expect, which means it is very easy to interop with any DOM library you can think of. In the following example we simply pass a div created from a JSX expression to jQuery, while the content of the div's template is reactive:

// Make a reactive variable (signal):
const [count, setCount] = createSignal(0)

// Increment the count value every second:
setInterval(() => setCount(count() + 1), 1000)

// Use count in a template:
const div = <div>The count is: {count()}</div>

// The JSX expression gave us back the *real* div element,
// now we can pass it to jQuery or any other DOM API:
jQuery(div).whatever()

console.log(div instanceof HTMLDivElement) // true!

// Even compose the DOM:
const info = <section>Info: {div}</section>

console.log(info instanceof HTMLElement) // true!

You see! The div is... an actual div! It's just DOM! This makes things easy! We have two benefits here:

We simply got a div and can do any regular DOM thing we want with it.

The div's content is updated automatically any time the value of count changes.

We get the best of both worlds: DOM and reactive declarative templating, all in one!

Because of Solid's simple reactive and fast templating, plus the fact that it's just DOM!, Solid is the perfect fit for use with custom elements or any other DOM-based project.

To contrast, LitElement's lit-html template expressions don't return DOM back to you. Lit is a DOM library that gets in the way more than it should. For example:

import {html} from 'lit-html';

const div = html`<div>Hello World</div>`;

console.log(div instanceof HTMLDivElement) // false!

jQuery(div).foo() // ERROR

As an example of how Solid fits well with DOM projects, LUME Element, a system for making custom elements in a simple and concise way with reactive templating, uses Solid at its core:

This results in being able to make custom elements with the speed of vanilla JS, without sacrificing experience, without the more difficult-to-maintain imperative code that would otherwise be required with initial plain vanilla JS.

LUME's 3D Webgl-powered HTML elements are simple, reactive, and fast (despite being written declaratively, because declarative templating should not ever be a performance issue!) thanks to Solid underneath.

Here's a 3D WebGL scene written in HTML:

(LUME is still alpha, please complain about everything. :)

TLDR: Solid is the currently the best way to make composable UI components without sacrifice of dev experience (without limitations on when to use declarative templating, without complicated function scope rules, without unneeded verbosity). The API will be very easy to work with for anyone who knows DOM and would like to integrate with existing applications (f.e. legacy jQuery applications).

All this with the most speed as a bonus!

Knowing Ryan, he will keep Solid at the bleeding edge of performance and ability.

Like SSR for SEO and fast loading? Solid's has you covered.

Like TypeScript? Solid has you covered.

Like to write plain HTML with no build system? Solid has you covered! You can use the html template tag instead of JSX. Here's an example on CodePen:

import html from 'solid-js/html'
import {createSignal} from 'solid-js'

const name = createSignal('Amadar')

// It's just DOM!
const div = html`<div>Hello name is ${name}</div>`

// ... change name later ...

jQuery(div).foo() // It works!

// Even compose the DOM:
const card = html`<section>Profile: ${div}</section>`

console.log(card instanceof HTMLElement) // true!