Fire-side chat on Remix

Rate this content
Bookmark

FAQ

The speaker's favorite feature of Remix is its modular design which supports multiple rendering frameworks and allows apps to run on any runtime, provided it's built on web standards.

Being part of Shopify allows Remix to leverage Shopify's large-scale e-commerce platforms to test and refine features, gather extensive feedback, and enhance the resilience and effectiveness of its design and functionality.

Yes, Remix remains an open source project even after joining Shopify. The team is focusing more on the open source aspect and has implemented an open RFC (Request for Comments) process to involve the community in feature development and discussions.

Hydrogen is expected to provide valuable feedback and insights to the Remix team, influencing future developments. However, Remix will maintain its separate identity and continue to support Hydrogen by helping ship solid products for its users.

Some anticipated features include the ability to send promises in responses from loaders and actions, which can be resolved in components, and enhanced support for styling solutions like CSS modules and vanilla extract without a first-step compiler pass.

The roadmap for Remix version 2 includes changes to the route meta API and other features that allow users to opt into new updates before the official release, providing a smoother transition and incremental upgrade path.

Yes, the development of a framework-agnostic version of Remix is underway, facilitated by the re-architecture of React Router in version 6.4 which separates the core logic from React-specific elements. This enables potential future support for other frameworks like Vue, Svelte, and Angular.

The Remix team is in regular communication with the React team, providing feedback on the design and implementation of server components. While Remix has a different approach to some goals, they are open to integrating advancements from server components in the future.

Chance Strickland
Chance Strickland
28 min
18 Nov, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Remix is an open-source project with a modular design and excellent mutation story. It benefits from being part of Shopify and has an open RFC process for feature requests. Remix is influenced by the Hydrogen team and plans to work closely with them. Exciting features include the ability to send promises in responses and support for styling solutions. Remix version 2 will have a roadmap and be framework agnostic. Collaboration with React on server components is important. Livestreams and community discussions are encouraged. The design philosophy focuses on web standards and simplifying code. Remix prioritizes server-side first but also considers static generation. Overall, Remix simplifies code and removes complexity.
Available in Español: Charla sobre Remix

1. Introduction to Remix and its Benefits

Short description:

We're all doing good. Thank you so much for joining us for this fireside chat. One of my favorite things about Remix is the modular design. The ability to ship your app on any run time is a really awesome feature. The mutation story in Remix is excellent. The biggest benefit for Remix being part of Shopify is the ability to dog food design questions and ideas through Shopify's large e-commerce sites. We are still very much an open source project and are leaning into the open-source story of Remix. We've instituted an open RFC process for feature requests and discussions.

All right, hey Chance, how are you? Hey, Brittany, doing well. How are you? How are you, Paul? Hey, great to see you. Awesome. We're all doing good. Thank you so much for joining us for this fireside chat.

We've been asking all of our speakers, I know you don't have a talk but I want to ask you too, we asked the audience in the beginning, what is their favorite Remix feature. So what is your favorite Remix feature? Oh, and that's – how do you answer that question when you, like, work on the whole thing? Say all the things.

All the things, yeah. No, seriously, though, I think one of my favorite – I don't know if you'd call that feature, but my favorite things about Remix is just sort of the modular design that we sort of started on. We – the way it's designed, I think, is really – it's really helpful in some of our longer-term goals of being – supporting multiple rendering frameworks. And our current goals of supporting any run time, right? You can sort of tear it down into parts, different levels of abstraction and ship anywhere, which I think is great. Yeah, I guess just the ability to ship your app on any run time is a really awesome feature. You don't have to worry too much about us not supporting your run time because we're built on web standards, right? As long as your run time is built on web standards, you can ship Remix, right? And I just really love that. As far as individual features, I have to say, like, the mutation story in Remix is excellent, like being able to grab data from your actions immediately after using interactions without actually having to manage any of that state internally. I think it's just a superpower. I really enjoy working with those. Yeah, that's a great answer. Yeah, that's awesome.

