Hydrated Trees vs Resumable Maps TypeScript 5-1 Jetpack AI

Episode Description

Scott and Anthony discuss Jetpack AI for WordPress, Google's new AI tools, TypeScript 5.1, and host a deep conversation on React Server Components vs. resumability.

Episode Summary

This JavaScript Jam live episode opens with Scott sharing a personal health update before the hosts dive into the week's newsletter topics. Anthony introduces Jetpack AI, a new WordPress plugin leveraging AI for content creation, tone adjustment, and summarization, which leads to a broader discussion about AI tools proliferating across platforms, including OpenAI's GPT-3.5 Turbo updates and Google's growing suite of AI products like Music LM and Vertex AI. The conversation shifts to Chris Ferdinandi of Go Make Things, who abandoned headless WordPress in favor of a minimalist stack using Hugo, PHP, flat JSON files, and vanilla JavaScript — a choice that sparks debate about the practicality of vanilla JS versus frameworks. After covering TypeScript 5.1 and a Qwik team article comparing hydration to resumability, the episode's richest segment arrives when listeners Jesse Pence and Jaylarky join to discuss their hands-on experiments building React Server Components from scratch using Dan Abramov's tutorial gist. Jaylarky offers a compelling mental model: hydration means running the same app twice, while the optimal approach — exemplified by Qwik — is automatically generating a second, minimal app from the first. The episode wraps with announcements about upcoming podcast guests, including a anticipated Misko vs. Dan Abramov debate on JavaScript Jam.

Chapters

00:00:00 - Introduction and Health Update

The episode kicks off a few minutes late as Scott works through login issues on the JavaScript Jam mobile account. After welcoming the live audience, Anthony asks Scott about his vision, which leads to a detailed personal update. Scott explains that a retinal hemorrhage he first noticed at Remix Conf the previous May had been affecting his central vision for over a year.

Scott shares the good news that his specialist visit went so well they skipped the planned injection and performed laser surgery on the spot. He recounts the frustrating timeline of delayed appointments and a Covid diagnosis that prevented him from seeing a doctor for weeks, but notes his vision is now dramatically improved. The update sets a casual, conversational tone for the rest of the episode.

00:03:51 - Jetpack AI for WordPress and AI Tool Landscape

Anthony introduces the newsletter's headline story: Jetpack AI, a new plugin that integrates AI writing assistance directly into the WordPress editor. The hosts discuss its features, including grammar correction, translation, title and summary generation, and adaptive tone adjustment, comparing it to tools like Grammarly and ChatGPT. Scott draws a parallel to ClickFunnels 2.0, which similarly integrated AI for landing page content after OpenAI released its API.

The conversation broadens into the wider AI landscape, touching on GPT-3.5 Turbo's expanded 13K context window, OpenAI's new functions API, and Google's growing collection of AI products. Anthony shares his experience generating music with Google's Music LM and its built-in reinforcement learning feedback mechanism. Scott brings up Google's Vertex AI platform, and Anthony lists the five separate Google AI tools — Search Labs, Duet AI, Project Tailwind, Music LM, and PaLM API — each with its own waitlist and sign-up process.

00:12:15 - Chris Ferdinandi's Vanilla JS and Minimal Web Stack

Scott brings up Chris Ferdinandi's Go Make Things newsletter, where Ferdinandi detailed how he abandoned his headless WordPress setup in favor of a radically simple stack. Ferdinandi now uses Hugo as a static site generator, PHP to serve the correct HTML based on user authentication, flat JSON files instead of a traditional database, and minimal JavaScript only for interactive form elements.

Anthony notes Ferdinandi's longstanding advocacy for vanilla JavaScript and acknowledges the educational value of learning to build without frameworks, even if he wouldn't recommend it for production projects. The hosts discuss the practical tradeoffs of this approach — Ferdinandi claims the flat-file setup is more resilient and performant than a proper database — and announce an upcoming podcast recording with Ferdinandi. The segment also includes a brief aside about podcast listening habits and music streaming nostalgia.

After a mid-show welcome for new listeners, Anthony covers the remaining newsletter items. He highlights TypeScript 5.1's release, candidly admitting that its incremental DX improvements — like linked cursors for JSX tags and improved JSDoc completions — are difficult to explain to non-TypeScript users. He frames TypeScript broadly as a developer experience accelerator rather than something with easily communicated end-user benefits.

The more substantive item is an article by Manu from the Qwik team comparing hydration approaches. Manu characterizes hydration as a tree and resumability as a map, arguing that resumability operates at constant time O(1) compared to hydration's O(n) because event handlers — not components — serve as the root of the process. Anthony recommends checking out the article's diagrams and teases an anticipated debate between Qwik creator Misko Hevery and React's Dan Abramov that JavaScript Jam is working to schedule.

00:27:34 - Open Mic and Upcoming Podcasts

The hosts shift into a relaxed open-mic segment, inviting listeners to come up and participate. Scott shares that his own podcast has one recording completed with ten more planned, limited by his commitment to in-person video recording. Anthony announces that his other show, FSGM, has booked its first new episode in nearly a year with Amy Dutton, a new Redwood core team member who also co-hosts the Compressed podcast.

Scott and Anthony reminisce about Render Atlanta and encourage the audience to subscribe to the JavaScript Jam newsletter at JavaScriptJam.com. The segment takes a playful turn with jokes about freestyle rapping requirements for first-time speakers and Scott's improvised "Jamascript" framework bit, keeping the energy light while waiting for audience members to join the conversation.

00:34:11 - Deep Dive: Building React Server Components from Scratch

Jesse Pence joins to discuss his video series working through Dan Abramov's React Server Components tutorial gist. He explains that he's implemented nearly all the challenges — including server actions — but has hit a wall with client components, which require a separate execution environment and complex hydration alignment. Jesse describes creative but impractical workarounds like Babel transforms in the browser and writing individual component files for lazy client-side import.

