00:00.43
Kent
Hey, everyone my name is kent c dods I'm so excited to be launching this brand new podcast. The remix podcast I've done I've done many podcasts and I've actually done a podcast with my friends here ryan and Michael we did react 30 back in the day that was fun. Um. But yeah, so we're excited to launch this remix podcast. We're going to be talking about how you can make really excellent user experiences for the web and so for this trailer this intro welcome to the remix podcast episode. We're just going to do a short episode. And where ryan and Michael can kind of talk about why remix exists and and then I'll I'll tell you a little bit about why the remix podcast exists so take it away friends I'm I'm going to call on michael.

00:51.60
Ryan Florence
Ah.

00:51.90
Michael
Hey sorry I didn't know which 1 of us you wanted to speak? Yeah, so ah I love podcasts I'm super excited that we have an official podcast for remix now. Um remix really is the result of.

00:55.60
Kent
I.

01:09.34
Michael
A lot ah lot of years of experience and work both from you know ryan side and from my side and then from a whole whole bunch of contributors and people that we've talked to over the years with our react training business an experience that we've had with react and building react Router. Ah, basically you know a lot of people wonder oh why remix? you know when there's ah, there's a whole bunch of other stuff out there right now for for building websites and the the really short story is that you know when we're building sites with react router and we looked around. You know about a year ago when we started working on remix and we didn't really see anything that allowed us to build the kinds of sites that we wanted to build with the kinds of performance characteristics that we were really after and then with the kind of user experience that that we're going for. Ah, we also saw a lot of people out there who were building sites with react router which is a fairly unopinionated framework that just weren't really that great. Some people were building really great sites with react router and then other people needed some help. And so remix is basically a way for us to be a little more opinionated about the right ways to build websites. Um, and wrap it all up and make it really really easy for other people to take advantage of all of you know that experience and. And the learning that we've done and and the research that we've done so that's that's what remix is in kind of a nutshell.

02:46.15
Kent
Ah, Ryan Do you have anything to add to that like what what is remix to you like why? Why do you care about working on remix.

02:54.00
Ryan Florence
Yeah, a lot of it's what Michael's saying there at the end you know I'll I'll log into my healthcare website or I'll do something for my kid' school or something log them in somewhere and it's just like it's just kind of a rough experience. There's a lot of the web that's rough. And I'd open up the devtool and I'd see they were using react router and I would just sort of like cry a little tear to myself. Um, and yeah and and then also like Michael said there's ah he and I've been partners for a long time and we've talked about some apps that we wanted to build and.

03:22.50
Kent
Ding it.

03:31.72
Ryan Florence
Ah, these apps have a lot of dynamic Data. You need to read a lot of Data. You need to write a lot of data maybe millions of records of data and ah those kinds of constraints. You know we we Wanted. We wanted a framework that would allow us to have incredible performance characteristics. But also allow us to have those kinds of things like just a ton of data. A lot of user data and um and and the tools of the day didn't quite match what we were wanting from them and so we built remix.

04:02.59
Kent
Yeah, you know the homepage for remix tells a really great story about this that like it all comes back down to the user experience. The the experience of the user is they are loading your site and using your site and the thing that um. Was frustrating me as I was building sites with other tools is I felt like um, we spent a lot of time optimiz or thinking about the loading State. We just like we've got to optimize this loading State. We got to make the Skeleton look beautiful and switching over to remix I realized that. And the best loading state is the 1 where or or the best Skeleton is the 1 where it's the actual component rendering the actual data. So no Skeleton at all and and so if the reason that we bring in these skeletons is because maybe we don't know what data we need until the component renders and so we got to. Ah, wait until that component renders before we can show the real data and so we've got to put something in place there or our our backend is really slow and so we've got to show something while we're getting our stuff from the backend. Otherwise the user is just going to be sitting at a white screen for a long time and and so I feel like. With other tools that I've used they they opt or they try to solve these problems whereas remix is like let's take a couple steps back and try to eliminate these problems. What if you could make it so your your backend wasn't slow or you can put some caching in place so that it can be really fast. Um, or what if you don't have to wait until the component renders before you know what data or before you have the data for it to render right? And that's that's what remix did for me as I started using it for my projects was that I wasn't worried about these problems that that made me think about. Loading spinners and in a less excellent user experience. I was actually those those problems were just eliminated I don't have to think about them. So.

