Remix v1 Beta Launch

we are going we're live what's up we live yeah we're live bear with us michael and i don't stream much definitely not together we're streaming now baby okay well hey everybody welcome to our live stream um you're right ryan i should not be watching this delayed 10 second thing it's really tripping me out so i'm just gonna i'm gonna do this i'm gonna like minimize this window so all i can see is the chat there we go and then i got the chat over here all right we're good all right well hey uh welcome everybody to our live stream um we're super super excited that everybody's here uh looks like we've got quite a few people here um so uh we are really stoked to share with you uh what we've been working on today uh which is a project called remix my name is michael jackson i'm ryan florence my partner ryan florence over here um and we are yeah we're super stoked to share with you what we've been working on so remix is a framework uh that we we've been working on it for like the last year or so and the the way that we like to describe it is it's a framework for building better websites um what do we mean by that so ryan and i have quite a bit of uh experience uh doing different things on the web um we've been around for a while um so i a little bit about me i guess my my background if i've spent a lot of time doing different startups um the biggest startup i ever worked at was a little startup called twitter uh in san francisco i was there for a while and then i've tried a couple of my own startups um and always building stuff to do with the web always stuff around the web and you know been doing react obviously for the last five or six years ryan and i built react router together uh we've been working on that since uh 2015 i think so it's been a while we're um we've currently got react router version 6 which we've been working really hard on and that is kind of a core piece of remix and it is the largest uh open source third-party open source react library that uh that is in use today so it's it's huge it's used by millions of people over the world um ryan ryan's background is also in the web uh he does a lot of javascript um and uh he was at instructure for a while so you might have heard of canvas it's a learning management system so we both got a lot of history on the web and uh you know we both uh used mootools back in the day used our fair share of jquery uh prototype all that kind of stuff and we've been around and used a lot of different things and um and what we are kind of looking for and what we really wish existed for react was a web framework that was focused on the fundamentals of the web there are a lot of options out there when you're building an app with react there's a lot of stuff for building web apps with react and in in a lot of react sites end up with you know hundreds of kilobytes or megabytes of javascript on the page um you know there's a huge emphasis on you know rendering things you know making everything static which really breaks down when you have like a user session or somebody actually logs into your site um you know there's there's uh and i think i think in a lot of ways a lot of the options out there have kind of skipped over uh you know a lot of things that we've learned about building websites over the years you know things that have to do with you know like http fundamentals um you know doing data mutations using forms and and you know things like that um so so anyway so we uh you know like i said we built react router we always wished that react router was more of like part of a more like full-fledged framework um and and remix is our attempt at making you know a full-on web framework uh not just the routing piece but like everything else that we know and love about the web combined with react router to make this like just an awesome experience for react router users there's millions of react router users right now who we feel like uh just could be better served and so that's that's what remix is supposed to do remix is the next level if you're building a react router app um you know remix will give you like server rendering and code splitting and and all the great stuff that that that you would otherwise have to do for yourself um so yeah so we also run um for the last couple years we've been running a business called react training reacttraining.com we've been giving workshops traveling around the world teaching people about react we still do run that business brad and chance are probably in the live stream right now they totally rock uh we love them we work with them very closely on react training and uh they are great instructors so if you need training head to reacttraining.com uh but kovid kind of slowed down our our like ability to meet in person obviously our workshop business um and so ryan and i have been digging in on this on the software side for the last year um so far it's going pretty well we uh we opened our preview launch we're calling it our supporter preview um and we launched this back in october uh october 29th actually so just over six months ago um wait is that six months november december january march april that's exactly six months um so yeah so we we launched that um it's been going pretty well we have over 400 subscribers so far uh which is awesome we're just so super stoked about that and thank you to all of our subscribers who are here now who have tuned in um who've really been like showing that they believe in us we uh we are so stoked and just so happy to be there we've had having some great discussions in the discord channel um if you're a subscriber to remix you know uh some people who have who have been subscribers have said like that's worth the the the the the license fee alone is just worth it being in that discord talking to other people who are also knowledgeable about the web learning about things like html http fundamentals css that that type of thing and so i think that discord channel has actually proven to be like a really great value for people um so so thank you anyway uh so much and there are a lot of really super knowledgeable people there to are helping each other uh you know do remix building effective web apps it's just really cool so thank you so much um if you've already subscribed um today we are super stoked to launch a beta what does that mean so um so it's been a little rocky not gonna lie over the last six months we have uh changed you know some things of some of our assumptions some of our core assumptions about how remix was going to behave and what it was uh changed and so you know we've had some breaking changes over the last six months and um i think right now it has really really started to settle down the braking changes now that we had so i just shipped 0.17 this morning um mainly it's just improvements you know it's improvements it's removing old cruft you know from old assumptions that we had that are not you know that we've changed um and so things are really kind of settling down and evening out now and so today ryan and i feel comfortable uh actually recommending you know that you build uh stuff and you ship stuff to production using remix um and we are here to support you every step of the way on that um it's it's been quite a uh road to get here like i said but i we're really there um we are already building you know our everything that we do is using remix um a lot of our customers have already built and deployed stuff using remix um and so so yeah so today we are putting 100 recommendation uh we think remix is the best thing out there for for building websites with react um we do not anticipate any more major breaking api changes though there might be like one or two um which is why we've got the beta label on it but if there are we will have um you know full support like here's how you walk through it and we'll be here for you um from here on out it's just focusing on tightening the the developer user experience bug squashing and then introducing even more support for even more providers um so uh yeah one of one of the coolest features about remix is we don't actually want to own your whole stack right you could be deploying to netlify or vercell or firebase or heroku or you know aws lambda or whatever uh cloudflare workers we don't care like we're just happy that that you know that we can that that we have so many amazing options today for building apps and we think you should be able to pick the one that that's best suited for you so remix is all about options giving you options to build your build your app and we support all of those providers and we'll be introducing support for more of them um soon but anyway i feel like i'm just kind of going on i'm just kind of talking at this point ryan is chomping at the bit waiting for uh his chance to really do and write some code and show you what remix is all about so without any further delay i'm going to turn it over to him and uh and we're going to talk about you know what does it mean what does it mean ryan that you can deploy a remix app anywhere yeah uh okay so check this out we are going to create a remix app and ship it to aws lambda so npm init remix sparkles let me get this a little bit bigger for you uh where would you like to create your app yeah my remix app where do you want to deploy so this is what michael is talking about we're going to have more options in here just out of the box we're gonna go to aws lambda and use some typescript and sure you can run npm install it'd be great detected our remix token it is paid software and so we have a private mpm registry and uh the way that works is you get this token and usually it's just an environment variable in ci or in your local computer to get stuff installed i heard npm seven is even faster i'm looking forward to that ryan and i have this ryan likes the fact that yarn uses the same letters that are in his name yeah so i have a hard time convincing ryan to use npm we go back and forth on all right so check this out so now i've got my remix app here and um like michael was saying we don't want to own your server all the time so um with architect you can say arc sandbox and now architect is running our sandbox here on host on localhost 3333 and then over here we're going to run the remix dev server and so now i should be able to pop open we got we got a remix app running uh on architect their little their little environment there um let's let's deploy this um i'm gonna do npm run build that was fast you know we use es build so it's super snappy now we're going to say arc deploy so this is going to take take just a minute not too long architect is a great this isn't remix that i'm doing right here um this is arc dot codes or architect um i've just i've enjoyed working with this and i always kind of wanted to deploy to aws lambda and they just made it super easy it's just as easy to deploy to versailles it's just as easy to deploy to netlify in production remix is actually only two things it's a function that's an http request handler and then it's your assets for the browser and then aws lambda just calls into the remix request handler and then the request handler sends a response back and uh and then off it goes and so uh we we've deployed to a few places ourselves we've got customers who have literally deployed like everywhere from like their own vps they're setting up nginx um all the way to cloudflare workers people are deploying on amazon api gateway yeah it's like you said we we we don't even like officially support cloudflow workers yet it's like it's we're on the cusp of it it's like right there but people have already deployed there so they stole my thunder hey we're in production on a lambda um so that's that's uh that's the experience we want everywhere and we want to be able to plug into github actions or or whatever your platform has like versailles has auto deploys from github netlife has that kind of stuff and so uh remix is going to be compatible with all those things so that's one of the like core um philosophies of remix is that you should be able to own your stack you should be able to own your server and you should be able to deploy anywhere because there's so many cool things that people are doing i'm going to hop out of here and now let's actually go and check out an app here so i'm going to this is this is a different one um this one actually uses remix's built-in app server so if you don't want to bring your own server you can and let's check this one out well not 333 we're going 3000. all right welcome to remix that is that is a beautiful beautiful app okay i'm going to build an app a little mini project manager with uh of course we're going to do some check boxes to do things from 0 to 0 to 60 and we're going to see how this looks it's going to be talking to a database it could be postgres i'm just using sqlite and yeah we're gonna we're gonna just kind of see what what remix looks like so uh remix apps uh live in this app folder see we've got a handful of folders in here the only things that really matter are these three files we've got your entry server so this is the first thing that happens after your server is done your real server like express or or aws lambda or versailles uh after that server goes it comes and calls into here and you'll notice right here you're actually calling render to string yourself so this is boilerplate that your app does um remix gives you control of every entry point from the server entry point to the the react rendering entry point and you see here we're even returning our new response so we technically don't even need to return html from from your server entry and from there once we hit the client you've got your client entry sorry react dom types don't understand that you can hydrate the document but what does that mean all right root check out our root what does that mean right here feel bad for people who say route the same way as root because this is your root route root okay here's our root route we got a document component here with html on it so you actually get to control the whole document with react which means that you can put whatever kinds of things you want up inside here we're going to see we're going to see a whole bunch of stuff in here we we can handle errors with error boundaries all sorts of good stuff but first thing i want to do is just add a link to my styles so i'm going to say stylesheet and i need an href here but i don't know where it's at so i'm going to go import my styles from styles i think it's global css open this up yep there we go and that is actually going to give me uh just the url so remix is going to process that it's going to copy it put a put a fingerprint on it for long term caching and then hand it to me and that'll be in the browser public build directory so i can just put it right here in a link tag [Music] that looks a little bit better now um so what is it actually rendering how like where is this coming from i don't see welcome to remix anywhere inside of here we do have this outlet notice outlet is coming from react router dom so this is part of react router version six a trick we learned from ember and put in react rider version one and then we had some ideas in version four then we got rid of it um and then we got our new and old ideas and put them together in v6 and so outlook is back so outlet says anything that the url matches inside of this route folder we're going to render that thing and so at the moment we're just at slash so it's going to render the index so that's where that's where we're getting our welcome to remix thing um this has some styles as well so i'm going to import my styles from styles index css well before you do that ryan before you do that yeah what happens if i put a bunch of junk in the url right then i'm going to hit the 404. uh yeah just finish the conversation about what outlet is doing right oops yeah yeah either the index component or the 404 component depending on what the url is yeah what you got to do it's a dynamic component yeah thank you so now i've got these styles but i'm down inside right i don't i'm not in the html element anymore so how do these routes that are down in the ui hierarchy participate up in the top layout we've seen things like react helmet where like you do like a head in here and you can do link and then and then it'll um at run time it'll inject stuff up into the head and this gets tricky with server rendering too because then you've got to render first to figure out what's in there and then get this string and then put that stuff up there it just gets kind of gets kind of goofy and we think it's pretty cool that our root component lets you control everything so we've got this kind of special links component that works with your routes special api here we can export a function called links and this is going to get rendered inside of that links component in the root and we're going to return here objects but they're exactly like a link component a link element we're gonna put a style sheet in here and my href is my styles so this is how your your nested components can participate up in the top there we go we get a little a little bit of nice padding inside of there um yeah so so kind of cool any kind of links you want you could change the favicon if you wanted to you can preload some assets we even have api to block on assets if you've got a really important image and you want to block before you get to this page you can do that but we're not we're not going to look at everything because you don't want to be here for 32 hours i don't know maybe you do but we'll we'll show other stuff another time all right let's get back and let's add a route so i'm going to come back to the root component and i'm going to add some navigation put a header in here put a nav i'm going to bring in a nav link from uh react router dom and so this is going to be let's call this the dashboard if i could spell it right to slash and then let's link to projects and then maybe like an about page or something like that right don't you love the new browser default styling okay so i don't have anything at these routes yet so i'm getting my 404 and this is kind of weird the dashboard thinks that it's active um so we're going to say no you're only active when you're at the end your url matches the end of the url so now that's not going to be active so that's cool um not project i want projects with an s okay i've got my projects here um what do i want to do uh well i'm going to add my component i want to add a new route so adding a new route is just adding a new file right here whoa error routes project has no component please go at a default export that's a beautiful error message uh i created that error message down here with this error boundary every route in the hierarchy can export an error boundary and then it uses reacts componented cache and air boundaries so that just the section of the page that blew up um is the thing that has the error and then the rest of the layout can work out just fine uh kind of cool okay i'm gonna export a default function like it told me to and then um we'll just return i don't know i think i'll do like a i guess i'll do a section here um and then uh oh let's just say like projects can't spell all right there we go um i actually want to get a list of projects in here so i'm going to put a nav in there and do some more nav links and yeah yeah we'll do navlink again and we're gonna go somewhere projects and then like a like an id like one or two or something like that and maybe this is like my under 14 soccer team that i started coaching that doesn't look the way that it is supposed to i'm not quite sure why look at my awesome css uh did you get your where do you where do you put your projects link on the page or no the link to the styles yeah i got oh oh i don't have my styles yet of course let me import my styles that's what i'm here for ryan thank you just you know flying wingman and then we'll export our links yeah if it doesn't look right then you probably don't have your styles there we go beautiful okay i'm just going to hard code some stuff first i'm going to put this in my javascript bundle so i'm going to say i've got some projects here it's just this array i'm going to have title like under 14 soccer and then id is like one and then we'll have another one like remix and ideas too map over these things you've done this in react a thousand times projects map project and now we're going to actually interpolate over this and we're going to say we're going to link to project id react rider v6 has um relative uh link so you don't have to put the whole path in there and concat the thing you can just say oh from here go a little bit lower project title all right here we go cool so right now this is in my javascript bundle uh this is hard coded in there and this is kind of what static site generation is all about is let's get all your data at build time put it into your javascript bundles and now everything is static that can be kind of hard when your stuff is dynamic you're behind a log in michael talked about that earlier so how do we move this from static to dynamic because i want to actually get this from a database when the request happens because we're going to be adding these things check this out we export function loader and then i'm going to bring these up and return my projects and that little movement there moved it from static to dynamic moved it onto the server i'm going to bring in a thing called use route data from remix right up there and whatever this thing returns that's what i'm going to get in my component it's going to save this and looks good it came from came from the server this time um and uh oh i'm just going to put any we don't care right now we we will put a real type in there in a minute um so this this little function right here this loader when remix builds it actually does two builds it does once for the server one for the browser and the browser build this gets removed it's not in it so this only runs on the server so when remix needs to get data it's going to go to the server and call that function but in the in the browser that stuff's not there at all so it's it's pretty cool i want to get this actually from my database so i'm going to say uh let's let's get rid of that like i say my projects are await prisma no i don't have a i don't have a prisma yet let's go at it so come over to my app make a database ts file import prismaclient from [Music] prisma there you are um let prisma equal new prismaclient export this thing now i'm going to import that from my db and i can say i'm going to get my prisma projects find mini and return that oh bummer it's empty okay how do i how do i add something to this uh well i mean first i can just kind of be nice here and say projects.length equals zero and let's say no projects add some put a little arrow down this one looks good so we're going to add them with let's let's just put a form in here so i'm going to do a form input type text and let's see a placeholder is going to be a new project or we'll say project title put an aria label on there because screen readers don't do great with placeholders project title and i'm going to give this a name to title and then let's put our button in there add oh i want that in the nav there we go okay so now i got this little thing so what a forms do there's a lot of boot camp grads michael and i have done a lot of training and we trained a lot of boot camp grads who are awesome we love them the boot camps however don't teach people some stuff like what a forum really does so i could add a project like my u14 soccer right here hit enter look at the url you see what the browser just did the browser parsed this form it looked at this name and said all right we got a thing called title i'm going to pull the value out of this you've done this and you're on submit handlers a thousand times but the browser can do it for you and then it puts it up here in the url and then it navigates so a form by default in html serializes all the values that the user put into it makes a request and then navigates to that new page um they don't just exist for on submit but what do we normally do next in react this is not what you do in remix but just uh just for a just for a thought exercise think about think about what comes next i want to somewhere right into this prisma database right so i guess it's all going to start here on submit everybody wish me luck i could do a fetch right from here where am i going to fetch to i guess i'll make an api route create project and then i'm going to be like okay method is posts the body is okay i need the um the title is uh new project title you're gonna get that for project tile i guess then we're going to jason stringify this thing and uh my palms are sweaty and sticking to my keyboard so i'm getting nervous um you got a capital y on your stream yeah yeah well i'm just you know xmlhdp it's so hard to remember um capital letters but uh where am i get where am i gonna get new project tile um i guess i need to control this right and it's gonna be like a set new project oh my gosh put that in here and now i'm gonna have some state um project title set title and then this is use state and then i'm gonna be like uh i need a pending state i want to know that i'm loading so i guess i'll be like set loading is true so i'm going to have another use state up here for if i'm loading um and then the red lines actually help to hide the pieces that you're at and then once that's done well this is an async i got to make this async and once that's done i guess i'm going to get the project out of here i guess that's one and i'm gonna like set projects uh my old projects project uh shoot i don't actually control the state remix just gave it to me so um i guess i have like state projects set state projects equals another use state in here oh boy it's getting really and then i'll default it to whatever my framework gave me but now i gotta like copy it into here um okay yeah let's let's just pause right here and appreciate the complexity of doing a data mutation completely client-side in javascript right there's a lot of stuff that you have to think about so you got you got loading state well you got three different states up there um you got one for the title one for the projects and one for the loading yeah right and then you need another one for whether or not you've got an error on the page so now you're bringing in you're bringing in a state machine or redux or something because it's it's complex to manage that much state it's asynchronous there could be errors um and then you're gonna go make you're gonna go make like abstractions over the top of the client side stuff like okay i've always got an api route i've got an api route somewhere over here so now let's write some client-side code to like get rid of some of that boilerplate and then just call that thing right and so now we've got like we got like uh use api fetch or something like that it's like oh which one am i going to and yeah yeah yeah all right this is this this is the current state of like of let's do data mutations with javascript because we forgot that the web is actually really good at data mutations already so we saw earlier that it can serialize that put it in the url a post is the same thing except for instead of serializing into the url it's going to put it in the post body so you don't see it in the url you're going to see it down here in the network tab when you make a post down there it'll like say here's here's the body of this post so um let's let's let's roll back the clock to 1998. backstreet boys nirvana we're still mourning the death of kurt cobain blink 182 is hitting the scene i wasn't a hip-hop person when i was younger but i love it now but uh so i don't even know who either was oh hip-hop yeah what else do we have going on i was a i was a grunge kid yeah we were grunge rockers um pearl jam well tlc tlc i listened to a little bit of tlc because of my sister um brandy brandy yeah that's all right we're no the roots um tribe called quest uh there was bone thugs in harmony 90s man montel jordan all right so we're going to go back to that era we're going to say hey i just want to post this and i want to post it to projects that's all i'm going to do come over here and i'll say u14 soccer and hit enter whoa we could work on this error message a bit you made a post request to localhost projects but did not provide an action for out routes project so there's no way to handle it what just happened let's go let's go handle that this is getting exciting now mutations data mutations so we have a reader for state on the server wouldn't it be nice if we had a writer people ask us all the time what is the difference between remix and the other stuff that's out there you're about to see it so i've got an action here now i'm actually i want to get a little bit of a little bit of help from typescript so i'm going to say action function junction make this thing async and i'm going to get action function from uh remix and then i'm going to bring in one more thing from remix as well uh oh i've already got it right here redirect so um just to get rid of the red lines i'll talk about this in a second so your api route that we were just talking about before that like create project thing you are already going to have to write this code this code would already exist somewhere now it gets to be part of your react app so i'm going to get a request in here and you're gonna think well what is that is it a is it an express request is it an aws lambda request is it a happy request is it a is it a sad request um what is all this i'm glad michael's here so he can enjoy my jokes let me show you something i'll just i just i'm just thinking now i need to go make a a web server named sad yes the antithesis of happy all right so what what is this what is this request that we're going to talk about two things here so try to try to hang with us for a minute michael talked about adapters and how we can deploy anywhere this is the trick this is how we do it and we keep talking about web fundamentals so far what we're talking about with fundamentals is http a get or a post request so the loader the loader gets a get and um the the action gets post and put delete and patch if if you really want to use those ones um those don't work with html though those need javascript because of browsers but anyway um so so we're already building all these fundamentals of html and http those are those are like old fundamentals that we think are super important still um until we've embraced them but there are new fundamental pieces too so when we say fundamentals we don't just mean you know the grunge era web development we mean the fundamentals of today as well so you already know what this request is because you have been constructing them for a long time fetch projects and then you're going to say method is is post and body is right somebody in there actually let's let's put a jason string in there uh we'll say the title is a u14 sucker whoa handcrafted json yeah we're getting serious here so this right here these two arguments these represent a request a web request and in fact i'm going to not say fetch i'm going to say let request equal new request it's the exact same api same arguments i hit enter and i've got this request thing has the body been used no what's the status paradox status uh what's the method of this thing it's a post because i said post check this out oh wait request.json all this stuff is just built in to the browser already in fact you can just go to mdn uh fetch api and there's a whole it's they've got all these objects and so we were we like day one of remix we started building some stuff and we started building this little idea of an adapter and i had this terrible idea of using delegates and michael was like what if we used the fetch api well i i was just copying uh what i saw the cloudflare workers api doing i remember i still remember when i saw that api i was like like the light bulbs are going off in my head like oh it's not just fetch but fetch comes with request and response primitives and if we just use those we've already got a a consistent model for handling requests and responses which and we can build servers with that and that's consistent with you know the same primitives that you're using on the web so um you know eventually we're going to be running remix offline apps on the web this is like super future stuff but uh but we're not honestly we're not that far off from running you know using the exact same request response model anywhere yeah we can run a node we can run it in a cloudflare worker we can run it in a service worker in your browser it's gonna be really cool so so we didn't even mean to do this while we were building remix we're just like oh it'd be cool to use these fetch api primitives inside of our loaders and actions and now we accidentally built this little set of tools that normalizes all of the javascript servers out there whether you're deploying diversel or an express app or aws or azure or netlify they all have their own request response objects and we built these adapters that turn them all into the web fetch api which is actually a cool project all in and of itself which i don't know maybe one day we'll just extract that out and like make it an open source project or something um yeah yeah kind of cool so i've i've got one of these excuse me one of these requests in here so remix created this request um and so i'm going to get the text out of here so i'll await my request.text and then there's there's another another api in the browser and i guess that's in in node two is url search params um i guess i guess i'll just do this yeah that's another really nice uh web primitive and now i can get the title whoop so forms by the browser automatically serialize uh get serialized into one of these url search param strings that's the body of the request that the browser makes and so this request text is going to be one of those search param things so i'm going to actually just say this is a new url search params like how many libraries are they on on mpm for this kind of a thing yeah yeah let me go parse the url there's at least seven of them so now i've got this body and uh i can say await prisma dot project create let's say the data is title body get title and types is going to be mad we do not have time to get into valid form validation and error messages um it is really awesome in remix but we just we just don't have the time for it um short answer is you use sessions use server state for that stuff um right inside your loaders because we're talking to the server and we think sessions are another one of those fundamental things that are super important local storage is cool but we can do we do more interesting things with an older uh technology um if you're interested in what it looks like to work with sessions and remix because i don't think we're going to get to it today right yeah no we're not going to look at it today but i gave it i gave a talk at uh react summit just uh earlier this month actually which um i'll find that link to it in the chat but it's working with us we we have a great api for working with sessions and using server stages yeah it's cool all right here we go here we go let's see if it works i'm going to hit enter oh dang remix launch look at this that's awesome add blink okay so you see what code we wrote we made a form we said post it here and then remix called this action on the server parse the url go talk to your database prism prisma prisma's not remix that's a that's an arm that i brought in and then then we just go right back to the projects page a lot of times people ask us why we do this we require a redirect here so that you don't have to do that like do not click the back button or you'll book another flight or your card will be charged twice since we own the front and the back end we can enforce a better user experience like that um anyway i don't want to get super into that because we have so much other stuff to get to um is what where am i where am i going next uh just checking my notes here um yeah okay let's uh let's let's go make this page i'm gonna click on this under 14 soccer ah man won't have anything there all right let's go add something so this url you'll notice has this one up here so i want to actually i want to parse that out and use that as information to go find it for my database so under my routes i'll make a new file uh actually i'm not going to make a new file because i want i want this layout to persist this is another thing where people like oh what makes remix different um react router has built-in layout support with the url and so remix does too i'm going to show you show you what that means this is and we we're still struggling to emphasize just how cool this is these nested routes when you have a server and hopefully we can communicate some of that today but i'm gonna add a folder here called projects so now i've got a folder and a file called projects seems kind of weird add a file here and this is going to be id.tsx so let's export default function [Music] project and return a main in here and uh we'll say project title goes here i just got an email from linkedin this morning if you follow me on twitter it's so funny the name of the the subject in the email was replace with your subject line it was just cracking me up um and then they put the subject line in the person who sent the like two field anyway i thought it was hilarious they're trying to appeal to developers it was a bit of developer humor for you that's so all right so i'm going to click on under 14 soccer okay no longer do i get a 404 but i didn't see my stuff what the heck well just like our root component our root route we needed to put this uh this outlet here now projects because there's a folder with the same name this is now a layout route this route is going to wrap a bunch of child routes and so the way to render those is to put them inside of an outlet so we got to say hey you're you're a layout route you're going to have some child routes that might be active so put them here got my project i'm gonna think i'm done navigating files give myself a little more room here so now i'm gonna go fetch that so i'll come over to my uh so so what happened this this dollar id uh remix parses that out of the url and now it's gonna pass it into our loader so i'm gonna export uh function loader um actually i'm gonna get a little help from typescript again my number one feature request to uh typescript would be to let me add a type when i use the function keyword for real yeah you know so i don't have to change everything to a let declaration actually just type a whole module yes type a whole module that that would be amazing then i wouldn't have to write any of these types yeah you're going to want to get the params out of here right yeah i was just going to say michael michael talked me off the cliff once where i was like well we can't type modules so maybe we should like export default class project and then just do a bunch of static functions in here and he was like no and he was right okay all right so what do we get inside of here so type's going to help us we already saw a request comes into loader params also come in so these params are going to like i've been saying get parsed off of that so i'm going to bring in prisma again and i'm just going to return project find unique again this is prisma not um not remix and we're gonna say where the id is number uh params.id so that um urls are always strings so like you have to type cast back and forth sometimes and now i bring in my user out data again and we're going to say that this is a project get that from prisma thank you oh yeah see give me a break i wish i would know that it was only a type all right oh i did that backwards all right got our projects project we just want one and then in here it's going to be project.title okay cool let's add let's add some checkboxes to this thing so i'm going to say ul and then i want like an li in here and then i want an input type checkbox and then i don't know buy the nets that looks great and then i'm going to have another one that is um uh to just add a new one name equals title placeholder is new task okay that looks cool that was disabled so this looks nice so i want to be able to type here hit enter and then have that go so that means i'm going to need a form so i'm going to put a form around this and a method is going to be post again i can leave the action off and it's just going to post to this route the default that's also what browsers do by default um and uh yeah so come up here add my action action function thank you uh this is async get our request in here do what we did last time i should probably have made a um snippet or something like that and then we will let prisma um tasks oop we're gonna create a task here and we'll have some data on it and we'll say its title is body get title once again we're just telling typescript hey i'm good i'm good i'm good what do you want oh it needs uh it needs a project id i want to get that uh from here oh actually i don't need that i can get that from the params i'm at this url yeah params.id what's your problem oh thanks uh trying to redirect thanks typescript yeah for real and we're going to redirect back to projects params id yeah how am i looking boom boom boom i think it looks good uh boom boom request.text and then actually i want a loader i have my project but i need i want to get the tasks from actually from here so i'm going to say include tasks true and now my type i think is going to flip out on me so i have a special one project with tasks and then we're going to say project tasks map task put my li up in there and actually put its title in there wish me luck buy some goals enter schedule practices dude it works i hope you're all ready for this michael do you think they understand what's happening yep what i'm about to tell them uh i think i think a few people might i think some some people have been hinting about it in the chat oh have they yes notice what's going on it's fine i think i think the vast majority of people are really gonna like it i think a few people have have kind of hinted at it but i still think it's gonna be a surprise we got one thumbs down right now and i'm hoping that that person's still on and that thumbs up like they switch maybe they can remove it yeah this is this is this is my goal right now i have a secret look at the network tab what is not here click on that click on the js i'm gonna wait the 10 second lag that you get what we got two thumbs down three now oh wait two no no you're jerking somebody's on the fence somebody's on the fence oh so people like js they're like i want jazz on the page i want i want a javascript framework not a web framework yeah yeah oh man oh that's hilarious okay okay okay so hoping we're gonna put a meg of javascript on the page i'm really disappointed so we are not anti-javascript by the way we did not like we're not trying to build a static site or anyway whatever um let me go put javascript on the page and we're going to talk about why we got eight thumbs down this is cracking me up it's only because i brought it up and now everyone's like i'm going to troll him boobs man just ignore him but it's still it still hurts like like this even sarcastic it just hurts a little bit so remix as we said when we looked at this root component in the first place it puts you in charge you are in charge of the network tab this is yours like we don't get on your server we want you to own your entry points we want you to own this network tab the javascript frameworks today man you you go to a website and they download the whole dang website like everything hundreds of megs sometimes it's crazy um so anyway you're in charge so i'm going to bring in scripts from remix and then i'm going to put these scripts on the page yeah now note that by the way i just want to make it clear when we do this our goal is not like yes what if they don't have javascript enabled in their browser right like that's that's not a concern of ours right the the the the the fact of the matter is that we didn't need any javascript to build any of the stuff that we already did we just didn't need it so like so why put it on there if it just doesn't need to be there right right and and then we should ask the question well why might we want some script on the page right yeah so check this out here's why so i just took it off again and this is annoying i hit enter and where's focus way up here if i'm a keyboard user which i am very regularly this is terrible uh if you're a screen reader user that's also terrible like sometimes people think oh if you have javascript you're automatically making it less accessible uh if you know what you're doing it's kind of not all that great in in this ui anyway i'm trying to build a cool little app um that's not i mean anyway i'm like i keep almost getting on my accessibility cell box because i can go all sorts of directions on that anyway the point is we can make this a much better user experience for everybody people using assistive tech or not um i mean technically a mouse is still assistive tech right but anyway oh totally my keyboard assistive tech so i'm gonna add some javascript on the page because it would be better if the focus just stayed right here this is cool hit enter oh did i not reload i didn't save i don't think oh oh oh oh oh yeah i am using lowercase form so now it's time to say we're putting javascript on the page to make this better we're going to give this form superpowers and make it capital f form we bring that in from remix right there so capital f form is a whole lot like link and anchor right link uses react router to navigate around anchor doesn't so capital f form uses react router and remix lowercase form just uses the browser so at this point all of remix's design is not just based on how html and http work but it's literally the implementation as well and then when we bring this capital f form we emulate that behavior so remix is now going to be in charge with javascript of serializing your form making a fetch request without doing a full page reload so this this gets this gets really cool all right check it out all right my focus is still there this is where people are like oh yeah javascript you just screw things up and yeah we kind of did that was that's a little bit weird right there so remix isn't going to give you these super powers without giving you a way to deal with this kind of weird stuff so i want to be able to clear out this form field after i submit the thing so i'm going to bring in a thing called use pending form submit from remix whenever there is a form that's pending remix is going to populate this object with that pending submit and then when the submit is done when the navigation's over that thing is going to go away and then i'm also going to put a little replace on here because i don't actually want to add a whole bunch of entries in my browser history and make the user like have to click back a thousand times that's another thing that you can't do with just an html form this is why we'd want to bring javascript in because not only does the focus move from this but you have to click back a thousand times like look at my history stack it's ridiculous it's all every time i made one of those so we don't want that we need javascript to to make these ux improvements so now i've got my form replace i've got my pending form submit and i'm going to bring in a little use effect from react i'm going to say all right whenever i've got a pending form submit i'm going to say all right if i have one let's get let's get a ref and uh let's clear it out i know i could use like state or something but i don't i don't care i've i'm uh i've gotten lazy with my react and we're going to say html input element put a null in there make typescript happy oops not input and then put the ref down here on this thing i think i just called it ref right yeah oh that's right ref.current.value is what i meant to do okay so when appending form submit comes in that means that we just submit the form you might have thought well why didn't you put it on on submit here well if i clear it inside of there then the value is gone and then we won't post it and so that's that's not what i want to do um so i'm going to use an effect and just say hey if we got a new submit then go clear that thing out one thing that i've loved uh building with remix is i get to do the fun parts of react now there's like there's the fun parts of react and then there's stuff that i hate doing and the stuff i hate doing doing is like talking to the server getting my data making sure everything updates on the page that i need all that kind of junk but these little interactions like making this ux really smooth that's where i have a ton of fun building websites um and that's the only kind of react you really have to write in in remix uh all right so i'm going to save this and let's try it now cool i don't know if you're catching it on the live stream but there's a little bit of so i'm going to oh i'm going to emphasize it we're going to say new promise set time out response uh let's let's give it a second and a half just to see what that is feel it good here we go see that so i submit the form boop we get because this gets cleared out but the form hasn't uh processed and we haven't reloaded the data yet so that kind of feels that kind of feels gross so maybe maybe i wanted maybe i wanted to go the other way when we don't have the pending force in it when it's done maybe that's when we should clear it out and that's a way to go too check this out i hit enter uh gross i don't really know hit enter three two one ah that's not what i want either all right so how do we fix this one is worse we have two choices choice one is we use some pending ui we put a spinner up or something or say hey we're loading we're processing there's another concept called optimistic ui in our workshops we used to make fun of this idea just a little bit because a lot of times when people write optimistic ui like they'll just hope that it works but they don't deal with it when it doesn't work so optimistic ui is saying 99.9 of the time it's gonna work so let's just update the ui to look that way and then if there's a problem let's alert the user like oh hey sorry that thing didn't actually work so how does how does remix help you do optimistic ui we already have this pending submit that's how you do pending ui we're going to do some optimistic ui check this out we're going to say well we know these things look like right oh you know i need an aria label on here and then i don't need to open that up too see accessibility helps everybody i've got this pending form submit there's there's there's some stuff on here action data ink type method so it tells you everything about this submit that's out there you can see what's going on with it so let's come here to this this list item we know what it's going to look like when it shows up so let's just copy one of those and let's say if we have a pending form submit let's make an optimistic list item we're going to say this is disabled uh because we don't want uh we don't want them like clicking this thing that's our that's actually our pending ui that's the thing that like tells you if it's ready or not and then this task.title this is the tricky part um we don't have a task kit that's the whole point so we're gonna get it from our pending form submit this data property is a form data which again this is i don't have key props this is also built into browsers a form data and you can actually give it a form and it'll automatically turn that into a form data object so that's what remix does and then it exposes that form data to you on this pending form submit so i'm going to say get the title now watch how our ui behaves way better hit enter three two one enter that's cool is that nice oh do that with well so so i'm i'm i don't mean to uh uh sound like too cocky or whatever but but that that's really cool right so some people when they see you know when they when they see us a thing like this they'll be like oh well we just need like better primitives in html to be able to describe you know what we want to happen right so you know if you are going to describe this behavior you know in an html attribute it would actually be quite difficult to say like okay well so when this form over here submits i want a new item to show up over here uh but the checkbox is going to be grayed out until the form comes back with a 200 and then the checkbox is going to be okay you know what i'm saying like that's a lot of that's a lot of logic to try and encode you know all the different scenarios and all the things that you want to happen and have that fine grain control using html attributes um there are some things where you can totally do that right you can you can you know add focus you know autofocus attributes and things to html elements but that level of control really helps to have a scripting language on the page you know so that's a great example of why you might want to put javascript on the page optimistic ui so just kind of like sit back and think if you're using create react app um or all you had was just client-side stuff you didn't have this framework behind you like remix like what would this code look like that optimus qi that pending indication right there clearing out this input talking to the back end this is the whole component you just have a tiny function on the back end your api route you have this little function and and i understand we aren't doing error handling uh and validation and that would add some lines but it's not going to like complicate the workflow um we just have this little action right there and then the only react we wrote was just asking remix for stuff give me my data do we have a pending form because i'm going to do some optimistic stuff and then i need a little ref to clear out the thing when they submit the form and then it's just off to the races yeah i i sometimes after i'm building stuff with remix i honestly sit back and i'm like i cannot believe that michael and i built this like yeah i just it's so much fun it's so much fun um to work with uh let me uh how are we doing on time 210 we started at one okay okay we told people it's gonna be about 90 minutes um and we're we're looking good i'm going to i'm going to implement these checkboxes oh no i want to show you one more thing one more thing we are down to four thumbs down in the uh in the chat so i just disabled javascript again so we're gonna get some more pleased with your optimistic ui yeah we're gonna get some thumbs downs again because i just disabled javascript draw attention to it um uh check it out i hit enter this still works so when you hear people talk about um progressive enhancement this this is what this is what we all hoped for ten years ago eight years ago when we started talking about progressive enhancement um is uh make stuff still work so in remix if you if you stick to these declarative primitives form and links and actions and loaders uh you can actually get ie 11 support for your basic feature set that's a reason to get rid of those thumbs downs oh we got more you want to support ie11 these people care about ie11 yeah i guess so but well yeah so they can still support it so anyway i think that this is i think this is pretty cool um that it's not just we based it on these ideas we actually used them uh anyway let's get let's get javascript back on there um and now we're gonna implement these uh check boxes and we'll oh yeah we'll we'll call it a day um so this this is where we're going to veer off of this works without javascript um and we're gonna do some stuff that's only happening client side so i could put a little form around each one of these check boxes if i wanted to but when you click a check box it doesn't like it doesn't submit which is html right so we could change them into buttons and have a form if that's how we wanted to do this and support no javascript but like we said earlier that's that's not what we're trying to do we just think it's easier to think about it uh when you think that way um so i'm going to use a little thing called you submit i'm gonna bring that in from uh oh react does not have that remix has that and then i'm gonna come into each one of these check boxes and i'm going to say uh first i got to get my submit so you submit is a way to imperatively call submit just like link is a declarative way to navigate and navigate in react router 6 or history.push is an imperative way to do it we've got form well with a capital f and then we've got this submit function so this is how you can submit a form without having the form so i will say um this checked is gonna be coming from uh project or no no task dot complete and then we're gonna say on change get our event in here we're going to submit complete is whatever event.target.checked is and this is going to be mask and say hey i need a string in here because this is going into a url and then i'm also going to need to know actually that's all i need to know because we already know the oh no we need the task id and then we'll put the id on this thing and we'll say task.id that also needs to be a string and then the second set of options so this first set is the data you're you're sending kind of your form your form data and then the second set of options are the attributes that would go to a form so this is going to be a method uh i'm actually going to do put on this one just you know feeling feeling crazy um and then we're going to do a replace true on here too because we don't want to add entries into the history stack and then uh that looks good so i'll submit that let's come up to our action and now we're going to say let's say let's switch on request.method to lowercase because i never know if it's going to be upper or lower some apis make it lower so i make it higher upper and we're going to say if this is a post let's do what we were doing before we're making one of these and then if this is a put we're going to say away prisma task update i think and we do a where so close and we're going to say body get id it's going to be mad it wants that to be a number and the types is going to be mad because it doesn't exist we're going to say complete is we're going to parse this one because it came in as a string and body get complete um oh wait a sec that's in the wrong spot i gotta say data on this okay i think that's right so i send uh the id and complete come up here to my action we're going to find it by its id as a number then we're going to say that it's complete yeah that looks right does the checkbox have a name of complete on it no uh but we don't need it because we're just oh yeah you're sorry you're using us uh you submit sorry okay of course and then our check box is checked based on if the task is complete so uh let's let's give it a shot reload cool you do the i don't know if you see the jank we got some jank again that's what happens when you start doing stuff in the browser you get jank i shouldn't have gotten rid of my uh wait new promise let's slow it down haha you see what's going on it's our optimistic ui from our posts because we have a pending uh pending submit in there no problem we can fix that so we come over here yeah right here pending form submit method equals post yeah just to be safe [Laughter] all right so now we're not going to show that little thing when we're doing these updates only on the posts yep and again we don't have time to like deal with like i'm going to click all these super fast and stuff like we should uh but we have we have ways to deal with that um let me get rid of this this one right there and uh one last one last thing i want to talk about i'm going to go back to the index let me go to projects actually and just copy some code um go to the index file let's let's soup up no no sorry i want to do something on this on the projects page first i want to add a little count here for how many tasks there are and how many are complete because this is a thing in react like it's a whole thing uh all right here we go here's our project and then we're going to say we've got i'm going to put it in a small i almost changed this to that but typescript got mad and i didn't want to deal with that and we're gonna say project.tasks oh this can be a project with tasks we're on the home stretch find many include tasks i gotta tell you prisma has just impressed the heck out of me i like i feel like i got rails level rails level um abstractions again like it's been a long time since i had that feeling which is cool so uh if it's not complete i know it is complete tdot complete sorry uh kent if you're still watching this i put a a single character thing in there and then project.task.length oh that's right this needs a length on the end not map i want filter filter that was another 90s band that's why i say man nice shot is another one where he went running around the plane yeah you wanna take my picture oh no that's a different one but yeah yeah hey check it out okay cool fascinating uh i'm gonna click this button hey wait this is a totally different component way up higher how did that update i'm sorry jamie my wife here sorry i gotta he's asking where's the dog my wife took the dog because he gets real loud sometimes and i'll put him in the next live stream if you'll join me um my dog is barking in the back i think i don't know if they're here i think we're good which dog he's talking about but um so this is a whole thing in react right like this this is why we bring in redux and and i can't even keep track of the names of all of them um and and some of the things that apollo does or why you bring in uh these uh these things like like use query you build these abstractions because you're like i got data on the server but when i change it down here this is this is a lower component right this is lower in the hierarchy um and i need to update the data up higher too here is some really cool stuff that remix does for you it just like we may trade off so it doesn't do everything that your client-side caches do um but it does solve many of the same problems just in a different way and maybe in a way you haven't thought about before and we think that the trade-off is awesome and uh and it kind of sticks with the way that websites have worked throughout our careers and and that's how we like to think about it so remix is always based on urls everything's about urls from the assets you notice that css that we brought in we didn't inject it into the head you have a url that's highly cachable across pages on the cdn so across users um oh do i still have a thing up here same band but different um sorry i lost my train of thought thing about filter again um so i wanna i want to show you i need to go over to our dashboard and i'm going to show you something kind of cool here uh so come back to index not index css actually this is kind of interesting now i don't want to take people off about my funky css um your opinions about css i don't have to wait for a separate video uh all right so we're gonna bring in prisma and um project we're gonna load all these again find many and then uh projects user out data whoa no get out of here you kidding me you dare show your face here we broke up a long time ago delete delete what what are you doing at my house [Laughter] uh let's do like recent activity um drop a ul in here uh li um i can't remember what this is supposed to look like i hope that it looks good uh let's do like let's do some sparkles i'm gonna go get and get an icon from hero icons this will look great yeah function sparkles oops yeps and we're going to call you an icon such an icon um we're gonna have our sparkles in here and then we're gonna say something like you created um project.title and let's iterate all of those things um oh it wants to know what it is what is it it's a project i get that from the right place i did not oh let's try again i want it from there oh and it's an array thank you thank you typescript okay you're importing your type from dot prisma client yeah it's wacky um now this actually let's make this uh let's make this part a link and drop that in we're gonna link over to our project yep project.id okay you see how quick that is uh css is now the hard part um okay i'm gonna click here lots of stuff just happened right so so think about how many components are on the page at that point i'm going from this screen to the other one we loaded data here and we loaded data here so i would expect down here in my network tab um this thing's going to be again these are all just my key i didn't put keys on stuff but i don't care watch what we do in the network tab when we come from the index to a project oh i'm just looking at there we go xhr we made two requests one for uh the all the projects this we can see it right here here all the projects and then another request for these so um we run these in parallel this might not sound super significant to you you're like well yeah of course you should do it in parallel you cannot do that if you're doing use effect fetching and in fact you can log into the dashboard of a lot of popular things in the react ecosystem and you will see this kind of thing happen in your network tab a waterfall because what happens is you go to a page first it downloads code split bundles then those bundles evaluate and render and then they call use effect and then they go fetch data and you've got spinners on the page and then and then your outlet or your child route or the next component shows up um and now that that component renders that one has a fetch inside of a use effect and then once that thing has its data and it's no longer a spinner then it has a child component and that component has a use effect fetch and so you get this this waterfall is what we call it of of uh fetching of these dependencies it's like a dependency chain um and it just it's yeah it's impossible pretty much if you're doing use effect fetching inside of components um and this is what uh you know the fancy compilers for relay and um and i think urkel is talking about doing something like that apollo has some stuff for this uh there are other approaches where it's like let's just render over and over and over and over until we collect everything that we know we're gonna need to fetch and then try to fetch it all at once um in remix and react router we know your routes which are your layouts your layouts are the boundaries of data 99 out of 100 times the data here is in that layout the data here is in that layout the user data is going to be in the in the top layout and you don't need to do this use effect waterfall fetching when you know the routes up front so our secret our secret weapon in remix is we have an estimation of your render tree before we render so that means we can kick off um not just the data but we can kick off the code split bundles in parallel too so when we know these two routes are going to go on the page we bundle up this stuff say okay for this route you're going to need this bundle and this data and for this route you're going to need this bundle and this data all right youtube u2 async functions go and uh and now we've got to fetch everything as optimally as possible not just that however now watch what happens in the network tab i'm already on this page when i click one of these links just think to yourself what changes on the page well only this right so i click on the remix launch we only fetch the data for the layouts that are changing there's no need to go refetch this thing if you're if your framework doesn't have a layout primitive that's connected to data every time you switch pages you are re-downloading everything for that page um but with remix we can optimize that so we only download the pieces that you need so now you're asking yourself well when you click this button how does it know to go and update that well let me clear this out and call your attention to the network tab again when i click this notice what we get we get this fetch this is our put this is updating the data that's calling the action and then we get two fetches afterward to get the projects and to get the one we're looking at when you use use submit and form and since they are modeled as navigations remix knows oh you're mutating data i bet some other stuff on the page might have changed and in fact now is a good time to go ask the server for fresh stuff for everything so you don't got to screw around with redux recursive rendering to pull out all of your data requirements fancy compilers new query languages client-side caches to go expire something to make sure that it gets fetched next time instead of not getting fetched when you click between these two things oh don't fetch it put it in a client cache you don't deal with any of that stuff remix knows your layouts mountains of complexity avoided because you submitted a form and that constitutes a mutation and so we decided let's go and fetch all the data for the other loaders too because something probably changed yep right it's uh you don't have to go and invalidate your cache the browser already has a cache for your data it's yeah it's cool very simple very simple model that's it that's what i've got for you in this demo um i hope that answered the question what makes remix different uh it is wildly different there are a hundred things that we didn't even get to no there's like 500 things we didn't even get every time i talk about remix i'm just like do you have another hour yeah we we can give you more control over these transitions you've gotta like oh my gosh there's so much cool stuff that you can do um uh i'm gonna i'm gonna switch back over just both of us um michael you wanna talk about the the licensing this is a big question that we always get it's like okay yeah remix looks cool but like it should be open source and we just kind of want it 100 so yeah so so since day one when we started remix uh we've had the question about the licensing right um people who've followed ryan and i for the last five or six years um you know they're used to everything that we do is for free and and it's awesome open source software is is incredibly uh enabling it's incredibly powerful we're using a ton of open source software to build remix itself um we we believe in in open source software and we've we've uh you know built and maintained several open source libraries for a long time now yeah we got millions of users of our open source yeah millions of users over open source unpackaged does three billion requests a day reach ui is used by countless people react router so we've given away a lot of software and um and and some people when they saw remix we're kind of you know concerned about that you know the fact that we're charging for it so i just want to say two things about that number one is um that it is not uh bad to to charge for something like for for your work um if you want to do something full time you have to charge for it right so ryan and i want to work on this full-time um essentially what you get when you're buying remix is you get ryan and michael as part of your team right so who knows how many you know man hours and and sorry for the gendered term but you know hours that people have been spent that have spent on this and money and time that you've spent uh building these abstractions for your uh product whatever you're working on um you know it's it's i we think there's a lot of value there uh buying into remix and getting ryan and michael on your team and building this piece of your infrastructure for you okay you're never gonna have to think about routes uh routes or code splitting or or any of that stuff again it's it's all going to be done for you um so yeah that's just what i wanted to say is number one um we think we're providing a ton of value and uh and and also all of that awesome open source work that i just talked about like react router um you know remix is going to get react router v6 over the finish line and it's going to make it a hundred times better than it's than it ever would have been had we not done remix well and form you submit loader action all that stuff's coming to react router you just don't have a back end piece yeah absolutely i'm glad you i'm glad you mentioned that so um so react router is going to get way way better because of the 400 plus people who have already signed up uh to use remix which again i want to give them a huge thank you because you people are are like part of this experiment that we're doing and helping to drive uh drive things forward the second thing that i wanted to say is that with our licensing our goal is not to build a sustainable business on the back of these indie licenses so right now we have indie licenses and we have uh corporate or business level licenses um our goal is you know to make the indy license affordable so that you can actually try it out but our eventual goal is to you know for you to use it at work to get to get business licenses uh to sell business licenses for remix and if we achieve that goal i would love to make remix absolutely free for individual developers the indie license it's it's hard to do that right now because we're still very small and we're starting out but but that our goal is not to make money on the individual licenses our goal is to make money on the corporate licenses and i think that we can get there um but again it's going to take your support so um so i just wanted you to know those two things as far as what the license looks like uh and and what it allows you to do we're still working on that um but the the general idea is uh you buy a license to use remix on unlimited projects and then the license lasts for either a year right now on on the corporate licenses or two years on the individual license on the indie license and then uh if you ever let the license expire um then you you can still obviously use remix the the registry ryan said we have a a a private npm registry you can still download the the last version of remix that you had access to from our registry forever right so your app will still work your ci will still work everything will still work um you just don't get future updates to the software so except for critical security patches but yeah yeah right critical security patches we could throw those in there um so so that's that's kind of what the license looks like and that's what ryan and i are hoping to achieve so um i've also heard you know in addition to like the people who are kind of like concerned that we were charging for it i've also heard from a lot of people out there who are really enthusiastic and who are really encouraged by the fact that we're charging for it um if you've worked on open source you are familiar with the toll that it can take on you personally on your family you know on your on your work and lots of times the only path forward for people who are working on open source is to go and find somebody to hire them to pay them to work on that open source i don't need to mention names or projects of you know people this has happened to if you've got your eyes open and you're looking around you can totally see this happens uh repeatedly again and again and again and um and for some reason that's just that's just not our style ryan and i are we're independent we've been working for ourselves for the last five or six years we think that we we are creating enough value with remix that we are really bringing it for our customers and so we're taking the independent route um it would be super easy for ryan or myself to go and get you know some job at whatever amazon or microsoft or whatever is going on and i'm not downplaying the people who've taken that route i have a ton of respect for a lot of people who have taken that route it's just not our style and um and so we're bringing a ton of value with remix and um and we're excited to see you know how this plays out and i think it's it's working so far and i think a lot of people are going to be encouraged by it and i think we may see hopefully some positive change in the open source ecosystem you know it doesn't always have to be about um you know like like we can build a sustainable future for open source um by just you know figuring out the business models around open source yeah um real quick um so jamie has a good question here are we allowed to contribute to it um yeah so even though it's going to be a commercial license we are going to open it up to our customers who want to contribute to it fix bugs for us like we will take it we're just a couple of guys right now um and uh at the moment we don't have the infrastructure for all of that and like michael said we're still working on the license with the lawyer to like make sure it's all right but um and there are open source commercial licenses you know like gpl and stuff like that so we're we're trying to make it as open as we possibly can um and especially for our customers they're gonna have access to the source um we love the docs typo fixes that we'll get but then also like digging in when we've got like a really nasty bug would be will be awesome and like we said earlier we're trying to bring as much over to our open source uh as we can uh back into react router because a whole bunch of it will go there yeah um you got anything else michael yeah just a couple things i want to say i mean if you're still with us at this point in the live stream please go ahead and hit that subscribe button uh we're going to be doing a lot more of these live streams in the future um we like ryan was saying we barely scratched the surface we've got opinions about a lot of stuff and we think that's going to make your development life a lot you know more productive and you're gonna be happy with it so please uh go ahead and subscribe we also have a newsletter um on remix dot run uh where you can sign up for our newsletter and uh and and maybe even purchase a license that would be awesome and uh and then if you do we'll see you in the discord chat and uh thank you so much for for tuning in today thanks everybody

