A first look at Remix 3

which is kinda nifty, meaning that every single, a simple, it's a code based router, so there's no more file system based routing.

a lot of the all of this stuff is Yeah.

Do they update reactively? Sorry. Kerfuffle? That that's it. There's not reactive. That was the biggest kerfuffle.

And that will not retrigger listen.

any framework these days.

a wired

I never thought that would work that well. Our house was full stack framework look like if we were to design it from scratch today? I'm partially

workarounds

You can compose them together, which is really funny because I like that. Which yeah. Something similar to, like like, a shad CSS or something where they have a whole designer on staff, so they're actually gonna look good. It's all based on HTML, CSS, obviously. They have a full server Yes. So, what I'm showing on screen right here is in the ecosystem right now is that React has a lot of custom APIs. And if you want to do anything in the React way, A Scott of the frustration

different approaches

Here. You can here's your request.

foot guns or worth talking about, given their track record. So do you wanna get into sick picks, Wes? Alright. Sick pick. I'm going to sick pick my dishwasher.

you'll want to check out Sentry at sentry.i0/syntax.

this is a config based routing. It there the all of these routes are named, meaning that you would you give each one a Node, and you could each one could have, like, a get and a post and and whatever. So it's in Dena. It works in BUN. It works in CloudFlare Workers. Right? It works across the board. So everything that they've they've done has sort of, like, gotten rid of safe mode or or any of these oddities.

And and I think that's their target audience JS, like, a lot of people who who think that React is just too hard,

out of the because that's how that's how Svelte five works. Again, sorry, folks. I'm gonna say it in this Node, but they have a reactive variable primitive. You get,

either install something or you have to the whole thing rerenders, then all of that code at the top of the function also rerenders.

And just, like, I I was unable to keep up with it. I have seen

And will I like the, like, data being stored on an object? state, and you don't have to use a specific package that adapts to this. Yeah. You bring your your own data store and then just pass it the render method.

a third party library that has some events, but you wanna add your own on top of that, you don't wanna overwrite them, but you wanna you wanna listen to both, but maybe you wanna stop propagation so it doesn't bubble up.

It's ESM all the way down. So, like, they didn't mention anything about

because it it you have to be careful about renders in React. I think it it becomes an underrated API. But, just to refute I mean, like,

to to update for you, you know, Wes it's actually reactive

the function reruns every time. You have to then consider

interaction logic Signals, which we'll talk about that.

it JSON. And then when loader, whatever, what I'm Mhmm. So let's talk about the component model. So the components in Remix three are written in TSX or or JSX. They don't have to be similar to how you don't have to use JSX in React, but Yeah.

it JS l l m first. It can write this code very well. I I was doing it this morning. I don't know that this was specifically made for Shopify, though. I think I was wrong on on that regard. I bet Shopify will use it, but I I had thought more that this is Shopify needs something.

convention that ends up becoming the way. Like, remember with Deno, they were like, no package dot JSON. And then what we we ended up having, like, a depths dot t s or whatever it was that basically functioned as a a package dot JSON. Right? Like, where the community JS just like, okay. Well, we need one place to put this stuff. I do love the idea of,

probably, like, 1.5

is that type safe? modern versions of other frameworks,

or they do things so that they are fully type safe all the way But

So Yeah. And the browser API is not gonna shift on you. Like, if React comes out with a new version,

example, they released this, like, SDK the other day, and they had an example with, like, a date picker.

I don't know what all my routes are when you're looking at a massive folder structure. Right? Yeah. And when you have a routes file and you see it all there, I really liked that in React Router in the past. I did really like that Wes it felt very like, I had a total handle on everything. Because, yeah, you get nested directories, directory you know, you you can really

React gets into these weird loops of things, or grab the context, your initial player.

then I have to go ahead and dispatch So that's kind of their to the rest of my application? Right? Do you have to pass things down? Is it all is it down via props? And and now you can just simply import that tempo tap event fetch episodes. And what that does is it hits the syntax API,

on that router that just like the Internet's always chugging.

the dishwasher, I recently switched my Wi Fi routers, and I now have

early, very rough, and a lot of this, there's just not examples online just yet. So that's you end up rerendering too often, or you have something way up higher in a a context tree, and then you wanna access that lower via context, and you have to rerender which is wild, with a demo on it.

of what is happening.

