TMiR 2024-11: React 19 is unblocked, Next 15 is 'stable', Expo launch week. The cool kids are on BlueSky

Transcript from Thursday November 28th, 2024

Carl: Hello everyone. Thank you for joining us for October's This Month in React, where we recap and digest the recent developments in the ever evolving React and web ecosystem come and do live out of Reactiflux, the place for professional React developers and supported by Infinite Red a React Native consultancy, but more about them later. [00:00:18]

I'm Carl. I'm a staff product developer and freelance community leader here at Reactiflux, where I run community programs like events like this. And build some tools to help keep the community operating smoothly. [00:00:31]

Mark: I'm Mark. My day job is working at Replay, which is a time traveling debugger for JavaScript, and outside of that I do way too much Redux stuff. [00:00:38]

Mo: And I am Mo. I head the mobile team at Theodo. I am an active, semi active part of the React Native community. And I organize the React Native London conference and the meetups and sometimes dabble in open source with libraries like Expo and Tamagui. [00:00:54]

Mark: If you're only semi active, what qualifies as active? [00:00:57]

Mo: I don't know. I, I feel like I'm less active than I was a few months ago. Maybe I just need to take a little bit of a break and become reactive. [00:01:05]

Mark: You just ran a conference! [00:01:07]

Mo: Yeah, maybe that's taking most of my energy out of my sails. [00:01:10]

Carl: Yeah, right. I think organizing a conference gives you a little bit of a pass on other contributions. That's a lot. That was a [00:01:16]

Mo: Yeah, it was it was a fun time. Intense, but fun time. [00:01:19]

Carl: All right. Jumping into some quick hits. I'm gonna change up the format a little bit. The last couple months we've had so many new releases that new releases are just mostly part of the content now. But I'm gonna run through some quick new releases with like, no discussion. Just like, this is out, go check it out if you want. If it's relevant to your life. [00:01:35]

Job market: FRED data, Layoffs.fyi

Carl: But job market stuff looks pretty steady state compared to last month. Like, layoffs. 23andMe has laid off a couple of folks. But, generally seems to be pretty stable again. not much to say there. Okay. [00:01:50]

New releases, lightning mode. [00:01:51]

VSCode 1.95

Carl: VS Code they released like every, I don't know, six weeks, something like that. They've got VS Code 1. 95, which mostly looks like it brings out co pilot things. thing that caught my eye the most was you can add multiple files to like a working set, they call it, in the co pilot AI assistant stuff. [00:02:10]

So that seems kind of neat. I haven't used the copilot very much, but being able to say, here are the files that are relevant. Please do this for me. That seems neat. That seems cool. [00:02:20]

Node v23

Carl: There is a new version of Node, Node 23 Which means Node 22 is now LTS Two things caught my eye that seemed neat Biggest one is they now have native support for loading ES modules using Require. [00:02:37]

this seems like a huge compatibility bridge between common JS and ESM, which has been a pain point for like five years, literally since the ES modules were released. So that's cool. It's been experimental for a long time and is now no longer experimental. It's just stable. So that's cool. [00:02:54]

They also added a native, flag to node, the node executable to run your package. JSON scripts. So no longer do you have to do NPM run. Now you can do node dash dash run. Which is just kind of cool. that was like a weird coupling between NPM and node. So like moving that into the runtime just kind of makes sense to me. So cool. Just especially while we have more variation in like runtimes and, Package management [00:03:19]

Carl: tools and whatever. [00:03:20]

Mark: I agree that Node having support for being able to use require to pull ESM modules into CommonJS a huge thing. I think you could do it the other way around where you could import CJS files, apparently. I'm still hazy on that one. But in general, the interop panes between ESM and CommonJS in Node have been the big barrier and reason why package maintainers like myself have had to go through shenanigans trying to get our packages defined and published properly with multiple different artifacts inside. [00:03:58]

As always, the fact that a new version of Node. js has support for this doesn't mean we'll be able to drop that immediately because, you know, the long tail but at least it's a step in the right direction. [00:04:12]

Docusaurus 3.6

Carl: DocuSource put out 3. 6. It's faster apparently. Seems good. [00:04:16]

Mark: Apparently that's because they did switch from using Webpack to using RSPack, which is, it's effectively Webpack. But rebuilt in Rust, so it's like public API compatible. So, an example of a migration path to get faster build tools without having to sort of switch which build tool ecosystem you're in. [00:04:40]

React Navigation 7.0

Carl: React Navigation put out version 7 if you're in React Native World. [00:04:46]

better-auth v1.0

Carl: A project I've mentioned at least once on this show for authentication, BetterAuth, is at 1. 0. They've been doing a really fast, rapid release cycle, I've noticed. like, last month they were on version, 0. 6 and then they did, like, 0. 0. 9, and now 1. 0. So, cool. Seems good. Love authentication. And it seems like a good project for it. [00:05:06]

Mantine v7.14.0

Carl: Mantine put out version 7. 14. Seems like a decent UI toolkit. [00:05:14]

Storybook 8.4

Carl: Storybook has 8. 4. I have opinions about Storybook. I don't use it. But hey, if you do, they are talking more about like testing and stuff. [00:05:22]

Gatsby v5.14

Carl: Throwback Gatsby released version 5. 14. It's out. [00:05:28]

Mark: genuinely surprised anyone's still working on it. [00:05:30]

Carl: Gatsby is still here. It still exists. Me too, a little bit, [00:05:34]

Rspack 1.1

Carl: RSPack put out 1. 1. We talked about version 1 release Recently. [00:05:39]

Angular beat React to v19

Carl: And amusingly, Angular has released version 19, beating React to the punch. Nothing that means anything, but yeah, well, Angular's got a new major version out. [00:05:50]

I saw they're looking to revise their style guide, which is apparently 52 pages long currently. So that's ridiculous. [00:05:57]

Conferences

Carl: Yeah, conferences. Mo, you wanna talk? [00:06:00]

Mo: Yeah, sure. So, we're reaching the end of the year, which means conferences are going into hibernation mode as expected. [00:06:06]

React Day Berlin

Mo: But we've got one more left for you all this year, React Day Berlin. And React Day Berlin happens in December every year. It's a really cool gathering of people. I was there last year and I'll be doing a talk this year with a friend of mine from Amazon, Anisha Malde, about universal React, so it's a, it's a great of React people. [00:06:25]

They have a really cool venue called Cosmos It's a really historical city. If you're in Europe, I'd recommend you come around. It's, it's a good time. [00:06:32]

Carl: And it's on my birthday, so I'm not going. [00:06:34]

Mo: Happy birthday, Carl. Early birthday. Very early birthday. [00:06:38]

Carl: All right, sponsor time. We are sponsored currently exclusively by Infinite Red. They're an expert React Native consultancy that's been around since 2015. Coming up on 10 years, wild. They're our only sponsor in part because very few companies do as much as they do for the React Native ecosystem. [00:06:55]

And so just really happy to be a part of it. Have a earnest collaborator in that kind of way. Yeah, I've seen their name around for as long as I've heard about React Native being used professionally. They only do React Native and have built over 75 apps for companies from startups to like the biggest fortune, whatever companies in the world. [00:07:13]

than being great people who I'm happy to collaborate with, be sponsored by they're a team of about 30, mostly developers, mostly with more than 10 years of experience. And they work alongside your team to help you develop expertise in React Native. So if you are working for a company, spinning up a new product with React Native, and want to hit the ground running, definitely give them a ring. [00:07:36]

