React Remixed

you hello everyone. Welcome to my talk called the react remixed for anything else. I can start to introduce myself. I am Danielle phones. I'm the person on the left on the photo in case you didn't recognize me person on the right is here is my programming buddy. I'm gonna developer Advocate a toilex group. I'm not serum Ambassador and I get I instructor and you can find me on Twitter and pretty much any social network at the end though Daniel jcf phones. So let's jump in right into remixing and getting to know more of about it. What is this talk about? Well, this talk is about webpatch apis. It's about HTML forms form data objects URL and others. Okay. Now you might be wondering what does this have to do with remix? It does because when you run remix your accident, we were in the web. now, I know I know I know I know we all might be the tires of seemingly a new JavaScript framework showing up every day or so. But the thing is and like I said right on the previous slide when you were in remix, you accidentally run the web. This is because we mix whatever just the stuff that we've been doing in the web for the round the past 20 years or so and it makes sure that whenever you learn it you get knowledge that you can bring back and forth between the web and remix and this is super super great. Now, I know you might be wondering what is remix and let's get right into it remixes a full stack web framework that will let you focus on the user interface and work back to web standards to deliver fast slick and resilient user experience remix can also be considered for things in this case a compiler server side HTTP and we're server framework and the browser framework. Let's get a bit into each one of them so we can one a bit more. So on the compiler part by using yes build remix, so generates three things server HTTP and were a browser built and an asset manifest. So the browser build and is used to and includes automatically code splitting by Route fingerprinted asset Imports like CSS and images and pretty much anything that you will need to run your application in the browser the asset manifests in this scenario it both the client and the server are using the using this asset manifest to pretty much know the entire dependency graph of your application. This is useful when you want to to play with resources in initial render of your application as well as prefetching them for Quant centralizations. This is how remixes able to delete the render and fetch waterfalls that are very very common in web applications today by using this build artifacts and application can be deployed by you 20 all things Service as long as it's runs JavaScript. Regarding the server side HTTP and what this is an end where there is given to these JavaScript servers that I mentioned about because what remix runs on the server it is not actually a server per se. Regarding the server framework part of remix if you're famil. Iar with the server-side model view controllers, like well what available rails we mix is the controller and the view and it whips the model up to developer and from the browser framework perspective and once a document is served the browser we mix will pretty much be responsible for hydrating that that page with the browser build JavaScript models. So for instance, if you use a quick link instead of making around trip to the server for the entire document and for the other assets remix will simply fetch the data for your next page updated why and this has many performance benefits over making a full documents request like these assets don't need to be read on hold it or pulled from the cash. They don't need to be passed by the browser again the assets, I mean and the data that it's fetched is much smaller than the entire document. So This is super super wet. And this is a very small introduction about what remixes but yeah, still speaking about it. What is its philosophy? Well remix Embraces the server client model fully you can make your server fast, which you cannot do is control your is a network sometimes. Well, we'll experience this. It seems to be working very good for us. Then we check our code our application in the user Network just because They don't have the same bandwidth or whatever that we do. The application is smaller. It takes more time to vote. So remix helps you buy decreasing the amount of stuff that you send over the network. So you don't need to ship all the skeleton UI and because remix fetches and can even prefetch at times the data before the page is rendered and these well We'll make it easier for us to send applications to our users. Like I said previously. Remix works with the foundations of the web in this scenario browsers HTTP and HTML. These are technologies that have been around for a long time. They're pretty great and remix fully Embraces them it come by combining stuff like HTTP caching remix focus on URL for assets Dynamic server rendering and HTML features like the link attribute tutorial prefetch. You have all those that you need to make our application pretty great and Like I said brothers and result type of things that have been around for around 20 years. They are very very good and remix fully leverages it. Remix uses JavaScript augment the user experience by emulating the browser Behavior. While most recent Frameworks only have apis for read for data remix has both read and write well why you might ask by leveraging HTML forms? Well HTML forms have been around for just a long time and they have been the staple for that ammutation since the night. So remix will Embraces and for augments that API this will enable the data wire over remix function to work with or without JavaScript on a page show. This means that JavaScript when we talking about remixes, whether it's called Progressive announcement, and if you decide to add JavaScript to your application, it allows you to have also remix to speed up your user experience in in two ways on a patronization. I mean By not downloading and evaluating JavaScript and CSS assets and by only fetching data for the parts of the layout that changes. Finally in the last point of philosophy we dream mixes. It doesn't over abstract the underlying Technologies and this is why it said one remix accidentally run the web because if you get good at remix, you'll accidentally get good at web development in general. And we mix makes it convenient to use. Like I said browser HTTP JavaScript, but these things are not hidden. They're not and they are not abstracted what you're using. It's the same thing you'd be using with the web. And yeah, this is pretty much a six-ish minutes introduction to remix twist for the that theorical part. Now, let's get a bit more practical and understand it the tree. So, yeah, the three top things that you should learn so that you can finish the stock and just dive in deep into into remix. So the first one nested routing so this is routing is pretty much the general idea that you can couple segments of the URL to your component. Here are key and the UI. No, I know this might not make much sense working and just reading this description, but let's look at an example. It we have two routes a user profile user account. Both routes have something in common, which is the user. Where we have the username and they have two top two tabs here one for the profile and one for the account. That's a router he is whenever we select a profile or route will change to be user / profile and we want to render these nested part which is the nested profile page. But if we click on the account, you want our route to change it to account and render nested account page and this is on acid rotting works because whenever you select a part of your route of the UI instead of re-rendering the rest of changing page. It will run you render the nested part of the component and this is super super powerful and remix leverages if this following So for the next part. Which is that the fetching and mutations? Well, I know when clients with coins had applications and what so we are very used to using is effects or react query or SWR, but remix makes this so much easier and so much simple. So, let's see how we can do that holding with remix. So here we have a component that called Heroes this component. What we want to do is fetch some data some mirror data and render it. So how would this working remix first thing we have to do is export a loader function other function is a function that will run whenever application votes and this is how you can do that the world in your application whenever you would application your app. You can trigger some data fetching. So what we have here is we have already turning Json. This is a HTML risk and HTTP response and this will return your data then so that inside of the component we can have access to the data. We get our use of water data and hook which will give us access to the data. And then yeah, we just rendering and it's so you can do that for holding with remix. It seems Very simple to do and it makes it so much so much easier to fetch the attend. and decoupling the Complexity I guess it makes it much and simpler to understand. For mutations, it's very simple. But instead of using orders we create actions now you might be wondering how do we trigger an action? Well, I spoke about forms a around three four minutes ago, didn't I because that's how remix does mutations pretty much we create our form and we Define what methods are form is going to do get our post and then we have inside the inputs that we have to do and whenever we submit it. This remix will be able to walk into the navigation say okay. Is there any action here that is that needs to be fetched or needs to be triggered? So whenever we click submit this action will get triggered and inside of it. We do a couple of things. We can get access to the request which is where we can get the form data that are form is filled with so we don't need to keep track of States inside of our component because whenever we press submit the format will be sent to our action and we can destruction it here. Okay. So once ever from data we can trigger our data mutation. And yeah, that's pretty much it. So now let's look at them at the code sample that I have here, which is a an application built on remix that shows a bit of this concept so we can look a bit more to them. Okay, so now enough of s*** chat and let's just see some code and I have your demo and it's pretty much a concept button on top of Tower of Babel, which is a comic from Justice League from a couple years ago where and well Batman just at least of Heroes where you could see their real identities and weaknesses just in case anyone from the Justice League or whatever went broke. So here we have application built on top of remix and we have a couple of things that we can do here first things first. This is already averaging the nested routing but I'll show you how so here. We have a simple component where we can check. Our heroes in the scenario checking Batman's profile and here we can see. The user that's logged in in the scenario. Batman is logged in. Because yeah, I want to keep this site. No one else should use our application and then we have our hero identity our secret that identity and what the weaknesses are for some reason if Batman regrets it anyone still remove that hero you can do it. You can also add some new Heroes. So that's for instance. Is that Superman? in here What can that's a secret identity and weaknesses? Kryptonite Okay. So now when we save this our hero is here and yeah, this is pretty much done what the application is doing if you want to delete it you can delete it as well. So let's talk into some code. So here we have our heroes route, which is pretty much whenever we go to the heroes of this is what's going to be rendered. So as you saw previously on on my the explanation we are using a loader to do some data fetching in this scenario. This folder is responsible for authenticating our user and for getting our heroes that show to be shown on them on our menu that we have done there then inside of our route. We cover use water later hook to get our data and then what with that data. We're gonna render Our Heroes now. This is where we get into the nested routing what enables nested routing is this fun thing here called an outlet an outlet will pretty much look into warm file for file folders and see is there any folder created with the routes Heroes and the scenario to find inside the routes that there's a folder called Heroes and they'll say Okay. So let's render it. The first thing it will work for it's for an index. And in this scenario or index says X the bad computer and this is why our first page says access the bad computer. So this is the nested part of Euro. So all the things here that we have. It's inside Heroes. But whenever we render would thanks to the adulthood. At extensive router rusted routes. This is the index of Our Heroes page now if we click on it, we are going into the new route and going back to our code. New route it's here. So Heroes Slash new this is how we are able to check and a routine remix. Here, we have a couple of things but pretty much what we have is an action. That's gonna be triggered whenever this form here is submitted. So we have our form we trigger our action this action is doing a couple of things and Once again, it's getting the request but thanks to the request. It's authenticating our user. It's getting the form data that it's filled by the form and then a couple of Foundations and it's creating our hero. And yeah, this is pretty much what this is doing. Oh and it's also triggering a redirect. This redirect is pretty much a three or two response. Like I said, whatever is the web. This is an HTTP response. So yeah, that's how it works. and this is pretty much what it's doing now, you might be wondering how am I going to render other Heroes because if you're working to hear each hero should have a random idea. Let me just add the money so you can see. Yeah, as you can see the ID is not the same from Batman, so I'm not gonna be creating about for everything because well this wouldn't be scalable. So this is where we average Dynamic routes. By adding a slug here by adding like the dollar sign and putting it the Name remix will say okay everything that's inside Heroes and it's not specific fight here. You'll get into this route. This route is doing a couple of things but it's pretty much this General concept of as a loader. Once the data is fetched. It returns it this data is picked up by user data. And then we have a form to trigger all the weight in this form as a responding action. And yes, it is pretty much our application what? Okay, so now To wrap up. Let's look at this a couple of things that remix can make easier for us remix texts are a bunch of Alternatives that we can use to start building our application with remix. We have grand stack in this stack will stack and pretty much all of them depend on whatever you want to deploy what the base you want to use, etc. Etc. And it's pretty great. Give it a try and check it out. So to wrap up this talk. Let's get into the million dollar question, which is remix versus next. Well here. We have a charcoal that you can scan. This will direct you to the remix block where they have a study where comparing remix with next. And during this study they came to the conclusion of a couple of things first things first mimics is as fast. or faster at serving dynamic dynamic and static content and it even enables a fast user experience even also networks because like I said what you can you can make your server fast, you cannot make your user networks fast and remix makes it easier for us to Well enable Professor experience even on this whole networks like it's written here. Also with automatically handles there horse Interruption and race conditions and this is super super cool. It's It's so much time not having to implement everything by yourself and all the real times you remix are and nearly incidentally couple from data. So. Yeah, does this mean you have to stop using next? Well, I guess it's up to you like and Frameworks Come and Go remix is super great, and it's super exciting to see all the amazing news that have been coming around it, and I definitely see a very very very great and Shining future for remix, and I want to stick around to watch it for the next couple years. So yeah before anything else. Let me start by thanking you all. Thanks remix call for having me. This is super amazing experience to be here speaking to all of you and learning from all the amazing other speakers about our Commonwealth right now, which is remix. I've been in your phones. This is a QR code that you can check if you want to to find me on Twitter or send me a message. Yeah. Thank you so much. Hope you have a rest of a nice day and amazing week. See you around. Bye.