React Remixed

Hello, everyone. Welcome to my talk called React Remix. So let me start by introducing myself. My name is Daniel Alfonso. I'm a developer advocate at OLX Group. I'm an IoT Ambassador, a GetIO Instructor, and you can find me on Twitter and Instagram. I'm also a social network at the handle, DanielJCAlfonso.

So what is this talk about? Well, this talk is actually about Webpages, 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 and 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 accidently 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. 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 cannot make a 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 browsing in 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.

So 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 instances, not downloading and evaluating JavaScript and CSS assets. And only fetching data for the parts of the layout that change. So JavaScript in Remix is 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 and 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 a 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.