Jaylarky then shares his parallel project porting Abramov's examples into Astro, noting that Astro's built-in JSX compilation simplified parts of the process. He frames React Server Components as fundamentally similar to Astro's partial hydration model — a view he says Ryan Carniato shares but the Astro team has been slow to accept. The Astro team's position, Jaylarky explains, is that React Server Components aren't yet significant enough as a standalone framework to warrant a dedicated integration.

00:43:49 - Hydration, Resumability, and the "Two Apps" Mental Model

Jaylarky presents his core mental model for understanding hydration and resumability: traditional web development with server rendering plus jQuery means writing two separate apps — one for the server and one for the client. SSR with hydration solves this by running the same app twice, but that duplication is wasteful. Qwik's approach, he argues, is to automatically compile a second, minimal app from the first, generating only the tiny event listeners and DOM manipulations actually needed.

Jesse connects this to his own experience, noting that his most successful approach to client components involved creating each as its own isolated mini-app module — inadvertently mirroring Jaylarky's conceptual framework. The discussion touches on the practical difficulty of reconciling server and client component trees, with Jesse planning to release a video focused more on illustrating why these problems are hard than on presenting optimal solutions. The segment captures the collaborative, exploratory spirit that defines JavaScript Jam's best conversations.

00:53:10 - Wrap-Up and Upcoming Episodes

The hosts thank Jesse and Jaylarky for their contributions and begin closing out the episode. Scott runs through upcoming content: a podcast episode about Million.js with Tobolova, the Chris Ferdinandi recording, and several interviews conducted at Render Atlanta that Anthony is editing, with the Nick Taylor Remix episode next in the release queue.

Scott reminds listeners that JavaScript Jam goes live every Wednesday at 12pm Pacific and encourages everyone to subscribe to the newsletter at JavaScriptJam.com for updates on all upcoming episodes, including the highly anticipated Misko Hevery vs. Dan Abramov discussion. The episode closes on a warm, community-focused note with the hosts expressing appreciation for their audience's participation and conversation.

Transcript

00:00:00 - Scott Steinlage

All right, here we go. Here we go.

00:00:02 - Anthony Campolo

Sorry for the delay, folks. Can you hear me, Scott?

00:00:06 - Scott Steinlage

Yeah, I can hear you. Can you hear me?

00:00:12 - Anthony Campolo

I can hear you.

00:00:14 - Scott Steinlage

Wonderful. Yeah. Literally, as soon as you were like, "Oh, I got it up," I logged in. I was just having trouble logging in on the mobile device for the JavaScript Jam account. Anthony was already logged in anyway, so he went ahead and started because it was getting kind of late. Anyway, we're 10 minutes late, but better late than never. Welcome to JavaScript Jam Live. What's up, Jaylarky? Jesse Pence. How are y'all doing? Everybody's good? All right. Sweet. Anthony, how are you, man?

00:01:06 - Anthony Campolo

I'm doing pretty good. How are you? Is your vision doing okay?

00:01:11 - Scott Steinlage

Yeah, I'm good. It's actually crazy. Yesterday when I went to the specialist to get my injection, they took an angiogram — they put a dye in your blood, a contrast, so it allows them to take special images and see the blood vessels in your eyes. That machine was down a few weeks ago, which is why they had to push things off. Anyway, we were able to do that this time around, and everything was looking so good that they were like, "You know what? We don't even need to do another injection. Let's just do the laser surgery right now." So I had the laser surgery done yesterday. It's going pretty good.

00:02:09 - Anthony Campolo

Sweet. Yeah, pretty sweet.

00:02:12 - Scott Steinlage

Yeah. For those who don't know, it was just this weird hemorrhage thing I had in my eye. It was actually from way back last May when we were in Salt Lake City for Remix Conf — the first Remix Conf. I started to notice something weird with my vision and I just thought it was allergies. Then I was like, okay, this is not going away. Long story short, I couldn't get into a doctor until after Render ATL last year, which was right after Remix last year. I got in, and then all of a sudden I was like, "Oh wait, I have COVID." So I couldn't go to the doctor for another 10 days, and this thing just kept getting worse and worse. Basically I had this hemorrhage in my eye and it was affecting my central vision — the edema, the swelling, and the blood color. So anyway, it's doing much better than a year ago, that's for sure.

00:03:30 - Scott Steinlage

Much, much better, and that's good. So here we are. Now we can get back to JavaScript Jam, talking about this wonderful stuff. So yeah, JavaScript Jam. What's up, folks?

00:03:50 - Anthony Campolo

The jammiest. Anyone who wants to come up and join, you are all welcome to. We're going to be filming a podcast with Tobolova in a little bit for Million. If you have any interest in hopping up and talking about Million at all, you're welcome to. But yeah, how are you doing, Scott, in terms of, like, did you check out the newsletter? Do you have any things you want to talk about this week?

00:04:18 - Scott Steinlage

Yeah, man, hold on. Sorry, I actually wasn't able to pop into that yet. So just with all the eye stuff going on.

00:04:28 - Anthony Campolo

Yeah, it's all good. So it has a couple headline features. One that I think you might find interesting is that there's going to be an AI plugin now for WordPress.

00:04:38 - Scott Steinlage

Oh, joy.

00:04:41 - Anthony Campolo

Yeah. So it's Jetpack AI. Do you know Jetpack?

00:04:45 - Scott Steinlage

I very much know about Jetpack. Yeah, the plugin.

00:04:48 - Anthony Campolo

Yeah, totally. Yeah. So it says that it's going to leverage AI to enhance the writing process on WordPress.com and Jetpack-powered sites. It integrates with the WordPress editor and aims to reduce time and effort spent on content creation. So that's like the most generic description ever of an AI tool. It's going to have AI so that when you write stuff it'll be better because it'll be written with the AI tool that made your writing better.

00:05:18 - Scott Steinlage