Yeah. And they just created a custom event called a tempo tap. And the logic of how does a tempo tap fire

LG or something, right, LG or something, just started leaking all over the floor,

And the sort of the thinking behind that is that So, TypeScript There's also a whole bunch. I'm not gonna go too much into it, but you can also compose, So they they were teasing this idea of, like, iframes

the speed test on the router. I was like, is this running, like, the full mesh mesh speed test, or is this running from this specific

Holy smokes. That's great.

their demos are using Wes build, for a two pack. Oh, that's cheaper than a box of Ethernet, Corey. You would've spent more,

Deno file system based routing. I gotta be honest. I think there's

this spec, which, again, is a really good thing because it's built into the engine that data comes back, we are simply In Remix, they're all using this idea of abort signals, which is something that's built into the platform. So if a needed some sort of framework And very likely, I think everyone's just gonna be using Vite with all of this stuff. They didn't explicitly come out and say that probably because they wanna say, like, you can use whatever you want. If you wanna make your own weird Yeah. Bundler, splitter, custom APIs they do have are are very thin layer on This is a class called podcast player, and it extends tooling in the talk.

at the end of the day. So an LLM is very easily around this type of thing.

are they building something here that can both make you're not using Node streams. You're using web streams, which, of course, works in Node. It works times the cost of, like, a an LG or whatever. But, like, let me tell you. We got we have a Samsung, a brand new Samsung outer cottage, and I've had that thing pulled out probably five times. I replaced parts on it all the time. It's so frustrating. Ruined our cabinets and then you can access all of the items and and ESLint it. This CSS, though, what they're doing is very similar to Svelte Wes they're they're just generating a class an event target, which which may or may not be an HTML element.

It's got a whole component model built in. It has a router built in. They're building an entire, running the wires.

this Sunbeam MoCA,

of, some code on the page, and

Yeah. Yeah. We'll see.

that have different strengths, and Yeah. You might, like Ryan and the React team on Twitter. I have seen some of that conversation.

element in general, right, Ryan was talking about no build, like, the entire time. You know? Like, just use ESM. You don't need, like, live reloading. You don't need any of this blah blah blah.

But this is just, like, if they need to be custom. Right? You can you can fire off custom events from and you get, like, a quick snap judgment. Oh, it looks like React with extra steps. You know? That's that's what I thought, but I didn't say it. I'll say it because I'm smart. So first of all, Remix three is State is simply just variables.

components that stuck together, and and here they are again doing it, but now with with with events.

yet to be seen. Yeah? Will the community come up with a React form that works with React 19 whatever,

So I think Ryan did a lot of work on, like, the actual front end side of things. And then Michael, Remix was a LLMs You can listen for things in here as Wes, do exactly what you want. Yeah.

a MoCA device.

fully thought out. So that will not reactively update. You have to explicitly routes and, like, pattern match on top of vanilla in the past, but they've never been, like, amazing. It's usually just because I'm I'm building an app, and I I need a little bit of extra stuff on top.

in most of these frameworks,

a lot of truth to

if you're running Node like ES build to actually conference. And, basically, what they did is they showed us what Remix three is going to be. So No build. I thought bringing your own those specific things. So in in React, you might need to, like, have some sort of cleanup function or you might need to to cancel it or or use something else.

it right now. Yeah. Tooling. So I remember you mentioned it's JSX.

and I've written my own,

One thing, frames.

All sorry. All of the Wes details can be sent over a URL.

there's nothing from stopping you from bringing in your own data store run this dot render. And what that will do is it will update

But it's also very nice dishwasher. No complaints there. But Bosch is where it's at. I'm gonna say pick like, first glance, feels a little over, but, like,

in your application and it's just going to work. There's no weird oddities where, oh, I gotta stick this inside of a useEffect, and I gotta memoize it. And Right. I gotta I gotta have a ref for this thing. You Node? Like, if if you want to remember something,

I I really the ability to have, like, a wired backhaul

as a new full stack framework that has has nothing to do with React other than down there. And when we have Ryan and Michael on, we'll be sure to ask them.

have to call render every single time something changes, but

with their new APIs. But, like, the web platform's not changing, folks. It's it's getting better, but, you know, it's not changing.

of these these runtimes.

Yeah. It's all standard space. Nailed it there.

getting a, like, a, what, saving $400 on a dishwasher and buying a very crappy one. It's not worth it.

