Dev it all

As was previously alluded to with my Svelte post. I’m going to cover SolidJS. I haven’t used this framework anywhere near as much as Svelte and I did plan to have an application up and running first to show some of my use cases and how it differs.

I think I’ll try and get something done in time for the end of SolidHack. I already have a nice idea that may end up including some Three if I can grok how to do what I want to do.

For now, we soldier on!

The comparison with Svelte (and a little Vue & React)

To me, this is kind of like how Vue & React were/are compared.

Both Solid and Svelte have no use for a VDOM. They use direct and precise DOM manipulations to achieve the reactivity we’ve all become used to. They achieve this once built in a slightly different way though.

Svelte applications, once compiled are just plain old JS with no actual Svelte specific runtime. This means the bundle size is massively reduced compared to React or Vue.

Solid on the other hand employs a very similar but slightly different approach. It has a compiler step (this runs and resolves differently to Svelte’s) that still includes a small amount of runtime. Due to this in some smaller applications, Svelte can beat it out in terms of bundle size and vice versa in other cases. Looking at the comparison information on the SolidJS website, they state that the RealWorld app using Solid is around 25% smaller than Svelte’s.

So when it comes to large applications Solid should come out ahead, with less boilerplate per component when built as it keeps some shared knowledge in the runtime.

In reality, finding that cross over point will differ depending on your specific use case.

When talking about syntax and templating. Solid has a very similar approach to React, so if that’s your thing this will all feel right at home. There are some alterations in there that may be startling at first. Such as the idea of creating signals (~hooks) outside of function components while maintaining reactivity.

Svelte has a particular style. In ways, it matches Vue with the SFC ideology. The primary differences are syntactical.

From here, there are a large number of implementation differences. They both achieve a similar result with smaller bundle sizes and faster resulting applications than what you can achieve with Vue and React directly.

For sure, you can make it slow if you try hard enough. Just like how you can make Vue and React much faster if you put proper thought into your build.

Some positives

To list a few:

• React-like syntax
• Fast updates. The idea with the update mechanism on reactive data should cause less re-rendering when used right. React has to refresh components to track hooks, whereas nothing like that is needed here.
• A first-class store implementation
• First-class dependency injection via context
• SSR
• Suspense
• Lots of cool little APIs, for example createReaction, dynamic components or P o r t a l s

Further to all this, the documentation is outstanding. I prefer the layout to Svelte’s, even with the API documentation being similar. The guides, resources and tutorials are all grand. I appreciate the colour scheme too!

Community

Solid has been around for a while. It hasn’t been around anywhere near as long as React though.

So, the ecosystem is still much smaller. You can’t use React compatible components, plugins and libraries as they just won’t work. There is no plan for a compatibility layer at this time either.

With that being said, there are already hosts of packages out there for some pretty big libraries and services that you can integrate. This shows that the current web community is enjoying Solid and wants to push it forward.

The Resources page I mentioned earlier has links to all these different packages and libraries. Along with articles, videos and podcasts on the framework.

Some of the ones I’m planning to use for this upcoming SolidHack project are:

• Firebase
• Motion.One

It’s so cool to already have an integration for something like Firebase. It’s got Auth, Realtime DB and Firestore signals already. Sweeeeeet.

The conclusion

I’ve tried out Svelte and I enjoyed it. It was fresh and it felt great.

Solid will feel the same when I start digging in I’m sure. The even greater thing though, I can start saying to people considering React as their framework of choice for a new project, “Why not give Solid a shot?“.

It’s got a lot of what you already need, without even needing to pull in more from npm to handle state management or global stores or whatever else.

Yeah, I like it.

When and if I get this project done for SolidHack I’ll sort out a new post and give a bit more of an update on how I feel about it and all the other bits.

For you though. Give it a go. Maybe get involved with the hackathon too. There are already testing libraries for it, so no skimping there either!