Infinite. red is the website. Cool, all right, [00:07:39]

Main content React 19 RC1

Mark: so we actually have a very, very big Big development if you've been paying attention the last few months, we've been tracking that the React 19 release has got delayed because of concerns over changes to suspense behavior when multiple sibling components all want to suspend you know, the change had been made last fall, the community pointed out problems with it, Back in the spring, and the React team said okay, fine, we'll hold on React 19 until we can come up with a solution for this issue. Well, the good news is, that fix is actually done and out as a new React 19 RC. [00:08:17]

Tech writeup of a solution to the sibling rendering issue that delayed React 19’s release

Mark: And the React team put together a very good visual and technical explanation of what they changed and how the behavior works. They're in the GitHub issue link, so I highly recommend taking a look at that. Big picture is that the original behavior as of 18, if you had multiple sibling components that all wanted to suspend, was it kind of acted like a promise. [00:08:40]

all, Where, in one render pass, it would kick off all of them, wait for them all to complete, and then actually show the content. The change that effectively broke things was it would render the first child that's suspended, see it, and say, oh, wait, let's wait for that one to complete, then pick up with the siblings, making it more like a serial for loop. [00:09:05]

And the new behavior is when that first child suspends, It will go ahead and show the fallback, but it will kick off kind of a pre warming step in the background. So like, not like a complete render, but I guess kind of like a partial render, enough to kick off the requests. So that at least the other requests are in flight right away. [00:09:29]

And so the overall behavior should be at least as good as it originally was, if not maybe actually kind of better. In, in some certain ways. So the two key takeaways here are that the, you know, the suspense behavior that people were concerned about has been addressed. It did take them a few months, but they, they did it in a comprehensive way, not just slapping in a bug fix. [00:09:52]

And also that hopefully React 19 final is very, very close. There's still no specific timeline, but they did make the comment that we hope to publish 19 stable. Boy, [00:10:03]

Carl: Yeah, and just maybe to restate what you were saying in different words, so my understanding of like the problem that they introduced and why they introduced it is Like you said previously, it was just sort of rendering all of the siblings before it handled the suspense. [00:10:18]

And that was undesirable because it introduced latency before the fallback would be rendered. It did a bunch of work before showing the fallback. So they wanted to change it so that the fallback would be shown quicker, but caused requests to behave as a waterfall rather than kicking off in parallel. [00:10:36]

It would kind of waterfall shape of your component tree. If you had requests being kicked off by like child components and sibling components and stuff and so now they managed to find like a happy balance where they don't do all of the work of rendering, you know doing the I'm fuzzy on the terminology around like commits and rendering and all that so I can't speak to precisely there [00:11:00]

Mark: someone had a blog post that explained these things. [00:11:03]

Carl: I read that but many moons ago, yeah, so it's a nice Midpoint between what it used to do and what they wanted it to do and now it works correctly. [00:11:13]

So yeah, They delayed it back in June and they now have a fix So, you know, only a couple of months delayed. It's only all year that we've been talking about React 19. So maybe it'll be released soon. moving on. [00:11:27]

Next.js 15

Carl: Next. js has version 15, out and stable. You know, they call it out and stable, but I don't know, it's stable version is like using of the big changes is using like React 19. RC in the apps router, the app router. And so that still feels to me like the proving ground for React 19. [00:11:50]

So calling Next. js 15 stable when it's recommending that you use an unstable version of React feels funky to me. Feels like a, like a workaround to the problem of people don't test, you know, release candidates, so they're just going to call it stable. [00:12:06]

But yeah, I'm not sure that I personally would base a production system off of the app router in Next 15 because it just, because of that, it feels like a beta, beta is maybe too strong, but it feels like they're still exploring. claim it's stable, I don't know what sort of underlying technical issues might cause things to have to be changed. [00:12:27]

Mark: This touches on multiple different aspects that we've talked, at least I think we've talked about previously. One is that, you know, especially with all the server component stuff, the React team used to be able to, pre alpha test all their ideas internally at Facebook, but they can't do that with server components because it relies on having a separate server, and Facebook has all their own server, which is one of the reasons they ended up collaborating with Vercel. [00:12:55]

To be like, they convinced Vercell to go with their vision, but also it conveniently aligned with, we need someone who doesn't have Facebook server infra to let us build out server components and prove that it works. Along with that the app router has always used a pre release version of react. [00:13:14]

Like this. Like, even before they came up with the Canary system, it was using, assorted, experimental, unstable builds. And so, haven't been keeping track of which version specifically, but, I would assume that over the last year, versions of Next 14 have been using, you know, React 19 Canaries, betas, RCs. [00:13:36]

So, if anything, it's, More stable now than it was a year ago. But part of the point was that, the App Writer needs all this new functionality in 19 in order to work. And the whole point of the Canary system was that, well, even if it's not fully 100 percent stable stable as a standalone release, frameworks like Next are able to paper over the rough edges so that from their point of view and from the consumer's point of view, It's stable. [00:14:05]

So, I agree that the versioning system is funky, but it's also not a new thing. [00:14:10]

Carl: Right. Definitely not new for sure. But yeah, if you're doing a little side project, probably fun to play with. If you're a founding engineer at a new company, I'm not sure I would start a new thing on it. It's not sure I would start a new revenue generating entity on it. [00:14:25]

So, yeah, one new thing that they introduced is an instrumentation. js file, hook, I don't know. It's a place where you can plug in to the core, like, network level of the system. Next. js for things like observability and monitoring. [00:14:43]

So that seems pretty cool. I think that is one of those like quiet underrated things that every app needs and that is not always super easy to figure out how to fit it in. In the past, I have done a fetch wrapper that introduced things like performance metrics and observability and stuff. So just having that as like a a framework feature in Next. Makes a lot of sense to me. Glad to see it. [00:15:07]

They also put out a, a form component, which seems like it overlaps with like the native behavior that the native form enhancements that React 19 is introducing, so I'm a little bit fuzzy on like what that abstraction is super duper for, but yeah, it's there. [00:15:22]

Cool. On to TypeScript. [00:15:25]

TS 5.7

Mark: So, the TypeScript release chain also keeps chugging along. I think they do releases every two or three months. And so we're now up to TypeScript 5. 7. There are a couple nice to haves, like checking for variables that never got initialized, like borderline winter. Related stuff, but at the types level. The, the interesting thing from an ecosystem perspective the story around, you know, how TypeScript interacts with module output and file paths has always been very complicated, because it's always been very complicated at the JavaScript level. [00:16:00]

And one of the things that had been kind of a pain point, weird point, frustration thing was that even when you were writing, like, Writing TypeScript files in order for some ES module, you know, import behavior to work properly, your imports still had to say you were importing from a js file in the import path. [00:16:25]

And that always felt really weird. It's like, yes, I realized that's what is actually executing at runtime and that the build output is a bunch of js files, but the file name I'm, but with the file that I'm writing this in is a ts file. Like this, this doesn't make sense. This is weird. I don't want to have to do this. [00:16:45]

And the TS team had resisted trying to make changes here because after the first couple of years of doing TypeScript features that required actual separate output, like enums, they're now very much on board with like, we are a superset of the JavaScript language and the compiler doesn't do anything to have to rewrite the actual behavior of your code. [00:17:11]

