Introduction

[00:00:00]
>> 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:02:58]
We talked a little bit about nested routing and that sort of thing, we talked a lot about the things that you can do before JavaScript is even included on the page. We did get into progressive enhancement and adding some pending UI and stuff. Today's workshop is what what can you do now that we do have JavaScript on the page?

[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:05:21]
We're going to also do non naff fetching, so this is similar to our non naff mutations but this is for making a Fetch Request. This one could also be titled Back End Connected UI Components, where you have a UI component that, well, let's take it a step back, when React came out and they're like, look at this thing, you've got your HTML and your JavaScript, and everybody's like, what garbage is this?

[00:05:47]
And now we're all doing it because it's amazing. And then CSS and JS comes around, and it's like, look, you've got CSS in you are JavaScripting. That was arguably, maybe not the best idea, but it kind of inspired a lot of things as well in the view ecosystem, you have single file components.

[00:06:05]
So, that idea of like let's bring as much into this single file as we can is really powerful. A component is when we're talking about separation of concerns, a lot of times people would say well, you gotta have JavaScript, HTML and CSS, they gotta be separated, separation concerns.

[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.