why people were like, this is the way. You have to rerun the whole function. Like, that makes no sense to me. Yeah. And it's funny because, like, this is not a a weird API either. It's, like, the only difference is it's just you return a function instead of returning JSX. That's dope. Shout out to Remix. It just works. Yeah. So big fan of that. Now let's talk about probably the biggest idea here, and that is this, like, whole ESLint space architecture. So The back end, web streams, web requests, web response, fetch,

API,

And if you want to like like, back in the express days Wes you you wanted to, like, be like, oh, well, the dot PDF on the end is optional, or it could be dot PDF or dot CSS, and, these guys to build cool tech.

They had some interesting talks from Shopify templating kids' stuff.

fine grain reactivity who knows? Try it. You might be that bird who ate a cracker and liked it meme.

tucked away into its own interaction. And all of the code as to how that happens is is tucked away into this thing called an interaction.

if you Node a new dishwasher, full speeds.

And then probably the biggest refreshing the new URL pattern API, which, again, this is a brand new the

but then there was also a reactive state primitive.

inside of it for all of the that's the firing off of it.

But this is just e s m at the end of the day, whatever tools you wanna use

like, React developers

all the way down. And so anything that can output ESM a lot of these JavaScript frameworks today will say, okay.

It's all LLM ready, which is something that I predicted, meaning that when that The reason I predicted that is because I thought that Shopify I I think, like like, one more thing is that, like, this stuff whatever you have to do to make it, like, multipart and all all of that fussing is is taken care of for you. So I'm pretty excited I Wes you are kind of learning a new framework. Right. You've Scott you've gotta call render. That's a new framework to me. Yeah. Yeah. That's a different type of concept. It's it's a tricky thing, but, like, this maybe this will be the other, like, side of the coin is that, like, There's an app, which is a bit odd, but it's kinda nice because you can ask Google how long is left on the dishwasher cycle. That's pretty sick. Yeah. It's got the quick 60, any Node baggage that maybe you had, and now it's all using these brand new APIs or not brand new, but these new standard web APIs that that work across, features, which I am a huge fan of because I'm I'm a huge fan of vanilla, component library of information about what happened. You know? Like, event dot current element of or whatever element you click, that's that's baked into to JavaScript. But you can also just the whole tree or not even browser Bos, JavaScript My dishwasher A frame Remix are things that are built into the web platform.

the syntax back and forth between,

So I asked them after them. So, like, like like, what were you using there? Obviously, you you had some some bundler running to run this code.

top that Yarn either very easy.

I don't know about you, but you collect these things that you just end up rewriting on every project. I'm, like, trying to formalize those into a package, for myself.

So events in JavaScript and I know a lot of you know this, but events in JavaScript are not just the baked in ones. You can make your own custom events. Imagine that. And those events can also

My thoughts are that it would be nice if that was

And I saw the data log in, and I was like, I'm missing this dot render somewhere.

is simply just called once, maybe you have to stick it in a ref so that when that function reruns, you're not overriding it. No. It's just it's just variables. It's variables and properties and events all the way down, which means

The syntax to me, in in in in Svelte, context is great for those reasons, but it's not type safe. So, like, you're, like, been casting when you put stuff into That's all I want. That's all I want out of

And will I like this more? killed itself and and no longer Wes I can't believe it's gonna get banned. Unalived itself. Yes. Yeah. Oh, okay. Cut all that out. It finally on short runs. And all of the runs in our house are short enough that they fall into that. So I was so happy where you're trying to import their CSS because you don't use the same bundler as them? You Node, like, the OpenAI's used TypeScript My prediction. So, previously, my predictions were and I thought I would go through them. I would say that it's an LLM first. I I was predicting.

before in the morning, My only concern is, like, will I like the manual I wanna get your thoughts on that before we dive into a little bit more of that. What are your thoughts immediately? most likely, the most common one is like like a fetch request.

directly, Michael said, but all of the APIs are built on top of this, Ethernet over, like, over power or Ethernet over coax. I'm like, like, yeah. I bet it's a pain. Node doesn't work as well, but you're you're getting a an event, which is a JavaScript primitive, which is a browser primitive, being an an event target. So you wanna Node up your own thing.

all of the things that happened when that rerun like, if a variable changes, just update the stuff that affects that variable. Exactly. Can have side effects that watch for that variable to change, but, like, why you gotta rerun the whole thing? I never understood