But they appear to have actually added a mode that will change import path names. So when you have an import that says import from something. ts If this flag is enabled, it will rewrite that to say import something from a js. It only does this in certain conditions where it's a relative path and not, and not a, like a globally scoped path. [00:17:41]

I, I don't pretend to understand the rationales behind it. I'm mostly just going off the release notes here. So, it seems like a rather grudging Decision to tweak things in favor of better ecosystem interop. [00:17:54]

Carl: this feels very much like stuck between a rock and a hard place in that, like, Now there are more and more ways to run your TypeScript code without doing a full compilation pass, sending it fully through the TypeScript compiler, TSC, It's an intersection of like, there are more ways to run your code without fully compiling it and executing the built output. And there are more ways to, or rather, imports are getting stricter about file extensions and just like, Ooh, oh no, what do you do with that? Those are like incompatible assumptions. [00:18:29]

this seems, I agree, this seems like a grudging, I don't know if I want to call it a hack fix or a band aid or something, but like, just even as they're talking about it in the release notes, it's, I feel like I can sense their trepidation and like angst over, like, you know, like a quote from it is like, you might need to use conditional exports with scoped custom conditions to make this work for like absolute paths, like if you're using, you know, your TS config to, you know, import, you know, structure and not use relative paths and it's just like, Oh no, that's [00:18:59]

Mark: so thrilling, [00:19:01]

Carl: Right! [00:19:01]

It's like, oh god, that's, this sounds like a whole new problem. they're trying to fix a problem. They may introduce more problems. I think this is going to be painful for a long time. [00:19:11]

Mark: but it's there. If you feel you need this. [00:19:14]

Carl: maybe you do. Yeah, I don't know. Anyway, seems, seems rough. V8 introduced compile caching, which allows runtimes to reuse some of the like JIT compilation steps. So TypeScript is taking advantage of that new V8 feature to improve its startup time. They talked about, you know, if you do like TSC dash dash version, it now prints faster. [00:19:38]

So like, that's cool. That's nice. Startup time is definitely a pain point for Node generally, JavaScript generally. And that's nice. Less latency. [00:19:48]

React Router v7 | Remix

Carl: Cool, okay, moving on. React Router v7 slash, you know, the one with Remix. headline, big pull quote, " We encourage all Remix v2 users to upgrade to React Router v7." This seems really neat. I want to play more with this, but I think really playing with it is going to take a lot. I have an app in mind that I want to try and move over. [00:20:12]

It's currently using Remix 1, so I can upgrade to 2 and then upgrade to React Router 7. Woo! Multistage upgrades. Yeah, the big highlight here, I guess, is that Essentially, I think my mental model for understanding this change, you know, Remix to React Router is what was Remix is now Framework Mode in React Router. [00:20:34]

So you can still use React Router as you always have, as just like a library. Or you can use it in Framework Mode, which has a Vite plugin to get more control over, you know, the build step, the compilation, which is what used to be Remix. So it feels like they explored a lot of like API surface area. [00:20:55]

Like, how do we fix this? How do we make this work correctly as we want it to with Remix? And then it feels like they got it, they got it where they want, they refined it to where it was just kind of an abstraction over existing build tools. Like that was the big push to not have like, you don't interact with Remix, you interact with Vite and there's a plugin that is Remix. [00:21:15]

And so now this feels like the next logical step there where like it is truly just an agglomeration of existing tools that you can choose how to use in the way you want. I think that's pretty neat. That seems pretty cool. I definitely want to play with this a lot more. [00:21:27]

Mark: as I roughly understand the sequencing, so Remix itself was originally based on ESBuild, and there was no way to really mess with that configuration. Then they managed to come up with a Vite plugin, which did the same thing. And then the Vite plugin, I guess, became the default way to use Remix. [00:21:44]

And now that it's like, well, at this point, there actually isn't much left that's specific to Remix the framework. It's all in the plugin. And so that enabled them to help take some of this, and take basically all this functionality, back into React Router, the library. And so as you said, there's the client side piece, which has always been there, and then it's like, well, all this stuff that used to be server related, and used to be specific to the Remix framework, is now encapsulated in the Vite plugin, so it's just there if you want to use it. [00:22:14]

Mo: I mean, it's quite interesting because I feel like this idea of, frameworks being almost add ons or plugins to the bundler, whether it's Vite, I guess I've seen this with Vite only, is quite an interesting premise and I think it's picking up a little bit, maybe almost as a response to how Next. js is such like a, tightly It's not proprietary, but proprietary like piece of software where you're like really buying into Next rather than buying into the tools that are, you know, underlying Next. [00:22:43]

And I see that with the new React Native Framework One as well, where it's really kind of, it's a Vite plugin. Everything's on Vite and we're building on top of Vite and we have some extra functionalities that comes out if you want to use it as kind of a framework. So it's interesting to see how this shift from the Remix team has had, I think, probably reverberations across to other, parts of the ecosystem. [00:23:04]

I guess the question that I still have is, why have they done this from a branding perspective? Like, it seems like a lot of brand capital that they probably had in Remix Is, kind of disappearing by going into React Router. Now you could argue whether or not that's good brand capital or not, because Remix has had its fair share of controversies. [00:23:22]

it's an interesting move for me. [00:23:24]

Carl: I would raise, as a counterpoint, That they already captured the brand value because they sold Remix to Shopify, [00:23:31]

Mo: It's a monetary brand value rather than anything else. Like a monetary for acquisition brand value. [00:23:36]

Carl: I think there's a decent argument to be made there. but also like react router has been Around for like 12 years 11 years Literally, like, the original way of doing routing in React. So it kind of makes sense to me to say like, Look, we solved this problem. [00:23:54]

I have been watching them try to figure out where the boundaries are between routing and, like, server and, they've been trying to figure out how to do data loading and, bundle splitting at the router level. For that entire time. So it feels to me like they spun up a new brand to do more experimentation and now got there and then folded it back into the original tool that they've been trying to solve this in forever. [00:24:20]

Mo: the process got acquired, which is a nice payout as well. [00:24:24]

Carl: great bonus. Yeah. [00:24:25]

Mo: Yeah, makes sense. [00:24:27]

Carl: Speaking of Vite. [00:24:28]

Vite v6

Mark: So associated with that Vite version six just came out. And it's interesting because they've tagged it as the most significant release since Vite 2. And yet I was looking through the announcement and the migration guide, and it looks like there isn't a lot that really feels user facing in terms of features and changes. [00:24:50]

Environment API

Mark: Best as I can tell, a lot of this one is on the inside, and it looks like they did a lot of major refactoring internally to enable what they're calling the Environment API. And as I understand it, the idea is that because JavaScript these days is used in so many different ways, it's used in the browser, it's used in Node, in Deno, in Bun, in worker runtimes, that may have differing constraints. [00:25:18]

It seems that the environment API is going to allow you to generate build output targeted for different environments based on certain definitions. I'm still kind of hazy on that part myself. I have seen a number of mentions that things like some of the other, Framework level Vite wrappers are going to benefit from having the environment API available. [00:25:45]

So, seen some mentions here, I don't quite know how all the pieces connect. general takeaway is like, it seems like, a fairly easy upgrade. saw a couple people on Reddit say like, yeah, I just like bumped the version and it just worked. So it might not have an immediate benefit for an application in terms of speed or build output per se, but it does seem like it's fairly foundational for a lot of the framework level stuff that's going on in the ecosystem. [00:26:12]

