Exploring the World of Remix: A Guide to Building Resilient and Performant Web Apps - Aurora Scharff

Good morning everyone. Uh good morning NDC. I'm excited to be speaking here today. I see you've brought food. That's really good. It's a long talk so that's perfect. Uh I'm going to talk about the evolution of the Remix framework work and provide a guide on how to build performant and resilient apps with it. So, how many of you have used Remix?

Not so many. Uh, what about React Router? Okay, we're going to see why that matters later. So, first, who am I? Uh, my name is Aurora. I'm from here in Norway and I work as a consultant at Crayon Consulting in Oslo um or here. And we have a booth at NDC. So, check us out later. We also have a game made by our consultants and I'm currently hired on a project for Millio which also have a booth here today. I'm a Microsoft MVP in webdev um and I'm

actively using Nex.js uh in my current project but I also do Remix on the side. So let's get right to the topic which is Remix. So Remix is a Reactbased full stack web framework or meta framework. And a meta framework is a framework around another framework. So in this case, it's React. Remix is one of the biggest React meta frameworks alongside Next, but Next, but it's lesser known. And if you want to get a quick overview of its main selling points, scrolling through the website is

a really nice experience and sells the key features of the framework like nested layouts, form actions, serverside loaders, and air boundaries. So check this out. Um, Remix was released in 2020 and acquired by Shopify in 2022. And it's very easy to get into it and start building apps in a way that feels native to the web. So, Remix aims to uh allow you to focus on the user interface and work back through web standards to deliver a fast and resilient user experience. Remix presented solutions to

problems that were not yet solved at the time. So now a lot of these features have actually appeared in React 19 in different variations. So they were really good solutions back then. For example, their approach to nested routing. So it was quite impactful when it came out. It's the idea of coupling segments of the URL to component hierarchy and data. And the nested routing system was inspired by the routing system in Ember.js JS in 2014

where the team there realized that in almost every case segments of the URL uh determine the layouts to render on the page and the data dependencies of that. Remix is actually made by the same people who created and maintain React Router which is a library that most of us as we seen uh have used in our career. Remix uses React Router as its biggest dependency after React itself. So let's talk a bit more about React Router. So for 10 years, React Router

has remained one of the most widely used dependencies in the React ecosystem. And that's clear just by looking at the number of public repositories using Retro, which is 10.7 million, which is it's growing really fast. When I made I did this talk like last year, I think it was at 7.1 and I was like, wait, I have to update this number. And it was at 10.7 now. So it's a lot. It's increasing rapidly. And Shopify also uses React Router. They have a 5 million line application running on React Router, which is the core of their business. So that's just

one example. So React Router is great, but the team wanted to provide more features to allow developers to build better websites with React and scale. For example, we want features like automatic code splitting, simplified data loading, form actions, simplified pending states, and optimistic UI and also server rendering. And these features are commonly found in meta frameworks like Nex.js. So that's why Remix was created. Another piece of the story is Vit. Do