the ID was is always gonna be there, and then it maybe the forward slash edit will be optional. You Node? Like, this very complex And then in the actual UI, the component part of of your Remix application, you simply just So this doesn't have anything to do with databases in terms of, like, a difference between, like, a Laravel or Rails, but it does provide a lot of, like, nice helpers for common things that you're gonna do, like simply just uploading files. If you have a file object Most people will will be doing that. And I was really happy to see that because that what that means is that,

I got

methods that are built into the browser.

I find it very easy to debug. Just being a couple hours in, it's easy to debug and to understand how everything works. Yeah. I'm caught between the world of loving a ton of magic and loving no magic. The constant seems this has nothing to do with Remix. This is simply a class that you could boop boop boop into the box, and it would kick out like a a Shopify theme. I don't know that that Interesting. You have an async operation, JavaScript now has a way And that is a new Remix API called create event type, Mhmm. And then a frame can be client rendered, can be server rendered. It can have a fallback. So if if it's taking a little while, you can show a loader screen or you can decide not to.

that extends event target, and I've added a whole bunch

lose track of that stuff, I think. And it also made, like, nested layouts really easy, not in Next. Js, obviously, but made nested layouts in any sane system. And,

when that initial thing fine with that just because I understand how it works, but, also, it's very an event, It's it's yet to be seen. I'm not quite sure. Is the will the manually rerendering get annoying? Will people simply just put If you if you wanna store some data in

And I always we had, you know, the two two little kids, and I was just like, you know what?

a, like, a button or any HTML Yes. Yes. Oh, it's it's type safe all the way down.

this component. I'm not sure if it will rerender it all the way down the tree,

there's there's a lot of great stuff. So, like, I I often get frustrated when people are like, React one. React is it. That's the only way to do things. It's like there's there are

like like, abort, died after crank out React all day long. And in some regards, React has won because of that. So The server itself has a bunch of, like, handy methods for common CRUD operations. So to add reactivity

and over coax.

I did it first with my own, like, personal little CSS framework, and now I'm doing it with, like, standards based Svelte components. But custom events, totally underrated, man. I've been using a lot of custom events, and I love that stuff. So

dead Scott simple JavaScript as well as I understand when when you don't have to know how some weird thing works because it's just I don't know if I wanna some variables, and then those variables are then scoped

fire off a whole bunch of custom data with your event, and anybody who wants to listen to that can. Yeah. I love that. I love that. Custom events, man. Yeah. I, I've been building a handful of utilities myself and custom components and stuff I use on every project.

in their own events. So in this case, they built a drum machine as their their sample.

you have to wait for, you know,

Remix three, it's full stack. Like and and I mean, like, fully full stack.

will I like something more, which my favorite right now is, like, what Svelte has Wes you just create a data store, import that thing when you want it, export it where you don't want. You may compute it. That's that's a very good

And My most controversial web dev opinion, and I don't even know if this is controversial,

blank files in my directory structure Wes I simply just import the component and then export it right away.

So I've been we were very happy with this thing. I I installed it the other day, uses the platform, meaning that all of the features of

Again, we've been using this tool for a long time, and it totally rules. Alright.

endpoint? And it was that endpoint. So, like, they didn't call it an endpoint, whatever they call it,

everything in in Remix is based on

So we

is is nice and context dot whatever, and you you have access to all of your types all the way down.

And we have so many things, like,

for me to use it. That's fine. A lot of the features are just, like, I'm gonna go ahead and

Yeah. I had my buddy do the same thing because he was just like, guys, I cannot find a dishwasher. What did you end up doing? It's like, we we wanted this fancy brand.

it was really sad when it was, like, during COVID and you couldn't get a Bosch dishwasher. It was, like,

Right. Because they don't know. They're tired at you. Like, I have I had a couple examples, and I clicked it, and nothing happened.

Like Yeah. Yeah. Yeah. So

about all of those little ideas that they have are Yeah. Because they are fed up and frustrated

whatever that router was. So, yeah, man. MoCA. Sick.

It lasted a long, long time, and it finally, a child component, which is just a function,

These things change all the time. Between this

and then you can access it

I don't care about this and it Wes, like, ruined our hardwood. Wes actually has been to our house. We had to, like, resurface our entire floors.

old or something like that.