Carl: Yeah, we definitely agree with that. I've encountered a little bit of that environment pain. Not using Vite, but just like trying to use Cloudflare workers. Trying to do, a worker serverless type of architecture. Definitely can tell that it is, Like bleeding edge of the ecosystem and a lot of the existing tooling is just like not well suited to support it precisely. [00:26:37]

Yeah, just like having an existing, like daemon, existing process that is long lived. It's just a very different set of constraints from a short lived process that Handles a request and shuts down. So, Remember the era of the, of the acronym for rendering? SSG and SSR and ISR and S So, I feel like this environment API to me, it feels like a reaction to that, of like, look, we have all of these contexts in which web pages are being rendered and used. [00:27:08]

And we don't even have a language to talk about it. I guess Vite has, spent most of the version five release iterating on what has then turned into this environment API. It sounds like they introduced it as. Something else the runtime API in 5. 1 and iterated on it, iterated on it, realized that what they landed on was different enough from that, that they just came up with a new name for it and put out a major release. So yeah, definitely looks interesting and valuable. [00:27:38]

And yeah, given how Vite seems to be like the common building block that everyone else is starting to rely on, here for it. This seems like the kind of exploration that is super, super valuable, especially given that place in the ecosystem. [00:27:51]

Mark: Definitely. [00:27:52]

Expo Launch Party

Mo: yeah, let's move on to some React Native land. And interestingly so, towards the end of November, we've had Expo's launch week. This is where Expo kind of bundle a bunch of the stuff that they've been working on and launch it in one go over a few days. it's been quite interesting to see some of the stuff that's been coming off. [00:28:10]

Nothing is particularly a big surprise but it's interesting to see the culmination of some of the stuff being released out to the public. So, I'll go through some of this bit by bit, and we'll talk through it. [00:28:19]

The magic of Expo DOM Components

Mo: So, the biggest thing that the Expo team has been talking about over the last few months, I'd say, is DOM components. [00:28:26]

This idea of how uh, Can we make it super easy to run web based DOM elements inside of a native app without turning the entire app into a Cordova Ionic sort of web view based app? this is controversial at the best of times, I think, right now. A lot of people seem to really like it. [00:28:44]

There's some people who feel like it's kind of a step I think the expo team is trying to take this pragmatic approach of, a lot of people have React web apps, how do we kind of get them to migrate incrementally and introduce them into the React native ecosystem. So, The article that we've linked has some interesting use cases. It kind of looks at the integration of, you know, you still, if you have a WebView based app, maybe there's some cases where you still want to introduce some native functionality. [00:29:11]

So, you know, you press a button, maybe you still want to have a haptic on the native device. So how do you integrate those things together? And make it kind of feel native in some capacity. So it talks about some of that, some of the patterns that you want, and some use cases. So some of the things that have been really difficult to do in React Native is things like displaying markdown. [00:29:28]

Markdown, you know, you have to create your own renderer with native components for it. And it's a lot of work to do that natively. Anyone who's done that will kind of attest to that. And Stuff like that gets really easy because it's a solved problem in the web world. So, they're kind of not saying you should use this for your entire app. [00:29:44]

They're kind of being very, very, very clear about that. thinking of using that in places as an escape hatch more than anything. [00:29:51]

Mark: More interop is always a good thing. [00:29:53]

Mo: yeah, you know, it's good to have that. Now, this isn't something that necessarily is new. Like, you can always use WebViews in React Native. It's been around for probably since the very, very, very early days. [00:30:03]

It's nothing new. There was always React Native WebView as a library. this is just an easier way and a nicer way to do it. And it uses the favorite directives that everyone has now in the React ecosystem, which is the use directive at the top of the file. And you just pop in a use DOM and it kind of works. [00:30:18]

I think we're starting to overuse directives. We should probably stop as an ecosystem. It's just getting a bit out of hand, but that's a different conversation for another time. I see Carl passionately nodding at this. Mm [00:30:30]

Carl: flashbacks to like, I guess it was like ES6 when the use strict directive was introduced. And I just remember the emphatic, you know, like people would say like, Ooh, what if we did this other directive? And I just remember the reaction being like an emphatic, like, No, this is the only directive we're ever going to do. Never again. This is terrible. We should not have had to do this, but we needed to. Never again. [00:30:53]

And so now seeing like, we got like, what, four or five now in React? And they don't even have the same semantics. Like it used to be only at the top of the file and now it's like top of the source file, which is technically different. Not the, and like some of them are at the tops of functions. It's, it's complicated. It's too much complication. [00:31:13]

Mo: I tend to agree with you. I quickly want to touch on some of the limitations to dissuade people from trying to use this for their entire app, so I'll just quickly quickfire those. The first thing is that performance is really going to suffer. Because, you know, when you're running a React Native app, it does have a JavaScript engine that uses Hermes under the hood. [00:31:30]

But for this, you're basically instantiating a new JavaScript engine that will run web code, so that can be JSC on iOS and V8 on Android. And that basically slows down your load time quite significantly. And then if you do want to tackle that, you're probably going to have to have some hacky stuff to preload these components, hide them, and then display them. [00:31:48]

It becomes a mess. So you really want to use this when you have no other options, or, you know, You have an escape path long term to basically get rid of these, these webviews. And then the other thing here is you have to be very, very clear as to how you handle your navigation. Because the worst thing for a user experience is having multiple layers of navigation. [00:32:06]

So, you know, you have your stacks and your tabs inside of your native app, and then suddenly someone clicks a button inside of the webview, and it just adds a new screen onto your webview. And so you've got like two or three layers of navigation. It gets messy. Be careful, think about it deeply basically use at your own risk and think about the consequences of your actions. [00:32:24]

Introducing Workflows: CICD built for your app

Mo: In other things that the Expo team's been launching so Expo launched workflows. This was one of the more surprising things. They hadn't, they kind of kept this under wraps a little bit. But the whole concept with this is so far you know, Expo's got their cloud build tools, EAS build and EAS update. [00:32:38]

So you can use builds to create your mobile native builds. They've got a submit tool. solution as well, which kind of pushes that thing to the App Store for you on Google Play and Apple App Stores. And they also had an update mechanism, which allowed you to issue over the air updates to your users. [00:32:52]

Now, this, they never had a workflow or like a proper CICD tool. So you would have to basically almost run your CICD on another cloud or another sort of CICD tool and then call Expose. servers just to trigger the build or trigger the update. So they've kind of created some very basic workflow functionality. [00:33:11]

It's YAML based. You know, you can run bash commands, you can run NPM commands in it. It has some very basic control flows as well. So if you kind of want to get away from, you know, using GitHub actions for your, for your mobile builds and mobile updates, it's a cool option if you don't want to add that as an extra piece that interacts with Expo. [00:33:30]

It's something to see how they develop and extend over time. [00:33:33]

Environment variables in EAS: new changes to simplify setup

Mo: other unexpected, but this is incredibly welcome news they have revamped the way that you handle environment variable handling within Expo. Now this is something that has been a real pain. I think it's the place that the Expo team probably struggled the most to come up with a good and comprehensive solution. [00:33:52]

Because you've got sort of different layers of environment variables when you're dealing with a mobile app. You have sort of secrets that are stored inside of the app's binary. Then you've got JavaScript based environment variables that anyone can inspect if they go into the JavaScript, so you don't really want to use any secrets or put any secrets within them. [00:34:10]

