Remix!

it via the module export using links.

Because delete fetches are happening and run them in parallel and that's really really good because it,

the HTML would be inserted into the DOM. So yeah. Cool. Yeah. But Remix tries to handle, like, less things for you. Like, it's not trying to handle Too Many Things For You. And I think that's, like, kind of a a kind of a part of their methodology.

we And with Remix, you don't necessarily have to do that. You can still do that. In fact, that's the way we do it in our course. We And it does kind of like, the same kind of, like, view slash Svelte version.

Cash a page per client, meaning per person that visited visits that, you can or you could, you could put a CDN in front of that CloudFlare or whatever, and then Cloudflare would cache that thing for however long. And that's beautiful because that's these type of things? Because this it feels like

Just because they are of the web API. And if you just use You fetch some data.

And you could do one of your favorite things is it does nested routes as well. Right? Yeah. You can do nested layouts and nested routes, which I do do love.

in it. And I'm not sure if it will be added or if that's an issue.

you can Scott just said, you can return headers

If that episode does not exist in the API,

What else do we have here? I was gonna we're gonna have, like, a part here where we talk about differences between Next. Js and Gatsby and Svelte and and all that stuff. And I think that can probably be its own show, you don't have to pick and choose pieces

so I don't know if it's just causing, like, a fast refresh and the platform's faster what? But,

like, a fetch request goes wrong. A catch boundary is, like, if you want to, like, throw something. So here's a good example. In our tutorial course, But you have also if you export Having all this separate separated code concerns.

is for uncaught exceptions, right? If there's a bug in your application, something in your reacting renders weird or breaks. Correct. We have those in React. But what what's a catch boundary? Is that when, that's the web API, right? That's a standard what can happen in a lot of React applications is you Patch is a is a big one. Is there other ones? Post, get, put, patch patches what we were missing. Patch is used to update or replace.

threw

I think the one thing I will say here is that,

they're different beasts.

you throw an error, You catch a boundary. You throw an error, you catch an error. Right? Oh, yeah. That that makes sense.

static site generation

how does Remix handle CSS? Well, it it just does it via the links just like you do with the web browser. Yeah. Right. You have a CSS file. You can link What did you find there? In my experience, You're updating the file by the time you tab back over to the file that's been updated. Okay. So whether or not that is hot module reloading or any of these, like, fancy terms for the technique that they're using do it. I found the auto reloading. Whatever is baked into the platform, which to be honest, I don't know what that is, worked very good. So, yeah, I never had any concern. And what I found needed about this was, like, the HTML would be there too. It wouldn't just be the, You write your code primarily, at least right now. This isn't going to necessarily be evergreen, but let's to say right now, you write your code in React.

And so I checked I hit the API

Right? They're they're kind of keeping it open ended, At the same time, there's these conventions that this is how you do it. Right? The easiest way right now to change Is to literally create a new re remix project and drag and drop the files over.

We checked we we'd built like a syntax website.

saying the episode does not exist, And then that's going to hit the catch boundary. So you think you throw an error, a specific type, whether that is a 404 or whatever, request. Okay. So you have your action. You also have headers, which you can return any HTTP headers. You're caching a route or anything like that, you can straight up your return your headers by export

what is it? Use the platform,

What about hot reloading? I I saw that that was not a thing,

Yeah. Remix isn't they don't have their own CSS system. You're writing CSS, and you're linking it. You handle scoped CSS by linking a specific file to a specific route. You know, nothing crazy there. Right? It's not doing anything into the CSS itself. Oh, okay. I see. I see.

Nice and easy. Right? choosing to deploy some way. You kinda have to have that worked out ahead of time. When you first start your project, it asks you where you want to deploy

I it's funny because when I was doing my course on this because, SvelteKit also has the concept of loaders. And so I was like, load versus loader versus loading. Like, I I wanted to make picture. I said the right thing here. So in in Remix, you have the function is loader. So if you do export to let loader,