Yeah. Oh, that's funny. You know ClickFunnels? When they came out with ClickFunnels 2.0, I just think it's relevant because WordPress as a site builder, and Jetpack and other tools, plugins allowing you to do drag-and-drop editing and all that stuff. Anyway, ClickFunnels came out with something like that because ChatGPT had launched their API and all that stuff. So they came out with something like that for landing pages and building out your sales pages and things like that, crafting the content for your pages and all that. I haven't messed with it, but I'm sure we'll see more and more of that over time.

00:06:03 - Anthony Campolo

Yeah, and they break down a couple of the specific features they're going to have. Some are things you'd get from Grammarly, like spelling and grammar corrections, and then translation abilities. But one of the more interesting ones I thought was title and summary generation. This is something I use ChatGPT for a lot — generating summaries. I'd be curious to see how that would compare if it was already aware of the structure of a WordPress site. It might be able to extract information out of how headers are organized and things like that. Because with ChatGPT, you're kind of just dumping a huge chunk of text and telling it to summarize it. So I usually chunk it out myself and tell it to summarize individual portions and put those together into the summary I want. But if it could actually know that this is an article with a beginning, middle, and end, that could be really useful.

00:07:06 - Scott Steinlage

Yeah, exactly. That's awesome. So GPT-3.5 Turbo now has 13k. It just added 13k to it, I think.

00:07:19 - Anthony Campolo

Yeah. I saw they announced a whole bunch of stuff today. Longer context windows, shorter or lower prices for some things. And there's a new functions API that's like a way to kind of, I think, directly access the plugin functionality.

00:07:37 - Scott Steinlage

Right. Which is cool. And Google started talking about some other things and releasing some interesting things as well a couple days ago.

00:07:49 - Anthony Campolo

Yeah, I found an article that was like, here's all the waitlists for Google's AI products. They have like five of them, and I hadn't really heard of any of these. So I signed up for all of them. There's a music one. They're all tied to Google Workspaces, which is kind of obnoxious. I realized there's no free plan for that, and I'm like, I don't want to pay six bucks a month for a bunch of Google AI tools I'm probably going to try out and not end up using very much.

00:08:18 - Scott Steinlage

Yeah, no, I hear you. What do they call it? I think it starts with a V? My brain's not working. Yeah, V. It consists of all their AI stuff. Everything's in there. I can't remember now. Yeah, let's see.

00:08:45 - Anthony Campolo

Yeah, that was part of the deal with the article. I'm going to actually grab that and link to it because they all had different landing pages.

00:08:53 - Scott Steinlage

Vertex, vertex, vertex. V-E-R-T-E-X AI.

00:08:58 - Anthony Campolo

Vertex AI.

00:08:59 - Scott Steinlage

Yeah.

00:09:01 - Anthony Campolo

This is like BigQuery and Looker. This is for machine learning models.

00:09:05 - Scott Steinlage

Right. This is LLM stuff and other things. But there's other things inside of this. If you peel it back, there's more models in here that's similar to it. But yeah, there's definitely BigQuery. There's data and AI integration, there's the low-code and no-code tooling, there's open and flexible AI infrastructure, all kinds of stuff. But yeah, I thought it was interesting. I don't know, but this is one of the things that they opened up or something. At least that's what my understanding was. I don't know. Someone tweeted about it.

00:09:44 - Anthony Campolo

Good old tweeting.

00:09:46 - Scott Steinlage

Tweeting, yeah. Could be fact or fiction. Let's play.

00:09:50 - Anthony Campolo

Here we go. I found it. How to get access to Google's new AI tools. So it's Search Labs, Duet AI, Project Tailwind, MusicLM, and PaLM API. So there's five separate AI tools that are all totally separate things. They all have their own links and things to sign up for.

00:10:09 - Scott Steinlage

Interesting. Yeah, that's a lot going on there.

00:10:12 - Anthony Campolo

I made a beat with the music one. That was the first one I got access to, and I said, "Write me a funky beat with drums, bass, and strings," I think is what I said. It was pretty good. What's really interesting is it gives you two options — it generates two little chunks of music, and then you get to rate which one is better. So there's a feedback mechanism built in where they're getting input every time they generate something. That's the reinforcement learning with human feedback thing.

00:10:45 - Scott Steinlage

Right, right, right. Interesting.

00:10:51 - Anthony Campolo

Yeah, let me throw that link on here.

00:10:55 - Scott Steinlage

Link it up.

00:10:59 - Anthony Campolo

And then the other one that I thought was interesting in the Jetpack AI thing was adaptive tone adjustment. So adjust the tone of the content to meet users' preferences. I just imagine writing a tech thing and being like, make it really salesy, or make it really confrontational, or make it like Theo.

00:11:27 - Scott Steinlage

Yeah, that would be interesting, huh? It's interesting you say that, actually, because sometimes when I'm writing some material and I want it to sound a certain way, I use ChatGPT. I'll tell it, especially if there's a marketer that's very well known and has a lot of writing out there, I'll say, "Hey, write like this person," who's a good marketer, right? It gives some pretty good stuff. Definitely editable, at least. But another thing I was reading today, actually, have you heard of Go Make Things?

00:12:15 - Anthony Campolo

Vaguely.

00:12:17 - Scott Steinlage

His name is Chris. I can't remember his last name now, but.

00:12:19 - Anthony Campolo

Oh, this is Chris Ferdinandi's thing.

00:12:21 - Scott Steinlage

Yeah, that's who it is. Yep.

00:12:23 - Anthony Campolo

Yeah, that's his new course.

00:12:26 - Scott Steinlage

Yeah. Anyway, I've been following Go Make Things for a long time, actually. He's had a newsletter for a long time. That's what I'm referring to. But yes, he has a new course, or whatever he's coming out with.

00:12:41 - Anthony Campolo

But yeah, we're actually going to get him on the podcast as well.

00:12:45 - Scott Steinlage

Oh, really?

00:12:46 - Anthony Campolo

