Introduction

[00:00:00]
>> Thanks for joining me today. We'll be looking at the solid JS UI framework, the next several hours will be a workshop that will take you from the fundamentals of reactivity, all the way to building solid applications. While this is Intended to serve as an introduction, we'll be getting in depth with a lot of the key technologies that by the time you're done, you'll have a firm grasp on, not just solid, but pretty much any UI framework you'd be using.

[00:00:26]
Who am I? My name's Ryan Carniato, I'm the creator of solid JS. I've been in web development now, I don't know, 25 years. Started in the 90s making websites for my band. I played in a punk rock band that actually happened to be called Mr. Solid. That's where the framework got its name from.

[00:00:44]
I actually even have the tattoo here to prove it, this is solid and Old English. But I've been doing web dev for a long time, I have lived through table soup and ASP.net and rails and jQuery, before finding my passion for modern frontend frameworks. Through the 2010, I worked almost a decade at a startup, which is where I developed solid js.

[00:01:08]
I also afterwards worked at eBay for a couple years, working on their framework, Marco, and now I'm doing open source at Netlify. So what is Solid? For many of you, this will be the first time seeing Solid JS. So I'd say, it's a declarative UI library for building user interfaces.

[00:01:31]
If that sounds familiar, it should, that's react's tagline. But It is accurate for many libraries and frameworks. Solid is a JavaScript framework or library, depending on how you make the distinction, that's similar to things like React and Vue, and Angular and Svelt, and has a lot of the same responsibilities.

[00:01:51]
Ultimately, to allow you to build user interfaces. But these days that includes a lot of platforms, more than just the web. With custom rendering, support for things like WebGL and native. So, these are all things that you can do with Solid JS. But, I mean, let's get to the elephant in the room, why would you look at another JavaScript framework?

[00:02:19]
We have enough of those, right? I'm gonna give a little bit of history. Well, Solid JS has started to kind of catch on recently. I started this way back, I'd say 2016, my first commit in a private repo, and I didn't actually open source until 2018. I was building it and I thought, maybe use it in my company.

[00:02:42]
And I opened Solid JS mostly just because I wanted to enter some benchmarks. See, my goal was kind of to bring back fine grained reactivity. And if you haven't heard it, there's some older frameworks that use this approach. KnockoutJS from the early 2010s was kind of like primary inspiration.

[00:02:59]
And as a Knockout developer, I loved the patterns they had. They had these composeble primitives that you could reuse and build the interfaces out of. And I thought it was really powerful, but the industry kind of moved on, especially with things like React. And there was a lot of performance claims around things like the virtual DOM, and I was a little bit confused by these.

[00:03:18]
So, things like the DOM was slow and whatnot. So I was like, let's re examine this. So I kind of thought, maybe we just need to look at this a little differently. Maybe attack the problem a little bit different. And so I attacked and attacked, and by mid 2018 Solid had taught pretty much every JavaScript benchmark I could find.

[00:03:37]
JS framework benchmark, Js repaint benchmark, UI bench, Jeremy asked him to sit circles, demo, isomorphic benchmark, basically anything it could find. And honestly, that's really not enough to choose a new framework, because, sure, it looks good on paper. Really, solid true in is how it changes your perspective on JavaScript frameworks, and it encompasses this through two main ideas.

[00:04:05]
First of all is reactivity, reactivity is very core to this. Reactivity is just a way of expressing systems behaviors on a specific implementation by treating or rendering as kind of a reactive side effect. Means we aren't tied to any specific platform, as I mentioned before, things like WebGL or, you can even put a VDOM in reactivity if you wanted to.

[00:04:26]
And you can apply it to all sorts of problems, cuz what you get really is a language of sorts. Reactivity is really a language for user interfaces. And with Solid, that means we ship a powerful set of primitives that you can use to kind of construct your user interfaces.

[00:04:45]
Solid js reactivity and kind of approach to using things like JSX has actually inspired other projects like mitosis from builder IO, which lets you actually write in a single language and then output components in any framework. So, this is a big foundation for us. The other side is this departure from the typical component model.

[00:05:06]
And I don't mean from an authoring perspective, it's that modern front-end web development has been about components. Class components, function components, option components, web components, and for good reason, they give us this kind of module and capsule ration. These building blocks we use to build our apps. And this is a good thing.

[00:05:24]
However, almost every JavaScript framework ties their runtime change models to this, the way things update or tie to the components. And Solid kinda lets us rethink about that model. We still have components as a pattern for organizing our code, but we don't have to worry about it from a performance or mechanical perspective.

[00:05:48]
It's not about rear-ending and memorization, you kind of forget about that. So, what are we covering today? Today we're going to be talking about Solid JS. But as I mentioned, I'd really like to promote a deeper understanding of these kind of core concepts. So, we're gonna start with introduction, which we're doing now, but then we're gonna really dig into reactivity.

[00:06:09]
And we're gonna understand it, look at how solid renders using reactivity. And then a little bit later we're gonna look at the fundamental primitives behind Solid and how we go towards building apps. And get into some more advanced topics towards the end of our session, looking at stores and routing and how to handle async data.

[00:06:29]
In terms of tools, basically, for the most part I'm gonna be using a lot of online tools. Stuff like, CodeSandbox and Stackblitz, for the examples. You can also have CLI commands so you can do it in VS code, if that's what you're comfortable with, but, everything's pretty much available online, in terms of what we're going to be building today.

[00:06:52]
And in terms of resources, most important one probably is the course website. This will have kind of an outline, high level of everything that we're doing today plus links to all the other resources. I've also included a link here to the GitHub. I have a few other places where I've set up some kind of lessons, so to speak, like in CodeSandbox and Solid Playground and Tutorial, but we'll share these links again as we get to the particular parts in the session.

[00:07:21]
I just wanna kind of put these up up front.