Shopify Hydrogen and Oxygen — A New React Framework

Hydrogen is a server-side rendered react framework built on the Remix framework to create custom storefronts in Shopify from scratch with built-in shop functionalities providing a headless solution granting direct access to the backend data of the shop.

Oxygen is a hosting platform developed by Shopify that gives access to deploy and host Hydrogen-based custom storefronts on Shopify.

As a new project in my career, I am practicing a new react framework which is Shopify Hydrogen to develop an application for a client these days. I had a huge learning curve on that and finally, I understood, that it will be revolutionary in the future since many advantages are using it. So, I thought of bringing a series of articles about the Hydrogen framework to my blog to share my valuable experience with you also. So, take a look at my first article in the Shopify hydrogen framework.

As the above snippet, the Hydrogen framework is also another react-based web framework. However, it has more unique features than other regular react frameworks in the industry. Let’s understand it by looking into the unique features and technologies of the framework

Difference between traditional storefront and custom storefront

In Shopify, now there are 2 types of storefronts. They are traditional and custom storefronts. As customers or buyers, it will be not visible to the outside but there is a huge difference in the technology being used to develop them. But as developers and store owners, it is much required to well understand all about these so it is very beneficial to correctly select the storefront type for specific projects based on their requirements and get the best output.

Let’s investigate the differences between traditional and custom storefronts.

Traditional storefront

These are the storefronts used since the start of Shopify. There are a lot of pre-built themes for them (Both free and paid) and can be customized using the built-in theme editor in Shopify even the customization can be done with just a drag and drop. Here inside, a templating language called Liquid is used to develop themes. I am not going to describe more about this since this is not the purpose of the article. I will just leave here the link to the official documentation of the traditional storefronts so anyone interested can go through it.

Custom storefront

This is what I am going to describe more today. Due to the limitations in the traditional storefronts, Shopify has now introduced this type of storefronts. The motivation for this type is to develop more customized feature-rich storefronts. This is where the Hydrogen framework and the Oxygen hosting platform are coming. If you have any experience developing traditional storefronts, you know how difficult it is to customize a traditional storefront. It is always limited to the theme functionalities. So basically all the Shopify stores in the world are more likely the same and identifiable. Custom storefronts allow people to have any kind of website or store hosted in Shopify.

Let’s elaborate on the advantages and as well as disadvantages of custom storefronts further.

Advantages of custom storefronts (Hydrogen framework)

So as I said earlier, having freedom for customization without depending on the limit of the theme has given the designers and developers a superpower to develop creative and innovative storefronts. It is not just a drag and drop, since the Hydrogen framework is based on React, developers get the ability to develop it using React codes just like other web applications.

On the other hand, shop owners are getting more attention to their store from the customers due to the creativeness of the store. They can apply more creative marketing strategies to attract customers.

All traditional storefronts have the basic features given by Shopify. If we want to use additional features like email marketing, product bundles, reviews, etc… we need to use third-party apps using plugins. And still, we can use the apps which are available only in the Shopify app store. But using custom storefronts, you can add any feature limitlessly since you are developing this using React.

Disadvantages of custom storefronts (Hydrogen framework)

Compared to traditional storefronts, there are disadvantages too by using custom storefronts.

Despite the limits, developing a traditional storefront is not very hard. It is just a drag-and-drop. As shop owners, if you have creativity in you, you may also be able to develop your store by yourself. If you don’t have the creativity, still you may only need to hire a Shopify store designer. But in custom storefronts, Hydrogen uses react. Developing a React application is not always everyone’s cup of tea. So, you may need to hire a React developer for it.

Further, this Hydrogen framework is still in its early days. So, it will still be a little difficult to find react developers who know the Hydrogen framework fluently. But I feel this is temporary. After the technology is well established, the framework will be popular among the developers.

On the other hand, since third-party apps are still not compatible with the Hydrogen framework like in traditional storefronts, we may not be able to use pre-built technologies for additional features. For example, maybe we will have to develop email marketing apps, product bundle apps, and customer review apps from scratch. It is hard and costly.