Yeah, scheduled. I think it's for tomorrow, so.

00:12:50 - Scott Steinlage

Oh, shoot. No way, dude. That's the weirdest coincidence ever. Well, maybe I'll just talk about this later. But he was talking about Jamstack and SSG and things like that, and how he took his WordPress site and threw it out the window because he was using a headless WordPress setup for everything. Then he said, "You know what?" He was having trouble with memory, so he said, "Screw this. I'm gonna take PHP." Yeah, he took PHP, the classic, and used it to generate HTML for each view that he has. So he has this index.php file on the server side, and all these static HTML pages mapped in it. It'll determine whether the person's logged in and what courses they've purchased from him. Then the PHP file will serve the correct HTML for each individual user based on that.

00:14:23 - Scott Steinlage

So it's super fast and eliminates WordPress entirely. The other key here is that he uses flat JSON files for everything now instead of having an auth service and database. People nowadays really talk about not rolling your own auth, and he's rolling it, so I thought it was interesting that he chose that route. But basically he said flat files have proven far more resilient, maintainable, and performant than using a proper database. So it's interesting.

00:15:14 - Anthony Campolo

He's been on the whole vanilla JavaScript train for a really long time.

00:15:19 - Scott Steinlage

Oh yeah.

00:15:19 - Anthony Campolo

And yeah, I like his educational content. I don't know if I necessarily would recommend the same exact things to people, but I think it's useful to learn how to do something vanilla JS, whether you're actually going to do it or not in a real project.

00:15:34 - Scott Steinlage

Yeah, I mean, we all know you're not for vanilla. I mean, Redwood crew, come on.

00:15:42 - Anthony Campolo

And I've never really been at a job where I've seen people just write straight-up JavaScript. You know, it's pretty dang rare. Seems like if you're writing a frontend, people write straight-up JavaScript, they're writing a backend, or they'll write TypeScript. But for frontend vanilla client-side JavaScript, the issue isn't so much the language JavaScript as the DOM and all the stuff that goes along with DOM manipulation. Because that's not really the same thing as just writing the language. It's writing code in a language that's interacting with a very specific browser API that doesn't exist anywhere else in programming.

00:16:21 - Scott Steinlage

Yeah, well, I mean, he's using Hugo, you know, but you could use like 11ty or something like that. But he's using Hugo, which is pretty cool. I don't know.

00:16:33 - Anthony Campolo

Oh, that's cool. Because if you just use a static site generator, then that's kind of a nice middle ground because then you're generating a lot of the HTML that way and you're writing the JavaScript more for functionality.

00:16:47 - Scott Steinlage

Exactly. No, that's what he was utilizing it for. Yeah. And he does use a little bit of JavaScript for forms and things like that, just because.

00:17:00 - Anthony Campolo

Yeah.

00:17:00 - Scott Steinlage

The only way he could dynamically do it for the UI to be nice and functional. Yeah, which is cool. So I thought it was awesome. It's pretty minimal for sure. Yeah. I'm curious now. I'm gonna go back and look. I think when I got my first email from Chris was probably a couple, like two or three years ago, so that'd be cool to have him on. So yeah, y'all be on the lookout for that episode. It's not going to be live like this. It'll be a recorded normal podcast. So if you're not already following our newsletter, because we do put out podcasts that we've done in the past or that we're doing in the future and stuff like that, we'll link to them inside our newsletter so you can access them there and be in the know. Anthony writes out our awesome newsletter every week, so go to JavaScriptJam.com and sign up for that if you haven't yet. Also, you can subscribe, or whatever you want to call it, on Apple Podcasts and what else? We're on everything, really.

00:18:15 - Anthony Campolo

So yeah, if you're on one podcast, you're pretty much on all of them.

00:18:18 - Scott Steinlage

Yeah, exactly. Yeah, I like to listen on Apple Podcasts. I don't know, Spotify, you know, they have podcasts, but I never listen on there.

00:18:28 - Anthony Campolo

I always listen to music and Spotify's podcast. I can't stand the Spotify app in general.

00:18:33 - Scott Steinlage

Yeah,

00:18:35 - Anthony Campolo

yeah.

00:18:35 - Jaylarky

I'm just.

00:18:36 - Anthony Campolo

So many of them, though. I've used Apple podcasts, Spotify. I used Overcast for a while. Now I'm using one called Downcast.

00:18:43 - Scott Steinlage

Downcast. That sounds funny. Yeah. Oh, I was a Pandora listener for a long time before Spotify. Then Spotify was the new thing and everybody's like, "Just switch over. It's free, it's cool. It's easier to select exactly what you want to listen to," versus just creating stations and probably never hearing your song. And I jumped on from desktop, actually. I didn't even use it on mobile. Was it desktop first? I can't remember. Spotify.

00:19:29 - Anthony Campolo

Yeah, I think it is.

00:19:30 - Scott Steinlage

Yeah, it was.

00:19:30 - Anthony Campolo

It would have been around the time mobile was starting.

00:19:33 - Scott Steinlage

Yeah. And it sucked because it was really hard to transition — I had so much time and effort put into teaching Pandora what I like. That was the hard part.

00:19:48 - Anthony Campolo

Well, that's why I was like, it doesn't really make sense to replace one with the other. If you want something that's going to allow you to select specific tracks, and you want something that's going to be able to play playlists with new stuff that you don't select, those are two different things. I thought eventually it can learn your tastes to do that, but why not just use Pandora for that?

00:20:10 - Scott Steinlage

Yeah, well, I didn't want to pay for two services, so anyway, I got —

00:20:14 - Anthony Campolo

Yeah, that's the problem — the money. See, this is why I just downloaded billions of MP3s and shoved them all onto my computer. And I hated when all these streaming things came out like, hey, use our thing, pay a monthly subscription. No, I already have all the music I need.

00:20:30 - Scott Steinlage

I know, I know. No, I'm not gonna bring it up, but, well, come on. Like LimeWire back in the day.