My first question would be what would you say the biggest benefit for Remix is now that is part of Shopify? Yeah, no, that's a great question. And it's one that I think we were all asking ourselves internally at the very beginning of the process. And now that we've had some time to let it shake out, I'm very excited about it. I think it's going to be a huge deal for us to be able to sort of dog food some of our design questions and our early thoughts and ideas and features. To be able to dog food that through Shopify, which manages some of the largest e-commerce sites in the world, that's going to be invaluable data for us, and really is going to help us make a lot of our features and future intentions and our future designs are going to be that much more resilient and bulletproof because we're going to be able to test those things internally through Shopify and get lots and lots of feedback before we have to worry about going public with these things. Now, we still are very much an open source project. In fact, I think one of our biggest goals since joining Shopify is to lean into the open source side of things a lot more than we may have in the past. And so, we've recently instituted an open RFC process where folks can go into the Remix repo and submit RFCs, submit feature requests that go through a process and we debate those internally. And that's true of all of our internal discussions as well. Any features that we want to introduce in Remix, even internally, we are now enforcing this RFC process and it's done all in the open. So just because we are a part of Shopify, we really are still leaning into the open-source story of Remix. And I think it's going to be really cool to be able to get the feedback and the high amount of production usage from the Shopify team, but also being able to develop in open and public, I think it's still really, really important to us.

2. Influence of Hydrogen on Remix

Short description:

Absolutely. That's amazing that they're going to allow you to still work in the open and have that community feel that we've come to know about Remix and be able to contribute back to it. Our intention is to work very closely with the Hydrogen team to help them ship really, really solid products for their users. That feedback loop is highly valuable and it's certainly going to influence us in the long term. We're just such a naturally good fit for what they're doing already.

Absolutely. That's amazing that they're going to allow you to still work in the open and have that community feel that we've come to know about Remix and be able to contribute back to it. Do you think that Hydrogen is going to influence any of the Remix features now that you're kind of working alongside of it? Yeah, I think absolutely. In terms of just, again, the ability for that team to be able to provide insight and to provide feedback to us, I think that in of itself is highly valuable. And certainly will influence us. But to the degree that we become a Hydrogen or Shopify product, that's not in our cards. That's not the plan. That was never part of the story. And it's not how we're going forward with this. We are still very much Remix. We are what we were when we started and joined Shopify. And they invested in us because they believe in that vision. And they believe that Hydrogen is going to benefit from Remix, just like Remix is going to benefit from the usage in Hydrogen. So our intention is to work very closely with the Hydrogen team to help them ship really, really solid products for their users. And we are still very much a separate layer from that. But yeah, that feedback loop is highly valuable and that it's certainly going to influence us in the long term. But I think we're just such a naturally good fit for what they're doing already. So it's really just like a really great matchup in my mind.

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 web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
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
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
How React Router Became a Framework
React Advanced 2024React Advanced 2024
31 min
How React Router Became a Framework
My name is Mark Dalglish and I'm here to discuss how ReactRouter became a framework. Remix is built on ReactRouter and heavily relies on it. Remix feels like a framework because it has a CLI, manages the dev and build lifecycle, and has strong opinions about the file system structure. Remix embraced Vite as a plugin, allowing developers to integrate it seamlessly into their existing Vite setup. The shift to Vite led to a change in the philosophy of Remix Vite, enabling frameworks to orchestrate all the environment builds and make the framework as a plugin pattern first class. React Router is merging with Remix to make all the build time framework features available to React Router consumers. React Router is now officially a framework as well as a library. The move to integrate Remix into React Router is driven by the exploration of the next generation of Remix. React Router V7 simplifies by dropping the React Native layer and allows flexibility for consumers to use it as a library or as a framework with additional architectural features provided by plugins. The focus is on betting on Vite in the long term, and React Router plans to support React Server components. Thank you to Mark for answering the questions.

Workshops on related topic

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
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)
How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
Michael Carter
Michael Carter
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Build and Launch a personal blog using Remix and Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
Robert Pop
Robert Pop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
Building High-Performance Online Stores with Shopify Hydrogen and Remix
React Advanced 2023React Advanced 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation
Building a Realtime App with Remix and Supabase
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Building a Realtime App with Remix and Supabase
Workshop
Jon Meyers
Jon Meyers
Supabase and Remix make building fullstack apps easy. In this workshop, we are going to learn how to use Supabase to implement authentication and authorization into a realtime Remix application. Join Jon Meyers as he steps through building this app from scratch and demonstrating how you can harness the power of relational databases!