Trying out Solid.js 🍰

Intro

I've been interested in Solid ever since I saw it rising on the StackOverflow developer survey (the third-most admired framework), and even more so since watching Fireship's Solid in 100 Seconds video.

What's Solid?

In short, Solid is declarative JavaScript framework for building extremely performant UIs, thanks to it's maximum control over reactivity.

At first glance, it looks kinda similar to React. It uses JSX, with a component-based architecture. There's hook-type syntax (called composables) for hooking into state and lifecycle features. And it takes a very declarative approach to defining what the UI should look like based on state.

But that's about where the similarities end. In Solid, there's no virtual DOM, it compiles down into well optimized vanilla JavaScript. And it is properly reactive, with functional components only called once, with state managed by Signals, instead of re-rendering the entire component whenever a prop somewhere changes.

It was created by the very talented Ryan Carniato

What I built

I learn best by doing, so after a quick skim read of the Solid docs I decided to dive straight in.

What was I going to build? Well one of the things I do at work is order in the office snacks. I like to know what kind of stuff people like, but sending out surveys is really boring.

In order to cover off the basics of Solid, while also producing a (somewhat) useful app, it would need to do several things:

• Let users login via their SSO provider
• Enable users to request, upvote and downvote snacks
• View results, with real-time updates
• I'd also like it to be translatable, themable, responsive, accessible, tested, observable and overall easy enough to maintain (so basically just all the best practice buzz words)

I gave myself one weekend to get this done, and though I got the MVP done in that time, I ended up spending 2 weekends getting it feature-complete.

The source code is on GitHub, at github.com/Lissy93/cso

Here's a quick demo:

(yes, it has AI - because it's 2023 and even your toaster has AI!)

My Thoughts on Solid

Overall, Solid was easy enough to get started with. I liked that it seemed more vanilla and closer to the DOM than other frameworks, and that you can be really deliberate with what you do and don't want to be reactive. If performance is an important factor in your app, then Solid could be an awesome choice.

I didn't so much love the developer experience. My dev env was slow, errors were vague, I missed some the nice built-in features of larger frameworks, and the ecosystem was tiny compared to more established alternatives. Given the inherent messiness of JSX and without such a rigid or opinionated structure, my project didn't take long to descend into a a big pile of spaghetti code.

...

Learning Curve.
The time took to learn the (very very) basics of solid was pretty quick. The docs are very clear and thorough. It took about 10 minutes to skim read the spec, and there's also plenty of guides, tutorials, examples and playgrounds on solidjs.com.

Features.
I really missed those quality of life / nice to have features that are directly built into larger frameworks. Little things, like Svelte's built-in animations, Vue's built-in form handling (v-model), React's global state management (context API), etc. Of course, that's to be expected when you're choosing a framework know for performance.

Developing.
Again, this may have been due to some misconfiguration on my part, but out-of-the-box, I found the full page reloads on the development server to be notably slower than what I was used to. Sure live-reload was speedy enough, but I had to force kill and restart the dev server every 20 minutes or so

Tooling.
Several times I made stupid mistakes, like messed up an export or made a typo in a tag. In React, or any other framework, you'd usually get a somewhere meaningful error message. But in Solid I just got a blank white screen of death, and a cryptic message in the console, usually something just like Uncaught, with no other details.

Ecosystem.
With many other frameworks, there's tons of ready-made components, libraries and add-ons that you can just npm insstall to get your prototype up and running quickly. Not so much in Solid, as it's newer and so has a smaller community.

Syntax.
This is very much a personal preference. But although I'm familiar with React, I do not like it at all, because of it's use of JSX. There's just something about mixing logic in with your UI, which seems wrong to me. And Solid, of course uses JSX. I also found that I needed to write a fair bit of boilerplate when it came to components with more complex state management or side effects, which further complicated my JSX components.

Side note: Supabase

For the backend, I was looking for something quick and easy. I'd played around with a local Supabase back when it was in Alpha, and it seemed cool enough. But bloody hell is Supabase awesome now!

In my app, Supabase handling everything from data storage (insertions, updates, deletions), user management (with 3rd party auth providers), real-time, and really decent RLS policies (so rows that were not created by a given user cannot be either read, modified or deleted).

Supabase's client packages make integrating with it so so easy - it literally took under 5 minutes to get the database up and running.

Since it's a small enough project, I decided to just go with the hosted instance, as it's well within the free plan, and the frontends just Netlify anyway. So no complicated infrastructure to setup or manage!