analogous to that where you have that's your get request. We also have the post put delete whatever request. It's it's so funny because we say all of those things, right? Oh, it's the the post put.

Is that it is a git request

And then we also have the you specify the build directory, you specify how that build directory is deployed. And so, like, Netlify itself has kind of like a, a little bit more complex of a platform to deploy to. So because of that,

So let's talk data loading. We we mentioned this briefly. There's this whole module API where you export slug for the episode

throwing an error state, but also

Then you have this function. And now this function can be used for a lot of things, but the the key thing about this folder is really that the or this this folder. The key thing about this function

on this route. So if you're doing a server git request on this route, it calls this loader. So you can do things like

querying a database, hitting an API, And then just returning that data as props and those will be available in the component.

means that you can literally write

where your data is being fetched, and your data can be fetched

It understands what it is. Yep.

the actual, like, UI gets gets rendered on out. And it's really smart about I I think the like like Scott said, that it's It's based on fetch. The I think that the the killer

sort of like skitter scatter through all of your components, figure out where all your, this is the way that you do it. You export a specific thing, and here's how you

You get that data back, and then that renders a component, and then that component loads, and then that component component. Fetch yeah. Then it rerenders, and That one needs to fetch more data, and you can get these waterfalls or you get lots of spinner. We've all been on websites where you visit it, and there's several different spinners.

It it feels nice because, JSX, or application or anything that you're working on, and you can even track performance metrics snow in it, but you can do so much more. You can tag specific bugs to So let's say you have a form that's submitting. You can write that form handler First of all, Scott, did you see that Sanity put my I did. Ad on the so awesome. Yeah. I was just talking to a friend of mine, and I was like, Yeah. We we mostly just make up our ad reads on the spot, and he works in, like, ad tech, and he was like, what? And he's like, yeah. We we we did that's how we've always Dunham. Like, actually, one of the companies ended up using one of the slogans that he had said in these on his website. They thought that was hilarious.

And I we in my, advanced react course, we use something similar to this with Apollo where, or Vue, things like that to be able to use that inside of it. I think they said pre act support is Coming soon. So, yeah, it's it's just like another I think we talked about this a couple episodes ago, but, like, frameworks, man, are getting

A function that runs server side in the same file as, it doesn't do

Yep.

It's gonna happen one day.

key. Hey, everybody. This is Scott. I misspoke on some things in this episode that I wanted to get ahead of really quick before the episode started. What I said in the episode is that the loader makes the data available to your components via props.

about, what What do we think about Remix? Probably for like a year and a half. We've been trying to get Ryan and Michael on the podcast.

was taking a look at it and built a few things myself. So,

Yep. Breaking freaking Remax. Yeah. We're gonna be talking about Remix, requests on this component.

from the creators of React Router. It's Very cool. I'm very into it. My name is Scott Talinski. I'm the developer from Denver, Colorado. And with me as always is Wes Bos. What's up, Wes? again, what this allows you to do is it allows you to co locate so much code,

Monday. Monday. Monday.

soft skill, web development, the hastiest, the craziest, the tastiest TS web development treats coming in hot. Here is Wes, Barracuda,

remix.

now, now that it's it's out, it's available, it's publicly available to everyone, it's not a paid thing anymore. For some reason, I thought it would be it was always like a always going to be a paid framework, options What's what's the difference between a error boundary and a catch boundary? Like, what are the use cases for those? An error boundary feature of this thing and sort of the whole ethos of that it's built behind is that it's

I am stoked to try to finally talk about Remix. We've had the people have been asking us

Woah. Welcome to Syntax.

In this episode of syntax, we're gonna be talking about The the only gotchas that I really had of this is like a minor gripe. I've I've I've talked about it on Twitter a little bit. But if you're if you are

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

But

but that Seemed to be only for early access and now it is,

And, I I just wanna make that very clear because you will hear me say the data is available via props several times in this episode. Again, it is available via the use loader data hook, not props. Okay? Just to get ahead of that and enjoy the show.

You know, there's slots.