React framework.

is that, I like, I saw all the Remix stuff, and I'm sure Yep. I, like many other people, saw the remix stuff and were like, okay. That's happening.

if you think about let let's peel this back. If you wanna think about on Friday, and all all of the stuff that you would probably expect from, like, a this dot render everywhere? And and this is what it was for. It was Cool. Imagine doing it underground. Deno. Thanks. Alright. If you've got questions about Remix, put them in the boop boop boop I think that was to sort of tee up this whole, like, is based on

Oh, Bosch. We bought a we bought a Bosch at our at our old house and was great. In our new house,

if you want to post to a specific endpoint or you want to get from one, That doesn't really seem to be the case. You can Node this stuff with no build. But but, really, like, I'll say it right now. There's there's TypeScript.

2.5. Yeah. You know what? I did not

I'm saying they don't want it to relearn a new framework, but, is type of. You Node? You have to check if it's a specific type, and it's kind of a pain. So route URLs, I find myself Wes I hit those complex route URLs, I'm simply just adding multiple we'll see. I I don't think we're using the URL pattern partial rendering of different parts,

a tremendous keyword. Yeah. I don't care about that. I'll take that all day. Yeah.

Ryan and Michael were the guys who popularized the idea of high order functions make things a little bit easier. You Node? Like, every time you have to, like, send HTML

gigabits

nothing is reactive. You simply just when you want to explicitly render, you call this dot render.

And it's been reincarnated Good luck.

it could be a web component. They showed many examples with web components. You can bring a library for for whatever you want, events is probably the biggest one that we have here.

You don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on to century.i0/syntax.

you can do that.

specific knowledge. Right? You know? Talking real quick about CSS, died. So we bought pretty much the exact same one. This is a we got a Bosch 800 series, to this like, I was sitting there watching this being like, I Yeah. There's that's a reactive data store, and then you can you can listen for all of those things. So what is really cool about that is had, I don't know, probably, like, four hours on stage, and they still didn't get to

And now I got 900 up and down from that router,

CSS can be done any way you want. However, they do provide a built in CSS prop, scrubs the dishes so super well. There's three rows. It feels like somehow there's more space And so it's gonna be fast as hell.

and and listen for it on each of them.

Cool. Well, that's, that's really exciting, and and I'm I'm happy to hear that it is so standards focused. I I had full, faith that those guys would really put out something

the events as well. So if you have at one point. It's just not worth

just because

in the browser and you send that file object from the browser to the server, on the server, it's a file object, and it's the exact same thing that you would you would be expect to have. And You just took my next point like, in React and React Vercel components, you have an asynchronous component that may take take on doing this, like, asynchronous components that shouldn't necessarily and but they also don't wanna have to relearn And Michael said it's just ESM And and when the data in that data store changes or or when anything happens to your application,

yeah, I'm I'm interested to to learn why and, like, what it is and how it works and the reasoning behind it all because I am Hell, yeah. You know what, folks? We're in a new world of JavaScript frameworks. I can just imagine there's gonna be comments about LOL, another JavaScript framework, yada yada yada. Anytime we talk about anything new. But, man, let's face it. Like, it's it's like these things the the browser APIs have gotten better. We've learned a ton of lessons.

being the way to share Node, and a lot of handy helpers for things that you commonly want to do, like stream in files.

on the server, or you could do it you could do it at at build time as well if if it's like a static site. But very likely, you're gonna need It seems to be that you'll be able to do a lot of this, ad event listener But still, like, rerunning a function. Right? Scott, like, updating It's not. Yeah. It's not. It's not. That's that was a good question. So one of the things was I have this function here, and if I put some code at the top of the function, e. Yes. Our house is 20 years old, and it's it's cat five, which you can get 10 gigabits This is their own of, like, composable

like, meaningfully abstracting it because, like, that's context in Svelte. Yeah. So, like,

to the component itself.

things. So that that way, when you're when you're firing off events or listening for them, you you know exactly what type of data you're getting. Because if you've ever and and the reasoning behind it in four hours, and then you just have one screenshot

Yeah. That's great.

on that event.

side to it as Wes. So And I think that this is more of a Shopify just JS cares about tech. So they're just funding mutations,

should we should we get into explaining how it all works? Let's do it because I'm curious. I'll tell you what. There's so much happening.

the function doesn't because I didn't have to re fish.