Then you've got some stuff for your build processes. So there's sort of these like multiple layers of environment variables and they each had different sort of sensitivities or levels of secrecy that you needed to maintain. And so they've centralized all of this in one place. So EAS can kind of manage all of this for you. [00:34:26]

And they've tried to centralize this because environment handle, variable handling in Expo was a nightmare. You had to kind of deal with three different environment variables, like working in a consultancy was one of those things that clients would come to us and be like, why is this so hard? And I would be like, I don't know, there's probably should be a solution. [00:34:43]

One of our clients actually, prior to start a startup, like, like, thought very seriously about starting a startup to solve this problem, and I told them don't, please don't, Expo will probably solve it, and they have. So, it's good. I think it's still to be seen how it bodes in practice, but from first glance, it looks like you kind of define these centralized environments, and they have all of your environment variables in one place managed by Expo, which can make things significantly easier, and you can kind of define the visibility, visibilities as well. [00:35:08]

So this is very welcome, because I think it's. It's kind of long overdue and it's one of those things that was a big pain point. [00:35:13]

Carl: I love that. It sounds great. Sounds like a real problem that needs, you know, sounds like an improvement, but I have never worked anywhere that did not have some kind of pain with environment variables, including on my like solo projects, like currently the, you know, the main app that I write code for. As a stupid, terrible environment variable setup, because like, you know, it's CICD with GitHub Actions deploying to a Kubernetes cluster. [00:35:41]

And so like, I have to take, I can't remember the, I think I put all of the secrets in GitHub. But then they get loaded into GitHub Actions alongside lots of context, build context, that the action provides on its own. And then I have to manually take all of the information that's relevant to the executing code and put that in a secret in Kubernetes and then load that. [00:36:03]

So, like, I'm glad they're trying to improve it. I also just kind of think dealing with secret data is just a hard problem. So, I suspect this may not be the end of it. [00:36:13]

Mo: I don't think it's the end of it. If they make it marginally better, especially, I think, I think it kind of ties hand in hand with their workflows functionality because they needed a, you know, solution to environment variables if they're creating almost a CICD. So, I think it's kind of hand in hand with that, but yeah, the exact same problem, right? [00:36:29]

Like, even if you, before these workflows, what you had was you had the same environment variables, probably in GitHub, and then you had them replicated somewhere in EAS for your builds, and then somewhere else in your, for your updates. Maybe this removes some of that duplication, so at least your client side secrets. are sort of shared by Expo and managed by Expo. I hear your pain with the Kubernetes and backends, like infrastructure environment variables. I've done the exact same thing with GCP and Terraform and trying to manage those and it's not a, it's not a fun ride. [00:36:58]

Carl: Nope. [00:36:59]

Expo SDK 52

Mo: Cool, and last but not least, obviously they also released Expo SDK 52. they say that this is their biggest release ever and I kind of believe it because the new architecture is out Cool. So that is a big, big revamp of everything in the internals of React Native, and they obviously manage a massive SDK with a bunch of different libraries. [00:37:16]

So they've had to make sure all of it is compatible. So far we're hearing about some pains with Expo Go. Some people are having some troubles with Expo Go because it suddenly switched to the new architecture by default. So people are having some upgrades. Issues, but that's to be expected, to be honest, with such a big revamp of the internals and people will need to update their apps. [00:37:35]

Some interesting highlights, just quickly running through these. Expo Video is a new library that's become stable now. So this is a revamp of the old Expo AV library that handled audio and video. They're splitting these out to Expo Video and Expo Audio. And it comes with a whole bunch of cool stuff. [00:37:50]

Like, being able to generate thumbnails, being able to have picture in picture and a whole bunch of other stuff which is, is needed to, to kind of play video in a, in a high quality way in native apps. They've also released a beta of Expo Audio, which is, again, a rewrite, and this is great, and hopefully it just becomes a little bit nicer implementation. [00:38:09]

And then they're releasing a whole bunch of stuff to their file system libraries, their cameras, and so on and so forth, Expo Images getting some updates. So there's a lot of good things. I'm not going to go through all of them because it is a massive changelog. But go and try it out. DOM Components as well, which we mentioned earlier on, is available with Expo SDK 52. [00:38:25]

So if you want to play around with those DOM Components and figure out how you can integrate WebViews inside of your existing app with DOM Components, go for it. Expo SDK 52 is the place to try it out. [00:38:36]

Mark: Sounds like a pretty big deal. [00:38:38]

Mo: Yep. [00:38:39]

Carl: Maybe one day I'll use Expo. [00:38:41]

Mo: I'd love to hear your feedback on it, Carl, because it's quite a nice DevEx. I've had people who've, like, have you, you've built for React Native back in the day, right? [00:38:49]

Carl: Yes. Short answer, yes. [00:38:51]

Mo: it's usually people who have built with React Native or built native apps before, ages ago, and then they come in and try Expo, and they're like, holy crap, this is something. it has that, like, mind blowing effect, so I'd love for you to try it and then come with your feedback. [00:39:04]

Carl: I briefly tried Expo like five years ago, [00:39:08]

Mo: Not the same. yeah, they're totally different, totally different, totally different ecosystem. Yeah. [00:39:13]

Carl: I remember it had a huge constraint of, it felt a little bit like a create react app in that it did a lot. But if you were building a production app, you were going to have to eject from it sooner or later. And the ejection story sounded pretty rough. [00:39:28]

Mo: yeah, ejection was not a fun time. they had a lot of, I think that was the biggest, like Expo had almost a dip in reputation and it was because of ejecting. And so they, they completely got rid of ejecting. You don't eject anymore. You can add native dependencies as you wish. And it's a totally different mechanism. [00:39:42]

So Expo in 2019, 2019. is a very different thing to Expo in 2024. And I'd say they've regained that reputation, which is great. [00:39:52]

Carl: Cool. Sounds good. Yeah. I guess my, perception way back when was like, this feels like create react app, create react app feels like it's dying. This feels like it might die, but here we are five years later and it is totally transformed. Looks really great. This is definitely what I would, you know, were I to try a native app. I got a long list of other things to do. [00:40:10]

New CSS

Carl: Cool. Okay moving on. This is slightly unstructured. [00:40:14]

A Friendly Introduction to Container Queries

Carl: I'm going to frame this conversation around a Josh Kumo article about a friendly introduction to container queries. I don't think I had heard of container queries, but like, I was reading this was like, holy shit, there is so much new CSS stuff that I, that has just not crossed my radar. [00:40:31]

So container queries are basically media queries, but for the containing element. So you can say all sorts of things. not super duper sure what the support story looks like for them. that's basically why I checked out of paying close attention to CSS news is because it was so much of it is like Chrome only, or, you know, not supported in Firefox or Safari. [00:40:54]

And so like, stopped paying attention because so many of the things that looked really interesting and neat were not stable. And if a CSS feature is not stable, you can't polyfill it in the same way as JavaScript. Bye. [00:41:05]

A Framework for Evaluating Browser Support

Mark: Conveniently on that note, Josh also just put out a post that discusses his approach for looking at browser support for various features, CSS or JavaScript, and sort of like his mental model of, how do I decide when a feature works? Might be good for me to actually use in practice. Of course, like it literally, it basically boils down to it depends, but he walks through kind of the process of how he gets to that and the article actually literally starts out according to can I use container queries are supported for almost 93 percent of users. [00:41:39]