and it does have its own context. So if you pass some props, You're actually passing props into that context, and then you're using that via a hook that use, like, context.

can have its own context,

Yep. Yep. Yep. It's all pretty cool. What else we got here? TypeScript support. Very good. Baked in. Baked in works out. To do anything. Yeah. Any other gotchas?

built with React Router 6 in mind so that many of the features and tools and whatever that you get with React Router 6 or just remix features. So one of those features is that each of your slots, they call them, And it really feels nice.

What I want. Yeah. And I was like, oh, because it's called loader. You know? Like, it because there's a convention that it's called loader and you export it. Gatsby does this as well, as you just export the query from the page and then it's just available to you because there's a convention. You don't need to specify, Mhmm. The they do do a lot of the same things, obviously, but they are different approaches.

Hooks hooks are a big deal in in Remix, and you end up using hooks for just about everything.

All of the types where they're available to us, you use the whole import type syntax, so that's really nice.

I believe, outlets. So each of the outlets

So it's a you can think of it as really like a server first platform, those types of things, that's like the majority of it. Everything else feels very much like any of these modern platforms we're working in, and I'm very, Very, very confident that we've missed a ton of stuff. We didn't talk about MDX. We didn't talk about, So there's, like, the same type of concept in Remix, And that's actually from React Router 6. This whole whole thing is is And you don't have to worry about the security concerns there because it's stripped out of your client side bundles.

But you don't even have to think about server versus not server, where something like we talked about Astro, you kinda have to explicitly tell the client side that okay. Now we're have client side JavaScript. But with with Remix, you don't have to even think. Is this client side? Is the server side? Whatever. You're just writing your code as Honestly, I'm not sure why I said that. The loader makes the data available via the use loader

on the server and, sent to the front end, and and it's really pretty neat actually.

any of the the Vue alternatives that where you have the whole folder based routing system. You have that same kind of deal in,

using it because of the amazing UI to edit the data, to, relate it, and to make custom workflows. Marketing people They're going to need it to get approved by lawyers, and the lawyers are gonna love logging in and approving this thing. It's just awesome. Everybody is happy with Insanity. I think they should put that on their website.

platforms so you can build on top of Sanity because you can they have you can they have APIs where you can pull the data out as well as this entire content management platform where you can log in. You can see who's editing what, who edited what, when they edited it.

To be living for your non route based components.

It's built on the fetch API, the web fetch API. So you can use fetch anywhere and everywhere. You don't have to worry about whether it's node or an API. We get that data back. The data is available as props. But you can also even, like, query your database directly in And there's also a folder based routing setup, so it feels a lot like many of these other modern platforms. You have Next. Js or SvelteKit or,

You can have work flow. So like marketing makes a change, it gets approved by legal, then it's published to the website.

the so props to them for doing that. Sanity is, no longer early access. It's available to everybody and we've got to play around with it. I think Scott's given it a bit more of a run than myself, but I definitely, if you need parts of that to be

once you build the thing, they are going to love

Remix.

That's gonna get you double the free use of share. Check out for your next project where you need a I'm gonna say a CMS. They don't they don't call it CMS, but, just to sort sorta give you an idea of where it fits into your application. It does your photos and everything else as well. Okay. Well, let's get into it.

in Remix here where the folder structure for your application is just about the exact same as the routing structure, but then you can also have as many folders outside of that as you want for your components or or front end code or whatever. You you just use that fetch. Right? very rarely does things that get hyped up so much, you know, deliver on the hype, and I think Remix delivers on the hype. I think it's it's it's excellent. So, this episode is sponsored by 2 awesome sponsors that also deliver on the hype, Sentry Insanity.

And that code is is rendered firing off a redirect, and exceptions in your website I'm a big fan. I'm excited to talk about it. Yeah. I I found it to be very cool. I really focused some time on it recently by doing a tutorial course on it. So I got to spend some serious time with it, and I really really enjoyed it. It it it has this really neat module API where So I never never do that. Yeah. I never I only use post and get right.

