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!
React Remixed
AI Generated Video Summary
Remix is a full-stack web framework that embraces the server-client model and leverages browsers, HTTP, and HTML to deliver a fast user experience. It allows you to have a data layer and use the basics of browsers, HTTP, and JavaScript. Nested routing in Remix enables easy addition of nested sections to your application.
1. Introduction to React Remix
Welcome to my talk called React Remix. This talk is about Webpages, APIs, HTML forms, form data objects, URL adders. Remix allows you to use these technologies that have been around for the past 20 years. Remix is a full-stack web framework that embraces the server-client model and the foundations of the web. It leverages browsers, HTTP, and HTML to deliver a fast and sleek user experience. With Remix, you have all the tools you need to make your application great.
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.
2. Introduction to Remix
Remix is a full-stack web framework that allows you to have a data layer in your application. It enables you to use the basics and fundamentals of browsers, HTTP, and JavaScript. JavaScript in Remix is progressive enhancement, and it doesn't over abstract the underlying technologies.
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.
3. Nested Routing in Remix
Nested routing in Remix allows you to couple segments of the URL to describe your component hierarchy in the UI. By triggering specific routes, only the corresponding nested parts will be rendered. This powerful feature enables you to easily add more nested sections to your application.
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.
Comments