Building Reactive UIs with SolidJS

Episode Description

Anthony Campolo live-codes a SolidJS project from scratch, compares it to React, introduces Solid Start, and deploys to Netlify and Vercel.

Episode Summary

Anthony Campolo walks through building a SolidJS application entirely from scratch during a virtual meetup, starting with an empty directory and progressively layering in dependencies, components, and deployment. He begins by explaining Solid's relationship to React—similar JSX syntax but fundamentally different under the hood due to its fine-grained reactivity model, which eliminates the need for a virtual DOM and avoids costly re-renders. After setting up a basic hello world with Vite as the build tool, he introduces core Solid primitives like createSignal and createEffect, drawing direct comparisons to React's useState and useEffect while noting that Solid actually predated React hooks. He then demonstrates fetching data from a third-party API using the For component to loop over results, before deploying the project to both Netlify and Vercel using their respective CLIs. The second half transitions into Solid Start, Solid's meta-framework equivalent to Next.js, where he migrates the existing project by adding entry files and a file-based routing system, builds a to-do application, and deploys it with edge functions. A Q&A discussion covers Solid's ecosystem compatibility, its approach to lifecycle management and re-rendering, and the broader industry trend toward server-side rendering, partial hydration, and resumability as frameworks compete to reduce client-side JavaScript.

Chapters

00:00:00 - Introduction to SolidJS and Speaker Background

Anthony Campolo introduces himself and sets the stage for the session, explaining his involvement with the Redwood team, QuickNode, and his passion for open-source front-end development. He frames SolidJS as a newer JavaScript framework that will feel familiar to React developers but comes with important behavioral differences rooted in its distinct reactivity model.

He shares links to Ryan Carniato's work, noting that Ryan is Solid's creator and now works at Netlify, which positions the framework for stronger institutional support. Anthony argues this backing makes now a particularly good time to invest in learning Solid, drawing a parallel to how React benefits from having Facebook's full-time team behind it. He also points attendees to the SolidJS Twitter account and website before outlining his plan to build a project from scratch.

00:03:40 - Project Setup, Vite, and Build Tooling

