Introducing Solid.js vs. React.js
Today I would like to talk about a UI library for creating web applications called Solid.js. It's a library I've been using on and off for about a year, maybe more.
And although the space of UI libraries is pretty crowded with, you know, React.js, Vue.js, Angular, and a bunch of more, Solid.js brings a lot of interesting features to the table. And one video is not enough to talk about it all.
So in this video, I would like to focus on comparing and contrasting Solid.js specifically with React.js, and I will discuss three things which make Solid.js better than React.js. And we will finish off by creating a simple application in Solid using Snowpack.
Advantage 1: A Compiler, Not a Runtime
So the first thing you notice when you start reading the docs of Solid.js is that it's very similar to React.js. The syntax is very similar. It supports JSX. It doesn't feel like something that much different than React.js, and I think it's a good thing on the surface. It's similar, but underneath it's quite different.
So the first thing that's different is that it compiles your application ahead of time, which means that you get this very optimized code in your bundle. As you know, for React.js to run a React.js application, you need to provide users with the React.js runtime. So users must, you know, fetch this runtime and then this runtime is used to run your application on the client side.
And with Solid.js, it's quite different because you don't need to provide this engine. When you are building your application, you are just converting it to a plain JavaScript, and this compiled version is what you are providing to the end user. So as a result, the payload your application that's being sent over the wire is much smaller because you don't need this engine.
The other thing is that Solid.js is extremely fast. So the creator started from scratch and was trying to imagine how to create the best library, the most efficient library. And there is a lot of things that come into play, and we can discuss it in other videos.
So there is this website called JavaScript Framework benchmarks. And here we can see that we have a lot of frameworks. They are being compared with, you know, handwritten JavaScript, which is the fastest possible. Solid.js is almost on par with the plain JavaScript.
And then if we scroll, we see that there is not a lot of known names, like popular names. And then somewhere in the middle we will stumble on Svelte, which is considered a fast library. And then if we continue, we will see others like Vue. And finally, at some point we will reach React. So it's quite remarkable that a library that, you know, looks like React.js is as fast as plain JavaScript.
Advantage 3: Rich Features & Future-Proof Design
And the last feature I'd like to discuss is that because it's provided as a compiler, so it's quite similar to Svelte in that sense, it doesn't compromise on features. So out of the box, it provides the same set of features as React.js. So we have the Context API, you have the Suspense, server-side rendering, and much more.
And because it's compiled, this set of features can be even bigger because once you are building your application, only what you are needing is being included. So it makes it much more future proof in that sense. So I think Solid.js could be the future because it's very easy to migrate from React.js as the syntax is quite similar, almost identical. And then it has those features: being extremely fast, creating extremely small bundles, and the fact that it's compiled and not executed via a runtime that is provided to your client.
Avoiding React's Quirks and Hook Rules
React.js has some quirks. So for example, you have those rules for hooks, that you have to put them in certain places in a certain order. You have this problem with stale closures when creating applications in React.js. Like non-trivial applications in React.js, you have to remember about all those things. And non-trivial applications tend to make those problems even bigger and and more difficult to work with. And in Solid.js, you don't have that.
There is a lot to talk about Solid.js. There is a bunch of other interesting features here, but let me finish by showing you a short demo of creating a Solid.js app using Snowpack. And we will create a very simple counter so you will see that it's almost identical to React.js and at the same time it has those nice features. So let's see how it can be done.
Demo: Setting Up a Solid.js Project with Snowpack
Okay, so I will be using Snowpack, the faster frontend build tool. As you know, Cratis, my own little framework uses that as well for the frontend part. And there is already a template for Solid, so it combines Solid, Snowpack, and Tailwind CSS. So we will just use that. So I'll copy that.
And so let me paste that. And because I'm using pnpm, I will just add the p at the beginning. And let's call this, let's say, I don't know, solid-demo. Okay. So if we go to solid-demo, if we install the dependencies and then we run, I believe it's start... no, it's dev. And then we open, we have a counter out of the box. So let's see how it's built. So I'll just remove the content; I would like we build it together step by step.
And the first thing we will do, so if you go to play.tailwindcss.com, this is like a default, you have this editor you can play with Tailwind. We will just use that because it's nicely centered. And so let's copy that. So we will return. And let's remove this. So the first thing you will notice is that we don't really need to convert class to className as we have to do with React.js. And now we can run it. If we refresh, we have something similar. There are a few things that need to be configured via plugins, so we won't be doing that. I will just quickly, you know, adapt it.
Demo: Building the UI with Tailwind CSS
Uh, yeah, so it has the colors of Solid.js, let's say. And then this part over here we don't need, so I will remove that, and that as well.
Yeah, and now let's create the buttons. So I already have this styling. It's just a button with, you know, padding, some border, some colors. And let's use blue. So this will be increment. Let's maybe do something like that. I'll make it bigger. So we have increment and let's make another one, decrement, like that, with some margin. Um, yeah, maybe let's put it side by side so it's nicer. So we have those two buttons. And let's maybe add some counter over here.
I'll remove that. Let's do text... yeah, something like that. For the logo, the template I think provides something. If we go to public/icons, so we have solid logos. So if we just write icons/icon-..., let's take the biggest one, png. Yeah, we should have this. We can make it bigger. So now we have the basic structure, like the visual structure. Nothing happens here.
Demo: Managing State with createState
So first thing we need is that we need state. So as with... as in React.js, we have something like hooks. And we can either use signals or state. So signal is like a primitive value. So if we say createSignal, we can for example have a number. And then I can... let's start with 101. I can display that and it's there. But we can also have a state as an object, and let's use that instead, because I want to show you some interesting things.
So we will have count inside with the value of, let's start with 101. And then we have to reference that. And here we have to, of course, use createState instead of createSignal. And now let's create our functions to increment and decrement. So first will be increment. This will be a function that uses setState. But in Solid.js, we can provide a place in our object. It's usually called... in functional programming this is known as cursor. So the path, you know, in a tree to this place. So in our case, we have just one, which is count, but if we have more, we could go deep inside a specific field. And then as a second value, we can provide, as a second argument, we can provide a function which will take the current state, and then we can do something with this. So we can increment it by one. As you can see, there is a type inference here. And the same way we can do decrement, but instead we will decrement, let's say, we'll decrement by two and increment by three, and just for fun.
Demo: Implementing Event Handlers
And now we have to connect it with our buttons, and we will use the onClick. And what's nice about Solid is that we could provide it as a function. So as with... let's start with that, as with React.js. So we increment. And then if I refresh... it works. So I inversed, I should have... do this, yeah. So it's decrementing, incrementing is not connected. But we can also provide it as an array like that. And then we have to provide a parameter which will be passed to the decrement.
So then without parameter, it still works, but we could, for example, say by... by how much we want to decrement. And let's say by default it's one, and we will use it here. So now if I pass 0, this will be passed as a first argument to this function. If I refresh, nothing changes, but if I change it to 10, as you can see, I can now control that. So it's an interesting syntax, just an array where we provide the function that changes the state and its parameters, if there are some. And let's connect the increment. So here we could just use a regular function as with React.
Final Thoughts and Recap
And it works. We're incrementing by three as specified here. So there you have it, a very short introduction to Solid.js. It looks identical to React.js for me, at least. It has some nice features, like minor things, for example, you don't have to type className, you can just type class. So if you're copying from something like Tailwind, you don't have to change that in your JSX code.
And then you have those state functions that are built-in and somehow similar to how Redux is used in React.js. And finally, this code is being compiled to plain JavaScript, so that if you're providing your application, you're only providing your app without the engine. There is no Solid.js engine. So it works similar to Svelte.js.
If you'd like to know more, let me know. We can do something more advanced. This is just to let you know that this exists and is extremely interesting. Thanks for watching and see you in the next one.
