React Advanced

React Advanced Conference 2022

Daniel Afonso

Remix Conf Europe is a remote conference focusing on delivering fast and scalable websites deployable to any platform with Remix. Attend talks and workshops that will help you stay up-to-date on modern web standards and cutting-edge user experience.

Remix Conf Europe

I'm attending #remixconfeu – Join me and 5K+ other @Remix_run developers and get to see 20+ talks!

Remix Conf Europe 2022

React Advanced Conference 2023

How many times have you had to wait for your backend team to finish building the API so you can start your tasks? What if all you needed to move that task to in progress was the API contract? What if there was a library that did this for REST and GraphQL APIs and, at the same time, taking your tests to the next level? Join me and prepare to enhance your developer experience while learning all the battle-earned experiences of using one of my favorite libraries: Mock Service Worker.

All You Need Is a Contract…

TechLead Conference

TechLead Conference 2023

“Maybe I’m fooling everyone… I’m not good enough for this, and at this point, it is a question of time until everyone figures it out” these might be the words that cross your mind as your coworker compliments you for doing another fantastic job at delivering a new feature. As you grow in your career, so does your uncertainty. You put in the extra hours, learn all the new technologies, and join all the initiatives you can, but at the end of the day, it never feels enough. At this point, that feeling is leading your actions and decisions. It is the thing that is driving your career. Only one question persists: Are you really an imposter?

Imposter Syndrome-Driven Development

React and the JavaScript ecosystem seems to be constantly changing. Wherever we look, there are new libraries and frameworks. These new tools always lead to learning concepts that are often non-transferable knowledge. What if I told you that by learning standard web APIs, relearning the web, and getting a bunch of transferable knowledge, you can also start using a fantastic new addition to the React ecosystem: Remix! by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Remixed