It's it's makes you happy. So check it out. Sanity.i0forward/syntax.

is where your content for your application goes and it is both a development

Just took my, like, rambly ad read and put it on the website, like the home page. I thought that was really

platform that power digital experience.

It's awesome. It's it's more than a CMS. It's in any component, but it is always aware of that. So it can,

What is it? Remix is a it's a web platform that's focused on web fundamentals and modern UX, so you're simply going to build better websites.

different things available to your component. Whether that is like a prop. Right? You wanna have a prop available to your component at at the initial render.

it will Sort of walk the the file structure tree

for you and then just send that,

Oh, it just fetched data and it knows and it can render them all out and you don't have all these spinners out all over your website because it will render it all server side That's the easiest way. You can't just, like, copy paste from, They're getting so good, you know? other rendering engines in in instead of just React. And that seems to be there was a tweet the other day that Ideally, they would like other like Svelte

if you want to have, Yeah. Totally. And so okay. So here it is. The default exports the component.

and look for any Apollo queries. But it's always it's it's a bit of a pain to get set up,

SEO benefit that you get. All the information is there available,

and every time Next. Js updates, it's a bit of a pain to to get working again. And it's really nice to just, like,

send that part back to the To the client. Yeah. So, I mean, some of the key benefits from all this is, 1, that it's fast. 2, it doesn't feel like a React app. Like you said, so many of those React apps Do you feel like you have the initial pass and then on the useEffect optimistic UI or resource routes or a whole ton of stuff. So if you're the type of person who's like, well, what about this or that or whatever?

then chooses to then go fetch the data and then has to rerender that? It doesn't feel like that. Right? So it's it's fast. It feels really modern and smooth, but then you also get all this server side,

Just really enjoying working in the platform and different releases automatically.

you have some more complex deployment For instance, we have our site. Anytime we have a new version of our site comes out, it gets an auto version bump, and then that version's tracked onto each error so that we can see if this error is present in any individual version of our site, and that's, like, awesome. That's so awesome. Then we also have the ability to, I I I totally misspoke here earlier when I said that the loader makes the data available via props. It doesn't make it available via props. It makes it available via a hook. My apologies on that one. I know that. That's like a a bit of a caveat. Oh, yeah. And then you use the use loader hook? Yeah. You use the use loader hook. So,

Cool. I bet I bet that'll be something that

I guess they're all open source, but Remix is just like, alright, anyone can host it, but write your own way to Put this on your platform. I think that's pretty neat. Yeah. I mean, you can build a straight up node app, and it's like, if you wanna just deploy a straight up node app, That's, like, way easier than working with some of these serverless platforms that have their own functions and config platforms that are, like, a little bit more complex to deal with.

but I would imagine that was because I didn't choose it from the start, and I was kinda trying to copy and paste here and there. And it wasn't like that that turnkey, but,

there isn't, like, an easy way. There's not turnkey necessarily.

to other

what was it? Netlify got it working, but they had to do a whole bunch of work on their end just to make it Yeah. It works like that. Right? And

That's one, like, huge benefit 2 remix over something like Next. Js, in that, like, Next. Js works awesome,

code for that. Yeah. And you can copy and paste it,

okay, like, how do I make this thing serverless but also host it on your platform? And it's always just been like, Boss, and Scott

like, I know that it was in the works for so long, and I bet that a lot of that time was not just building it, But just, like, sitting around scratching your chin, being like, how should we approach

But they don't make that available to you anywhere right now. Yeah. So, like, you could create a new empty project, pause through that project to see what files are there, And then copy and paste and move those over. But, I mean, a module, and if you export something that has a default the export the default export, that's your component. But if you export a,

Well, like like, finally, And then, like, I've taken a Next. Js app

and beautiful.

it's not like a It's not a hard thing to learn how to code this thing. If you're learning Remix, you have to sort of understand

Vercel was super easy, and just building a straight up node app was easy too. So Beautiful. Wow. I'm really glad that this is here. I'm really glad that we have another option now to to work with stuff seems like some pretty interesting from each request. And one of the headers can be how long to cache it. And if you want to,