00:20:42 - Anthony Campolo

Yeah, LimeWire. Yeah. Yeah, actually, yeah, that was like, okay. But once I realized you could just download full albums with consistent quality from track to track off Pirate Bay, that was the way to do it. Because individual tracks off LimeWire, sometimes different people ripped them and it's different bitrates and...

00:21:03 - Scott Steinlage

Yeah.

00:21:04 - Anthony Campolo

All sorts of stupid stuff.

00:21:06 - Scott Steinlage

Very true. Yep. All right, enough about that. So yeah, I think —

00:21:18 - Anthony Campolo

we're halfway through.

00:21:19 - Scott Steinlage

We're halfway through. Look at that. If you're just now joining us — Patrick JS, I see you. What's up, dude? Welcome. This is JavaScript Jam. We do this every Wednesday, 12pm Pacific. We talk about everything JavaScript-related, web development-related. It doesn't matter whether you're a beginner or whether you've been doing this for a very long time. We love to hear from everybody. So today is just kind of this open-mic atmosphere, which is typically what we have. When we have guests, we love for people to just come up, hang out, have a good time, be authentic. So feel free to request to come up. You can bring up a topic, ask questions, state fact or opinion — anything. We'd love to hear from you. If you're not already subscribed to JavaScript Jam, go to JavaScriptJam.com and subscribe to our newsletter. And let's see, what else are we going to talk about today? Anything else interesting in that newsletter, which by the way is on the Jumbotron, y'all, if you haven't already clicked it up there.

00:22:44 - Anthony Campolo

Yeah. The other two headline stories were TypeScript 5.1. With every TypeScript release, it's always just like, here's 10 things we fixed — we fixed this TypeScript thing that does this TypeScript thing, and I don't understand any of the words they're saying. Linked cursors for JSX tags. Completions for @param JSDoc tags, considering type routes and module resolution. I bet you're excited for that one, right?

00:23:16 - Scott Steinlage

Why, I wonder why you're so short about these things, Anthony. It's almost like you don't like TypeScript.

00:23:22 - Anthony Campolo

I don't understand it well enough to speak intelligently about it. And they're not able to explain the benefits in a language that would make sense to someone who doesn't write TypeScript. Like with Qwik, you can just say "it's faster" and people get that. But when you're adding features that are self-contained within the bounds of a single language, it just becomes very self-referential. So I throw those in because I know they're always a big deal and people should know about them. But it's usually just lots of DX improvements. That's ultimately what TypeScript is — a giant DX accelerator, ideally.

00:24:18 - Scott Steinlage

Yep. Anybody else want to go ahead?

00:24:22 - Anthony Campolo

Oh yeah, if anyone wants to hop up, please do. And I was going to say the other article — speaking of Qwik, I think it was Manu. A couple people on the team have been talking about something that Misko has been talking about since the very beginning, just trying to contrast resumability and hydration and now React Server Components and how these things all fit together. And Manu created his own post comparing hydration to resumability, and he's saying that hydration is a tree whereas resumability is a map. I recommend people go check out the article because there are a lot of good diagrams that explain what's going on. But the main idea he's trying to get across is: where do you need to re-execute when re-renders happen? Do you need all parts of the tree to execute, or just individual parts? With partial hydration you're just having these islands of interactivity. With React Server Components, he defines it as another type of hydration — he calls it sparse hydration, meaning there's a single root that eliminates the need to re-execute server components and serializes into HTML. But with resumability—

00:25:53 - Anthony Campolo

The difference he's saying here is that there is no hydration or walking up components. Instead, the event handler is at the root of the process instead of the component. It removes the whole "everything is a component, you have a root component" idea. It's more about the event handler as the base thing. And he says this helps with efficiency — he throws some big O notation. I'm not entirely sure why this is, but he compares it with operating at constant time O(1) versus O(n) with hydration. People should definitely check out this article. And if we can get someone from the Qwik team on again, or if we end up getting that React versus Qwik debate going, this will give us a lot of fruitful topics.

00:26:52 - Scott Steinlage

Yeah. If you guys don't know what he's talking about — Misko said he was down and so did Dan Abramov. We're gonna have a nice little chat here on JavaScript Jam. We're still finalizing dates, and those are two quite busy people, so trying to get them both on the same day is a little work in itself. But we're excited. It will happen eventually. Stay tuned, get the newsletter so you'll know. You don't want to miss that day. That'll be a fun one. All right.

00:27:34 - Anthony Campolo

So those are the headline features. Yeah. So anything you want to talk about, Scott? Anything you've been working on or got on your mind?

00:27:44 - Scott Steinlage

Oh, on my mind. Yeah, I don't know. Those few things I had talked about earlier were really top of mind at the moment. Let's see.

00:28:14 - Anthony Campolo

How's your podcast going?

00:28:18 - Scott Steinlage

I have one recording. Probably better than none. Ten others I could do. I just haven't had the time to schedule them in. Because with that, trying to record everything in person on video — it takes a lot of time and effort. Anyway, how's FSGM, by the way? If you all don't know, Anthony is also host for FSGM with Chris Burns.

00:28:50 - Anthony Campolo

We just booked our first new episode, and it's going to be almost a year since the last one. We're going to be speaking with Amy Dutton in a couple of weeks. She's the new Redwood core team member. She's creating a lot of great educational content. She was working at Zeal beforehand, and she also hosts the Compressed podcast with James Q Quick. So yeah, I'm super excited for that. She actually had interviewed me on the Compressed podcast back when I was working at QuickNode, and she said that was the most fun interview she had done about Web3 stuff because she was genuinely really curious about it. She was like, wow, this makes so much more sense now. I was like, yeah, that's exactly what a lot of people say.

00:29:38 - Scott Steinlage