you're not sure. Should I wait for this component, or or should I show, like, a a rendering screen? So it seems to be the same idea JS now in in Remix with this idea called frames.

which our old one didn't have. We love that feature where it's like, I just need to run, like, a quick load, and I don't I wanna wait around for two and a half hours. So I gotta be honest with that that, that that quick load feature is, like, really super handy. Like, there are there are so many times when your dishwasher does not need a full cycle. No. Like, straight up. Yeah. No. Very rarely. If you especially if you're, like, rinsing most of the crap off your plates

push and pull. Yes. For sure.

that were on your And a lot of those features or almost all of those features have moved back into React router.

like that approach. So

Get this.

explicitness.

and Ripple

all the way down.

that's just that's so far, all the events stuff I've been talking about, that's just JavaScript. Right? So the Remix stuff is is based on that. It's it's built on top of custom events. So

And,

local first packages, like like Deno sync or whatever Whereas, like, the the difference there being

Very good.

you don't have to use a specific of custom methods onto that. One of them being as a response from, like, a web response. If you ever used a Cloudflare worker and you have to return HTML, you know, like, oh, this is annoying. I have to set the headers and everything like that. Like, just little convenience methods, sticking things in context ESLint awesome. I love it. But the the only downside is that it it sucks for for having to trigger those cascading re renders.

there's a bunch of handy things for working with file uploads as well. Like, it seems like it's And if you have not done that before, I encourage you to look into dispatching custom events because it's really nice. What you can do is Yeah. You can make some sort of, like, data store.

But they said not that kind of signals.

years or 23 contain payloads or you can compose your adding that episode to state by saying this dot episodes equals Spread it. Yeah. I I don't even need to spread it. I don't even know why I'm spreading it. That's a reaction. Push it. I could just push it. That's how far I good. I've got my brain rotted by react state because I immediately went to spread it rather than just using and, it's it's better than the one that we had, the Bosch that lasted before. So So that's, like, a a quick run. I know that wasn't quick, but that's a high level look at the whole ESLint space architecture. We'll get Ryan on here to maybe do a better job at So this gets around that by can be used, as long as as long as it can bundle it output. So

One day. This is, like, the eighth thing I've looked up this week that doesn't exist in Firefox. So

explain everything The You know? And, like, is it better And it was Please.

some amount of time. It's server rendered a synchronous component that maybe it needs to fetch some data and then render out and kick it out. Right? There's all this, like and Svelte has this now as well with their sync components where, hold up the the rest of the website. I love the name. Yes. It's a it's a great name. I still have to like, a lot of this code was, like, like, very We put this in because somebody should be able to ship a Remix component, and you should be able to import it, and it should just work. There shouldn't be some weird thing. Like, how many times have you ever tried to import a date picker in React, and you have to do this weird dance and then you can say this dot

And by all means, but it it was in an era where, like, we we are eating, JS, like, a unique class, and then the CSS applies. I was I would I thought they would maybe use Scott CSS. It's not there yet. They're using the platform. Yeah. You think that's why? Yeah. That's why the Svelte team hasn't done it either. I I like their that like, when that is, like, fully available, it doesn't it doesn't exist in Firefox at all. So

I've been watching his GitHub, and he's been cranking out a lot of these, like, tiny little standards based packages.

a fantastic is is run. And then the actual

or things you have to consider

Welcome to Syntaxuty. We're talking about Remix

in terms of, like, excellent framework options. Solid JS, like,

use effect or or have, like, I wasn't sure if they were were joking or not. And it it turns out they were kinda half joking. So

And I just since I like, a nineteen nineties house, you best believe there's coax in every single room of this house. They're like, you need Yeah. You're gonna need TV in every room.

to specify

in my network. But I don't have Ethernet throughout my house, and,

And it's what was it? Like, a 100 and I'm looking at it right now. The one I got is a $130 receives a URL, spring for a Bosch. It's like a little Node thing I forgot to say is the routing prevent default API.

something like BUN, Deno, or esbuild, and Node So if you have a variable and you throw it into your JSX somewhere, That button itself can also dispatch events, to just regenerate it. You're gonna need something on the server full stack in this regard as well. Now you might be saying, okay. Well, how do I now surface into the example because there's no way to simply just import import the CSS is is rerun when the render is called. So that's really nice Wes you don't have to do some weird Oh, yeah. Okay.

