We are very excited to announce that the open-source web framework Remix and its team are joining Shopify. Why? The web is always evolving—and we’re entering a new era. First, we had the document web, and then we sprinkled in richer interactivity. Most recently, we entered the world of single page apps. We’ve learned through each era, and now we’re bringing together the best of multi and single page apps, which is perfect for commerce and so much more. 

As we spent time talking with Remix founders Ryan Florence and Michael Jackson about where we both want to push the web, we realized we were perfectly aligned on a major goal: it needs to be much easier for developers to deliver lightning fast, resilient experiences on the web.

With the Remix team at Shopify, developers building on Shopify will benefit from new tools that they will love, and merchants will see custom storefronts that are faster than ever with an improved Hydrogen product. The Remix open-source community will have a strong sponsor and supporter they can trust to enable the framework to accelerate its roadmap, with the knowledge that they can bet on the framework for the long run.

First, What is Remix?

The Remix team has been showing the larger web community how to build high-quality websites and applications for many years. In 2014, they created the hugely popular library React Router, which has been downloaded from npm almost a billion times. Then they brought it together under the full-stack React framework Remix, which allows developers to build fast and dynamic user experiences without having to worry about some of the backend server tasks of JavaScript app development, namely data loading and code splitting. This empowers front end developers, and they have coined the term center stack to explain how it solves a problem that hasn’t fully been solved before.

When Remix hit the scene many of us were instantly excited about how easy it was to use. The quality bar for web user experiences has been raised over time and although we’ve seen great new web tools improve the developer experience, the complexity of stacks has unfortunately also grown. The Web platform itself has been consistently adding new capabilities, and browser vendors are doing a better job with compatibility. Thanks to the gifts of evergreen browsers and time, developers are able to use the latest features without being stuck supporting decade-old versions that act as a massive tax. 

An important idea that Remix is bringing back into focus is the classic progressive enhancement. All links, buttons, and forms in your Remix app already work before JavaScript loads on the page. This provides an immediate, solid-feeling experience for users, especially on mobile where bandwidth is constrained. It can be the difference between annoying someone with a loading spinner or engaging them immediately with content. It’s a truly educational piece of software that is designed to work with the web and help you learn to leverage the power of the web as you build your app.

One of the other seismic shifts we’re seeing is edge runtimes. Remix is an edge-first framework, not just for node, that allows you to run on the edge, inside service workers, and of course also in node. This changes the game in how your code can run close to your users, or your data, which is critical for the world of personalized commerce.

When I built my first starter app with Remix, I remember loving how I felt: I wasn’t spending my time thinking about the React abstractions, but I was closer to the platform—thinking about the Web, but still using React for all the things I love about it. It was the best of both worlds. I could reason about the server and client in a smart way, with loaders and actions that allow my app to work well as it first loads, and then progressively enhance for richer interactions. Being able to easily use nested routes with the mix of error boundaries at the right level, and parallel data loading, meant that my pages felt fast with minimal effort. Having a well-lit path that guides you, and takes away foot guns, is huge.

Why Remix and Shopify?

Shopify and Remix have many shared philosophies and design principles. It is important that we enable developers to put users (and in our case, merchants!) first, which requires that we give developers world-class shared infrastructure so they can focus on unique business needs and differentiators, and build their homes on the web.

We have a strong connection to the web as it enables this ownership, and our merchants can build direct connections to customers on their own terms. The web developer ecosystem is massive, and we want developers to bring their transferable skills and knowledge to build on Shopify.

One of the ways Shopify has invested in tying together the web and scaling commerce is Hydrogen, which shipped version 1.0 in June. Hydrogen is a React framework for building custom storefronts. It brings together the infrastructure of the entire Shopify platform, along with rich components, into a foundation that makes it easy for building a web frontend optimized for commerce. How do we ensure merchants can serve buyers a personalized experience as quickly as possible, anywhere in the world? We also built Oxygen, Hydrogen’s commerce-focused serverless sibling.

Thanks to the accessibility of open source, our working relationship with Remix began with the first releases of Hydrogen. We originally used React Router under the hood, and then at Remix Conf in May we announced Hydrogen UI, showing how layers of Hydrogen can be used with other frameworks. We continued sharing ideas in the months since then, and it became clear that it made sense to formally join forces. The concepts required to help commerce developers easily build fast storefronts are the same best practices codified in Remix. It is critical that a storefront loads fast, stays fast, and can become more dynamic the more the buyer interacts with it.

To that end, Remix will tackle challenges that developers building on Hydrogen have encountered around data loading, routing, and error handling. One of the biggest bets we made with Hydrogen was on RSC, and while we believe in the technology in the long term, moving to Remix’s data loading pattern (instead of server components) will lead to faster performance and a simpler developer experience. Changes are coming in 2.0, but ~90% of developers’ code will remain the same.

For more details on what’s next now that the Remix team is onboard, check out the future of Hydrogen. 

While Hydrogen is focused on commerce, Remix is focused lower in the stack, and will continue to be a general web solution that scales from content through commerce and all the way to apps. Shopify will use Remix across many projects where it makes sense, and you can expect to see more of our developer platform with first-class Remix support over time.

The goal of these efforts is to meet developers where they are with high-quality solutions. As an ecosystem, we want to offer layers of help no matter which framework they’re using. On that point, we’re spiritually aligned with the Remix team. While they and the Hydrogen team are working intently on how best to help the React community, there’s a lot of room to deliver the benefits across the board, and remix other great web frameworks.

We’re Serious About the Open Web

If you aren’t building for commerce or Shopify today, this is still good news. Remix will continue to be an independent and open-source framework. At Shopify, the Remix team will go full steam ahead on their roadmap, which is full of exciting ideas for what can be done to improve life for web developers. 

Shopify was built by entrepreneurs, so we understand how important it is that the Remix team has the space to do what they do best. The Remix project has a rich open-source community and ecosystem, and we want to see it continue to grow. Open source continues to play a vital role in the success of Shopify and our partners, and we’re always looking for ways to give back.

I can’t wait to see how Remix, Shopify, and the open-source community come together to push the web forward. We’re here to support the commerce web with Hydrogen, Oxygen, and beyond, and by working closely with the Remix team we’ll raise the floor for the entire web.

So, a big welcome from Shopify to the Remix team and community.

---

If building systems from the ground up to solve real-world problems interests you, our Engineering blog has stories about other challenges we have encountered. Visit our Engineering career page to find out about our open positions. Join our remote team and work (almost) anywhere. Learn about how we’re hiring to design the future together—a future that is digital by design.