Yeah, that's funny. Yeah, I have a Compressed FM sticker right here in front of me and a Learn Build Teach sticker from Mr. James Quick himself. Yeah, yeah. And he was on, what, was that last week or the week before last? The week before last, right? Yeah. Oh yeah, week before last. Because last week I was sick all week. Okay. Yeah. James was on when we were at Render. Render Atlanta was a good time. Still have to do a photo dump there. Too many to think of.

00:30:11 - Anthony Campolo

So many photos.

00:30:13 - Scott Steinlage

Yeah. For real. Awesome. Welcome to the room. If you're new, come on up, introduce yourself. Or if you're old, come up and introduce yourself. It doesn't matter. We love to hear from everybody. Beginner, advanced. It don't matter. Let's have a good conversation. In fact, actually, that's when we get like some of the best conversations and value from these here lives that we do is when people participate. Just come up and have a conversation. Don't worry, we won't force the mic on you. Just have a little fun.

00:30:54 - Anthony Campolo

We will make you freestyle rap, though.

00:30:57 - Scott Steinlage

Yes, absolutely. You have to. Every time you come up and it's your first time, you gotta: eight bars or you're kicked. Eight bars. Here we go. Spit the bars, y'all.

00:31:15 - Anthony Campolo

Oh, yeah, let's not do that. It's dangerous.

00:31:24 - Scott Steinlage

Danger, danger. All right, well, maybe I should just make up a quick rap about JavaScript. Yeah, no, I'm not gonna. Okay. It could be fun and embarrassing. I don't know.

00:31:40 - Anthony Campolo

It'd definitely be one of those things.

00:31:44 - Scott Steinlage

Can't be both, I guess. All right. Yep. There, you heard it. TypeScript 5.1. Yeah. Jetpack AI with the WordPress stuff there for all you WordPress enthusiasts. Yeah, more. It looks like you linked some more React Server Component videos all day, every day.

00:32:26 - Anthony Campolo

Never gonna run out.

00:32:28 - Scott Steinlage

For real. There's so many out there. You could probably just link an RSC video in every single newsletter.

00:32:34 - Anthony Campolo

Unless you're thinking something that could be fun would be to do a special edition JavaScript Jam newsletter where it's like a topic. So do an article for React Server Components and write some stuff about that, and then link to everything I've ever linked in the newsletter related to it.

00:32:51 - Scott Steinlage

Yeah, I mean, why not? Sure. Why not? Absolutely. Yeah. Today is more of a chill day here on the JavaScript Jamsies. The chillest, the chillest, the realest, for rizzles, up here in Jamascript. Jamascript. That's the new framework, if you haven't heard of it. It's called Jamascript, where you be scripting in your pajamas. Like Bob Marley, "We're jamming. We're jamming." Exactly. Yeah. Pajama watcha. Wah, wah, wah. Yeah, that one. All right. Well, y'all are so talkative today. I'm so glad and appreciative.

00:33:57 - Anthony Campolo

Wait, we got some requests, actually.

00:34:00 - Scott Steinlage

Look at that. I didn't see it. That was probably because I'm just a speaker. That's why.

00:34:04 - Anthony Campolo

Let me make it co-host.

00:34:06 - Scott Steinlage

It don't matter. Awesome.

00:34:11 - Anthony Campolo

Hey there.

00:34:13 - Scott Steinlage

Yo.

00:34:14 - Jesse Pence

So I figured I'd chime in. You guys were talking about server components, so I figured I'd go ahead and mention my new video. I did a video where I went through Dan Abramov's server components thing, basically reading it out loud while doing all the code at the same time. Since then, there's a bunch of challenges at the end of the gist where he asks you to create server actions and a way to import client components. I have pretty much done everything except for client components, which is really, really hard. If you want to use any kind of hooks or anything like that, you have to have it all in a whole different environment. It's all about getting it to lazily import once you get it to the client. And I'm trying to do it without bundling, which I think is impossible. But I'm really, really close. I get the client component all the way in.

00:35:17 - Jesse Pence

It's got all of its props. All I have to do is hydrate it. But React is just really tough when you get things that are SSR. It's not even just about suppressing the hydration warning. It's a whole thing. But I think I may give up on the client components and just release a video where I show how to do server actions and other things. It's obviously not as good as it would be with actual Next.js or something, but it's just fun to see how these things can work on a primitive level. Sorry, I rambled a little bit there.

00:35:49 - Anthony Campolo

No, that's great. I think I found the one you're talking about and linked it up top. I like these exercises. I'm really glad that Dan wrote that. I know Dev was planning on going through it as well. I don't know if you ever actually did or not, but I think it's cool. I usually write out my tutorials and articles this way, where you can read through it and then turn it into a video. It's a good strategy for people who want to create some video content, maybe don't have an idea of what to do, or don't want to write a whole script.

00:36:19 - Jesse Pence

I feel like some people didn't like how I read it off the screen. Some people on Reddit got really mad about it for some reason. But I don't know what they were expecting with something like that. I'm not going to completely take it out of Dan Abramov's words — I think that would be defeating the point. It was an interesting thing to try to do. Some people liked it.

00:36:40 - Scott Steinlage

Haters gonna hate, always. And if you're doing something right, you know, if you have haters, come on. I mean, yeah, silly. Yeah, totally.

00:36:56 - Anthony Campolo

What's up? Jaylarky? Oh, yeah, he did some really cool stuff in Astro.

00:37:01 - Jesse Pence

He got the React Server Components working through Astro.

00:37:05 - Jaylarky

Yeah, so I took his thing, and I didn't go into all the experiments or tasks that Dan made, but I did the JSON thing and turned it into Astro. So in terms of compiling JSX and stuff, it's just out of the box in Astro, so it was a bit easier to set it up.

00:37:37 - Anthony Campolo

What was your motivation for doing that?

00:37:40 - Jaylarky

I'm also trying to figure out my mic and stuff.

00:37:46 - Anthony Campolo

You sound fine.

00:37:47 - Jaylarky

Okay, good.