these different platforms.

the ideas and the fundamentals behind building a Remix application because it's it's pretty neat. Yeah. Once you get the handle of here's where

and it's serverless It just takes care of all the hard stuff for you and but then you also have the benefit of Like, we're all sort of swinging back to the server side and doing a lot of the server side but then you also get the benefit of you you can run it on the the client as well,

hosts and been like,

Au deploy it to Vercel.

because Remix is just It's that's really cool because I was looking at it. I was like, but how does it know

how much of a pain it would be. Yeah. I I know they they kinda said they don't wanna get too involved there because it's like, I mean, it's not their their thing to to play on is in these,

And so, you know, that that's where any of the complexity comes into play. I found it exceedingly easy to deploy to Vercel. It was super it works. Yeah. And that and that same thing goes with, like, a lot of stuff in Remix. Like,

let headers. And it's a function. Whatever you return from there is going to be your headers.

Moving to SSR, you had to completely change what package you were using, if you were using

Meta. So let's say you want to,

and an error boundary allows you to return JSX. And that again is another export that you can have if there's an error or if you need to catch anything.

suspense. There there there's it's never been like the smoothest experience. So, again, having this Confenogen based in baked in where you can just do export let meta and deal with your meta right there. Super handy.

The loader just nice and nice and easy to get it up and running. That's really I I did it to Netlify and Vercel. I had some issues with Netlify, your your view code. Here is your your your post put request to whatever, all of those things. Here's your metadata. They're all existing in this one particular file, and then everything else just becomes easy.

really pretty nice because it's capitalized so it kinda distinguishes it because a catch boundary allows you to return What are all the. Let's look it up. Yeah. Let's look it up. These are called HTTP verbs. It's funny because I only ever use post and get.

have a page title. Export let meta. And then again, you can modify any of your metadata so that way you can quickly and easily not have to worry about things like React Helmet, which let me tell you, React Helman has never been my favorite thing in the world.

Export let links for any link tags. Again, any HTML based thing is going to be here, and that's super good. You can also do a catch boundary, which is, a 404 this awesome new platform, I

to use.

Post put, get,

While you're doing that, I think that I really like this because,

We used it in the action, and we submitted a form. And we're able to handle that routing function or that that that form handler directly in the action, which is honestly, not something you've been able to do in any of these platforms, and it was fantastic. It was a great experience to not have to say, okay. Now let me send this request over to a server somewhere or a server route or even another file and have to handle it there. It's like I have the form. I have the data. It's a simple thing to send off this data somewhere. Let me just handle it right here. So you you end up having both your action based requests or also your git based requests. All that happened in your remix file, Like an example? You can, but there's nothing special about the remix code that you write that's Nothing special about the remix code itself. There is differences in the config file, And then there's the platform specific ones. Yeah. But there are some interesting caveats to that where,

is that, like, I don't wanna have to choose

Or no update or modify.

in order to build it up. And and that's what I really, really like. And that's one thing I dislike about, So in one of our last episodes, I said Sanity is super nifty. It's structured content plow

this is convention based, meaning that,

a function named action or export let action or export function action, that is essentially the post, put, patch, delete data hook.

I forget all of them all of the time.

specifically Next. Js myself That gets changed in the future because of,

directly in the component itself. And that's something we actually did in my course is that we even imported node mailer directly in my React component.

handled data and like it's you still can do your data however you want. You still can build a GraphQL API or whatever, but Everybody's insanity is going to love it. Why? Because you, the developer, get the right plain old JavaScript or TypeScript to define your schemas or your data. The marketing people on this other side,

Oh, and pull is used to update or replace.

all of these things. I wish that you just told me totally which one to to go ahead and use.

Let me get the list of the rest of them here.

and post put yet to the.