Hello everyone, welcome to my talk called React Remixed. If anything else, let me start to introduce myself. I am Daniel Alfonso, I'm the person on the left on the photo in case you didn't recognize me. The person on the right is here, he's my programming buddy. I'm a developer advocate at OLX group, I'm a Node 0 ambassador and a GED.io instructor and you can find me on Twitter and pretty much any social network at the handle DanielJCAlfonso. So let's jump in right into remixing and getting to know more about it. What is this talk about? Well, this talk is about webfetch 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 learn remix, you accidentally learn the web. Now I know, I know, I know, I know, you might be a bit tired 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 learn remix, you accidentally learn the web. This is because remix leverages the stuff that we've been doing in the web for around 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. Remix is a full stack web framework that will let you focus on the user interface and work back to web standards to deliver a fast, slick and resilient user experience. Remix can also be considered four things. In this case, a compiler, a server-side HTTP handler, a server framework and a browser framework. Let's get a bit into each one of them so we can learn a bit more. So on the compiler part, by using ASBuild, remix will generate three things. Server HTTP handler, a browser build and an asset manifest. So the browser build is used to and includes automatically code splitting by route, fingerprinted asset imports like CSS and images, pretty much anything that you will need to run your application in the browser. The asset manifest in this scenario, both the client and the server are using this asset manifest to pretty much know the entire dependency graph of your application. This is useful when you want to preload resources in the initial render of your application as well as prefetching them for client centralizations. This is how remix is able to delete the render and fetch waterfalls that are very, very common in web applications today. By using this build artifact, an application can be deployed to any hosting service as long as it runs JavaScript. Regarding the server-side HTTP handler, this is an handler that is given to these JavaScript servers that I mentioned about. Because while remix runs on the server, it is not actually a server per se. Regarding the server framework part of remix, if you're familiar with server-side model view controllers like, well, waterfowl or rails, remix is the controller and the view and it leaves the model up to the developer. And from the browser framework perspective, once a document is served to the browser, remix will pretty much be responsible for iterating that page with the browser build JavaScript models. So for instance, if a user clicks a link, instead of making a round trip to the server for the entire document and for all the assets, remix will simply fetch the data for your next page, update the UI. This has many performance benefits over making a full document request like these assets don't need to be redownloaded or pulled from the cache. They don't need to be parsed by the browser again, the assets I mean, and the data that it's fetched is much smaller than the entire document. So yeah, this is super, super great. And this is a very small introduction about what remix is. But yeah, still speaking about it, what is its philosophy? Well, remix embraces the server client model fully. You can make your server fast. What you cannot do is control your user network. Sometimes, well, we've all experienced 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. Takes more time to load. So remix helps you by decreasing the amount of stuff that you send over the network. So we don't need to ship all the skeleton UI because remix fetches and can even prefetch at times the data before the page is rendered. And this, well, will 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. By combining stuff like HTTP caching, remix focus on URL for assets, dynamic server rendering and HTML features like the link attribute with the real prefetch, you have all the tools that you need to make your application pretty great. And like I said, browsers and these all type of things that have been around for around 20 years, they are very, very good. And remix fully leverages it. Remix uses JavaScript to 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. Why you might ask? By leveraging HTML forms. HTML forms have been around for a long time and they have been the staple for data mutation since the 90s. So remix will embrace this and fully augments that API. This will enable the data layer of a remix function to work with or without JavaScript on a page. So this means that JavaScript, when we're talking about remix, is what is called progressive enhancement. If you decide to add JavaScript to your application, it allows you to also remix to speed up your user experience in two ways. On a page transition, 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, the last point of philosophy with remix is it doesn't over abstract the underlying technologies. And this is why it's said when remix accidentally run the web. Because if you get good at remix, you'll accidentally get good at web development in general. Remix makes it convenient to use, like I said, browser, HTTP, JavaScript, but these things are not hidden and they are not abstracted. Whatever you're using, it's the same thing you'd be using with the web. And yeah, this is pretty much a six-ish minute introduction to remix. At least for the theoretical part. Now let's get a bit more practical and understand the three top things that you should learn so that you can finish the talk and just dive in deep into remix. So the first one, nested routing. So nested routing is pretty much the general idea that you can couple segments of the URL to your component hierarchy in the UI. Now, I know this might not make much sense looking and just reading this description, but let's look at an example. Here we have two routes. A user profile, a user account. Both routes have something in common, which is the user, where we have the username. And they have two tabs here, one for the profile and one for the account. The concept of nested routing here is whenever we select a profile, our route will change to be user slash profile and we want to render this nested part, which is the nested profile page. But if we click on the account, we want our route to change to account and render nested account page. And this is how nested routing works, because whenever you select a part of the URL, of the UI, instead of re-rendering the rest or changing page, it will only render the nested part of the component. And this is super, super powerful and Remix leverages this fully. So for the next part, which is data fetching and mutations. Well, I know with client-side applications and whatso, we are very used to using use 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 data loading with Remix. So here we have a component called heroes. In this component, what we want to do is fetch some data, some hero data, and render it. So how would this work in Remix? First thing we have to do is export a loader function. A loader function is a function that will run whenever application loads. And this is how you can do data loading in your application. Whenever you load your app, you can trigger some data fetching. So what we have here is we have, we're returning JSON. This is a HTML, 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 user loader data hook, which will give us access to the data. And then yeah, we just render it. And this is how you can do data loading with Remix. It seems very simple to do, and it makes it so much, so much easier to fetch data. And decoupling the complexity, I guess, it makes it much simpler to understand. For mutations, it's very simple. But instead of using loaders, we create actions. Now you might be wondering, how do we trigger an action? Well, I spoke about forms 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 method our 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 look into the application and say, okay, is there any action here 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 our form is filled with. So we don't need to keep track of state inside of our component, because whenever we press submit, the form data will be sent to our action, and we can destructure it here. Okay, so once we have our form data, we can trigger our data mutation. And yeah, that's pretty much it. So now let's look at the code sample that I have here, which is an application built on Remix that shows a bit of this concept so we can hook a bit more to that. Okay, so now enough of chitchat, and let's just see some code. And I have here a demo, which is pretty much a concept built on top of Tower of Babel, which is a comic from Justice League from a couple years ago, where, well, Batman just had a list of heroes, where you could see their real identities and weaknesses, just in case anyone from the Justice League or whatever went rogue. So here we have an application built on top of Remix, and we have a couple of things that we can do here. First things first, this is already leveraging nested routing, but I'll show you how. So here we have a simple component where we can check our heroes. In this scenario, we're checking Batman's profile. And here we can see the user that's logged in, in the scenario Batman's logged in, because yeah, we want to keep this set, no one else should use our application. And then we have our hero identity, our secret identity, and what the weaknesses are. For some reason, if Batman regrets it and he wants to remove that hero, you can delete it. You can also add some new heroes. So let's, for instance, just add Superman in here. Quark, Kent, that's his secret identity, and the weaknesses, Kryptonite. Okay, so now when we save this, our hero is here. And yeah, this is pretty much what the application is doing. If you want to delete it, you can delete it as well. So let's hop into some code. So here we have our heroes route, which is pretty much whenever we go to the heroes route, this is what's going to be rendered. So as you saw previously in my explanation, we are using a loader to do some data fetching. In this scenario, this loader is responsible for authenticating our user and for getting our heroes data to be shown on our menu that we have down there. Then inside of our route, we call a useLoaderData hook to get our data. And then with that data, we're going to render our heroes. Now this is where we get into nested routing. What enables nested routing is this fun thing here called an outlet. An outlet will pretty much look into our file folders and see, is there any folder created with a route heroes? And this scenario, it will find inside the routes that there's a folder called heroes. And it'll say, okay, so let's render it. The first thing it will look for, it's for an index. And in this scenario, our index says, access the bad computer. And this is why our first page says access the bad computer. So this is the nested part of heroes. So all the things here that we have, it's inside heroes. But whenever we render, thanks to the outlet, it takes nested 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 our route in Remix. Here we have a couple of things, but pretty much what we have is an action that's going to 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. Once again, it's getting the request. By 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 validations, 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 302 response. Like I said, leverages 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 all the heroes? Because if you look into here, each hero should have a random ID. Let me just add one here so you can see. As you can see, the ID is not the same from Batman. So I'm not going to be creating a route for everything because, well, this wouldn't be scalable. So this is where we leverage dynamic routes. By adding a slug here, by adding the dollar sign and putting in the name, Remix will say, okay, everything that's inside heroes and is not specified here, it will get into this route. This route is doing a couple of things, but it's pretty much the 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 or delete in this form as a corresponding action. And yes, this is pretty much how our application works. Okay, so now to wrap up, let's look at a couple of things that Remix can make easy for us. Remix stacks are a bunch of alternatives that we can use to start building our application with Remix. We have Grunge stack, Indie stack, Wolf stack, and pretty much all of them depend on whatever you want to deploy, what database you want to use, et cetera, et cetera. 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 QR code that you can scan. This will redirect you to the Remix blog, 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, Remix is as fast or faster at serving dynamic and static content. It even enables a faster user experience even on slow networks, because like I said, you can make your server fast, you cannot make your user networks fast, and Remix makes it easier for us to, well, enable a faster experience even on these slow networks, like it's written here. Also, it automatically handles errors, interruptions, and race conditions. And this is super, super cool. It saves you so much time not having to implement everything by yourself. And all the real times in Remix are instant and decoupled from data. So yeah, does this mean you have to stop using Next? Well, I guess it's up to you. 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 of years. So yeah, before anything else, let me start by thanking you all. Thanks RemixConf for having me. This is a super amazing experience to be here speaking to all of you and learning from all the amazing other speakers about our common love right now, which is Remix. I've been Daniel Afonso. This is a QR code that you can check if you want to find me on Twitter or send me a message. Yeah, thank you so much. I hope you have a rest of a nice day and amazing week. See you around. Bye-bye.