Or if you're using any of your your local, and add event listener, you know there's all this BS around, if you here we go. This one here, remix dot handle. You pass it a generic of podcast player, there isn't necessarily a Remix way of of doing most of this stuff. So you can bring a library in from that meaning that it's it's the same code that you would write in a Cloudflare worker. It's the same code that you would write in, like, a Deno JS.

This stuff works.

of time in terms of, like, how many

cut edges, being taken care of.

Nope.

in JSX. I'm just gonna say JSX. And and when I say that, I mean, obviously, using TypeScript t s t s x. But then all of your tools that use compile the stuff on the fly. Like, you have a Wes, and and it's written in TypeScript, but you need to, like, bundle it Wes somebody sends a request. You're gonna need esbuild

So that that's it. You know? We got all these tools. Bring your own. Yeah. Yeah. Don't make me learn a new concept

I love that. And the reason why they do that is they have to use this the keyword this, which a lot of people groan that initially, myself included.

And they simply just copy pasted all of the CSS Yeah. Built in. It's called the URL pattern API.

that is above the return in a component, you simply just create all of the runtimes.

Scott. All of the stuff is built with browser based, Okay.

we we didn't have a working dishwasher. I'd been washing them by hand for months.

method that I've created.

but

able to to generate code that looks like this because it's not a lot of custom the have the LLMs be able to understand and and crank it out by this dot context dot get.

very explicit, whereas, like, you probably saw some of the screenshots and were like, ugh.

Namely, what happens is, like, for example, I'm showing a fetch episode you can give that abort signal to Remix, and it will simply just call it and abort that fetch request if that's that's what you want. So, yeah, again, just another example of using the built in, that you can also do nested CSS inside of. So if you do wanna bring your own CSS or you wanna put your own CSS in via a prop like this because you're some sort of weirdo, I I quite honestly think that this is not a good way.

this component. And, of course, you can you could do other things like, little abstractions gone.

Mhmm. You can simply just put it on or or or TSX or JSX, they will just automatically work. So all of your linters, all of your formatters, all of your editor tools, a step further than than most stuff is going to be. You Node, we've always talked about, like, where's the Rails or where's the Laravel of JavaScript? Or will I, to do something like Svelte Wes Svelte will just figure out which parts

and

to be seen, but I hope so.

bring your own whatever you want.

Yeah. Shout out to Bosch.

call this dot render when you want your component to rerender.

and Shopify was saying, like, we have thousands of routes, and we don't even know what our routes are. And,

where you want it. But then if you're just defining normal variables, they're just variables.

first of all, I'm comfortable in

I love that. Man, context is

this state or this custom functionality do it you have to make some weird useEffect or or whatever. And So in this case, you just go into

And

Another thing is you can you can, like, wrap up like, a Deno or something like that, but then it's also it also is connected to your your front end.

You know? I don't like that. And there's there's no magic in any of this Yeah. Which I like a little bit of magic, but, also, I I like a little bit of So, component, like, maybe fires off a fetch request and then it's unmounted, which is a custom event that I've created called create list updated.

the server side is they're just it's just vanilla JavaScript,

waste

And and then a lot of Yeah. Yeah. And a lot has changed since React has has sort of been rolled out. So they kinda, like, peeled it back and said, like, what would React context, Those things just work. AI is really good at at writing JSX at the end of the day, so there's no, like, new custom templating language that you're gonna need to learn.

I've resisted saying Svelte this whole time. But the thing that drove me to Svelte in the first place was that there is no there is a Svelte ecosystem, but it is the web ecosystem. I can drop in

return JSX. It returns a function Function. That returns JSX. So meaning that all of the code inside of your component

We'll just shell out for the fancy dishwasher. It's the only one we can get right now. And,

There's TSX for templating it out. There's not a custom which, again, it's just a a thin layer on top of dispatch event that allows us to have fully typed, you can simply listen for them. And if you don't want them to bubble up even further, you can stop propagation. You can use the event default, It doesn't use any specific Node. Js APIs. So if you're using streams, explaining all of it, but I wanna move into some of the other parts of Remix as well. Yeah. Do it to it. Signals. So they they said Wes have signals, and everybody got really excited.

for a oh, no. A $119

a new three. I went to Remix Jam, which was their conference in Toronto a well, it's it's it's only rerendering as well. Right. 60 is plenty.

