Introduction to Remix with Michael Jackson

uh welcome everybody to another um lunch dev conversation uh we're super excited to have you today uh we are really in a great spot today um michael and i were having lunch one day and he's like hey i'll come on and you know do a thing about remix and um that day is today he's here so many of you joined um to learn about remix there's so much exciting hype around remix so um yeah that's good we're super excited super excited to have this event today um you know this community is all about just like learning together growing together creating together so if you want to hang out with us you can go to events.lunch.dev discord and hang out with us and just have a lot of fun we have a lot we have a lot of fun a lot of fun together um we have a new coat of conduct too so if you're brand new here you can check that out it's in the welcome channel um or at events.lunch.devs code of dash conduct um and i think that's it i think that's all that we need to cover we're going to be hanging out in the uh let's see live event text channel you can type as michael's typing and talk there and then just if you can just kind of keep it on mute maybe keep the video off to keep the stream nice and tidy for everybody else and then um if you have questions i think michael will invite those or you can pass them to ben mentioned ben or i and then we can kind of interject those um as as needed so that's all without any further ado thank you for being here we're glad you're here and um michael jackson take it away hey thank you uh thanks everybody for for coming out to this lunchtime chat um i'm really uh happy that you're here um i have uh in case just by way of introduction uh in case um in case you don't know me uh my name is michael jackson i actually live here in carlsbad california michael chan lives right next door in vista and so we get to hang out a lot which is kind of fun um i mean kind of fun it's awesome um and and uh i a couple of things that i've done uh i built to react router uh i currently work on that as well um and i'm working on a new project called remix which is built on top of react router so uh if you've used react router you know what it is it's it basically allows you to show different screens as the user is kind of clicking around your site as people are clicking around your site you know you get links and you get different routes that allow you to show different components as the url changes and so it's a way to build an entire site with uh react as opposed to just like building little components so we built react router in 2000 and uh i want to say like 2015 is when we released it golly it seems like forever ago uh and uh that is a long time and we're still working on it um the cool thing about remix is it's like i said it's built on top of react router so everything uh uh you know that that so it's built on top of react yarder v6 so a lot of the stuff that that we're actually doing in remix is going to inform react router development and is actually going to make it back into react router um so we've got kind of this dual dual uh arms of our company right now we have uh react router which is the open source arm and then remix which is this paid framework on top of uh react router but again by supporting remix a lot of that stuff makes it back into open source which is cool and react router is actually going to be really really um it's going to get a lot of cool stuff from remix so today i just wanted to give you kind of a preview of some of the stuff that we've been working on with remix we are still right now in our we're calling it a supporter preview uh phase uh things are changing very quickly like breaking changes every couple of weeks um we do try and publish really comprehensive upgrade guides for you so don't be too scared like it's it's it's fun to get in there and we're kind of learning and discovering things together but um but it's it's just getting better and we're in like heavy heavy development mode right now so um so i was telling michael chan uh before the stream started i was saying you know my my brain is already like a couple weeks ahead it was like the next release that i was literally just working on this morning and last night and then i was like okay uh no current release gotta gotta focus on the current release okay so so hopefully i won't club that up too bad today um and this uh i i would love to get your feedback about what i'm you know the demonstration that i'm gonna do today because this is actually um in preparation for a talk that i'm giving at i think it's called react summit um in april and so uh so this talk is kind of a precursor to that one uh just kind of prepping some stuff um so uh so anyway so i wanted to i i thought i was thinking you know what would be a good way to kind of demo what you can do with remix because there there really is so much there uh it's there there's so much that goes into building a web application these days there's you know there's the markup and there's server rendering and there's css and there's error handling and there's you know suspense and data fetching and you know pre-loading and pre-fetching and links and navigation and transitions and there's so much stuff sessions and cookies and so i thought well i'll i'll try and build a demo that i think kind of kind of gives you a little bit of a feel for what it's like to use remix um and then you can uh you know maybe just ask some questions about it um and and we'll kind of go from there um so i've got a a pretty basic um remix app here um i i i've added a few things to it so i'm starting with the the remix starter template that we have for express so right now we have starters for architect which is is a wrapper around aws services around aws lambda we have a starter for vercell which a lot of you probably know because they build next.js and then we have this starter for express which is it's just you know you're running a vanilla express server maybe you're running on heroku or something and uh and so you're just firing up your own express server we have starters in the works um for uh netlify that one is already pretty close to being done uh firebase um you get the idea basically you can take a remix and you can deploy it anywhere you want um so this though what i'm using today is i'm starting with the the express starter and i'm just running express locally on my laptop and uh and that'll be that'll be what we're using today but there's there's a lot of different places you can run it can you michael chan can you hear the piano in the background i can but it it it adds some nice uh nice context yeah it's it's just children just started practicing the piano just a little bit of flavor it's it's great it's great it's that work from home uh that work from home life it's perfect oh my gosh all right well if it gets if it gets annoying let me know and i'll go yell at him but i think he's fine i just had my 14 year old upstairs he was like he's learning the guitar so i play guitar and he's learning the guitar and he was just wailing on this like shawn mendes song or something i was like dude i'm gonna do a live stream just keep it down so anyway all right so so this is what i'm starting with i'm starting with the express starter um i added tailwind css you might be familiar with that um tailwind is running over here and i i i just just to pull back the covers a little bit on what i've got going here um uh i'm running tailwind with uh yeah i'm just i'm just running tailwind through post css uh so i'm just going to run this watcher and it's going to take everything in my styles directory um and i've got a couple of you know css styles css files here that we can use to style things um i've got this global one that's pulling in all the tail and stuff and it's this watcher here is just going to take these files and it's going to dump them into my app directory so my app styles directory specifically um so apps so so the the app directory is kind of where everything lives uh in a remix app and i've got a couple of things in here i'm going to be building a a login page today so i've got a couple of things in here to help me out um we'll create that one from scratch but i've got just like a a little users database here and the styles directory we know is being generated by post css uh and then these files are the ones that that remix kind of gives you to get started okay so um so we you'll notice we have entry client and entry server so remix is a fully server rendered react framework in fact uh we're doing like so much on the server we're rendering um you know react router on the server um and then you know when when the html is rendered on the server then we send it to the browser and then javascript lands and it hydrates the page and then things become sort of interactive but remixes is server rendered first so you can take a look at your server entry point um and this is this is your entry point this is your playground your chance to say here's here's how i want to render uh the whole whole page basically um and so you know here we're just using react on uh server render to string uh you could render to a node stream if you want um and then we're returning a response here so this response is um we we are actually building the remix api on the fetch api primitives so if you've ever used the fetch function in the browser um you know you say fetch something uh this isn't i'll just i'll just punch some code out here you know when you say fetch some url uh this thing you get back is actually uh this is a response um similarly when you say um or sorry uh you have to like wait that thing uh similarly uh when you actually do a fetch in the background a request object is created so there's a request primitive as well um so a couple of other primitives but but this one is is the one that the same one that you know and love from the from the fetch api uh and we're building on that and so we've kind of built out this like uh this this kind of layer so that you know you can build any kind of uh uh we can we can build on all of these various platforms because they all have their different http server api right if you're going to build on aws lambda if you're going to build on netflix functions if you're going to build on cloudflare workers everybody has their own idea or just a raw node express server everybody has their own idea of you know what do these requests and response objects look like what are the right primitives we just went with the web fetch api um and so we kind of do some translation in our various adapter packages uh for the different servers that we deployed to but anyway here's your here's your server entry file uh your your client entry file um has a big big fat ps ignore in it but uh ignore the ps ignore right now it's it's uh we're using some third-party types that aren't the best um we're just calling a react-dom hydrate okay just a reaction hydrate and uh react dom hydrate can actually hydrate the entire document um which is cool so we're just passing the document in there and then saying get a get a remix and put it in the document uh what is that what is a remix well it is in you know in both cases we're just getting a remix and rendering it what is that thing uh that thing is your root uh your root route okay so if you're familiar with uh the concept of routes and react router even if you're not but basically the idea is that these routes uh they correspond to urls and they also nest their nested ui and they correspond to nested urls so you can have you know the root route is going to be the the root ui that that renders around everything and here you can see we're just rendering the html document we're entering the whole thing okay so you can you can put your head in there you can put your body in there you can put um you know link tags uh meta tags your your title whatever you want um and then this outlet uh is another primitive from react router v6 and this basically just says render my children render my children routes so whatever goes inside this is like you know the two halves of bread on your sandwich and this is like whatever goes in the middle right um and so the outlet is is your child routes um so let's take a look at uh let's take a look at what we're actually rendering here so we've got this little page says hey welcome to remix um again that page is uh server rendered so we can go in and we can see for example uh actually if i just if i just view the the source of the page um you'll see we've got you know we've got real html from the server we're server rendering the whole thing and uh uh yeah so let's let's kind of make it look a little bit prettier right so right now it's just got this uh you know this like basic uh built-in kind of font uh we already said we have some post css running here um well well first of all let's let's just go ahead and run the app um so let me go npm run dev okay no whammies hopefully all right so uh so we just fired up this little express server it's gonna run on port 3000 um okay there we go we we actually made a request you can see we've got this little log going down here so we actually made a request so we actually serve the page um so let's take those styles that we're generating and let's actually get those on the page because right now the page is super basic so let's just um let's go into our root route let's see our entry points are doing just fine so let's go into our root route and um what i want here is so that your routes can export they can have different kinds of exports right so right now we just have one export which is the default export which is the component for this route okay i want to get some styles on the page so i'm going to use an export called links uh and i'm gonna use typescript to help me out here okay uh let's import type links function from remix run react nope react that's the one okay so uh so the links function what are you upset about oh i'm gonna return some stuff that makes sense uh so the links function is going to return uh the things that are going gonna go on the links tags so this is actually really useful um you can just we could just return like a rel style sheet uh and the href uh so what href are we gonna use so uh so we can actually import our style sheet uh let's just call it a url from and we use this url prefix uh this is actually gonna be in so i'm in root tsx so i'm going to pop into this styles directory and grab that global css styles global.css i'm going to go ahead and pop that onto the page okay uh let's just okay um so you notice as i'm you know as i'm writing stuff here the the server is rebuilding the app uh let's go and check it out okay so we have some we have some styles on the page we pulled in all of tailwind just so we could get rid of the serifs how about that uh all right so so these links are how you kind of get things on the page and if we had more time like this the links feature actually goes really really uh deep um you can put things like media queries on here and you can say stuff like um you know when uh oh golly i forget the exact name it's like prefers let me get a new line because it's long you can say media uh prefers color scheme dark uh and then you could go and link to your dark styles i haven't made any dark styles for this app you know but you totally could uh and then uh you know you can you can uh you know you can leave this media query off of of the link obviously and then it's going to load for you know when they don't prefer dark color schemes so these link tags are really really powerful um you can even use them to you know i mean if you know you can use them to to save the browser having to load and parse an entire style sheet uh if the user does not prefer dark color scheme for example or you know and media queries obviously you know what you can do with those you can you know you can do different screen resolutions and things like that sizes so really really powerful these link tags um we're not going to do dark styles today because i haven't gone to that length for this demo um okay so so we've got a cool little uh we've got a way to kind of load styles on the page um i went ahead and i snagged uh this uh i snagged some markup uh from tailwind ui and i put it in this sign in component so this thing is literally just copy pasted uh and i substituted all the class for class name and you know all those other things before i substitute it with html4 and all those other weird little things you have to do whenever you try and copy html to jsx but anyway that's that's all i did here with this page and so you notice i uh i had put it in this routes sign in uh page so uh so this routes directory kind of represents um the the names of these files actually represent urls so i can actually go ahead and punch this in i could say sign in and uh and i'll get to this sign in page which again is just uh just copy pasted this this markup from tailwind ui um so they have all these like examples that you can just copy and paste and i'm not very good at css so that's great for me um so so i've got this you know this uh this page here and right now it's just static html you know i can punch some stuff in here uh put some stuff in here and uh it's not going to do anything well it's going to try and make a post but we haven't set up our server yet so um so that's not going to work but but yeah it's this is um just copy and pasted from from tailwind so let's actually let's actually you know do something from the main page so that you can you can get over here right so let's uh let's go up here so we've got um um okay so we've we took a look at our route our route is where we imported our global styles so our index route i've got these two other routes i've got an index route i've got a sign in route um so the index route is is the page that we're going to land on this is the one that's saying hey welcome to remix okay and either one of these can be present in the outlet here um i kind of talked about how the outlet is just like whatever goes inside so it could either be index or sign in right now uh either one um so let's let's decide in the index page you know whether or not the user is is signed in and then uh and then we can show the right kind of ui right we can show the signed in ui or the or the signed out ui so if we add a user uh let's just say they're null right now um and let's say um i've actually got a type for this let me grab that real quick import type user from uh let's get the user's file there we go okay so i i just built this this tiny little like in memory database um it just gives us a couple of functions we can validate uh email password uh right now everybody's password is password so not a big deal uh and then we can just look up you know we've got a little database of users here okay so uh so let's let's say uh let's say we've got a user here and we'll say uh we'll have another thing down here and we'll say um if if we have a user we'll say show the sign in ui for that user okay otherwise we'll just show the signed out ui okay so let's go and create a couple little functions down uh here thing that i really love about react is how you can just be like oh yeah i need another component down there uh [Music] just pop a couple of a couple little components down here in your file uh now in order to make typescript happy i'm gonna have to say this returns a react element and so does this one and i know somebody right now is saying just use react dot fc uh that's just not my style she's not my mo i'm like i'm a very manual manual person um anyway uh we'll say uh user or okay sorry if the typescript stuff bothers you uh i'm gonna try and go light on it as i can because it it bothers me too all right so let's say if uh if you are signed in i'll just have a little message here say hey um welcome uh user dot name uh and then we'll have we'll also we should probably also have like a form uh for them to sign out um we'll do that later i'm not sure if we're gonna have time for sign out but hopefully we will okay so that's the signed in that's the signed in page let's have a little signed out page here we'll say uh hey if you're not signed in we'll just say hey you are not signed in and then let's have a link to the sign in page okay uh who is where do we get link from that's our good old friend from react router so let's go and get link from react router dumb react router document object model it's a great name for a package right there all right so we've got uh we've got two different pages and right now we're just hardcoded our users so we should see the uh we should say hey you're not signed in link to the sign in page we're there okay cool um so uh yeah so let's let's go over to the sign in page and let's actually like make let's make this page okay so uh so we we give you a couple of uh things in in react uh we talked a little bit about you know some of the extra exports that you get um we talked about the links export uh we didn't talk about this one this is the the meta export uh this is the way for you to put meta data about your page so metadata is first class so you know put your title there put your description put your you know og twitter card your or no like does this twitter use opengraph no that's facebook i always forget which one it's like yeah og image profile whatever thing i i always have to look them up i always have to google them but anyway um metadata is first class so we have a function for that um so let's pop in here and let's take a look at this another export which is called the action um yeah let's grab that i had this i was calling them action for shorthand and then i and i was like no it's a function i should call it action function all right so the action function gets we get the request um and this one this one is super super useful so you know when we're doing a form post uh let's just let's just take a look at that real quick uh when we're doing a forum post it's gonna come right in here right um so let's go and let's check out our form here in the page so we've got a form with a class name and it's got a method post so it's it's going to post directly to this exact same route right here um so we should let's keep our console open over here and we should be able to get a post there okay cool so uh so we have an error here what's going on uh let's go and read this so it says hey oh oh first of all we logged our request object that's kind of cool remember we were talking about the fetch api these primitives the requests response things that's that's one of these so your request object came in um and in this case since we're running on node uh this is a node fetch request object so if you're familiar with the node fetch api that's what we're using here um so that's what it is all of the request data you've got your method your headers your you know url etc and there's a little message here this one is actually from remix it says you made a post request but did not return a redirect please return a redirect from your action function to avoid reposts when users click the back button uh what are we talking about there well let's let's just let's let's do what it says right let's let's return a redirect here so import redirect uh and this one is gonna come from remix run data um and so we're going to return or redirect we're just going to redirect back to the sign in page um so what are we talking about here are you familiar with the um are you familiar with this thing that happens when you do this confirm form resubmission right you've probably seen that before um you know like you submitted a form you're not sure if it succeeded or not you're at the next page you navigate back it's like confirm form resubmission you're like i entered in my credit card details is it going to charge me twice i just bought a plane ticket am i am i going to book another one like like what's going to happen right this is kind of a this is kind of a scary box uh i think on the web so uh so we have kind of this rule in remix and i'm not 100 sure that it's going to play out yet but i think it's a pretty good one we have this rule which is when you have an action you need to return a redirect out of that action because otherwise people are going to see the scary box um so let's say that we we we plowed on through the scary box and we got through and we're fine um so so but what the redirect does is a redirect prevents that entry from appearing in the history stack at all right so somebody goes and they're browsing around your site and um uh what's the best way to show this they they can't ever get to that point again using the back and forward buttons they can't ever get to that scary box again because you return to redirect from the post and so you refresh the page that page was not produced on the post request that page was produced on the get that followed the redirect if that makes sense so there is no entry in the history stack that corresponds with that post um so anyway it's a little thing that that remix kind of helps you it helps you do um so what what's even going on here we're posting right we're posting uh some form data and we're just logging the request right so by default forms encode their content as uh with a content type called application x www form url encoded it's weird uh it's basically a query string so what we can do is we can say let's go and get the params out of them and new url search params uh from the await uh request class ah come on now dot text okay i'll oh let me make it an async function let's check out my form param see what's up with that all right let's keep my uh let's keep my console open again all right let's go back over here and let's uh enter some stuff and let's take a look all right so we'll see i've got some some search params here right see so that's this is the form data that was submitted right it came in in the form of a query string in the request body so we said go and get the text out of the request stream uh parse it using the url search programs api which again is uh so this is actually part of the url api so we already talked about how we're building on the fetch api we're also building on the url api which is uh in node and in browsers it's all over the place so we're we're going to use that here uh to go ahead and parse our form data um so we got our email and we got our password oh no you can see my password and clear text uh okay not a big deal all right so so um so what do we want to do in in a login form we want to say you know basically let's get the email uh let's get the password uh so using these apis actually gives us some nice kind of primitives to deal with right you've got these get functions which are nice um i've also got i also have a well yeah we don't need to do this right now but there's a there is a remember me check box in the page this guy right here this little remember me check box um so we could get that one too and that's just basically going to be uh we'll say remember is form params.get remember me if that one is on uh then we want to remember this login attempt okay um how many people yeah have dealt with check boxes before yeah the default value is on i don't don't ask me why there is no off just just on or not present it's not like off when it's not checked it's just on or it's not in the form params at all so anyway that's a little html for you there uh so let's say uh let's say like this let's say uh let's go and grab our user uh wait validate credentials so let's grab that email and password uh oh what if we don't have an email address well we should probably handle that right if email is null uh we're gonna have an error else uh if the password is no come on michael it's friday i don't want to log on and hear about you handling errors error handling is like the worst part of programming oh so boring all right so uh we'll just we'll just put some comments there maybe we'll handle the error maybe we won't maybe our page will just blow up and then who cares right because we're at home it's the weekend and pager pagers are a thing of the past so we don't even know that our site's busted all right uh okay so um so we got validate credentials so let's say oh let's oh and then what if what if the user is known right what if what if we don't have a user what if the credentials are bad well that's another error otherwise yay happy path success right okay so so if we got a user email and password checked out just fine um now we need to do what right we need to basically save the user information somehow so that we know that they're logged in right so this is where we use something called a session so if you're not familiar with http sessions uh you're gonna like this so let's go ahead oh god i've taken up way too much time i'm just rambling on uh let's let's i'm gonna i'm gonna start going fast here ready sessions.ts you're doing you're doing good we're we're loving it i think it's a good it's a good pace is it a good flow yeah for for for for this stuff where it's like all kind of new it's a it's good pace okay well maybe we'll have to do a part two then because i don't know i don't think i'm gonna get to the fun part um okay if you want to get to the fun part you can speed it up and we can always do another do another thing well it will yeah we'll see how it goes we'll see how it goes um i i i just i really love talking about this stuff and there's there's so much here that we've done and i just really wanna i i think i'm spending too much time on some of the details but it'll be all right um okay so we recently reorganized the packages in the new release in the current release that i'm using 0.14 this comes from remix run data comes from remix run data gosh dang it can't remember all right uh get it good to hear you there ryan i didn't realize you were there yep keep my microphone off though let you do your thing cool cool uh all right so let's say uh we're gonna so so what am i even doing i am creating a storage object so we have these uh this idea of a storage for your sessions okay so sessions are these objects that get passed back and forth uh between the server and the client between the browser and the client um and in this case this this cookie session storage is really nice and lightweight because we can just keep the whole thing in the cookie so let's describe what the cookie looks like we're gonna have a cookie name i'll just call it underscore underscore session um pro tip this is the only cookie name that you can use for sessions on firebase yeah we found that out the hard way um okay so uh you want to give you want to give your session cookies a path um if you don't give your cookies a path uh the browser is gonna be like oh this cookie doesn't have a path i will only i will only send that cookie on the exact same path that it was sent to me on so for example if we're at slash sign in and we send back a cookie with no path then the browser will only send it back uh when we are at sign in or one of the subroutes which we don't want we want we want this cookie to be good for auth on the whole site right let's say it's http only so we can only access it uh in uh the browser can only access it we can't access it in client-side javascript we don't need that that's fun um and let's give it some secrets um so the secrets are uh these are for anybody who's ever done any kind of any any kind of uh you know site admin stuff this is um this is just an array of strings that you're going to use to sign the cookie and it's an array so you can rotate them so let's just export get session commit session and destroy session so these are three methods that we can use um to to actually get the session uh get the session object so back in our in our signing route let's go and grab this and let's say um let's say import get session and commit session are the ones that we're going to need all right um so get session and commit session so the way that these work is you can say give me my session from request dot headers dot get a cookie okay so uh so cookies are these are the things that are actually sent back and forth between the product the whole session object is is in there when you're using create cookie storage um but it could be just a session id for example if you're keeping your sessions in a database or in a file storage it could just be a session id so the cookie is really just this little transport you know it's part of the http protocol um the the the browser will send the cookie um and then what we're gonna do is we're gonna send a cookie back um so we're gonna return a redirect uh so in in case the sign in is successful what we're gonna do is we're gonna use the set cookie header uh and we're gonna await uh commit the session okay uh but but first what we're gonna do is we're gonna say session dot set user id to be the user dot id okay all right so that makes sense so so so uh the the the way that sessions work input is cookies that the browser sends output is the value of the set cookie header to send back to the browser so that it'll it'll send it back to us right so that's that's kind of how that works um so let's before i actually sign in because i don't have a way to sign out yet i wanted to show you how we might handle these errors as well um so that that's the happy path but we're going to execute that one in just a little bit let's let's go over like some of this error handling as well because that's something that sessions are also really good for oh oh oh oh i wanted to say uh this remember flag um if we've got that so we can we can have different options um so we we we have different options when we create the cookie um we also have different options when we serialize it which is essentially what this commit session is doing right so we can say um if you know them if they if they uh click the remember check box then we can say let's let's keep it around for a week otherwise otherwise we're not going to keep it around okay so that's that's kind of a cool thing that you can do you know they they tick the box let's keep the cookie around for a little while oh they didn't pick the box don't keep the cookie around for a while and in which case the cookie will uh expire when they close the browser tab so not remembering them okay so uh so the session has a set method right where we can use uh we can uh you know store stuff in the session um what about these error cases so there's sometimes just this stuff that's like this temporary kind of ephemeral stuff that you want to put in a session right like in this case oops in this case we want to just uh do a flash message and this is just going to be an error and then i'll just say something like please enter your email address um so this this word flash comes from that's like a rails-ism it comes from uh from rails where they said like if you just need to like flash something on the page just for this one request you can go ahead and use that uh we're going to use that here too we're going to say please enter your password uh and then we can use it one more time here so we can say oops i don't know how i got two lines in there just wanted that one uh so we can use it here to say um uh invalid uh email and password something like that okay so so we have a way to you know we have a place to put these error messages um but we're not going to hit this return if there are any errors so what we need to do is in this redirect down here we're actually going to do the same thing that we were doing up above we need to have a set cookie header and we're going to wait we're going to go ahead and commit the session again the commit session method uh goes in and it goes and serializes that session to you know the value that we need for the set cookie header um so what we're going to do is we're going to have that um and then in the case that we're redirecting to slash sign in um we're going to have a loader up here loader function okay so the loader is kind of like the action the action is for post and put and delete like the right okay the loader is for everything else it's for the reads for the get requests okay so uh so in this case what i'm gonna do is i'm actually just gonna go and uh well there's there's a lot of nuance here but we could say let's go and grab the cookie well what the heck let's just just for the sake of time let's just grab the whole thing uh and let's just say um so what we're gonna do here is um we basically get the chance to return some data okay some data for our route okay so um so our route has let's see i'm gonna bring in um use route data from remix run react and i'm gonna use it down here in my component so i could say let data equal use route data not use reducer not that one auto complete is being so helpful okay so so uh so the loader is this is your way to load anything you want right you this this function is going to run on the server side so you can go and you can make a fetch you can go and uh you know read from your mysql database from postgres you can go and make a fetch to github and get some data from there uh what you know what whatever api is that you need to hit uh that's fine and you just give us an object and then we will give you that data back in use route data in your component so um so let's let's let's say here um if there was an error right because we had the session those error things let's say we'll we'll just go ahead and return that we also give you uh so we'll just return that there's another little uh nuance here that you're going to need to be aware of and that is that um with these flash messages as soon as you read them like this then they disappear from the session so we actually need to uh we actually need to serialize that session again so i'm going to use json here i'm going to return this as json uh and i'm gonna set the cookie again i know setting this cookie every single time is a little uh it's a little pedantic but um but we're working on it okay so so uh so we have another helper here called the json helper it's just like the redirect helper it just helps you when you're sending some json and then you might need to tack some headers onto the response okay um so let's go and let's check out the the the failure case first uh so let's go over here and i'm gonna go and enter in that and enter in that oh oh oh wait a second we don't even have the i don't even have the data let's uh let me just put it there and pop up in my console so i can at least see like what's going on in the server render all right cool so i i submitted my uh i submitted my my my form uh you'll see that the the route data was hey we have an error invalid email and password uh this is you know my server console so let's go back over and we'll say something like um what if we put a i don't know what if we put an error message right here what's that gonna look like text read 600 uh there was an error probably want to like text center that right what does that look like all right yeah that looks good oh that's like kind of dark that's like blood red let's make it a little brighter okay um so what we want to do is if we did have an error we'll show it like that there you go oh wait we don't have the error variable we call the data let's call this error like that okay so uh go ahead and refresh here okay so if i enter in invalid stop uh we get hey invalid email password okay cool so so what's going on here is again you know we're we're processing the post data uh we're setting the flash message with an error uh going to go ahead and serialize that cookie we're going to get redirected back to sign in uh the loader is going to run so this is our get request right the loader is going to run say hey let's go grab the error and let's go and pop it in there okay you'll notice that you know we said commit the session so that if we actually like refresh this page right now we don't get a re-post remember we talked about that um we just we just it's just a fresh get right so so that error isn't still there um okay so that's kind of cool that's kind of the whole kind of uh flow there with the with the loader in the action um let's actually sign in for real and see if we can uh get a successful sign in here welcome to remix you are not signed in we just signed in why aren't we signed in so let's go back to the index page so so we know that we hit success here right because we got redirected to the slash page right to the slash we know that we hit success but we hard coded user to null uh let's go ahead and use a loader in here um and uh and and we'll reuse our same session primitives let's say uh let session equals away uh a leader get session uh from request headers dot get that cookie um and for the loader here we will say uh uh i guess just uh return the user is going to be await uh validate no no no no no let's see i guess uh we'll say we'll say look uh you have a user if the session has a user id in it then we'll go and we'll try and get uh get the user by the id uh otherwise we'll just say the user's name there we go now we've got our user all right cool so uh so let's uh let's use our um our user out data hook so let's say let's get the user uh from use data there it is um and uh let's pull that back out from um my brain is not working it's already there okay oh yeah the auto import thing worked all right so we've got the user now in our root routes let's go ahead and refresh and i should be here welcome michael welcome to remix cool thank you it's very nice of you like that um okay cool so we are signed in uh let's get to the sign out the sign out the sign out is our route that we haven't even created yet so let's go ahead and create a new route uh we'll call it sign out just to just to complete the circle here this route isn't going to render anything so i'm just going to export this default component i always forget to write the word function anybody else forget to do that i always forget that ryan just sits and laughs 100 i do that all the time oh i'm like export default this what you didn't know that was a function give me a break i put friends after it right what's wrong uh so we need an action here action nice uh a sink because we are going to destroy the session i know some of you are excited when i type that destroyed method uh it's like that it's like the bang in ruby right like you see that and you're like oh it's something exciting is about to happen here all right uh and what we want to do is basically whenever anybody hits this spout we're just gonna get them on out of here go back to slash and we're gonna say hey your headers are uh set that cookie oh wait uh destroy the session okay um oh we need to redirect import redirect from remix run data all right ah the piano is going again great all right so uh so that should work so in our index route we've got a form right that says hey the action is go to the sign out so this is actually this is a url right so we would go to this you know if we if we looked at the if we looked at the markup here uh we would see in this form uh you know this this this action right here this is this is actually a url that's that's gonna hit that we're gonna hit uh so we're gonna go hit that url look at the network tab and then we're gonna we should end up back here hit that oh no it's empty it's not empty are you huh your form doesn't have method post should i do all caps probably probably doesn't matter um i think i think the compiler's choking on this too oh you made a post request but did not provide an action for route routes sign out so there's no way to handle the request oh i think this might be a bug yeah i gave you an action thing let me try restarting the compiler you know it seems like the compiler is upset about something all right let's go back here try that one more time well happy we're running over here all right you go okay so now i'm signed out that was a sometimes when i create like a brand new file and it's like an empty file the compiler chokes and freaks out and so i just it's the thing i need to look into but um uh but anyway so that's how you destroy the session so now boom you're done so uh so we're at we're at time here um golly i wanted to go over so much more cool stuff you know you know one of the coolest things about this whole this whole page is guess what um do you see okay so ignoring this one do you see any javascript here there's no javascript right this is the html this is the css this is some stuff for the react dev tools which is not part of our site and this is the fav icon so we don't actually have any javascript running and i think you might be asking yourself well like what the heck this is a react framework right react is javascript yeah this is a react framework but this is more importantly this is a web framework right we are building uh good websites and not all pages need javascript in fact nothing about you know this flow that we just built actually needs javascript i can go and sign in i can you know get errors uh you know i can i can try again i can i could even like preserve these form field values if i wanted to in that session right so i don't have to punch them all in again um everything in this this flow that we just made works just fine without javascript um why might you want javascript on the page well you know what if instead of like reloading the page you wanted to show a little like nice animation or something right you wanted to show a nice little um you know a little spinner on the button you know while it's being submitted or something like that um and again i know i'm out of time so i'm i'm gonna try and hurry with this but um but something that you you could do is um so we so let's see so here's our form here's our form here so notice this is a lowercase f form um remix actually ships with a capital f form so you change you change one letter from your lowercase f to your capital f and i need to like minimize some of this stuff because i keep scrolling too much uh yeah there it is okay so uh so what does capital f form do capital f form works the exact same way except let's get it form here uh works the exact same way as your as your your built-in form uh except we don't get page reloads so if i type a bunch of junk in here i have a bunch of junk in here and then i submit we didn't get a full page reload oh sorry golly that's not working i have to put javascript on the page first that was exactly what we just did um so so you'll notice here in the app so back up all the way like to the beginning of the presentation right we have the meta we have the links in here um if we drop a scripts element on here okay so we just pulled in scripts from remix and react if we drop those on the page now now check out the network tab now we're in business all right so what's going on now well now we've got our bundles on the page right we've got react we've got react-dom uh you know we've got the history library which is yeah we've got react router um so this is this is now this this page fully hydrated right this is not hydrated this is hydrated right we could have called this the hydrate the page component right that's what's going on here so uh so again what did i do oh builder needed time to catch up all right so so if i come along here and i'm you know developing this page again uh what what happened there ah geez dang it i should have left the network tab open sorry let's do it one more time right so we got the same result without a full page refresh same result okay so i'm kind of an old old guy when it comes to web development i totally recognize that um we used to have this idea in web development of progressive enhancement you sometimes see people abbreviated as pe um this idea that you know that everything needs to be made with javascript uh it only came around in like the last decade or so right all the clients side rendered stuff before that it was like sprinkle a little bit of javascript on your page but like html is is the important thing html is the core html is the page and then javascript can make it interactive dhtml right dynamic um in other words you don't always need to hydrate you don't always need you know to break out the the big the big you know react library and load you know a bunch of javascript on the page um you only need to do that if you do want to hydrate and if you do want to do something that's kind of nice right so like in this case you'll notice that you know the the input values did not reset because we did not get a brand new page right we went to the server we submitted we got the data back and we got the error back um we showed that and we re-rendered but we didn't clear these inputs so um you know we could show a loading here we should we you know spinner here we could have some kind of transition but but anyway i'm out of time so but that was kind of one of the one of the points that i wanted to make was like uh you know remix what we're really building it for is we're building it for people who care about building really quality stuff for the web and so uh and if you're doing that you you care about this you care about progressive enhancement you care about um you know loading sites quickly um you know putting the minimal amount of stuff that actually needs to to appear on the page um something else that was really cool that i kind of glazed over um and this is one of my favorite favorite favorite features of remix is um you'll notice here um oh gosh i didn't put i didn't put styles on the page um but if i went in here and i and i wanted some like separate styles on the sign-in page there are probably quite a few people in here who are like uh uh you might think of yourself as like a designer right you you you kind of specialize on the the kind of more of the visual aspect of things um let's say let's get some styles on here i think i think you'll like this one uh so let's say go to go to styles index don't know next.css and put that on the page ah href the styles so so so so question for those of you who who you know do a lot with styling and and think about css a lot um how do you get uh why is that you read and complaining at me oh you're fine what are you complaining about whatever get out of here uh question for those of you think about css how do you how do you make sure that you just have the minimal amount of css on the page how do you know okay it's it's it's there's no one answer to that question it's a loaded question there's a bunch of them um in remix the approach that we're taking is uh is this basically let me get the scripts off the page to make it a little more clear what's going on so if i if i go ahead and refresh this page here you'll notice before before we just have the global css on the page now we have the global and we have the index css on the page so um so what remix does is react router has these this idea of nested routes right and you can have one or two or three or four routes on the page we associate the styles with the route itself um so in this case you know this index route has some have some uh styles associated with golly where did it go yeah the root route has the one and then i just added them i thought i just added them in here where did i add them oh i added them into the sign-in page sorry yeah i added i added the wrong one the index should have been in the index page but anyway uh right now we have two routes on the page right we have the root route and we have the sign in route okay when we get out of this route uh when we go back to the route page um you'll notice right we don't have the sign in styles on the route so we go to the sign in page uh now the now the extra styles show up right um and so and and it works that way the same for for any routes that are on the page so you only ever have on the page the css that is necessary for the routes that are currently on the page which i think is awesome for me as a as a developer that for me is is a huge kind of burden lifted i don't have to think about you know conflicts between you know styles between different routes that might be on the page at the same time or sorry different routes that you know that there might be like in share share a parent route for example because once one route leaves the page its styles are gone the new route shows up its styles are applied so remax remix is taken care of of doing you know we already saw it's taking care of you know fetching our data and doing things like that remix is also taking care of managing what styles are on the page at any given time um so anyways i know i'm 10 minutes over now i thought i like went way over but um i'd be happy if anybody is still around if you want to ask some questions or uh we could go over some some stuff in case some stuff wasn't clear again i uh even if you even if you don't have time to stick around now i'd appreciate your feedback um if you know if you wanted to just like privately message me on the chat or something because like i said i'm i'm prep i'm prepping this for a talk and somehow i have to cut this down to 20 minutes for next week uh which i'm gonna try really hard to do but um happy to take your questions if you got them uh michael hey uh this was awesome this was awesome this was super cool there were a ton of like just kind of like head explosion moments um in there tons of cool stuff um i want to invite anybody who's um comfortable with it um to turn on their camera and i think we should should be good now turn on camera you can unmute yourself if you have a question um or just want to tell michael what an awesome job he did um but yeah i mean just i'll go first that was amazing and it's so cool to see i think the the thing that i get most excited about is that transition that you demoed towards the end there that like lowercase f to like capital case f for the form and like including the scripts like all that stuff at the end just seemed really magical really well designed and considered but um who else who else has questions and uh wants to get a chance to ask michael orion yeah it's it's it's so important to do to be able to like progressively enhance the site right i think we all got to this point where we were just like well i'm building my site with javascript and who cares about you know like the argument i think was like well everybody's got javascript and yeah everybody does right but that's not why we're leaving javascript that's not why we that's not how we decide whether or not to put it on the page right we decide you know how to put it why to put it on the page because you know we want to speed it up we want it to be fast we don't want people to be loading stuff that they don't have to load you know so it's just a it's it's really is a progressive enhancement conversation it's not a well everybody has javascript so why why not put you know 500 kilobytes of javascript on the page you know yeah yeah absolutely um yeah also my co-founder ryan is here uh in case any of you don't know ryan uh there he is with the hat uh ryan is uh the other half of this whole outfit so a lot of the ideas and things that uh that we that i just discussed were you know we shared um and and shared you know implementing and stuff so yeah happy to take any questions if you guys have a question yeah yeah what's up i might have missed it because i was bouncing in and out but uh did you show anything like where you have shared validation between your loaders and your client like if you were to use like a yup schema on the front end and then if you had joy per se on the back end like what does that look like in a remix input validation so i didn't actually show anything like that um all i did was i had some validation on it it was just like uh you know required or not like did you submit the value or did you not and and if it was missing then i i put a flash message in the session and said hey you know you need to you need to give us that um i i've never actually used joy so i but i know it's quite popular um i'm not sure exactly what that looks like but it's it's you know as far as sharing validation goes uh i i agree that you i think you need to do i think it's best when it's done in both places if possible right because just doing it i got something to add to that michael yeah yeah so so what when when javascript's on the page remix is just emulating what the browser does with those with the post and everything and like fetching the data again but if you just think about like ignore the server just pretend like you wrote all this code yourself in react all that's happening is there's a component that's mounted you submit the form you serialize the form send it to an api route api route sends back session data and then you're still on the same page we redirected to the same spot um and so the way that i think about validation now in in this model is uh you can just do it on the server and you get all the benefits of of the client validation unless like you're doing it on keystroke but you could on blur you could like submit a partial form to the server and tell the server hey this is partial so it doesn't like validate the whole thing or on submit it goes the server then comes back and you can animate in the errors you can have a spinning loader like like it kind of changes yeah that's right right you gotta write it the old way you just validate on the server but you get to do all the cool ui stuff on the front end because all it is is a fetch and a set state from the react uh perspective yeah that's why i was asking about cloudflare specifically because i was curious about the deploy target and what libraries are would actually be usable there because for example joy is enjoy's just the validation library whatever right it's supposed to have browser built in but it won't work on a web worker target yup obviously will so i from my perspective i think about like well what tools do i use now what does that transition path look like especially if i want to stay in my same ecosystem and that's why i kind of asked because it's that that's the only like gotcha in my brain that i don't quite understand is who's in control of the validation and if it's the server that's fine but that that that helps a lot yeah i was thinking like oh you could literally be cared you could just have validation functions like ignoring joy or whatever libraries we're talking about you can just have validation functions right there in the route module that you call inside the component on on use effect or you submit or something and then use it in the loader as well and like you don't even it doesn't even feel like it's in two different places you just got a function that validates text that's incredible i love that any other questions where can people uh get involved obviously uh you have the the remix um server which i think we can easily get a link to and post that in there for anybody who is interested but are there other ways that uh you're requesting involvement for people who are interested oh that's a great question um we are uh you know like i said we're still in just like supporter preview mode and i think ryan and i have just we've been keeping it kind of close um just to make sure that that we kind of because i feel like we've got this we've got this vision for it and and sometimes our visions aren't even like the same thing and so we still have to like get on the same page you know and and but uh i think definitely as it matures i think it'll will definitely be able to sort of open it up more and ask for more contributions um for right now the the the things that are public uh public are the starters so we've had some people getting involved there and the docs very soon are going to be public um and so we'll have you know some people be able to get involved there the source code right now for for remix obviously the router's been public for years now um and we still need to get v6 over the finish line so that's uh that's a great place to get involved too um if you're you know you're interested in more writing the code side of things um yeah and then we've got our you know our discord server which i'd be happy to have anybody here who wants to you know join there um be happy to send you the link to that um can you think of anything else ryan i mean i'm just gonna be super candid we really just need support through buying licenses i don't like we aren't we don't really need involvement of like hey help us write this code like um you know this is a it's not open source so we wouldn't request people come and write our our company's intellectual property for us um right yeah but yeah that's the best way to support us right now is even if you don't think you're gonna use it if you got 250 bucks to spare that helps keep keep us in business until we can get this 1.0 out love it love it i have a license we need a discord ticker yeah i'll start it i'll buy one now and then we can roll one brandon dahl uh or no brandon what is his last name aware i think d-a-i-l he he bought a license he's like hey i bought a license i'm not gonna use it i just wanted to support you guys for all the work you've done over the years and then uh and then he started tinkering with it and then all of a sudden built like this awesome journaling note-taking app and he's like i didn't intend to build anything but it was just so much fun in remix yeah i couldn't help myself so anyway there's my sales pitch if you want to have fun and you have 250 bucks then uh that's this is the place to spend it um yeah i think you know i think that's it that's a good point and where do people uh get uh get that where do they buy it it's just remix dot run we remix dot run and if you also join the newsletter um it's been really quiet but if you go to remix.run newsletter you can see my css bugs that i need to fix um but uh we're about to go crazy on the newsletter we're getting really close to our our 1.0 release um so you're going to start getting a lot of information from that newsletter that's that's where we're going to be primarily focused in the beginning um and then once we can kind of get established and get some revenue then we'll be able to we'll be able to open up more stuff and honestly if we can like if we can do well enough um we're not against remix one day being some form of open source um but we've just done open source so long that uh and we know that it doesn't pay the bills we're just trying to do something to pay the bills now yeah what are you talking about open source is great you get a a lot of people that appreciate your work and what not lovely we wouldn't have had our we wouldn't have had our training business without our open source so indirectly it can be very helpful there but yeah i love that i love it and honestly i i cannot uh kind of what is it say enough about the newsletter because i think that you know it's easy to think of this as just a framework newsletter but you know as we saw from michael's presentation today so much of what guides the api is just giving back control of like you know express of the browser like all of these things and like i've learned a lot from the newsletter just about web development like about the fetch api about responses like all that kind of stuff so it's a really good newsletter from that perspective as well yeah cool thanks man yeah yeah cool hey thanks again for having me on having us on and thanks for thanks everybody for tuning in and um you know maybe maybe we'll do another one sometime and like delve into some other stuff because like i said there's a billion things that we'd love to talk about but um uh just not enough time but thanks again and happy to have your feedback if you uh if you have any that just go ahead and shoot that over i'd love to have it because like i said i'm supposed to do a talk on this next week and i have no idea i'm gonna trim it down nice we'll do well hey for uh everyone who's still around uh if you're checking this out on on youtube later um i hope that you enjoyed it thanks again michael for hanging out and showing us all this really cool stuff in remix um big urls to go to is remix.run if you want to check out what we're doing on the discord server it's events.lunch.dev discord you can kind of you can join us and hang out with us and um yeah just uh hit these these gents up with your questions um thanks again michael thanks everyone for being here uh we'll see you around peace

Channel: lunchdev

Views: 245

Keywords:

Id: VlKEzWpOuv0

Length: 78min 50sec (4730 seconds)

Published: Tue Apr 06 2021