Carl: Right, and I see in the, thumbnail, in the, you know, preview image, is 93 percent good enough? And that was exactly my response to that. So, I don't know. it's a hard thing. [00:41:47]

so, container queries just caught my eye as like a great Way to do a great enhancement over media queries because media, queries, you can adjust your styling based on, you know, the size of the screen, based on the capabilities of the device, but container queries, it looks like, I don't know the depth of the capabilities, but the most obvious one I'm seeing right here, you know, the first one it shows is, you know, mid width of the containing element and like, that's great. [00:42:18]

I have had so many responsive. design bugs where, I try to reuse an element in a new context and it's narrower because I wanted to put more elements next to each other or something than I did in the previous one and it looks like with container queries I could Avoid those bugs by saying, if the space this is in is this size, render in this way. Which is a very different, much more powerful method of querying than just the device support. So, yeah, that seems really [00:42:53]

Mo: I'm curious as to when, I think it's still probably in, experimental phase, but I'd love to see when this becomes available for something like Tailwind. [00:43:01]

Carl: Right, and it might, I wonder if it would even be like a breaking change. Because they currently have, you know, SM, MD, different size constraints. Thanks. Thanks. And it feels like they might be able to just modify those to be based on the container. [00:43:16]

Mo: they've done that exact pattern when they like introduced the group functionality. Like, they obviously had like hover, active, focus, or whatever for the different states, and then they just added a group colon active. So I wonder if this becomes like a container dash sm, container dash md, or something like that. [00:43:31]

Like, that would be consistent in my mind, at least. [00:43:34]

Mark: quick Google search says that they put out a first party plug in for container queries back in 2022. And there's something involving an at container wrapper on a parent. [00:43:48]

State of CSS 2024

Carl: I said this is going to be kind of a loosely structured thing, related to this conversation, there was a state of CSS survey, you know, same as state of React, state of JS, whatever, Devographics, Sasha Greif and I was just looking at the list of CSS features and thinking like, wow, I have not used more than half of these. CSS is totally different. And you know, in the introduction to this State of CSS survey shouts out, "let me make a prediction. We'll look back at 2024 as the turning point between CSS classic and new CSS." And that's interesting. I feel I definitely learned and became expert in classic CSS. CSS Classic. [00:44:31]

Describes as like, the build steps and all of that. I had to learn floats and positioning and box model and I feel like none of those things are super relevant anymore. Now it's grid and flex. And so it's just like a whole new set of Primitives that I have not had professional experience using like oh dang cool. Wow shifting landscape know what? I thought was stable land is now totally different just really [00:45:01]

Mo: I the one that always, like, that winds me up that I learned about a little while back, that was just like, What? Why does this exist? But it's also very impressive that it exists. Is, like, the mathematical functions that you can use now in, like, CSS for calculating values. Like, power of, square root, logarithms. Like, how do I, what case do I have where I need to, like, calculate a size based off of a logarithm in CSS? Like Cool, I'm glad it exists, but I can never imagine needing to use that. [00:45:30]

Carl: we do some funny layout logic and on the Reactiflux website. And yeah, you can do that. the font size is based on the viewport width, for instance. [00:45:41]

Mo: but would you ever use a logarithm based off of that? [00:45:43]

Carl: Hey, maybe if I wanted to, you know, nonlinear scaling, [00:45:46]

Mo: Yeah, maybe. Anyway, it's quite cool. [00:45:48]

Carl: I don't know. Wild. [00:45:49]

Mark: big picture metaphor. I think what's come into my mind is that it feels like it's a little bit like the ES 2015 spec where you could do a lot of stuff in JavaScript prior to that. And a lot of stuff in ES2015 was effectively syntax sugar for stuff you could do before. But there were also a number of things in ES2015 that required support at the language runtime level, like proxies, that simply could not be done before and enabled virtualization. [00:46:17]

A whole lot of new functionality from there. So, you know, I, I know that CSS is not like a strictly versioned spec the way that, you know, the JS language is at this point, but I think that's kind of the, the metaphor that we're going for here. [00:46:31]

Mo: yeah. [00:46:32]

interesting. Complete side note before we move on, but since we started with this, Josh Comeau his website is like one of the most beautifully designed tech websites I've seen. Like, I say this every time I look at it, I'm like, wow, this is beautiful. He's done a phenomenal job with this website. [00:46:47]

Mark: Josh is amazingly talented, he is an amazing educator, his blog is wonderful, I can vouch for his courses without having looked at them because I see the care and effort he's put into his blog post. So, highly recommend all of Josh's stuff. [00:47:00]

Carl: Very, very true. [00:47:02]

Framework betas:

Mark: Okay, moving on a little more quickly, a couple different frameworks and pieces are in beta. [00:47:08]

RSC in Expo Router is now in Beta!

Mark: One is that the Expo router now has support for server components. And Mo can probably talk a little bit more about the actual implementation nuances here, but big picture, it's a big deal because it's server components coming out in any framework other than Next, and more specifically within the React Native ecosystem. [00:47:29]

TanStack Start beta

Mark: And then as sort of an inverse of that, Tanner Linsley's 10 stack start framework is now in beta, and it's a deliberately non server component framework for now. Tanner has said he will look at adding some server component support down the road, but his argument, and he's made BlueSky within the last few days, is that he feels server components are actually of very limited use. [00:47:59]

and really much less flexible compared to a server function concept architecture for managing data. So he did just do a talk about and kind of advertising some of the features at React Summit New York last week. I looked, if you check out the Git Nation website, the video is available for people who have, you know, paid up for the early access to the videos and it'll go public sometime in the next month. [00:48:27]

Mo: Just to quickly touch on the exporouter RSC stuff, So it is very much an experimental at this point, it's beta. You can't even host it on a production server, you need to do it locally, so it just means you're basically testing it out in dev at this point. It was previously just on Evan Bacon's machine, and now it's on, you can have it on your machine, which is quite, quite cool. [00:48:47]

But yeah, like the cool thing about RSCs and React Native is that you're rendering native components under the hood. So you almost render native views, native texts, native images, and you almost do a building block of components through an RSC that is then rendered natively, so it's not web views or anything like that. [00:49:03]

So it's very different to the DOM component stuff that we talked earlier, which makes it very interesting. Still very early days, but we've seen really cool demos of this over the last year at React Conf and beyond. [00:49:14]

React Native 0.77 RC0

Mo: Picking on the React Native terrain, very quickly, React Native version 0. 77 has had its release candidate, which is very quick after 0. 76. This is a very small release. Expectedly so, after the massive release that was the new architecture becoming default. So, just some quick things. Swift templates for iOS. [00:49:35]

This is taken away from the Objective C base of code in the internals of React Native and making it more Swift based and more modern, which is great. They've done some improvements on tvOS integration, which is great because tvOS has kind of been one of those platforms that's been in the shadows and not well supported. [00:49:52]

And there's some general better performance improvements specifically when dealing with animations. So there's some minor improvements, but nothing super major and not a whole lot of breaking changes. [00:50:02]

New List dropped in React Native

Mo: Now, speaking of the new architecture Last month we had the release of the new architecture with 0. 76, and we're already seeing some interesting stuff coming out of it. [00:50:12]