us dummy developers happy, but also rerendering?

type safe context,

it's no more React. It's this brand new thing that they've thought up. It's full stack. We're gonna try to explain all of the little bits of it today here. We're not gonna go super in-depth. Like, Ryan and Michael like, a like, a component you can simply just fire off events, and those events will bubble up to all of the parent elements. So in the past, I've I've made a hockey game. And whenever whenever anybody scores or whenever the score changes or whenever the players change, you can just fire off events saying, like, the score has been updated. The players have been changed. And then and then other parts of your applications that necessarily care about those events happening, And I'm pretty excited about it. So

So I have one gigabit network. These go 2.5

for that. And very likely, it's gonna be most people probably just be using Vite to kick out ESM at the end of the day. Yeah. Yeah. For sure. For show. For show. Routing, the entire framework. So I'm not gonna get into every little little bit of it, but I do hope to sort of explain to you the angle and the ideas behind it, and then we're gonna have Ryan and Michael on in a coming episode to to talk a little bit more about, like, why do they do things and and what are the what's the component model look like and and why x, y, z? You Node, all the all the nitty gritty. So just JS, like, like, a background, whatever you want. And and they're not the first one to do this, but, like,

gigabit.

native

via coax. And I was in the basement, which is, like, the furthest away, worst router.

standard web Wes and web response,

through. And if you want to see all of the errors in your application,

with the state of the React ecosystem.

And then you get into this weird thing where if you add event listeners in there or something like that, totally out to lunch on this. That's that's what I'll I'll I'll encourage anybody listening. You probably people have written mean mean comments already in the replies anything. I didn't see. Of but, like, it's very Yarn. Like, I can't imagine them trying to event target. Right? This is

twelve months to get one or something, so we had to go with a different brand. But Did you get you got a Cove, though, didn't you? Those are amazing.

the which they go up to 2.5,

and and then just listening for changes on that data store and and passing it this dot render into the Yeah. Into the callback. So somebody already hooked it up to to x state.

Yeah. But we paid for it. Oh, yeah. They are amazing.

wired with Scott five

my mutation push. Mutating state is not a terrible thing, folks. No. It's easy.

Yeah. I'm giving it a big old thumbs down. Yeah. You can, but it's there. And and I think the benefit of that, they said exactly that we didn't put this in because we think this is how you should do CSS.

just a web API. Right? And and Svelte has done a fantastic job at that.

running on your server.

And and Remix, as you know, it is essentially

any DOM manipulation library and not have to worry about a wrapper for it. So Exactly.

a lot of the features like, I'm just this morning, I was just going through. I had to literally take the demo off of the CD And what a Laravel or what a Rails would would do is they would provide a whole bunch of helpers

You don't gotta create new state every time. Yeah. So

So questions or concerns? twenty one

Yeah. Yeah.

let's talk about the server. So all of that was simply just the, like, the front end UI rendering part of things, but this is a full stack framework.

Sometimes you want to,

just because the coax backhaul, no problem. So It works that well. Hey? I always thought, like, templating language that I thought they were gonna have. There's full server support for all of it. So you're very likely gonna need some sort of build tool, which I was relieved to see. Yeah. I I listen. Build tools don't bother me, so that doesn't crush me. Standards based is huge plus for me. I really refuse to use anything that's just abstracting the platform these days. Just Another question JS, when when render calls it, it's rerunning that entire function like React?

and this thing is freaking awesome, man. It just, like, syntax here where you can listen for, like, something on document or something on player. In my case, I'm listening for a player. And then you listen for specific events like a space Bos event or, in my case, I'm listening for a list updated event. So when the player fires off a list updated event, then

we have for our our mesh network, I now have a fully wired backhaul, that is, like, or developers really buying into the entire function needs to rerun on every rerender is such

And then you can simply just go ahead in your UI. So the event target code, that's kind of like the logic and the the state whatever. You wanna bring your own reactive data store to this. You wanna bring x date. You wanna approach to to data.

the speeds were so good. I did not trust

those elements, you can you can listen for events on. Right? You can grab a button. You can listen for a click Benefits of standard. I wanted to to press on this a little bit of is that you can bring your own has a URL, and all of the data for that URL can be can be Scott.

that state of this dot episodes has been been mutated. But because it is not reactive, they gave us a CD,