Anthony begins installing dependencies and explains the core packages: solid-js itself (noting there's no separate DOM package like React), solid-meta for meta tags, and solid-router. He introduces the concept of build tooling by explaining Vite as a modern, faster alternative to webpack, which many React developers would know through Create React App.

He walks through creating the Vite config file, highlighting how minimal the configuration is compared to the old webpack era of hundred-line config files. The index.html shell is set up to load JavaScript entry files, and a simple root.jsx file is created containing a single app component with a header, a link, and a render function. This constitutes the complete Solid hello world, which he runs with pnpm run dev to show the live result in the browser.

00:12:05 - Components, Signals, and Effects

With the hello world running, Anthony restructures the project into a more modular layout with a routes folder and a components folder, mirroring the structure that will later facilitate migration to Solid Start. He introduces the counter component to demonstrate Solid's core reactivity primitive, createSignal, comparing it directly to React's useState.

He provides historical context, explaining that Solid's API predated React hooks by several years and that React independently arrived at a similar-looking solution. He then layers in createEffect to show how side effects work in Solid, noting that it's considerably simpler than React's useEffect. The discussion touches on Solid's lack of a virtual DOM, which means components render once and only the parts that change get updated, eliminating the need for performance hooks like useMemo and useCallback.

00:20:13 - API Calls, Deployment to Netlify and Vercel

Anthony builds a users component that fetches data from the JSONPlaceholder mock API, demonstrating how to use createSignal with an empty array and Solid's For component for iterating over results. He highlights the fallback prop for handling loading states, comparing it to Redwood's cell pattern with built-in success, error, loading, and empty states.

After confirming the data renders correctly, he shifts to deployment. Using the GitHub CLI, he pushes the project to a new repository in a single command, then configures a netlify.toml with build commands and a publish directory. He deploys simultaneously to both Netlify and Vercel using their respective CLIs, demonstrating how tightly integrated modern frameworks are with deployment platforms and how a few terminal commands can take a project from local development to a live production URL.

00:29:48 - Solid Start, Server-Side Rendering, and File-Based Routing

Anthony introduces Solid Start as the meta-framework equivalent to Next.js, explaining that it provides built-in routing, server-side rendering, and deployment adapters. He walks through the migration process, swapping Vite scripts for Solid Start scripts, adding client and server entry files, and noting that Vite still runs under the hood inside Solid Start.

He explains SSR's importance in reducing client-side JavaScript to serve users on slower devices and networks, framing it as a major industry trend. The file-based routing system is demonstrated, where the filename in the routes folder defines the URL path. He emphasizes that the existing route and component files required zero changes during the migration, making the upgrade path from plain Solid to Solid Start straightforward and low-risk.

00:35:30 - Building a To-Do App and Edge Deployment

Anthony adds a to-do route to demonstrate more advanced Solid Start features, including createServerMultiAction for handling form submissions in a way that can work with pure HTML for progressive enhancement. The to-do component supports adding, toggling, and removing items, though he notes the data isn't persisted to any real database.

He acknowledges CSS conflicts and accessibility gaps as areas for future improvement, then configures a Netlify adapter to deploy the Solid Start application using Deno edge functions. The deploy succeeds, and a Netlify employee on the call confirms everything works as expected. This section showcases how Solid Start's adapter system makes it straightforward to target different deployment platforms with minimal configuration changes.

00:41:07 - Q&A: Reactivity, Hydration, and the Framework Landscape

An attendee asks about side effects during component unmounting, prompting Anthony to explain Solid's fine-grained reactivity model—components render once and only update the specific parts that change, eliminating the re-render problems that lead React developers to reach for useMemo and useCallback. Nick from Netlify joins the discussion to note that Solid's rendering approach also simplifies the hydration story.

The conversation broadens to cover the evolving hydration landscape, including Astro's partial hydration and Qwik's resumability model. Anthony wraps up by recommending Solid as a production-ready React alternative while cautioning that Solid Start remains in beta. He encourages attendees to explore Solid for its performance benefits and keep watching the framework's edge computing story as it develops alongside the broader industry shift toward reduced client-side JavaScript.

Transcript

00:00:00 - Host intro

Yeah.

00:00:03 - Anthony Campolo

Got it. Awesome. Hello, everyone. My name is Anthony Campolo. Thank you, not Jonathan, for that intro.

I do a lot of advocacy for different things. I'm on the Redwood team, and I also work for QuickNode. I really enjoy open source, front-end web dev kind of stuff. I think it's really fascinating.

I'm going to talk about a somewhat newer, more cutting-edge JavaScript framework. You know, there's always that question of framework versus library, like what are we talking about here? It's Solid.

You can think of it as similar to React. If you know React, Solid won't be too hard to understand. At first, there are some weird gotchas you'll encounter between the two, but the gotchas are mostly because they look so similar. People expect them to behave identically, and then they don't. But for the vast majority of use cases, when you dive into it, it's going to make a lot of sense.

I'm going to share my screen so I can start showing.

00:01:08 - Moderator / chat helper

Some links and whatnot for people. It says, "Host has disabled participant screen sharing."

00:01:17 - Host intro

Let me check the settings real quick, see if I can change that.

00:01:26 - Moderator / chat helper

Then while he's doing that, I'm going to drop some links in the chat. Okay.

00:01:48 - Anthony Campolo

Awesome.

00:01:48 - Moderator / chat helper

That looks good.

00:01:50 - Anthony Campolo

Okay, so I just dropped Ryan Carniato's link into the chat. Ryan Carniato is the creator of Solid, and to really tell the story of Solid, you kind of have to tell the story of Ryan as well.

He currently works at Netlify with Nick, who's hanging out with us here, and he was hired by Netlify to help push Solid forward. This is one of the reasons I think now is a really great time to invest in Solid and start learning about Solid, because I think it's going to get a lot more support, and the ability to work on it consistently and give it the attention and care a large open-source project needs.

If you think about it, this is going to compete with something like React. React has a whole team and Facebook behind it. To have something similar, you really need to put a lot of time and effort into it.

Here is the Twitter account, solid_js, and the site is solidjs.com. What I'll mostly be doing is going through this little script here.

00:03:01 - Moderator / chat helper

Let's see if I can do chat.

00:03:03 - Anthony Campolo

There we go. If you're watching this video in the future, this will probably not be here because this is going to be turned into a blog post and an eventual course.

For people hanging around right now, this is a little README that covers what we're going to do today, and I'm going to build up a Solid project totally from scratch. We're going to start with a blank directory, install some dependencies, and get going. The idea is that you can see what it looks like to create one of these projects from the ground up, and it should be fairly comprehensible.

00:03:40 - Moderator / chat helper

And I already built this a second ago to make sure it worked okay.

00:03:50 - Anthony Campolo

Now this is a whole bunch of dependencies I'm going to install here. The reason there are so many is because I'm also bundling in deployment dependencies and stuff like that.

While that's running, let me talk this out. The most important thing here is the SolidJS dependency. Just like React, where you'd install react and then react-dom, there is no React DOM equivalent here. There's just Solid.

You also have solid-meta, which is for meta tags, similar to React Helmet, and solid-router as well.

One thing you'll discover when you learn React is that React by itself doesn't do a whole lot. Usually, you have to bring in extra libraries like React Router, and if you want a full framework experience, maybe Next.js. Solid has a Next.js equivalent they're creating now called Solid Start.

By the way, as I'm going, if people have questions, need clarification, or have no idea what Next.js or things like that are,

00:04:57 - Anthony Campolo

please stop me and ask questions. Totally happy to talk through any of this stuff if anything I'm saying doesn't make sense.

The idea is you have Solid and then a larger framework built around it called Solid Start. What I'm first going to do is show Solid by itself, and then I'll eventually get into the Solid meta-framework, which is Solid Start.

Then we have things that let us deploy to platforms like Vercel and Netlify. One of the things I think makes these frameworks really nice is how well they integrate with deployment platforms. It's not just a way to build a website. It's a way to get that website on the internet very, very easily.

That's a really important step in the process that people often don't think about until the end. You're like, okay, we have this thing, it's on my computer, it works, but how do I make it a website? That's going to be included in this presentation too.

00:05:57 - Anthony Campolo

Okay, let's actually look at the package.json now. We're going to add a couple scripts here.

Are people familiar with Vite at all? Because that might be something I should spend a little bit of time describing. Quick pulse of the audience: have people heard of Vite, used Vite, or know what Vite is?

I don't know how well you can see the cameras, Anthony, when you're sharing your screen, but there were a few heads shaking no.

00:06:30 - Moderator / chat helper

All right, cool.

00:06:32 - Short audience or moderator interjection

Great.

00:06:33 - Anthony Campolo

Okay, awesome. All right, that's cool. Glad I asked then. So do people know what webpack is?

00:06:40 - Moderator / chat helper

Is that a more familiar one? Let's see. Webpack.

00:06:48 - Anthony Campolo

Yes. Okay, cool.

00:06:53 - Moderator / chat helper

Let me actually get this little chat over here.

00:06:58 - Anthony Campolo

For people who have done web dev with React, you may have used Create React App. Create React App bundles React and a tool called webpack together.

The point of webpack is this: when you write your project, you're going to have different files. You're going to have your index.html, and you're going to have your

00:07:31 - Moderator / chat helper

Someone's sound is on right now.

00:07:34 - Anthony Campolo

You're going to have a bunch of different files that need to be bundled together. That's what your site actually is.

You use a tool like webpack to turn those files into something that makes sense to the browser. That's why when you're using things like Netlify or Vercel, you'll have a build step. They'll take your whole project, run it through some transformation, and spit out code that is the website itself.

Vite is a newer, cooler way to do this. It's a lot faster because it uses Go under the hood. It's where most frameworks are going in terms of underlying build tooling.

Now, you don't necessarily need to know or care that Vite is involved if the project is already set up for you. You'll have scripts, and you'll run pnpm run dev, yarn dev, or npm run dev, and those things get your project running. They'll do the build step, run localhost, and do all that for you.

00:08:40 - Anthony Campolo

What's happening is Vite is under the hood. That's important if you're a framework author, but if you're just using these tools, you can usually transition from projects that use webpack to projects that use Vite fairly seamlessly, as long as it was set up correctly in the first place.

The other thing that's important here is setting type to module, which is part of ESM and CJS.

Now there's going to be a vite.config file. Vite works for many different frameworks, so if we were doing React instead of Solid, we'd have a React plugin instead of a Solid plugin. This is basically the sum total of config we need.

Back in the webpack days, you'd have config files that were hundreds or even thousands of lines long. If you're worried about the amount of config involved here, this is almost as minimal and no-config as it gets.

00:09:51 - Anthony Campolo

That's really nice for people used to super config-heavy Babel and webpack projects.

Similar to a React project, you'll have an index.html. This brings in a script with our root component. It's a shell where we load our JavaScript files, and those files contain the sum total of our website.

We're going to create a src folder, and in that folder we'll have a root.jsx file. This is what we'll see on screen when we render our app. You see a little component with a header, an h1, and a link that goes to the SolidJS website.

Then we have a render function that's taking the root element and injecting this app component. We don't even need any other files. We have one file with one app component, and we render that app component and import it on our index.html page.

00:11:11 - Anthony Campolo

So that is the whole Solid hello world right there. We then run pnpm run dev to

00:11:18 - Moderator / chat helper

see our project here.

00:11:21 - Anthony Campolo

And so now this is our page. If we were to edit this at all to say Solid,

00:11:39 - Moderator / chat helper

We can see that added over here.

00:11:42 - Anthony Campolo

And then, yeah, as Nick is saying, V is French for fast.

Okay, questions about what I've shown so far? Okay, I'll take that as it makes sense so far.

00:12:02 - Moderator / chat helper

Makes sense and people are hopefully not confused.

00:12:05 - Anthony Campolo

This is a similar setup too. If you used Create React App, it would create a bunch of files for you that set up a project in a fairly similar order to this.

Usually there are more files. You don't want your whole app in one file, because that's going to get ridiculous as we build this out and split into different files for a more modular, sensible project structure.

So let's start doing that now. Let's see how we actually create some components.

00:12:36 - Moderator / chat helper

So root and app are the same file.

00:12:39 - Anthony Campolo

Yeah, exactly. And that's what I'm going to show right now: I'm going to break this up into a more sensible structure.

If you look at Solid templates that are available, it won't look exactly like this. The reason I've chosen this project and naming structure is that it's going to mirror Solid Start, so it allows us to do a seamless migration from this into Solid Start in a way that helps it make sense.

00:13:07 - Moderator / chat helper

the differences between those two.

00:13:09 - Anthony Campolo

So now we have a routes folder, and we're going to have a single route here. This route is going to have our app.

We're going to pull that app out of the root file, and then we're also going to add some CSS that kind of mimics Create React App. If you pull this example from the Solid template, it even has the little spinning floating Solid logo as well,

00:13:39 - Moderator / chat helper

in reference to React's iconic spinning logo.

00:13:44 - Anthony Campolo

Okay, so now we can see that instead of having the app and the render function in the same file, we just have the render function here, and we're importing the app from our index over here.

Now it should be all good. Here we have the exact same thing, but now with some

00:14:04 - Moderator / chat helper

CSS makes it look a little nicer.

00:14:08 - Anthony Campolo

So now we have routes and pages. You can think of this as our page here.

Now we want actual components. A component would be some self-contained functionality. In this case, the ever-important counter. If you can't count things on your site, is it even a real website?

00:14:32 - Moderator / chat helper

Probably not.

00:14:34 - Anthony Campolo

Okay, so now we're going to have a counter component. This is where we start to get into what makes Solid Solid and what makes it different from React.

If you look at React, you'd see useState here instead of createSignal.

00:14:52 - Moderator / chat helper

[unclear]

00:14:52 - Anthony Campolo

This is where Ryan's influence from something like Knockout comes into play, because there's something happening here called reactivity.

Reactivity is kind of an esoteric academic concept to some extent, but in a simple sense, it means you have something on the page that changes, and when it changes, you want your UI to update.

In this case, we're going to have a counter that increments by one every 1000 milliseconds. Every second it goes up one, and that's the whole deal. We want to display the count in our component.

In React, we'd use useState. Here we use createSignal. It does the same basic thing: gives you state that starts at zero and counts up bit by bit.

Since we have this component now, we need to import it into our index route over here. We're importing it from our counter file in our components folder and displaying it right under this.

00:16:10 - Moderator / chat helper

So now we're gonna do that.

00:16:13 - Anthony Campolo

There's our counter counting up.

One thing that's historically interesting about Solid is that Solid was created four or five years ago and looked exactly like this. React at the time was using class components, and this kind of stuff was baked in differently. It worked under the hood in some similar ways, but also very differently because React had the virtual DOM.

Once React moved to hooks, it shifted to something that looked almost exactly like Solid. Some people think Solid came out and was influenced by React hooks, but that's actually not the case. Solid was already doing this, and then React arrived at a similar solution later.

That's really fascinating, and it shows how Ryan was strangely ahead of the curve in ways you can

00:17:14 - Moderator / chat helper

never really predict or anticipate.

00:17:18 - Anthony Campolo

All right, now we're going to make a slight tweak to our counter and add an effect.

React is notorious for the useEffect hook, and useEffect confuses a lot of people. This is a way to have an effect that's a bit simpler. We still have a createSignal with count, then we have createEffect, and then it's going to count. That's it. That's the entire effect.

Then we're going to have an onClick handler that's going to set count, and when we click it, it's going to

00:17:58 - Moderator / chat helper

It's going to run count. Solid doesn't have lifecycles. You can write direct JavaScript without worrying about breaking any lifecycles.

00:18:07 - Anthony Campolo

Yeah, this is what makes Solid a lot simpler under the hood: it doesn't have a virtual DOM at all.

It does have equivalents, like onMount and things like that. It's a little more similar to Svelte in that respect. They both have an onMount handler. We're going to get into that when we show API calls.

I think the concept of lifecycles is still there, but it's a bit different from how React handles them.

00:18:51 - Moderator / chat helper

There's a great episode of

00:18:52 - Anthony Campolo

JavaScript Jabber.

00:18:53 - Moderator / chat helper

React talked about how it was coincidentally similar.

00:18:56 - Anthony Campolo

Yeah, and David is pointing out that Ryan is a prolific podcast guest, and I'd be remiss not to quickly plug my own podcast interview with Ryan. I had a really great time, and it was one of the first times I learned a lot about this framework, and it kind of blew my mind.

James, as I was saying, there are lifecycles, but they're different from React's, and I don't think they're as baked into effect handlers. This is a lower-level part of the implementation that I'm still not super familiar with because I'm still learning the framework.

If you're curious, Ryan is extremely active on Twitter and answers pretty much anyone's questions.

Where I was at was createEffect. Now we're going to have an actual button we can click, and when we click it, it will run the effect and increment the counter.

00:20:11 - Moderator / chat helper

So that is that.

00:20:13 - Anthony Campolo

Now we're going to show how to make a third-party API call.

Yeah, question for the host. I'm assuming the recording will be shared somewhere.

00:20:29 - Moderator / chat helper

We'll let you know where in a little bit, I'm sure. Okay,

00:20:37 - Anthony Campolo

Now this is going to be our users component, and we're again going to use createSignal. This time, instead of initializing it with 0, it's an empty array.

Then we're going to run a fetch, just a regular fetch call, and hit the JSONPlaceholder API. If anyone hasn't seen it before, it's a really nice mock API service that returns JSON data for you.

00:21:07 - Moderator / chat helper

Ben shared the link to the

00:21:09 - Anthony Campolo

React [unclear] channel.

And we can see here we could change the limit if we wanted to 10. Right now I'm just going to pull five, and all I'm going to do is display the name of each user.

So we run the fetch, get the response, call setUsers, await the response, and grab the JSON out of it.

Now here we have this For component. This is a specific Solid-ism and a way to loop over an array of objects. It's similar to forEach or map, the usual ways we loop over API data. We grab this JSON, show each user, and display the user's name. That's all we're doing.

Then there'll be a fallback for

00:22:10 - Moderator / chat helper

a loading if it's loading.

00:22:13 - Anthony Campolo

Yeah, yeah.

00:22:13 - Moderator / chat helper

The Fallback prop is, is really nice.

00:22:16 - Anthony Campolo

This is something I'm always big on with Redwood cells. They have success, error, loading, and empty states, and can figure those out automatically.

00:22:28 - Host intro

So.

00:22:28 - Anthony Campolo

So I try to bake that in

00:22:30 - Moderator / chat helper

whenever I'm working with other people's projects. Oh, forgot one thing, not importing the user into my component here. Do that. There we go.

00:22:48 - Anthony Campolo

Now we see we're displaying five users here. If we change that over here to 10, we get 10 users instead of five.

Okay, so this is kind of baseline hello-world functionality for most frameworks. You have components, those components need state, they need to run effects, and they need to call third-party APIs. Once you've done that, that's usually a baseline.

Routing to different pages is where Solid Start comes in.

Before we do that, let's see how to deploy what we've built here. I'm going to initialize a Git repository, commit, and use GitHub CLI to deploy the whole thing.

If you're not using GitHub CLI, I highly recommend it. You can use one uber command that creates a repo, writes a description, sets it public, pushes, grabs the source, and sets the remote all in one go.

00:23:58 - Host intro

[background TV audio about Fort Myers and Sanibel Island]

00:24:03 - Anthony Campolo

Someone has a TV on in the background.

00:24:04 - Host intro

[background TV audio continues]

00:24:11 - Moderator / chat helper

Yeah, cool, thank you.

00:24:13 - Anthony Campolo

Okay, and then we can do netlify.toml here. What netlify.toml does is let us specify build commands for our project.

We're going to have a build command and a publish directory. If we run this, I'm using pnpm, but npm and yarn work too, it creates this dist directory.

As I was saying earlier about webpack creating the project, this is what actually bundles our application into this huge incomprehensible blob of JavaScript and this huge single line of CSS.

It's necessary because this is the most optimal way to deploy in many cases, since you want it in a single file and to make fewer network requests. It doesn't make much sense if you try to read it directly, where you kind of do a little prayer to the build-tooling gods and hope it works. But it usually does.

Now we got all that.

00:25:23 - Moderator / chat helper

We'll commit this.

00:25:28 - Anthony Campolo

And I'm going to use the Netlify CLI here. I used to not use this, so I would always do weird things. I've started using it recently.

00:25:39 - Moderator / chat helper

It seems to work most of the time. So let's go.

00:25:51 - Anthony Campolo

Okay, give it a name: abcwebdevsoliddallas. I've already included these, so this is just pulling commands from our netlify.toml, and then it's going to give us a link after it finishes building.

That's going to take a second. While that builds, I'm going to do a trick and deploy it somewhere else at the same time.

This is now going to deploy to Vercel. This is one reason I really like these frameworks and how nicely integrated they are with deployment platforms. You can run a couple CLI commands and the whole thing gets built and pushed, and it's synced to your GitHub repo too.

So if we make changes later, it'll say there's a change, rebuild the site, and push the new version.

00:26:49 - Moderator / chat helper

So let's see if netlify is done yet.

00:26:55 - Anthony Campolo

So here's our site now, living on

00:26:56 - Moderator / chat helper

Netlify. Go ahead and share these in chat. There's that, and then here will be that.

00:27:13 - Anthony Campolo

And then the GitHub links are

00:27:16 - Moderator / chat helper

coming from github.com/abcwebdev/abcwebdev-solid-dallas.

00:27:26 - Host intro

Okay,

00:27:28 - Moderator / chat helper

following along at home.

00:27:30 - Host intro

Great.

00:27:30 - Anthony Campolo

So now we've got our site up, and the counter works. It's production-ready. That's right.

Cool, so questions on any of that

00:27:40 - Moderator / chat helper

I've shown so far

00:27:44 - Anthony Campolo

or comments, thoughts, or general pontifications on the status

00:27:48 - Moderator / chat helper

of what you think of Solid now.

00:27:52 - Short audience or moderator interjection

Yeah.

00:27:53 - Host intro

I have a question.

00:27:54 - Short audience or moderator interjection

Yeah.

00:27:56 - Host intro

So does Solid interact with other libraries in the same way React would? Like if I wanted to use Redux for state management, would Solid basically handle it the same way, or are there libraries it does not integrate with?

00:28:15 - Anthony Campolo

Yeah, that's a good question, because Solid itself is built on JSX, so it looks like React and behaves fairly similarly.

You might expect it to work with the same dependencies as React, but for the most part that's not really the case. For Redux specifically, with Solid you don't need Redux because it has state management built in. It has this concept called stores.

But if you want something like styled-components or another CSS-in-JS solution, that can get a little wonky, and you may need to check whether there's already a Solid community plugin for it.

There is a pretty vibrant Solid community, especially in the last year since I first started following it. It's grown a lot. So there is stuff available for the vast majority of things you'd want to do. You may need to find the Solid equivalent, but you'll probably find it.

00:29:20 - Anthony Campolo

React has become so monolithic that everyone knows it and has a set of dependencies they expect.

As Nick is saying here, there's already a version of React Query for Solid. Actually, React Query became TanStack Query because they don't want to be React-specific anymore.

I don't even remember what I was talking about.

00:29:45 - Moderator / chat helper

But let's, let's get back to, back to this.

00:29:48 - Anthony Campolo

Okay, so the next thing I was going to show is Solid Start. Solid Start is where you get a built-in router, multiple pages, and things like server-side rendering.

Server-side rendering is one of those things you hopefully never have to set up yourself. Ideally, a framework does it for you.

One thing that makes frameworks nicer now than a couple years ago is that they include SSR. Explaining why SSR matters is a big topic and kind of orthogonal to what I'm showing, but the point is it lets you do more on the server and less on the client.

You want less on the client because people may have slower devices or less adequate networks than we're used to, and they may have trouble downloading huge JavaScript bundles. Doing more on the server and shipping less JavaScript to the client helps us make websites friendlier to a wider set of people around the world.

00:31:02 - Anthony Campolo

This is really important. It's a huge trend in the industry and great to see, and a lot of frameworks are contributing to it.

We're going to change a couple things here to make this compatible with Solid Start. We have to change our scripts. So instead of Vite scripts, we're running Solid Start scripts.

This is a little bait-and-switch because Vite is still being used, but now it's inside Solid Start. So we're running Solid Start, and Solid Start runs Vite. We're swapping one thing for another, but it's not very different in practice.

Then we're going to make a couple config changes. We're removing the Solid plugin and using the Solid Start plugin.

00:31:54 - Moderator / chat helper

So, sure, that makes perfect sense. So don't even worry about that.

00:31:59 - Anthony Campolo

If you've ever used Remix, what you're going to see here will be extremely familiar. If you've never used Remix or React Server Components, this will look a little strange, but it's mostly boilerplate you don't need to worry too much about.

The important thing is that you have a client file and a server file. The client file mounts our root component. The server file creates a handler, basically like a lambda handler, or in this context an edge handler.

It means it's compatible with whatever deployment platform you use and works with their server setup, whether serverless functions or edge functions. If you don't know those, that's another long topic, but basically it's server code you can run without managing a full server OS yourself.

You can hand your code to the platform and say, hey, you're a server,

00:33:10 - Anthony Campolo

run this code for me, please. It'll run the code and return a response, and that's all it needs to do.

00:33:19 - Moderator / chat helper

Then here.

00:33:21 - Anthony Campolo

This is all Solid Start stuff: routes, suspense for async behavior, and an error boundary. It's jargon that's not super important from a dev perspective at this stage.

The main thing to know is you need a routes folder, and route filenames define URL paths. So the index route is the homepage.

I set this project up so I can run one command and serve on a different localhost port, now on 3000, and it'll be exactly the same. The project didn't change. We didn't need to change route files or component files. We just added entry files and changed routing, and everything works.

This is extremely useful for people migrating Solid projects to Solid Start, because right now Solid Start is beta.

00:34:24 - Anthony Campolo

It's not really production-ready yet, but I would guess sometime in 2023 it will be. That gives them enough leeway to make it right.

00:34:36 - Host intro

We'll see.

00:34:37 - Anthony Campolo

All right, and the only other thing we're going to add here is a to-do route.

This is going to be a bunch of code that I probably don't have enough time to walk through fully, but to give you a taste: we have a to-do component running a couple functions. We can add to-dos, toggle a to-do as done or not done, and remove a to-do once completed.

These use Solid Start-specific methods, like createServerMultiAction. This is the stuff taking influence from Remix, with the idea that it can compile away and still work with pure HTML.

That's enticing because it enables better progressive enhancement and brings us closer to a multi-page-app paradigm, where things don't rely so heavily on JavaScript.

00:36:11 - Anthony Campolo

Then we're doing some logic to filter the list, and we're going to have a form input to take in the to-do. Then we display the to-do and include logic for toggling.

If people are interested in more of this, I can point you to the actual

00:36:39 - Moderator / chat helper

SolidJS template for, I think, this is on Solid Start, so you can

00:36:48 - Anthony Campolo

find most of the stuff I pulled and reworked from their official repository.

This is very similar to the to-do MVC example there, so that's a good place to dig into what the to-do example is doing.

For now, I mainly wanted to show how to migrate the project and get it online. But first let's make sure this to-do thing can actually hold some to-dos.

This is the quote-unquote database. There is no database here. This data isn't persisted anywhere. So when you write these to-dos, if you refresh the page, they go away. This isn't an actual full-stack example.

For the sake of this example, it creates a counter, creates to-dos, and lets you put to-dos into the UI. This is our mock backend.

I'm going to grab this whole giant chunk of CSS.

00:37:56 - Anthony Campolo

I'm not a CSS wizard, and this CSS for the to-dos kind of breaks the front-end CSS. That's a project for me to figure out another day.

But right now let's run this. You can see the CSS changed a little bit, and now we can see our to-dos. I don't know if this is necessarily accessible or not. I might need to open a PR for that.

If we create a to-do saying "give a meetup talk" and hit Enter, we now have our single to-do. We can mark it done and leave it on our list if we

00:38:38 - Moderator / chat helper

want, or we can delete it. Now we can create a couple, do one, do two, and it will stack up.

00:38:46 - Anthony Campolo

Yeah, I've got several accessibility violations here.

So this is why we're still in beta, and accessibility is always one of those things that needs to be figured out at some point. Happy to take notes there.

I'm actually, as I say,

00:39:02 - Moderator / chat helper

going to be turning this into a course at some point.

00:39:04 - Anthony Campolo

So accessibility concerns of single-page applications

00:39:08 - Moderator / chat helper

are always a topic unto themselves.

00:39:12 - Anthony Campolo

To get this deployed, we're going to use an adapter.

Solid has specific adapters for different deployment platforms. So we're going to bring in solid-start-netlify, make a slight change to netlify.toml by changing the publish directory to netlify, and make a slight change to our Vite config.

Now we're bringing in Netlify from solid-start-netlify, deploying that here, and setting it to Edge. This means, assuming this is right, it's going to use Deno edge functions under the hood, and I

00:39:56 - Moderator / chat helper

think that will be all I need to do to get this working. Let's go open that.

00:40:05 - Anthony Campolo

That'll take a second to build. Yep, should be able to see this.

All right, cool. I get to show a Netlify employee something new on Netlify.

Any questions while that builds out?

00:40:33 - Moderator / chat helper

Looks like this is building right now. So we can see our edge functions bundling, building out our index page, and that looks like everything. So if we go back to this one, this should now have to-dos.

00:41:03 - Anthony Campolo

And now this is working on our actual deployed site.

00:41:07 - Short audience or moderator interjection

Thanks, Jonathan. So yeah, quick question, well maybe not quick.

One thing I noticed with React is side effects. For example, if you perform an action to make an asynchronous call and navigate away from the view, that unmounts the component, and if the async call is incomplete yet, it'll print a memory leak warning in the console.

So I'm curious, in React you might use an Axios abort signal or an "is this mounted" pattern. Since Solid handles lifecycles differently, does it have similar side effects to worry about?

00:42:03 - Anthony Campolo

Yeah, that would be similar with onMount.

If you want to run an effect when the component mounts, you'd do that, and I'd imagine it would handle some of the same things.

With Solid, mounting behavior is less of the draw. The behavior that's different is re-rendering. In React, components re-render and update state, so you often end up using callbacks, memo, and other hooks to handle re-render behavior.

That's where Solid has more fine-grained reactivity. Ryan uses that term all the time. I'm not sure I fully understand it, but what he means is: it renders once, and when it needs to update, only the part that needs to update changes. It doesn't tear down and rebuild the entire component every time.

00:43:08 - Anthony Campolo

It's able to take the thing that needs to change and just change that.

So in terms of lifecycles and mounting, not sure there's anything especially interesting there, but it's the re-render pattern that removes the need for things like useMemo and useCallback.

00:43:23 - Short audience or moderator interjection

Gotcha. Okay, cool. Thanks.

00:43:25 - Moderator / chat helper

Yeah, for sure. Cool.

00:43:28 - Anthony Campolo

Any other questions?

00:43:31 - Moderator / chat helper

Be curious.

00:43:32 - Anthony Campolo

Nick, if you had any, any thoughts

00:43:34 - Moderator / chat helper

of what we've shown here since I

00:43:35 - Anthony Campolo

was showing a little bit of Netlify functionality.

00:43:38 - Moderator / chat helper

I don't know if you're able to talk yet.

00:43:40 - Short audience or moderator interjection

Oh yeah, no, I can talk. Yeah, no, no.

00:43:43 - Anthony Campolo

[crosstalk]

00:43:43 - Short audience or moderator interjection

Edge deploy worked as expected.

I haven't really messed around with Solid yet. It's still on my to-do. I'm going to a meetup next week in Montreal.

I think it's neat due to the reactivity. It only renders the component once unless you trash the component. All that markup never changes, and that probably helps with the server-side story too.

In terms of hydration, I'm not totally sure, but I know it's different than React. Other frameworks, like Fresh, take a different approach. They don't compare markup; they just say, here's the interactive bits, and run it.

So you don't end up with some issues. I'm starting to notice issues with React 18 and hydration, even like

00:44:38 - Anthony Campolo

A web browser extension

00:44:39 - Short audience or moderator interjection

breaks hydration in React because it injects stuff into the DOM and stuff.

00:44:45 - Moderator / chat helper

So it's interesting that the newer frameworks are

00:44:46 - Short audience or moderator interjection

taking a different approach to hydration.

00:44:50 - Anthony Campolo

Yeah, I shared a link there. If you go to solidjs.com/guides/server, you can find information about hydration.

But that's how you'd do it if you're using SolidJS directly, not Solid Start. I don't really know what the hydration story will be with Solid Start, because Solid Start is emulating Remix to some extent, and Remix went a different direction and doesn't rely on partial hydration the same way.

I'd be curious where Ryan's head is at on that, because there's a lot happening in hydration with things like Astro.

And now we have the Qwik model, which isn't really hydration, it's resumability. So what we do with JavaScript and how we make it more manageable is a multifaceted problem that different projects are approaching in different ways.

00:45:55 - Short audience or moderator interjection

Yeah, for sure. There are a ton of frameworks, and Qwik is another one. These are really new frameworks, and they're handling hydration differently too.

And they're not even calling it hydration, they're calling it resumability, but that's a whole

00:46:08 - Anthony Campolo

Exactly.

00:46:09 - Host intro

I don't want to derail.

00:46:09 - Short audience or moderator interjection

I don't want to derail. I don't want to derail this meetup.

00:46:12 - Anthony Campolo

Yeah, I feel like if you're someone who works on a platform that needs to support all these frameworks, it's a dizzying array of things to keep up with.

00:46:23 - Short audience or moderator interjection

Yeah.

00:46:23 - Moderator / chat helper

I do sleep, though.

00:46:29 - Anthony Campolo

Good. Sleep's important. Cool. Yeah, so that was the whole demo.

Hopefully that gives people an idea of what Solid is and how they'd get started if they wanted to use it.

Right now, Solid itself has been around for a while and is battle-tested. I'd feel very comfortable putting it into production.

Solid Start is still in the works and considered beta. If you want to put Solid Start in production, I'd hesitate to recommend that right now. I'd say you'd probably test it and file bug reports for the benefit of the project, if that's something you're into.

But Solid itself, if you want a React replacement, or you're using Svelte or another front-end component framework and want to try something else, give Solid a try. You might be surprised what it's capable of today.

And keep an eye on things like Solid Start and how that's going to play into their edge story.

00:47:35 - Anthony Campolo

Because a lot of frameworks are going in this direction. Some people will stick with React and React will build in some of these same features, and others will jump to other frameworks.

But overall, there are a lot of interesting things happening across frameworks, a lot of innovation, and new ways of thinking about building applications that make them more performant and more available to people who maybe can't handle downloading megabytes of JavaScript onto their phone.

00:48:18 - Moderator / chat helper

Cool.

00:48:22 - Host intro

Awesome. Well, thank you again, Anthony. That's really cool.

It's so neat to learn about new technologies, especially something with all these really cool attributes like what you're talking about. This will be exciting to see grow and change over the next couple of years.

Once again, everybody, feel free to share your LinkedIn, Twitter, or other info. I'm also going to repost the links from earlier, including my LinkedIn at the bottom.

Again, Scott Thompson, not Jonathan Martinez, just to avoid confusion.

Everybody, thank you so much for your time. Really appreciate it. Hope y'all continue to come to our meetups. We have these every month, always the last Thursday of the month. For the last couple months, we've also been having in-person events, so if you live in the DFW area or close to it, feel free to come to that.

Not this upcoming Sunday, but the Sunday after that. And of course, our cohorts are about to start back up next Thursday as well, starting and ending with a virtual meetup.

00:49:39 - Host intro

So for more information, return to Discord, LinkedIn, and the Facebook page.

We'll be sure to clip that one part of... oh wait, let me stop recording on that note.