Channel: Remix

Views: 27,269

Keywords:

Id: 4dOAFJUOi-s

Length: 98min 1sec (5881 seconds)

Published: Thu Apr 29 2021

Reddit Comments

[u/careseite]

I like Ryan and am thankful for his work I'm using daily but the smugness of almost everything he does related to remix is repulsive. Acting as if all js devs know nothing about html or the general underlying tech and oh so holy web standards that are literally on mdn and are fundamentals is tedious as best. Half of the features jf not more are also built into nextjs and yet they act like they invented the be all end all solution. Kent's track record with their interaction who also admitted to never really have checked out next isnt exactly good either and doesn't shine a good light on promoting remix either. Comes off as marketing a friends project with a heavy disregard of existing solutions.

That said, it's always great to have a new tool on the block. Even if it's closed source, ideas will find their way into other tools.

[u/nullvoxpopuli]

I can't trust something I can't verify has sufficient testing. How do I submit bug reproductions or failing tests?!

[u/niggo372]

Is Remix Open Source? No. It is commercially licensed only for the use of your projects.

No thanks.

I don't mind premium services or extra features, but the core framework needs to be open and hackable imo.

[u/Darajj]

Looks amazing. Will take a look at this for sure.

Edit. Apparently its closed source 😐

[u/TracerBulletX]

I think it seems like a great product that will have some good impact in places where it makes sense to use, but I just am not going to sign up for another subscription software for personal projects. I am so tired of subscriptions and recurring charges for software. Probably would provide value to a business that has the money to pay for it, but if none of the devs have pre-existing experience with it it's a pretty high hurdle to get past.

[u/One_Pollution_7263]

Interesting that they chose the $ sign for params, it's gonna feel at home for PHP devs but a PITA for the shell