React and the JavaScript ecosystem seems to be constantly changing. Wherever we look, there are new libraries and frameworks. These new tools always lead to learning concepts that are often non-transferable knowledge. What if I told you that by learning standard web APIs, relearning the web, and getting a bunch of transferable knowledge, you can also start using a fantastic new addition to the React ecosystem: Remix! by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Hello, everyone. Welcome to my talk called React Remix. So let me start by introducing myself. My name is Daniel Afonso. I'm a developer advocate at OLX Group. I'm an IoT ambassador, and you can find me on Twitter and any social network at the handle DanielJCAfonso. So what is this talk about? Well, this talk is actually about WebPH APIs, HTML forms, form data objects, URL adders. Now, you might be wondering, isn't the title of the talk React Remix? Yeah, because these are all things that Remix allows you to use. Now, I know that we all might be a bit tiring of new JavaScript frameworks always showing up, but bear with me because Remix makes something really good for you, which is when you learn Remix, you accidentally learn the web, because by using Remix, you'll get leverage to all the things that have been around for around the past 20 years, something like that, which are working very, very well, and we'll continue to use them. Now, you might wonder, where did Remix come from? Remix was created by Michael Jackson and Ryan Florence. It started as a closed project and it turned into an open source in the last past years. And yeah, it's super great. Now, what is Remix? Remix is a full stack web framework that lets you focus on the user interface while working back through web standards to deliver a fast, sleek, and resilient user experience. Now, with Remix comes its main philosophy, which are actually three or four things. Let's start with the first one, which is embrace the server client model. Well, you can not make your user network fast, but what you can do is you can make your server fast. Because of this, you can be allowed to reduce and decrease the amount of stuff you send over the network. And this is why Remix is super great, because it doesn't need to ship the skeleton UI, all of it, because Remix will fetch, and you can even prefetch at certain scenarios, this amount of data before your page being rendered all on the server side. Remix also works with the foundations of the web by using browsers, HTTP and HTML. These are technologies that have been around for a long time, like I said, 20 years. So they are pretty solid. Remix will embrace them fully. And by combining stuff like HTTP caching, Remix focus on URL for assets, dynamic server rendering, and HTML features like, for instance, the prefetch in the link, which can send link URL prefetch, you have all the tools that you need to make your application pretty great. So browser and HTML got really good in the past 20 years, so Remix just leverages it fully. Using JavaScript to augment the user experience by emulating browser behavior. 
So most recent frameworks only have read APIs for data. Remix has both read and write. So by leveraging a small thing called HTML forms, Remix will pretty much use what has been the basic for data mutation since the 90s. Remix uses the forms and embraces and augments that API. This will enable for you to have a data layer in your Remix application with or without JavaScript on your page. And this is the amazing, amazing part of Remix, which is you probably don't need JavaScript on your browser. By adding JavaScript, this will allow Remix to do a couple of things. For instance, not downloading and evaluating JavaScript and CSS assets, and only fetching data for the parts of the layout that change. So JavaScript in Remix, it's what's called progressive enhancement. Finally, part of the philosophy, Remix doesn't over abstract the underlying technologies. And this is why it's said that if you get good at Remix, you get good at the web. Because Remix APIs make it convenient to use the basics and the fundamentals of browsers, HTTP, and JavaScript in general. These technologies are not hidden from the developer. You can use them. So let's go to the three basic things that you just need to start in writing code with Remix. So first thing, very important, is nested routing. So nested routing is pretty much the general idea that you can couple segments of the URL to describe your component hierarchy in the UI. So let's look at this example. Here we have two routes, a user profile and the user account one. Both UIs are very similar. In both of them, we have the user described with the name of the user and two tabs, one for the profile and one for the account. How nested routing works is whenever you trigger either the profile or the account route, it will render only the part that's specific inside of it. So when you click on profile, the nested route responsible for the profile will be rendered inside of this part of the UI. And the same for the account. When you trigger the account, the nested account part will be rendered inside of this.
And this is why nested routing is super powerful, because by only adding new sections of the URL, you can keep adding more and more and more nested parts of your application. So this is one of the main fundamentals for Remix. The second one, it's data fetching and mutations. Well, we might be using useEffect, React, Query, and SWR for a couple of years.

The thing is, Remix makes this so, so, so much easier. So let's start with the first pillar for data loading. So here we have a component called heroes. What this component should do is get the list of heroes and render them inside of a div with the hero name and the hero ID. Now, probably what we would do here is we would do a useEffect or a React query fetching thing. The thing is, we don't need it. By using a loader, which is one of the pillars for Remix, this is a function that will be called on the server. You can use it to fetch your data. And then by returning JSON, which is pretty much a wrapper over the HTTP response, you can return your data. And the same for mutations. Like I said, Remix leverages forms. So by using a form method post, whenever you submit, this will trigger an action instead of a loader. And this action will run on the server. You access your form data that comes on the HTTP request. And you perform your mutation. And yeah, these are the pillars for Remix.

Now just to wrap up in these quick minutes, seconds, Remix versus Next.js is a question that I've seen a lot of times. Well, in a study by Remix and Next team at Verso, they discovered that Remix is as fast and faster at serving static and dynamic content. It enables a faster user experience, automatically handles errors and race conditions, and build times are nearly instant. Does this mean you have to stop using Next? No, it doesn't. But I really suggest you give Remix a try.
So thank you so much for watching my talk.
I'm Daniela Fons, and see you next time. Bye.