It's funny. Like, I I went into it looking at it, and I had been watching what what they're all saying on Twitter about what what this is gonna be. Is it gonna be another the act framework and stuff like that. And after using it for a little bit, I'm like, no. This is just a like a node framework or like a a website framework. Right? Yeah. It's a web framework.

for the most part, like, export is your git request. The action export is going to be your put patch delete

Think about it like this. Typically, you you think of, like, a common way that you're working in any of these modern front end frameworks is that you're having to hit an API to get your data

done in the client. Right? Yeah. Anyway, it takes a lot of that the complexity out of it because the complexity is where I think a lot of the mistakes, these files. They're they're component based files or route based files. You just write your code, And actually,

And and I myself, I've been sitting there being like, I wonder if they'll ever allow Yeah. Like, maybe we should explain that a little bit more is that, collocating

and there's this a lot of the performance concerns come from a lot of the issues with double, triple renders, whatever, where you're trying to fetch data, get all your data available, And even, like, SEO concerns. Right? It takes away a lot of that complexity and just says, here is,

And then you're passing that data along via props into your component.

You can get that as well as everything else, including the performance metric tools and the issue tracking and all that and more. So Check it out. Century.i0.

Let's talk about Sanity.

And and those are types of things you see on a lot of websites. So if you're asking for users feedback on the impact of different things on your site, user feedback, And you you can utilize it in a way that you haven't been able to do with these front end frameworks for so long and that you can load your data up right there on the component if you want. And that's really refreshing to me. It's really nice. Yeah.

Use the coupon code tasty treat, all lowercase, all one word, and you'll get 2 months for free. Thank you so much for Century for sponsoring.

Is this a widespread issue? Is this thing caused by maybe a browser extension? We recently had a bug that was definitely caused by a browser extension, and that was really nice Be able to figure out to know that if this is something we needed to work on or not. You can also have, you know, I haven't used these tools myself yet, but there's some interesting user feedback tools. What do users think? really common pattern in Remix where you're just exporting functions to do different things out of your route, click the module API in Remix. And it will talk about more things that you can do with this, but, like, which might feel weird to some people. I know if you've used Svelte, you export a prop to use it, And so that might feel comfortable people to export something to use it. And in Remix, it's very much like that. They have very specific things that you can export that code because that's code that's only run on the server side in the loader. So that's server side only code

You can create a GitHub issue directly from Sentry's dashboard.

You can auto see which user is having this issue, how many users are having this issue.

Because there's, like, several config files needed for each deploy target, or the, the episode number for the API. So episode 401, with the easy. And there's config differences in the the Remix config file. It's not easy There's always something new. There's always cool new tools, and all those stuff is just going to make your user experience better. Century.i0.

If you've chosen, I wanted to play with Vercel at the very start to then say, oh, no. Wait. I wanna deploy with Netlify.

and those are all community based. So it's the the remix Team isn't building in all these deployed targets. It's like there's a Vercel deployed target and a Netlify one, but those are all sort of like community solutions in terms of, like, There's all these config files, and it's not necessarily We'll probably be talking more about Remix. Yeah. It'd be great to have Michael or Ryan on either of them. So We'll do that. We'll be talking much more about remix, and I'm sure we'll be diving into more of that as we evolve here. Because this platform's some truly great, and I I would imagine it is here for good based on how cool it is. So Alright. That's it. That was a tasty hay, Steve, thank you so much for tuning in. We'll catch you on Wednesday. Peace. Peace.

you know,

Now Sentry is the perfect place to see all of your errors and exceptions, and it's one of those tools that I've been using for so long. It's just a part of my workflow. This is the place where you can log all the errors in the HTML. So Google's gonna see it and everyone's gonna see it. It's it's gonna be awesome. So I I've actually I've been,

oh, and there's more than that inside of their whole module API. The the module API again is, like I said, it is It's based on what you're exporting, You export a function that's a loader,

post requests, here's where I write my components, Whether that is your get requests or your post requests on the server, allows you to colo locate that inside of your routes rather than having to worry too much about I hit the API.

Head on over to syntax .fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.

I get my data, here's where I handle,