small_avatar_AdrianR3.png

thumbnail_avatar_AdrianR3.png

avatar_AdrianR3.png

Adrian

GET IN TOUCH

Over the past year, we’ve been keenly observing the developments at Shopify. For companies specializing in React frontend development like Bitnoise, e-commerce agencies, and web stores these changes are intriguing.

**The big breakthrough** I am talking about was definitely Shopify’s acquisition of [Remix](https://remix.run/)
. On the surface, it may have been strange, as the e-commerce giant already has their own frontend technology called [Hydrogen](https://hydrogen.shopify.dev/)
. 

But it actually makes a lot of sense. Here’s why.

#### **What is Hydrogen?**
Shopify's Hydrogen is a front-end development framework that provides a set of tools for building custom storefronts on Shopify's e-commerce platform. **Hydrogen is built on top of React** and is designed to provide a flexible and performant developer experience. The framework provides a number of features, including a declarative router, a powerful data management system, and a suite of pre-built UI components that can be used to quickly build out custom storefronts.

#### **Why Shopify acquired Remix?**
Shopify has acquired Remix, an open-source web framework start-up similar to Next.js, to bolster its storefront design tools. The financial terms of the acquisition were not disclosed, but Remix CEO [Michael Jackson](https://www.linkedin.com/in/mjijackson/)
 (not the Michael Jackson) said that the company will receive long-term support and backing from Shopify to help it grow faster and focus on performance and scalability. 

**Remix is designed to leverage distributed systems and native browser features while abstracting away back-end server tasks, and can prefetch elements of a web page in parallel to minimize page loading.** One of its key features is its compatibility with public cloud environments, including Amazon Web Services, Google Cloud, Netlify, Vercel and Cloudflare Workers.

![ ](\uploads\blog-Remix_Hydrogen_Shopify_post01_5RAFqGZsUWzGL0wX3HBlW8.jpg)
#### **Does this mean phasing out of Hydrogen?**
I really don’t think so. Neither do Shopify executives.

According to Shopify’s VP of Engineering Dion Almaer, Remix is expected to become a significant feature of Shopify's developer platform over time. He said the acquisition would benefit both Shopify developers and merchants **by bringing improvements to Hydrogen**, the company’s front-end web development framework for building custom Shopify storefronts.

In short, by acquiring Remix, Shopify **has added a valuable asset to its developer platform**, and it will be able to enhance its own storefront design tools by leveraging Remix's capabilities.

Here are some areas where improvements are taking place.



#### **Data loading**
Data loading is one of the core improvements that Shopify aims to introduce to Hydrogen by leveraging Remix's capabilities. With Remix, the company has been able to improve data loading by keeping **a clear separation around where the server is doing the work**, and worrying less about how the server and client components might mix together. Remix has introduced a route-level data loader that runs on the server instead of React Server Components, which presents a performance risk for developers and bottlenecks for progress. The route-level data loader has proven to be an ideal solution for the performance and resiliency of merchants' websites, and it has resulted in a simpler developer experience that's less prone to mistakes.

#### **Routing**
Routing is another area that Shopify is aiming to improve by leveraging Remix's capabilities. With React Router not supporting RSC in Hydrogen, Shopify implemented its **own declarative and file-based router**, which critically missed granular error boundaries and nested routing. Remix's router has introduced an innovative approach to nested routing, and an upcoming API supporting React 18 Streaming that complements Hydrogen's routing solution with a simple way to prioritize streaming data. Remix's router has a more intuitive way to provide a consistent layout component for the shell of a website, and a catch-all route with "$" means pages like a 404 get a dedicated place in a file structure instead of being referenced inside App.server.

#### **Error Handling and loading fallbacks**
Error handling and loading fallbacks are another area that Shopify aims to improve by leveraging Remix's capabilities. Nested error boundaries are a new feature that Shopify has introduced to Hydrogen, which means that only the parts of the page related to the issue will respond differently. This feature allows for a more contained issue that provides helpful messages to **turn a potentially negative customer experience into a positive one**. Hydrogen also makes it much easier to spot bugs before they ship with robust **support for linting, TypeScript, and unit testing**, but mistakes are a reality of development. Error boundaries allow for crafting each message and fallback UI for individual parts of each page related to distinct fetch requests and allowing crafting the message for whatever status code you want to throw. When you combine this with the upcoming Streaming support and defer API and the ability to get data from parent routes without Providers, things get very powerful without getting complicated.

#### **Mutations & State**
Shopify aims to ensure that the purchase path is as performant as possible, that shoppers can easily pick back up where they left off, and that they can easily share links with their friends when they want to recommend a product. Mutations and state are the most important pieces of building a high-converting storefront, but they're also some of the hardest things to get right. Shopify has added features like a RSC-based mutation API and a Form component, but they're not as full-featured as the company would like. With Remix's useMatches, useSearchParams, and useFetcher, Hydrogen will support Optimistic UI, making add-to-carts feel instantaneous. The Hydrogen Pagination component will provide simple and flexible APIs for working with paginated Storefront API queries like product grids, search results, and order history.

#### **Conclusion**

At Bitnoise, we've been big fans of Remix since its early days and we're excited to see Shopify incorporating its framework to enhance its storefront design tools. With these changes, Shopify developers and merchants can look forward to an improved user experience, increased productivity, and enhanced performance. 

We believe that these changes will play a crucial role in the future of e-commerce, and we're thrilled to be a part of it!

How does Remix enhance Hydrogen, Shopify's front-end development framework?

Łukasz

GET IN TOUCH