06:01.96
Ryan Florence
Yeah, remix gives you a bunch of tools. Ah I mean that's kind of my goal whenever I'm whenever I'm thinking about remix designing an api or working in the code I'm always trying to think can I eliminate the Skeleton screen can I eliminate the spinner altogether and that answer. Can't completely be done in the browser. You need you need some good server infrastructure as well to be able to do that sometimes but yeah remix has has a couple of features that are they're really great. We know all the data before you render the next screen which means we can prefetch everything. Can prefetch Javascript modules all the components you need to render all the data for the next page even in the nested layouts and even css resources and if and if you really want to you could prefetch some images though I don't recommend that. Um you can you can prefetch all that stuff. So as soon as the user like hovers a link. Um, or when a link comes into view or something like that remix knows enough to get everything in those 3 hundred milliseconds before they actually click it so when they click it. It's instant. It's as though it was already there um another another way that we can ah get this kind of user experience is. Ah, with something called progressive enhancement or sorry, not progressive enhancement optimistic ui I got too many buzzwords in my head right now. Optimistic ui is when ah, you're sending data to the server and you know that's going to take a little while might take a second. Um but you don't actually have to wait for the server to respond. Because you already know what you sent which means you might be able to already render what you want to render so imagine a little to do app. You can have a little text field where you enter the to-do item and hit enter and you know everything you're sending to the server right there in the browser so you can just go ahead and add that new item right into your list. And let remix talk to the server in the backend. So remix has a whole bunch of stuff that you don't even see happening in your code but remix is doing a lot to make that communication with the server just seamless and that all that code inside a remix. Allows it to give you the information like hey here's what I'm sending to the server right now. So then your application can pretty easily just you know, put that to do item right in the list and if the server blows up then it has nice air handling and stuff too so you can give the the user a good message. But you know 99 percent of the time if you validated the data and we send it off to the server. It's going to work so not only can we eliminate a lot of loading states with prefetching but we can also eliminate a lot of loading states with data mutations with this idea of optimistic ui and and remix managing that.

08:53.62
Ryan Florence
That conversation with the server I'll say a third way that we can do. This is the back inside where you get your app to the edge and your data to the edge you want to talk about that a little bit michael.

08:55.40
Kent
Yeah, that's excellent.

09:05.46
Michael
Yeah, 1 hundred percent. So I think what we're seeing now in is that people are increasingly ah moving towards the edge with infrastructure. So. There's kind of this traditional way. Building apps which is that you have your origin server and it runs somewhere in Aws you know us east and and then you put a cdn in front of your origin server and the cdn is something like akamai or cloudflare or fastly and. You know you you take advantage of the cdn to try and deliver your pages more quickly. Um, and that's a great architecture. There's there's a lot to recommend it. It's a great architecture and lots of sites have been built and and are great websites that use this architecture. Um, but then what also happened I think in large part because of this architecture is um, there was this kind of this movement to just you know pre-render as much as possible and to kind of stick like ah you know these kind of ah. Empty html documents ah in the cdn and serve those and then you know like when the user logs in then you would go and and you would actually fetch you know client side you would fetch the data that you need to actually fill in the page. So whether it's the user session or something like that. And you know you would fetch it from your api and the goal was get something as quickly to the user as possible so that they're not staring at a blank screen but we'll still have the the flexibility of you know, a server rendered app except we're going to render the whole thing client-side. And and what we're seeing now is that people are actually just developing runtimes that can actually run at the edge so cloudflare workers can run at the edge and dino deploy can run your app you know, right? there at the edge you could you could even run you know node or dino on on a. Platform like fly io. There's aws is innovating with lambda at edge and and basically what all these platforms are doing is they're taking the server and they're moving it out so it's very very close to whoever you know to your user to whoever's browsing your site. And I think what this architecture enables is a new kind of experience where we don't store you know, empty html documents on cdns and serve those and then serve a bunch of javascript to fill them in but we can actually put rendering right there on the edge as well. So.

11:56.14
Michael
You know the request can come in and we can detect. You know the user's geolocation or fetch their session from a database fetch some other data from a database that we need to render and return the page in you know, well under a hundred milliseconds which is which is ah a. Ah, really impressive. You know feat to have a fully server rendered app that just didn't happen in the olden days with origin cdn architecture because your origin server could have been halfway across the world but with edge architecture your origin server can be really really close. Um, 1 of the interesting things as well. That's happening from a technical perspective is a lot of these edge services are not node js which is typically what what we've been running our apps on for the last 10 years ah if you're writing your app in javascript and your server rendering react. For example, you've been running on node js a lot of these ah these platforms are are you know like cloudflare workers is just v Eight isolates dino deploy is obviously a completely separate runtime and you know so is. So. So anyway these servers are are are yeah being written in these in these different runtimes and and 1 of the things that I really really care about and that we really cared about with remix was to make it so that we could run it natively. Ah. On all of these different runtimes so node is just 1 of the runtimes where we run but we also run our apps natively on cloudflare workers and on dino right? at the edge and I think that's a trend that's only going to continue. There are going to be a lot more ways to run Javascript. Then just node and remixes position really really well to take advantage of all of them and and again it's that's the technical implementation right? But the exciting thing is that you don't sacrifice the flexibility of having a server- rendered app. Ah you know you you get flexibility. And performance by rendering your app at the edge.

