React Remixed

Rate this content
Bookmark

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!

Daniel Afonso
Daniel Afonso
19 min
18 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Remix is a full stack web framework that focuses on the user interface and works back to web standards. It eliminates render and fetch waterfalls in web applications, resulting in improved performance. Remix leverages the foundations of the web and combines them with features like HTTP caching and dynamic server rendering. It allows for progressive enhancement and speeds up the user experience. Remix is a powerful tool for web development with great potential for the future.

Available in Español: React Remixed

1. Introduction to Remix and Web Fetch APIs

Short description:

Welcome to my talk called React Remixed. This talk is about web fetch APIs, HTML, forms, form data objects, URL, and others. When you learn remix, you accidentally learn the web. Remix is a full stack web framework that focuses on the user interface and works back to web standards. It can be considered a compiler, a server-side HTTP, a server framework, and a browser framework. Remix leverages ES build to generate server HTTP, browser build, and an asset manifest. The asset manifest helps with preloading resources and prefetching them for client centralization. This allows Remix to eliminate render and fetch waterfalls in web applications.

Hello everyone. Welcome to my talk called React Remixed. For 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 here is my programming buddy. I'm a developer advocate at the LLX group. I'm an Auth0 ambassador and a Getion instructor. And you can find me on Twitter and pretty much any social network at the handle DanielJCAlfonso.

So let's jump right into remixing and getting to know more about it. What is this talk about? Well, this talk is about web fetch 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 you'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. 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, 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 ES build, remix will generate three things. Server HTTP, browser build, and an asset manifest. 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 a 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 centralization. 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 and Android, this is an Android that is given to these JavaScript servers that I mentioned about.

2. Introduction to Remix Philosophy

Short description:

Remix is a server-side framework and a browser framework that focuses on the user interface and works back to web standards. It eliminates render and fetch waterfalls in web applications, resulting in improved performance. Remix embraces the server-client model and helps decrease the amount of data sent over the network. It leverages the foundations of the web, such as browsers, HTTP, and HTML, and combines them with features like HTTP caching and dynamic server rendering. Remix uses JavaScript to enhance the user experience and supports both read and write operations through HTML forms. It allows for progressive enhancement and speeds up the user experience by minimizing asset downloads and fetching only necessary data. Remix does not over-abstract underlying technologies, making it a great tool for web development.

While Remix runs on the server, it is not actually a server per se. Regarding the server-side framework part of Remix, if you're familiar with server-side model-view controllers like, well, Warevel or Rails, Remix is the controller and the view and it lives the model up to the developer. 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 downloaded or pulled from the cache, they don't need to be parsed by the browser again, 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 user network, and just because they don't have the same bandwidth or whatever that we do, then the application is small. 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, and they're pretty great, and Remix fully embraces them. By combining stuff like HTTP caching, Remix focus on the URL for assets, dynamic server rendering, and HTML features like the link attribute with the prefetch, you have all the tools you need to make your application pretty great, and like I said, browsers and these other types of things that have been around for about 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 and 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 augment 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 talk about Remix, is what is called progressive enhancement. If you decide to add JavaScript to your application, it allows 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, and the last point of philosophy with Remix is that it doesn't over-abstract the underlying technologies. And this is why it's said, one Remix, accidentally one 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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)