Dipping my toe into Solid.js

The hottest “new kid on the block” de jour in the developer community is, undoubtedly, GitHub Copilot, an AI-powered code generating tool by GitHub and OpenAI—or, Microsoft.¹ It’s a facinating subject matter that has already generated a lot of (often heated) discussions, but I’m not here to talk about it. Instead, I want to discuss Solid, which is yet another JavaScript framework😉 for building UI that recently celebrated its 1.0 release.

I have been following the project as well as its creator, Ryan Carniato, for over a year as of this writing.² I believe I found the project through one of Ryan’s countless articles³ on reactivity and JavaScript libraries/frameworks to building UI, all of which I’d strongly recommend to anyone who’s interested in these topics. Nonetheless, I never really gave Solid a try. So over the last weekend, to finallly right this wrong, I went through the official tutorial. And I’d like to jot down some thoughts I had from doing so, hopefully without repeating too much what’s generally available.

In 2021, building UI is only the bare minimum

On the most general level, what stood out the most to me about the 1.0 release of Solid is the how high the bar is set for a new JavaScript UI framework to enter the competition. It’s simply insufficient for a new framework to excel at the core task of building UI, and offering great performance and small size barely scratches the surface. Framework users in 2021 have high expectations and ask for built-in or off-the-shelf solutions for state management, routing, asynchronous rendering, server-side rendering, prerendering (i.e. static site generation), styling, linting, TypeScript integration, integration with other popular tools, DevTools for debugging, starter project, and so on.

If I remember correctly, even Svelte 3 in 2019 fell short of meeting today’s high standards while achieving its successful breakthrough. On one hand, the changed situation serves as clear evidence for how much the field has matured and progressed. On the other hand, it shows how insanely difficult it has become for a new UI frameowrk to launch successfully.⁴

It is in this context that I’m excited to see Solid finally reaching 1.0. Solid does not have solutions for everything yet, but it offers enough to insert itself into the UI framework space as a serious contender: top-level performance, a rich feature set, familiar looking API, integration with modern tools, and more.

My favorites bits of Solid

Resources API

The fact that Solid offers built-in primitives for asynchronously fetched data is simply mind-blowing. Solid’s resources API is by no means a drop-in replacement for more robust solutions for managing server state⁵ as it does not handle caching, automatic refetching, etc. But the API offers solid building blocks for building a robust solution. And for simpler use cases, the API removes boilerplate code often found in other frameworks to handle data fetching status.

Stores API

While Solid’s resources API may feel a bit, well, primitive, its stores API actually looks powerful enough to serve as the solution for managing local/client state⁵ in any Solid app. It took me some time to understand its sophisticated “path syntax” for updating nested stores, but now that I got the hang of it, I can appreciate how powerful it can be.

In fact, the incredible expressiveness of this API can be too powerful if used carelessly, as it goes directly against the popular Pythonic sentiment of “There should be one— and preferably only one —obvious way to do it.” For instance, the following three lines of setter calls would result in the same outcome:

import { createStore } from "solid-js/store"

const [state, setState] = createStore({
  todos: [
    { task: 'Finish work', completed: false }
    { task: 'Go grocery shopping', completed: false }
    { task: 'Make dinner', completed: false }
  ]
})

// option 1
setState('todos', [0, 1, 2], 'completed', true)

// option 2
setState('todos', { from: 0, to: 2 }, 'completed', (c) => !c)

// option 3
import { produce } from 'solid-js/store'
setState(produce((s) => s.todos.forEach((todo) => (todo.completed = true))))

// output
// {
//   todos: [
//     { task: 'Finish work', completed: true }
//     { task: 'Go grocery shopping', completed: true }
//     { task: 'Make dinner', completed: true }
//   ]
// }

Such expressiveness can cut both ways. For me, I appreciate how Solid puts trust in its users and empowers them to pick what’s right for the job.

A little bit of hype can go a long way

Hype is a double-edged sword, and failing to deliver can be fatal to a new project. Successful marketing also requires a different set of skills—and even a different type of personality. It’s one of the most tricky aspects of doing open source software, and the creator of Solid clearly knows that. That said, as long as a project can deliver on its promises, a health dose of hype can provide it with a fighting chance in the currently overcrowded JavaScript UI framework space. And I don’t think there has been enough hype built around Solid’s 1.0 release.

Fortunately, even without much explicit marketing efforts, Solid seems to be successfully attracting people’s interest as indicated by almost 3K more stars to the main GitHub repo over the last two weeks. My hope is that this will lead to greater exposure that helps the project to gain a critical mass of users and reach long-term sustainability.

Will I choose it over React?

Probably not, that is, not yet. While I sincerely hope for the success of Solid, I am not actively experimenting with new UI frameworks at the moment. And at work, Svelte is probably the farthest I would reach for any new project based on the framework’s adoption. Even then, I would have to be pushed quite hard since I generally prefer React’s API, DX, and ecosystem to Svelte’s.

That said, I look forward to the day when I can finally pick up Solid without any reservation. And given how solid the project seems, I really think that Solid is poised to be the next breakout star in the JavaScript UI framework scene. Well, at least here I am doing my part spreading the word. 📢

I only recently learned that OpenAI and Microsoft have been in some form of exclusive partnership since 2019 thanks to the buzz around GitHub Copilot. ↩
While I don’t use Twitter myself, I have bookmarked his Twitter page. I find the discussions he initiates/engages in on Twitter to be highly informative and focused on topics I’m interested in. ↩
Possibly this or this. ↩
The story may be a bit different for new metaframeworks, such as Remix, Astro, etc. since they can leverage the success of the existing frameworks they build on top of. Of course, it is still a herculean task to create modern metaframeworks. ↩
As in client state vs server state, the conceptual distinction elaborated and popularized by React Query. ↩ ↩²