14:05.41
Ryan Florence
Yeah, we've been. We've been doing some we we already shipped to cloudflare workers we're in the middle of getting dino deploy support and we're rendering in nineteen milliseconds like time to first byte and the whole thing is done in like 20 milliseconds. Um.

14:05.43
Kent
That.

14:22.51
Ryan Florence
1 1 example when Michael's talking about you know the flexibility that you get by actually being able to server render your app instead of pre-rendering a bunch of html and putting it on to cdn is just think about dark mode think about a user preference right? You want to know does this user want dark mode or not. Ah. The current strategy today is you give them light mode once the javascript hydrates you read local storage and then you flash the page into dark mode a tons of websites do that slow down your network go to almost any javascript libraries documentation site and that's what's going to happen. But if you're actually rendering at the edge rendering on your server. Um, you can just have that in a cookie you know and so now you actually server render with your class name on the html or or load the right thing. So so these these things they're not just technical implementations of us being like oh look, you can make that really fast, but like. Rendering server rendering your app at that on this on the sorry I was about to say server rendering on the server server rendering your app gives you the ability to do so many things to make a better user experience.

15:28.14
Kent
It absolutely and you know like that's what it always comes down to as Well. It's like it it ah the the user experience and and I think that the problems that led us to client side rendering and static site generation. Um, like. Ah, we were in pursuit of a better user experience Even then um, it's just that in in the interim since those things started becoming popular and the problems that led us to those solutions are no longer problems because we have compute on the edge and we have data on the Edge. So.

16:02.70
Ryan Florence
Yeah that's right Yeah data on edge I wanted to bring that up too. So um, you know if you talk about like oh we can move app service to the edge. The question is why it's like well there's data and this is why ssg kind of got really popular is. It's not really the rendering. That's slow. It's getting the data to populate a page that can be slow but we're seeing really great services where we got like postgres read Replicas where it'll replicate out across the the whole network of all your databases so put your database right next to your user. Cloudflare key value storage and durable objects. Ah those things they read as fast as a static file like if you put a static file on cloudflare or you have ah their key value storage or a durable object. That's just as fast as a static file. So. Not only are the servers at the edge but our data can get to the edge too and so now like anything's possible and what that means also is you can make your server fast. You can't make your user's network fast. So really, the the only thing that you can do is try to send less over the network. And by being able to server render you can move a bunch of javascript code like markdown parsing and date formatting and and any any libraries that you're using to generate that component that stuff can move on to the server and and then you're just sending less stuff over the network to the user. So. So many so many ways when you have an actual server that you can make a better user experience.

17:35.66
Kent
So absolutely sweet. So let's let's go ahead and wrap up here the the last I just want to wrap up by giving people a reason to subscribe so you may be listening to this in a web browser and or or something I want you to hit the subscribe button because. This podcast is going to be a weekly podcast where we talk to experts in the industry about what what types of user user experiences that we can build with the technology that we have today. So it's hopefully like the the goal. Is that after every episode you have some idea of something that you can try something you could do to improve the user experience of what it is that you're building and I I feel like a lot of the things that remix offers can help you with that so there will be of course a lot of things about remix in each episode. But it's going to be a really good time. So definitely give this a subscribe give this a listen every week and because I think that this is going to help you build better user experiences for your apps anything to add guys before we wrap up.

18:43.64
Ryan Florence
I would just say our Slogan is build better websites and sometimes we add on the end of that sometimes with remix and that's what this podcast is about is just building better websites sometimes with remix.

18:55.80
Kent
So exactly all right? Awesome! This has been good. Thanks everybody. Oh 1 other thing I wanted to add this ah episode is a little bit shorter normally episodes be around a half an hour or so so you can expect a lot of really awesome stuff within that time. We. Ah, with react 30 when michael ryan and I did that podcast. We used to say we'll never waste more than a half hour of your time and so we'll we'll carry that forward here with this 1 so that's it thanks everybody and we'll see you all next time.

19:24.96
Michael
Thanks bike.

19:25.79
Ryan Florence
See up.