00:37:49 - Anthony Campolo

What was your motivation for using React Server Components in Astro?

00:37:54 - Jaylarky

Yeah, so it's hard to call that React Server Components. The article that Dan is writing is more about how it works, not exactly how you use it. He's like, "Hey, those are the pieces — those are the problems that you need to solve in order to build a React Server Components implementation." It's not exactly what you're going to use in Astro or in your project. So my thing was...

00:38:30 - Anthony Campolo

Though, do you think that it'll ever be something you could turn into something you actually want to use, or is it just a purely educational experiment?

00:38:38 - Jaylarky

Yeah. So I'm actually trying to make a talk about what you should think about React Server Components. Because it's kind of complicated and everyone has their own angle. So I talked with Daishi Kato — I don't know how to say his last name — like, why are you doing React Server Components? And he's like, "Oh, I'm doing it for this thing." And Nikhil [unclear], who's working on SolidStart: "Oh, I'm doing this for this thing." So everyone has their own angle, and Dan Abramov has kind of a third angle. It's a thing that's different for everyone. And my thought when I was thinking about React Server Components was, yeah, it's just like Astro. It's just like the partial hydration thing. So that's kind of how I started looking at it. I can create partial hydration things with Astro components or React components — it's kind of the same thing, right? Not that different, but maybe some things are going to be easier or harder in one or the other.

00:39:56 - Jaylarky

And that's kind of how it works in Astro right now, because you can create your layout, for example, right? So your kind of root, you can use React components for that, but you just don't hydrate it, and it's going to work the same way as if you wrote it as a .astro file. So it just, I don't know, for me, just like playing with it.

00:40:23 - Jesse Pence

Yeah. That's been the best way for me to understand the differences in partial hydration and how the JSX stuff plays, I mean, how React plays into it. Especially whenever I'm trying to get the client components to actually do things and play nicely with the hydration with the server, it's really, really difficult. And I think that is really where the key thing is, getting the tree to all align together with React and the thing. So you can nest components with Astro, like have React and then Astro and then React. You can nest components a similar way, you'd basically have server components that way. But it's a whole different thing whenever you start actually mutating things.

00:41:13 - Anthony Campolo

I thought that was interesting, what you were saying, JLR, about how you already were kind of thinking of React Server Components and Astro as being fairly similar. So I'm pretty sure Ryan Carniato has said the exact same thing, and he was saying how he was trying to explain this to the Astro team and they were super confused. It wasn't until months later that they started kind of getting it, and he was like, "Yeah, see, I told you." And yeah, it's an interesting connection.

00:41:40 - Jaylarky

I think they're still confused. So I did this interview with Matthew from the Astro team, and I basically tried to explain React Server Components to him, and it sounded really confusing. Like, "We don't care about..."

00:41:55 - Anthony Campolo

But he probably gets it at least, right?

00:41:58 - Jaylarky

Yeah, and the consensus in the Astro team is, we don't care. Once this is a bigger thing — if you're looking at the world from Astro's perspective, we have integrations with React, Vue, Svelte, Angular. We kind of have it, we don't care about it. So once React Server Components by itself, as a framework, is important enough to be on that list, then they will add it. But I made the joke merge request of just, "Hey, can we add jQuery as an integration?" Like, where does it stop? How popular does it have to be before Astro supports this integration? At this moment, React Server Components are nowhere near that cutoff. That could change. But going back to that Manu article about all the approaches of how you hydrate things, I always like to think about hydration as kind of a tradeoff between...

00:43:49 - Jaylarky

running the app twice. So if you're writing Rails with jQuery, you're writing two apps. You need to make an app that has a list of, I don't know, flights, and you can sort them. And you need to sort them on the server and then in jQuery on the client.

00:44:08 - Scott Steinlage

Right.

00:44:08 - Jaylarky

So it's like either you're doing everything on the server, but then you're waiting for network latency, or you're doing everything on the client, then you don't have that data showing up when you load the page. So it's always a tradeoff. Do I implement the sorting twice? Do I just give up on one side or the other? Or, in the case of JavaScript, I can write the same component, but I just run it twice. Does that kind of make sense so far?

00:44:45 - Jesse Pence

Yeah, yeah. I feel like React Server Components are still going down the same question in terms of how do you get these two trees to reconcile. So yeah, it makes sense to me.

00:44:55 - Jaylarky

Yeah. And I think Qwik is kind of like — going back to this — running the same app twice feels like the least optimal thing to do. You already did that work on the server. You already have that information. Why do you need to send the same HTML twice for your blog post? Why are we paying so much to do the same work twice? And if you look at React, if you look at Next, they're like, we don't care, it works fine enough. But some people do care. They're like, if I want to do it more optimally, I don't want to run it twice. And I think Qwik is the easiest thing to touch and play with to understand that running the same app twice is not optimal. Writing two apps is the most optimal way, all the time. But what if you automate writing the second app? What if the second app just compiles out of the first one? And it's funny that no one at Qwik talks about it this way — they talk about it as being resumable, which in my mind doesn't make any sense.

00:46:23 - Jaylarky

But this idea of creating a second app makes all the sense for me because, hey, if I have a theme toggle, and that toggle, the only thing that it does is add an event listener, and that event listener will go and create... Oops. Did I get disconnected or not?

00:46:47 - Anthony Campolo

Very good.

00:46:47 - Jaylarky

Okay, yes, I need a more permanent setup. But anyway, going back to that idea — if I have a toggle and I'm writing in jQuery, this is the way I'm going to write it: a script that goes to the toggle as an event listener, changes a class on the body or something like that. This is the most optimal way. There is no way to make this app smaller. I'm writing two apps, but my second app is really small. This is what Qwik does when they use signals — they know exactly how this button and this CSS are connected, and this is the only DOM change that you need to do. I think this is how Qwik works, if that makes sense. When they try to talk about serializing everything and deserializing everything, that's where I kind of check out.

00:47:56 - Anthony Campolo

