What is Solid.js?
Hey there gang and welcome to your very first solid.js tutorial.
Okay then, so first up let's talk about what Solid JS is. And the simple answer to that is that it's a front-end JavaScript framework for creating fast, interactive, data-driven, and reactive websites like a blog or a portfolio site or whatever else it might be. And it's getting a lot of popularity within the dev community over the last year or so because it's really fast, it's fun, and it's intuitive to use.
Now, if you're familiar with other front-end frameworks like React, Vue.js, Angular, or Svelte, then you might be thinking, what is the point in me learning yet another framework to do exactly the same thing? And likewise, if you've not got any experience at all with a front-end framework, you might be thinking, well, why would I learn solid.js instead of learning something with a big ecosystem and a bigger community and support around it like React? So I'm going to attempt to answer both of those questions in this video.
Target Audience & Intro to Solid.js vs. React
And just before I do that, I am trying to aim this series towards two kinds of people: either people completely new to front-end frameworks or people who are coming from another framework like React. So I will be making comparisons with those other frameworks along the way.
So then, first of all, what makes solid.js different from React? And this question and answer is geared towards people coming from React. So if you have no experience with React or other frameworks, don't worry if this doesn't make sense yet.
So the way that React works under the hood is by using something called the virtual DOM. And it uses the virtual DOM to keep track of changes that need to be made in the real DOM in the browser. So React makes a virtual DOM for the application when it first renders, and then every time we need to make a state change in a component, React will rerun that entire component and all of its nested components to recreate an updated virtual DOM. And then by comparing the new virtual DOM with the old virtual DOM, it can see which real DOM nodes in the browser it then needs to update. And it does that. And this process of comparing vdom versions is called diffing.
So the byproduct of this approach is that every single time there's a state change in a component, React reruns that entire component tree to make the updated virtual DOM, even if that state change only affects one tiny, tiny part of it in one place. And when state changes happen frequently, it means we're constantly running and re-rendering component functions, which isn't really optimal. And it can sometimes lead to unexpected behavior as well if you're not well versed in the underlying mechanism of how all of this process works.
Now in contrast to that, solid.js doesn't use a virtual DOM and our component functions are only ever ran once to compile our JSX templates and insert them into the DOM, as well as set up any reactivity for future state changes. And then solid.js just gets rid of the functions completely. It doesn't need to rerun them whenever any component state changes or events occur. And instead, it essentially memorizes any locations in the DOM that it might need to update in the future when any component state changes so that it can surgically update those places when that happens. And it does this using its own reactive system. And the benefit of this approach is that we don't need to keep running component functions over and over, which in turn leads to a better performance. So that would be one of the main reasons you might want to learn it.
And on top of that, making Solid applications actually feels very similar to making React applications in the way that we make components that return a JSX template, attach event listeners, use props, etc. So if you already know React, learning Solid will be really, really easy. And I think that you'll love it. So it's not really like having to learn a completely new framework from scratch.
Why Beginners Should Consider Solid.js
And that actually brings me to the second question. If you're new to front-end frameworks completely, why learn Solid instead of React, which has a bigger ecosystem around it? Well, ultimately, that's a choice that you need to make, and it depends on a lot of different things. And to be honest, you could learn either. I'm not going to say one is better than the other. But what I will say is that if you were to learn Solid first, then by the time that you're comfortable with it, you'll find that learning React is going to be really, really easy as well. Because again, like I just said, the developer experience in both React and Solid is pretty similar. And I think that we're going to find this more and more with any new frameworks that come out in the future.
I feel like all new JavaScript frameworks are now trying to provide a more unified developer experience, whether someone uses Solid or Qwik or whatever other framework is on the horizon. Because so many developers are used to making applications with React, and they generally like making them that way. So it seems like new frameworks are trying to coalesce around making the coding experience quite similar to React in terms of component functions that return a JSX template, using props, and attaching event listeners, all that kind of stuff. But it's the underlying mechanisms and how the frameworks work under the hood that seem to be changing and evolving more over time. And that's how I kind of see Solid, because on the surface, well yeah, it is quite similar to how we make React applications in the way we create components and build up a component tree to make an application. But under the hood, it works in a completely different way that's more performant. And in some places, it just feels more intuitive as well.
Course Project & Topics Overview
So my friends, in this series, we're going to be building something like this using Solid JS. So it's a simple storefront application. And you can see we've got a lot of products right here. I can view those products. I can add them to the cart. Let's add something else as well, like this thing right here. In fact, we'll add that twice. And then if we go to the cart, we can see how many items are in the cart, by the way, up there. If we click on this, we can see all the items and then the total as well. And where we have duplicates, we see times two right here. So this is what we're going to be building throughout this series.
And to do this, we're going to be learning Solid from the ground up. We're going to be learning things like signals, how to use the Solid router. We're also going to look at Solid context as well.
Prerequisites & Course Resources
Now to follow along with the series, you will need node.js installed on your computer. So if you've not already got it installed, head to nodejs.org and download one of these versions, then install it. I am also assuming you have at least a basic understanding of JavaScript, because we will be writing quite a lot of JavaScript in this course. It's a JavaScript front-end framework after all.
Now, I've also created course files for every single lesson in this series. They're all up on this repo, Solid JS tutorial. So this link is going to be down below the video. And I've created code for each lesson. So if you want to see the code for a specific lesson, for example lesson 9, then click on the lesson 9 branch, and then you can see all of the different files and code down here. You can also download a zip folder of lesson 9 or whatever lesson you choose by going to the code button and then downloading a zip right here.
Conclusion & Net Ninja Pro Offer
So there we go, my friends. That's your introduction to solid.js. In the next lesson, we're going to go ahead and create a brand new Solid application.
By the way, if you want to watch this entire course now without YouTube adverts, you can do. It's all up on the Net Ninja website, netninja.dev. You can buy the course for two dollars to get instant access to all of it, or you can sign up to Net Ninja Pro and get instant access to all of my courses without adverts as well as premium courses not found on YouTube, including my Udemy ones. That's nine dollars a month, and you can get your first month half price when you use this promo code right here. So I'm going to leave this link down below in the video description for you to sign up. And I really hope you enjoy this series. And please do not forget to share, subscribe, and like the videos. That really helps a lot. And I'm going to see you in the very next lesson.
