Transcript from the "Introduction" Lesson
>> Welcome to the advanced Remix workshop. I'm so excited to teach you all about Remix. If you haven't already been through the fundamentals workshop, and you don't have any experience with Remix, or have very little, or even I suppose if you have some, because I've had some people who are actually working on deploying Remix apps right now who said that they learned stuff in the fundamentals workshop.
[00:00:23] So, if you haven't already been through that one, I suggest that you take the time to go through that one. Today, we're gonna be talking about more advanced topics. And so, you want to have at least some good understanding of Remix before going through today's workshop. For those of you who are new here, Remix is a web framework that enables you to build excellent user experiences and not feel ashamed of the code that you wrote to do that.
[00:00:50] And was the experience for me when I rewrote my personal website, in Remix, was I realized how awesome the user experience was that I could create and what an enormous scope of application I can make and still feel really good about the code that I wrote. And just to be clear that the scope of this web application is not like your typical developer portfolio blog sort of thing.
[00:01:16] Lots of really cool things in here, probably the the most impressive I think is the Call Cat Podcast, where you can literally record a question that you wanna ask me in here and you submit this recording and I record my response and then our conversation gets turned into a podcast episode.
[00:01:38] And I do that every day, and it's pretty cool. And this whole thing, whole experience, is built with Remix. And so, today I hope to be able to show you a couple of the things that I use on my website in addition to some things that I actually haven't implemented on my website yet.
[00:01:53] In fact, one of the topics that we're going to be talking about today is currently unreleased, we'll be using an experimental version of Remix for that. By the time this is a course it probably will be released and we're pretty solid on the API as well. So, lots of really cool things to look forward to.
[00:02:12] Before I talk too much about the logistics and everything else, I think it's good for us to get the workshop set up. So, you'll go to the Front End Masters GitHub and there is an advanced Remix repository in here. And you'll just come down to, make sure that you have the proper system requirements before you run this, but you'll come down to the Setup section, and I just stick this on my desktop.
[00:02:38] Okay, here we go. So, that should get everything set up locally. And while that's happening in the background, we're gonna talk a little bit about Remix. So, in the Remix Fundamentals workshop, we gave you an idea of the Route Module, some of the things that you could export on that.
[00:03:18] All of the really cool things that you can get, the better user experience that you can offer than just the browser can do by itself. So, some of the exercises that we have are doing mutations that don't involve navigation. So, in the Fundamentals Workshop, when you created a blog post, you're gonna navigate somewhere else, when that is finished, you're gonna go somewhere else.
[00:03:39] If you had to go somewhere else, for every time you favorited a tweet, that wouldn't make any sense. So, there are a lot of use cases for just doing a fetch request that doesn't actually trigger a navigation. And we're gonna talk about optimistic UI, so making your application feel like it's instant even though there is actually network latency at play.
[00:04:01] No matter how fast you make your app, there will always be an element that you don't control in your app, and that's the network, the user's device connection. And that is just one of the things that makes web development so fun. And so we have to deal with that but we can make it feel like the experience is really fast even before we go into full on PWA offline stuff.
[00:04:24] So, we're not gonna get into any of that, we'll just get to the edge of that with the Optimistic UI. We're going to be talking about focus management, the true reason that we have to use effect in React. And so, helping us manage focus as the user submits a form and they have errors, we want auto focus to the field that has the error for example.
[00:04:45] Revalidation optimization, so as we learned in the Remix fundamentals workshop, Remix automatically revalidates all of your data when you make a mutation because all bets are off on this data, you just change something, I don't know if this data is up to date. That is the correct default.
[00:05:02] But sometimes that may not be what the desired outcome there, maybe that's just a ton of data you want to manage that state yourself a little bit or you just wanna optimize when that's revalidation takes place. So, we're gonna use what is currently an unstable API for revalidation.
[00:06:23] That is totally wrong because the concern is the component and the component is incomplete without all three of those things. Well it turns out that your component is actually still incomplete without the back end, as well, for a lot of types of components. And so, in this one we're going to be adding that back end element, should be really cool.
[00:06:42] We are not using CSS and JS, we're using Tailwind because it's amazing. But it sort of is, CSS and JS, if you squint. So, anyway, that one's gonna be really cool. We're also doing imperative mutations, so we need to have something happen without the user doing any action.
[00:07:03] There are plenty of examples of that and we'll talk about when you want something like that to happen and how to make that happen with Remix. It's a very app-like sort of thing. And then pending UI, the last three are actually all talking about what happens or how do you improve the user's experience when they have a slow network?
[00:07:22] And then actually the last one is how do you improve the user's experience when you have a slow back end that you can't do anything about. Hey, cuz I mean, raise your hand if you have ever experienced that. Now you don't have to, but yes, I have [LAUGH], and it is frustrating.
[00:07:37] But if you can't do anything about your slow back end, then there's a really cool API that Remix has for you to make that experience as good as possible for the user.