So, so far you may understand, that developing a custom storefront is more costly than traditional storefronts.

What is a headless solution and how Hydrogen is different from other react frameworks

When I was learning this hydrogen framework, I felt, that now this is just another react application and why we need to pay for Shopify and still we can do the same without it like other react applications. But I was wrong.

In other react applications, there are two parts which are frontend and backend. The frontend has to be developed using React or another frontend framework and the backend has to be developed using other backend frameworks. So, if we are just developing a store, we can use the Shopify admin dashboard. There are a lot of features like payments, customers, and product listings. Making collections etc… in Shopify admin dashboard. So we don’t need another backend for this purpose. This is why Shopify says the custom storefront is a headless solution. Here the head means the backend.

On the other hand, inside the Hydrogen framework, there are built-in components for cart, payments, and other basic financial features. There is even a mock shop provided by the Hydrogen framework itself with basic functionalities connected to the cart and financial components in the proper way for every Hydrogen project. So, as developers, we don’t need to think about it. We just need to hand over the selected product to the cart and the rest will be handled by the framework.

Using the Hydrogen framework, you may develop a heavy, feature-rich, fully customized, and revolutionary storefront but still, you can deploy it in a high-performing Oxygen hosting platform for free. Still, you have to get a Shopify plan, but still, it will be more cost-effective than hosting both frontend and backend applications in different high-performing hosting platforms, and even need to develop another admin dashboard for store management.

This is how I understood that this will be revolutionary soon. So, now let’s move to quickly explore the technical aspects of the Hydrogen framework which I have learned.

Server-side rendered react framework

There are two types of react frameworks in the industry which are server-side rendered and client-side rendered.

server-side frameworks work as traditional static websites. On request, the requested page is coming from the server side as HTML and CSS. They act as multiple-page applications also.

But client-side frameworks are not like that. When the page is loaded initially, all the HTML and CSS of the application is coming into the browser and the specific part of the application is displayed using javascript.

To study more about server-side and client-side rendered frameworks, you can refer to the following article

Hydrogen is a server-side rendered framework. Server-side rendered applications are more SEO-friendly since the HTML and CSS are visible to search engines. Therefore, from the marketing aspect, it is very useful and as well it is a basic need for an online store.

Built on the Remix framework

Remix is another server-side rendered react framework. We can say Hydrogen is an adaptation of the Remix framework or it is built on the Remix framework. Hydrogen is the Remix framework with specific more custom features added to connect with Shopify to create Shopify storefronts. Therefore, Hydrogen’s core functionalities like folder structures, routing, and other configurations are working on Remix. Read more about the Remix framework from here.

Shopify/hydrogen-react package

So, if we analyze how Hydrogen is different from Remix, there is a special package installed with Hydrogen which is the shopify/hydrogen-react package. Specific react components, reusable functions, and other utilities to interact with Shopify storefront API are included in this package.

This is how Hydrogen has been able to become special from other react frameworks. Not only that, Shopify has released this shopify/hydrogen-react package as a standalone package so, shortly, we will be able to use Hydrogen features in any react framework also.

Read more about the Shopify/hydrogen-react package

GraphQL queries and mutations

As you may already know, for our frontend, the backend will be the Shopify admin dashboard. But how to access the data in the Shopify admin for our project? For that, we have to use GraphQL queries and mutations. Queries are used to read data and mutations are used to write data (create, edit, and delete). To access data in the admin dashboard, Shopify has introduced the storefront API and the customer account API. Let’s explore how to use these APIs in other articles. Read GraphQL storefront API official documentation from here.

Conclusion

So, in this article, I just wanted to share my first hands-on experience with Hydrogen, the new react framework with you. Here, I discussed what is the reason it has been raised to introduce this technology and what is the gap this technology is trying to fill in the industry. Also, we discussed the advantages and disadvantages compared to the traditional storefronts as well as other applications built using other react frameworks. Then we just discussed some technical aspects also.

Finally, I hope you enjoyed the article and learned anything new to your professional career. You may have a lot of ideas with you regarding this topic. I invite all of you to use the comment section below to express your ideas so we can start a good healthy conversation.