So, Jay Meistrich, who I've known for a little while now, actually released a completely new list component for React Native called LegendList. So, Jay maintains a few libraries called, like, LegendState, another state management library, and I think LegendMotion, which is an animation library. And he recently Created a new list, and now he, he claims that I inspired him to do this at a talk that I did at React Advanced, which is very flattering, and I think he's giving me way too much credit and I definitely don't deserve that, but basically the, the whole concept is with the new event loop in React Native, you can kind of synchronously call on layout events. [00:50:50]

Which you previously couldn't with React Native and so this is a JS only implementation as a list and it seemingly, on first glance, outperforms FlashList and the FlatList that comes default with React Native so it may be the quickest list in the React Native ecosystem right now. A lot of people are very, very excited by it. [00:51:08]

Jay is quite good at performance stuff because he spent a lot of his time as a game developer back in the early 2000s basically. So, he was dealing with a lot of very, very, very low memory and low CPU devices. And I guess he kind of knows this stuff decently well. So it's going to be interesting. [00:51:25]

He's released it to public, so you can go and try it out right now. But it's still to be seen. He's adding more and more APIs as we, as we speak. So it's quite interesting. [00:51:33]

Carl: Super cool. Mo, I'm going to challenge you on that because if somebody tells you that you were an inspiration, I think you should [00:51:39]

Mark: Take all the credit. [00:51:41]

Mo: I just did a talk. It was nothing special. [00:51:44]

Carl: Ah, that's pretty special. [00:51:45]

Twitter -> Bluesky migration

Mark: All right, and our, our last big item for this episode is, is not directly tech related, but it is, because React is more than the tech, it's the people in the community, and, you know, we, we spend time talking about conferences, but, you know, we, we get a lot of our links and keep an eye on things from, you know, historically, from Twitter, and Twitter has been where, you know, most of the web dev community has chatted and interacted online for the last several years. [00:52:11]

And without going into, you know, some of the, the political or, you know, aspects behind it Twitter has declined a lot in the last couple of years. And there's been various waves of people saying I'm done with Twitter and I'm leaving. And the main alternative that a lot of people had gone with was Mastodon. [00:52:27]

But Mastodon's always had sort of that, like, I'm a Linux user and I know how to set up everything myself kind of a vibe to it. And there's been an alternative to Twitter called BlueSky, which had been invite only for a while. I believe they opened up to public signups maybe about a year ago. But it always felt very niche. [00:52:48]

And really the main thing I knew about it over the last year was that Dan Abramov, after leaving Facebook had gone over there to actually work on their web and native apps as, as his day job. Well, there has been a massive migration of the greater web development tech community from Twitter over to BlueSky really within just the last month. [00:53:13]

And I mean, there's, there's been lots of other. Twitter communities that have moved over there black Twitter, football, Twitter, basketball, Twitter, science, Twitter, etc. And feels like, to me, like one, in the earlier era of Twitter where it was people talking rather than just bots or big businesses. And two, the, you know, just the general atmosphere and sort of discussions that are, that are happening. [00:53:43]

So, a lot of people from the React community have signed up and started being very active over there. A number of people have specifically deleted their old Twitter accounts. As an example, Seb Markbaga from the React team. I believe actually nuked all his old tweets, and moved over to Blue Sky. I think Dan Abramov's Twitter accounts are, are, are gone at this point. [00:54:09]

So a number of people are doing the Scorched Earth thing, and like, wiping out all their old messages, which I'll be honest, as someone who has always depended a lot on, you know, archiving the web and, you know, linking to external discussions makes me sad because I hate to see historical discussions and tweets and artifacts go away. [00:54:33]

Having said that, as far as the community goes, I personally am feeling Like Blue Sky is probably where I'm going to put my posting energy going forward. There is, there's a lot of people there. It feels like the community is self sustaining at this point. And it's where a lot of the discussion is happening now. [00:54:54]

Starter packs: ericclemmons/awesome-starter-packs, stevendborrelli/bluesky-tech-starter-packs Bluesky Directory A complete guide to Bluesky 🦋

Mark: One nice thing is that Blue Sky has these things called starter packs, where anyone can just make a list of people they recommend on a certain topic. And it makes it very easy to follow some or all of them. At once. There are directories of starter packs out there. there's a question about whether BlueSky is kind of related to crypto related things. [00:55:13]

Technical debate over how “decentralized” Bluesky actually is

Mark: there were a couple good articles talking about some of the technical implementation differences at the server level between Mastodon and BlueSky and like how actually decentralized things are. Loosely put, BlueSky is semi centralized, but it's possible to run your own server and own your own data, somehow. [00:55:38]

So, big picture, a lot of folks who are from the React community are no longer active on Twitter, and they are now active on BlueSky. [00:55:47]

Carl: Yep, can confirm. Definitely saw a massive shift in the last, like, month. It's been notable. Yeah. Definitely a lot more people posting out there, yeah. [00:55:57]

Web Without Walls | React Universe Conf 2024

Mo: because of the crypto question, if you're interested in how the BlueSky backend and like the decentralized nature of BlueSky operates, Dan Abramov did a talk at React Universe Conf about this called Web Without Walls, so I've just shared that and that gives a pretty comprehensive, it is a 40 minute talk, but that gives a pretty long and comprehensive discussion about what the nature, the decentralized nature of BlueSky is. [00:56:22]

Quickly to add on this, actually, BlueSky is a universal React Native app. So it uses ExpoRouter and it's basically using the same code base for web and mobile, which is quite cool. And you're seeing something in production that's being used by, as we speak, 17, 18 million users now, which is pretty [00:56:40]

Mark: They reached over, like, 21 million a couple days ago. okay. So I'm clearly off of the uh, off of the numbers. [00:56:47]

There was about a week and a half where they were adding about a million people a day. [00:56:51]

Mo: React Native London Conf, we actually had the and Sam from the BlueSky team. Dan now works mostly on the AT protocol stuff, but Sam works on the mobile app and the web app. They are talking about it. This was while they were getting a million per day. So it was quite cool to see them there talking about some of the stuff that they're working on. [00:57:06]

It's a really cool team, and it's a very small team that's building this, which makes it all the more impressive. And it's super cool that they can take on the likes of a certain someone who's multi multi multi billionaire who's trying to create his own community. So, you know, pretty cool. [00:57:20]

Carl: Yep, it is super cool. I could probably talk a lot more about it. I have opinions on this. And I've been thinking about the need for data portability and the benefits, the potential benefits of decentralization in the context of social media for most of a decade. I'm actually considering if I want to try and do a business effort based on the underlying data that is BlueSky. [00:57:45]

I think that there's a lot of opportunity to iterate on the UI layer of social media. And if you have a common public data set, that's a lot easier to do. [00:57:53]

Mo: on that Carl, the current BlueSky app was not the original BlueSky app Which makes it all the more interesting. So Sam created his own BlueSky client It was better than the original BlueSky app because he could use it with the AT protocol And then they just hired him and made Sam So it kind of shows that like, with this decentralized nature, anyone can make a client and sometimes it'll be better. [00:58:14]

Kind of like the, what was that Reddit client that was better on, on iOS back in the day, but then Reddit shut it down? I forget [00:58:20]

the name. [00:58:21]

Carl: of them. Apollo? [00:58:22]

Mo: Well, [00:58:23]

Mark: all, all of them, yeah. [00:58:24]