Yeah, well, that's where it's like, you can have an intuitive explanation that can get someone to have a mental model of what's happening, and then you can have a literal explanation of what is happening in the code and across the server and things like that. So I think that actually understanding the serialization...

00:48:14 - Jaylarky

I don't know if this is my internet or... is anyone talking?

00:48:18 - Scott Steinlage

Are you able to hear me?

00:48:20 - Anthony Campolo

Yeah, I think you got spaced.

00:48:22 - Scott Steinlage

Yeah.

00:48:23 - Anthony Campolo

Someone else talk?

00:48:24 - Scott Steinlage

Yeah. Can you hear me? Jaylarky? Hello?

00:48:29 - Jesse Pence

I hear you.

00:48:33 - Anthony Campolo

Can Jaylarky hear anybody? Is the question now?

00:48:35 - Scott Steinlage

I guess not. He's probably like, "I'm gonna mute myself. Nobody's responding." Poor guy. Okay.

00:48:45 - Jaylarky

I don't know what's happening with my internet. So I'm sorry. What I was saying is that graph that Manu did — it's cool to look at it and see all those green things that are the event listeners or whatnot. Those are like the small apps that they created. You can look at it two ways: 10 small apps, or one app that's lazy-loading different parts depending on what you need. In my mind, instead of sending the whole thing to the client as you do in a regular SSR thing, you're sending 10 small apps that can handle 10 small interactions. The JavaScript load is the most optimal one because it's just the stuff that you need. If you don't need that interaction, it's not going to be sent or running. Okay. How do you see it, and how much sense does that perspective make to you?

00:50:07 - Anthony Campolo

You want to respond, Jesse?

00:50:12 - Jesse Pence

Sorry, I had to put the phone down for a second. What was the final sentence there? I'm so sorry.

00:50:17 - Anthony Campolo

Just like how you think about this whole resumability.

00:50:20 - Jaylarky

The question is, do you think this two-apps way of looking at it makes sense? And do you think that is kind of the best way to think about it?

00:50:32 - Jesse Pence

Because just in terms of how React Server Components actually work, it totally makes sense. You have to have the second layer with the hooks and everything. If you try to put any hooks in that SSR environment that he creates, everything breaks. One of the best ways I had for making client components, hilariously, was to write a file and put it into a folder for the browser to import later on. It's funny you put it that way because it actually was one of the more successful ways I had of getting client components to work — creating each one as its own little module, its own little mini-app, and putting them to the side. But yeah, I think your way of thinking about it makes a lot of sense in

00:51:23 - Jaylarky

a lot of ways.

00:51:28 - Jesse Pence

But yeah, my client component setup has been a little bit janky. That's part of why I'm thinking about giving up on it — it's really, really hard. One of the ways I had working was a Babel transform in the browser. None of this is optimal. I might introduce a bundler, but I'm probably just going to give up.

00:51:52 - Jaylarky

Are you going to do something for like a second article?

00:51:57 - Anthony Campolo

Yeah, yeah.

00:51:58 - Jesse Pence

I'm just going to do a short thing talking about how I solved all of these problems. And with the client component part, I'm probably going to talk about how you need to serialize things, how I'm doing things differently. But it'll probably be pretty short because I'm not the best programmer, obviously, and there are definitely better ways to solve all of this. So hopefully, if nothing else, my video can just get people's brains going in terms of how these problems are really hard to solve. That's part of what I'm going to focus on with the client components.

00:52:38 - Jaylarky

Okay. Now I don't know if I disappeared or just disappeared.

00:52:41 - Jesse Pence

Sorry. But yeah, I'll probably just focus on how hard the problems are to solve more than how I actually solved them, you know, because that's not really the point here. It's not going to be how people are going to be using React Server Components, you know.

00:53:09 - Scott Steinlage

Word.

00:53:10 - Anthony Campolo

Anything else anyone wants to say on the React server components topic before we start closing it out?

00:53:16 - Jesse Pence

No, thank you for having me up. I'm sorry I rambled a little.

00:53:18 - Anthony Campolo

No, trust me, it's nice when it's just the two of us to have other people come up and chat, or else it's just going to be us babbling about whatever and going on a 20-minute ChatGPT rant again or something like that.

00:53:31 - Jaylarky

That's what we tune in for,

00:53:35 - Anthony Campolo

you know. Definitely appreciate having you up here, Jesse. And Jaylarky got kicked by the Twitter Spaces gods, so they're not in your favor. Apparently they did not approve the messages you were spreading to the youth...

00:53:51 - Jesse Pence

[unclear]

00:53:53 - Scott Steinlage

Yeah, looks like we got him back. There you go. Cool. Well, thanks a bunch. Appreciate everybody for joining us today. It was a fantastic conversation, as always. Remember, we do this every Wednesday, 12pm Pacific. And we do have some up-and-coming podcasts, actual podcasts, not just these lives. Million.js we've got coming up. We've got Chris Ferdinandi. There it is. Last name, right?

00:54:27 - Anthony Campolo

Yeah, Ferdinandi.

00:54:28 - Scott Steinlage

Yep. Awesome. So yeah, those to come. And then we also have some that we did at Render ATL that Anthony is hard at work on. There's a lot going on right now.

00:54:41 - Anthony Campolo

I still have the remix episode from Nick. That's the next one that's coming out.

00:54:47 - Scott Steinlage

Nick T. Nick Taylor.

00:54:48 - Anthony Campolo

I'll probably try and get one out this week and then two out the next two weeks.

00:54:53 - Scott Steinlage

Sweet. That's awesome. Yeah, look forward to the Nick Taylor one. That was a good conversation. We had fun, and many more to come, so look out for that. JavaScriptJam.com — sign up for the newsletter. Don't want to miss out. All y'all, thanks a bunch. Appreciate y'all being up here. Thanks for the conversation. Good as always. We love y'all. We'll see you in the next one, Jam.