Transcript from the "Introduction" Lesson
>> 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: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. Naco JS from the early 2010s was kind of like primary inspiration.
[00:02:59] And as a Naco 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: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: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 Sol 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.