Mo: all of them, but Apollo. So yeah, similar story, but the decentralized nature helps with that. [00:58:29]

Carl: It does. And also the BlueSky client is both a universal React native app, and it's also open source. So I've seen a bunch of React and web people, like not just posting on BlueSky, but what they're posting is their experiments building, you know, iterate changing the UI of the client they're posting from like, Oh, wouldn't it be great if we had Markdown support in BlueSky? [00:58:51]

Look at this proof of concept that just hacked [00:58:52]

Mark: We're splitting [00:58:53]

Carl: a PR. [00:58:53]

Mark: the notifications tab into subtabs. [00:58:56]

Carl: could talk a lot more about this. We're already 10 minutes over and. Still need to do the lightning round. But yeah, okay, Blue Sky's great. Follow me. [00:59:03]

⚡ Lightning round ⚡

Mark: Alright, lightning round, go! [00:59:06]

Deno v. Oracle: Canceling the JavaScript Trademark

Carl: Deno vs. Oracle. We mentioned this a while ago. I think two months ago. Deno opened a petition to ask Oracle to release the JavaScript trademark, and this is a follow up to that. Seems neat. Seems cool. Love it. They are like formally asking Oracle now. It has moved on from just a petition. [00:59:27]

Two ways to the two Reacts

Mark: Next up, an author named Bobae Kang has written some good articles talking about the mental mindset of React at a very conceptual, architectural level. And has a good post called, The Two Ways to the Two Reacts, which kind of contrasts Next, where everything is about the server first, versus something like a tan stack start, which is client first, and then optionally adding in the server. [00:59:52]

That's not an abstraction, that's just a layer of indirection

Carl: Another one. Great post that I love, called, That's not an abstraction, that's just a layer of indirection. [00:59:59]

Mark: True that [01:00:00]

Carl: Just generally true, like, end of, end of comment. [01:00:04]

React Anti-Pattern: Stop Passing Setters Down the Components Tree

Carl: Related, while I was looking for, you know, doing my final pass of resources to pull in I've seen this anti pattern kind of blog post called stop "passing setters down the components tree" and, agree. [01:00:17]

That is a wonderful example of not an abstraction. If you're just passing the set state setter down as a prop, you should probably do it differently. [01:00:26]

Mark: something something dispatching actions. [01:00:29]

Carl: Aha. What Redux? [01:00:31]

What is HTTP/3?

Carl: Yeah, I saw a neat post from Cloudflare called, What is HTTP 3? That made me go, whoa, I didn't know there was an HTTP 3. So yeah, that exists. It's something about QUIC. And I think it's related to, like, I don't know. It sounded like the promise benefits. They sounded very familiar from what I remember reading about HTTP 2, which as far as I know have not really been realized. So Seems like a new attempt to edit something something UDP, HTTP 3. [01:01:03]

Leaked Vercel v0 system prompts

Carl: Someone posted on Reddit that they managed to exfiltrate the system prompts for Vercel's V0 AI UI generation tool. And that's cool, that's interesting. It looks like this was not, you know, any weird black hat stuff, like they just saw something leak. and managed to continue prompting the AI until they got the full system prompt. [01:01:25]

So this is output from the AI, which means it might not be real, but it does seem approximately correct. You know, Must write valid JavaScript code that uses state of the art Node. js features and follows best practices. Does not use the components. You know, so it's like massive, massive prompt. [01:01:44]

I think it's an interesting, you know, peek behind the curtain. This is what the wizard looks like kind of [01:01:50]

Mark: And today's example of why I do not want to spend the rest of my career writing prompts. I want to write code. [01:01:57]

Carl: What's the difference? [01:01:59]

React Scan to highlight component renders (by the author of Million.js), which he used to point out Github’s code view re-rendering on every scroll

Mark: Alright, a couple perf related items. Aiden Bai, the author of the Million. js React plugin for performance, I guess. Recently put out a new tool called React Scan, which can be used to identify, you know, components that are over rendering in your app. I glanced at the source code for 30 seconds and saw that it's messing around with some of the internals of React's Fibretree, and as someone who has spent a lot of time messing around with the React code, And React's internals in the React DevTools. [01:02:28]

I have a sense of how this is probably working, and I approve. In fact, he actually used it to identify that GitHub's current source file display, which is based on React, was apparently re rendering all the lines every time you scrolled. And he even managed to identify, yeah, like, here's the component. [01:02:46]

And here's like the prop that needs to be memoized in order to fix that. And a couple hours later, some GitHub engineer actually fixed it. So that's a step in the right direction. [01:02:56]

What’s Next for the React Compiler?

Mark: On a similar note, Satya from the React team just did a, just did a, an update talk called what's next for the React compiler talking about some of the upcoming features they're thinking of working on that would hopefully further improve performance. [01:03:10]

Carl: Very smooth. Unrelated, non smooth transition [01:03:14]

Framer Motion spinning out as an OSS tool (Motion), and conversely GSAP is joining WebFlow

Carl: Framer Motion which is a React animation tool. Uh, Is spinning out. It is no longer under the Framer brand and it is no longer React specific. Uh, It's just an open source tool called Motion, which seems cool. Framer Motion is definitely something I've heard about a lot for doing like complex, advanced animations and whatever. [01:03:37]

So yeah, it seems cool. Love it. In the inverse direction GreenSock animation platform, GSAP, was acquired by Webflow. Love it. Love seeing open source tools get money. The maintainers do a lot of work and they deserve to be compensated for it. So yeah, super happy to see that. [01:03:54]

Mark: This feels like that, you know, that classic line about there's two ways to make money. Bundling and unbundling. [01:04:00]

Carl: Yes. 100%. [01:04:03]

Mark: One library leaves, another library joins. [01:04:05]

Carl: Right, every company is either a bundling or unbundling play and here we go. Here's two examples. Well, all right Thank you everyone for joining us and sticking with us all the way to the end. We will be back Well, actually we will not be back on the last Wednesday of the month because the last Wednesday of December is Christmas and we are Not recording on Christmas. I am so sorry. I'm not sorry [01:04:26]

But yeah, we so we will be back recording at the end of December probably that Monday TBD Or back in your podcast feed as soon as we can. Yeah, thanks so much, Mark. Yeah. Always [01:04:37]

Mark: nice too be here. I'm very much looking forward to a nice long Thanksgiving break where we'll probably mostly be hacking and Redux stuff. [01:04:43]

Mo: yeah, it's always a pleasure to be here. Um, Lovely chatting with you all and loved getting into blue sky shenanigans this month, so we'll see what next month has in store for us. [01:04:52]

Mark: Thank you for the behind the scenes bit on that. I did not know that they'd swapped clients. [01:04:56]

Mo: I'll hopefully share the recording once we have it live and everyone can hear the story from the comforts of their home. [01:05:02]

Carl: Cool. All right. We gather sources from this week in React, bytes. dev, react status, Next. js Weekly, the React. js subreddit, here in Reactaflux, and directly from people publishing articles, mostly on BlueSky. If you see anything newsworthy, definitely let us know by posting it in the Tech News and Reads channel here in Reactaflux, or send me an email. [01:05:24]

I will read it if you send me an email to hello at reactiflux. com yeah, I read everything. I will read it. If this is a show you get value from and want to support, best way to do so is by submitting a review and by telling your friends and coworkers about it. Help them get as smart as you are about React. [01:05:41]

See you next month.