Revealed as one of the major announcements at Unite a year ago, Hydrogen and Oxygen combined are Shopify’s answer to a headless commerce stack. This came off the back of around 18 months of the headless trend gaining momentum, and a growing number of high profile brands strongly considering or taking action to move towards that architecture.
CTO at Commerce-UI
Technical Director at Vervaunt
Liam joined Vervaunt as a Solution Architect in March 2020, bringing with him a wealth of Shopify Plus and general technical knowledge and experience. Liam has been working in eCommerce for over 8 years and previously managed the development team at a leading Shopify Plus partner agency. Liam is focused on architecting technical solutions and also has a background of being a full-stack developer.
*Disclaimer: This article was written before the February release of Shopify Editions. While most of the predictions and hopes in here for Hydrogen updates still stand up, we will need to follow up after getting hands-on with the updates for a longer period of time to confirm if it meets our expectations.
For this article, Liam Quinn (Vervaunt) & Michal Klim (Commerce-UI) have teamed up to give a broader insight into the current state of play with Shopify’s Hydrogen and Oxygen offering, the technical capabilities and limitations, and how they could progress in the near future.
Meeting at a conference last year, we’d discussed the topic at length. I’d been having discussions with some larger brands on moving to Shopify and potential solutions to their complex requirements. Michal ran me through a wealth of the research and practical examples of Hydrogen that he had been working on, and how its application stands up in the real world. We decided that between us we could deliver a broad but specific review of the technology, with practical takeaways.
For brands moving towards headless architecture, a cynical view of the Hydrogen and Oxygen announcements could be that this was a reflex response to the fact that some key brands that Shopify wanted to be aligned with were looking beyond the liquid theme structure that came natively with the platform. While other headless stacks were being integrated with Shopify as the checkout and underlying system, the likes of Chilly's proved that it would be in a much less significant part of the architecture, and much more feasible to then switch out the ecommerce platform for the likes of Commerce Layer, CommerceTools, BigCommerce or others. Releasing their own way to achieve all of the benefits offered from a headless build, but in some form of unified architecture, would be an effective way of reducing this churn before it became more common.
However (with less scepticism) it became evident when digging into the technology more, that this Shopify proposition and overall objective was a really optimistic and an ambitious one. The long term goals would mean brands would remain more closely embedded into the Shopify ecosystem, but it would eliminate a lot of the risks associated with headless builds.
Risks included potential technical debt, agency lock-in, and increased development effort in maintenance and common tasks - all of the aspects which initially put Shopify onto the trajectory they have been on.
Previously, the tech stack for a headless build might shape up something like:
These might be mixed and matched (or replaced with other options) depending mostly on development agency preference. With the announcement of Hydrogen and Oxygen (aside from being a bit of a slow burn for both to be at a useable point) this could instead look like the following:
But with the release and ongoing work around this new infrastructure, we explored whether the deliverable from Shopify was as strong (or stronger) than the established big hitters that already have some traction.
Merchants seeking ecommerce success prior to the introduction of Hydrogen and Oxygen had a choice: invest in Shopify's reliable native tech stack (Liquid / Online Store) or tap into customisation potential with a more versatile headless architecture. Both of those choices came with their benefits and drawbacks:
So, where does Hydrogen sit in this equation? Simply put, Hydrogen is a headless framework built on top of React. It competes with technologies such as Next.js, Nuxt, and Gatsby, just to mention a few. The above solutions are battle-tested and come with a vast ecosystem of libraries and established best practices for common problems. Hydrogen, a recent tool, may seem like an underdog compared to those widely recognised technologies. Up until now, Hydrogen hasn’t gained comparable traction and has lacked the maturity of the competition.
Yet, Hydrogen focuses solely on implementing Shopify APIs rather than being a general development framework. Being developed by Shopify's in-house team gives it a lot of bonus points when considering what technology is best suited for Shopify-based ecommerce.
According to Shopify:
With the hardest parts of storefront built in, ready to use, or easily integrated with Shopify, Hydrogen React-based framework makes building headless storefronts fun.
Hydrogen promises to seamlessly blend the advantages of headless and liquid-based architectures, providing users with a fast and reliable way to build custom solutions tailored to their needs.
Right now, the short answer is that the initial target market for a Hydrogen build is the same as those who would be considering any other headless build architecture. Without going too in depth on commonly written about ground, this would look something like:
Where a brand has the technical internal capabilities of building and maintaining themselves (or a really good and trusted agency). If the latter, our strong belief is that the success of the project depends on at least having an experienced and technical Product Owner, Ecommerce Director or CTO role that will have a good grasp on compromises and impact of key decisions to the outcome before they are made.
As time goes on, the learning curve for developers and barrier to entry for medium sized and smaller brands will certainly come down - much like the growth of Shopify in the first place. I can see a time eventually where this is the technical route for any established brands (basically anyone on the Plus plan). Although this is likely some way off yet.
There are some limitations with both Hydrogen and Oxygen (which are detailed more below) meaning they are probably not best fit immediately for really large and ambitious brands. These brands building at this point in time would likely compromise less and have less risk with a more conservative headless solution, as per some of the options outlined above. Having said that, compromise comes with any platform or vendor selection and there are already a selection of strong case studies to argue that despite any of these limitations, they may not be hard blockers.
As with any ecommerce platform or new tech vendor, you’re only as good as the paying brands that are signed up and trusting your services. With Hydrogen and Oxygen being very unknown to Shopify agencies and brands already in the ecosystem (plus a bit of a gradual rollout after announcing), it felt like there was a lot of waiting to see how it would go across other case studies before brands took the plunge and committed themselves. For this reason it has been a slightly slow uptake. But as would be expected, Shopify did have a couple of hero brands in place to make sure some high profile case studies did exist, and there are also one or two other really interesting examples too.
Allbirds have been one of the original high profile success stories for Shopify in this rise of the DTC brand era. So it wasn’t a huge surprise that they’d continue to be the poster child with a Hydrogen site rebuild. But given the size they are now, it is a big statement of confidence that they would go all-in with it.
It might not be super noticeable at a glance that there is any difference to a standard Liquid build - standard URL structure still in place, and no significant difference in load speed to the user. There are small, nice touches such as the Allbirds logo on page load transition.
But under the hood there are complex international considerations: localising onsite to serve 35 countries, and running 50 retail stores. A mobile app also integrates Shopify via storefront API taking orders. A real omni-channel architecture, maximising the tech stack.
Skims would similarly count as a Shopify poster child, and the second really high profile early adopter of Hydrogen and Oxygen.
Similarly, they’ve also scaled to a huge extent and are serving a large number of regions internationally with their setup. Being critical, the UX across site still has a lot of room for improvement and isn’t visually exceptional - again nothing would jump out as being really unique from how it would look with a Liquid theme.
But one thing that does stand out, and really sets the site apart from a typical Liquid build on Shopify is the load speeds when browsing the site. It is rapid. I’m always keen to stress that a Headless build in general doesn’t equal a lightning fast site, but it creates the potential for it if built well. They’ve done a fantastic job with this, and it starts to show the potential performance benefits that can be achieved with Hydrogen.
There are a few other good case studies, and some on the Shopify site that are worth looking at. But Denim Tears stands out for me as the other one to showcase here.
It’s not as high profile a brand, and looks like a much simpler setup for internationalisation. But it’s really distinctive and a lot of consideration has gone into creating a unique UX. It also isn’t restricted to Shopify’s native URL structure, which can be seen when browsing the product categories, or stories section. The full on the Hydrogen website is definitely worth a look.
Hydrogen is a Shopify-focused toolkit and a fully functional headless framework at the same time. When assessing its potential and capabilities for development teams, it's important to evaluate how well Hydrogen performs in key areas like functionality, performance optimisation strategies, third-party integration capabilities, and developer experience.
Hydrogen was released with its counterpart Oxygen – a Shopify hosting platform responding to platforms such as Netlify and Vercel. However, Oxygen is limited compared to those platforms:
At the same time, it got the essentials right:
Hydrogen projects could also be deployed to Vercel and Netlify. However, you shouldn’t consider this a viable option. From the start, we lose the ease of setup and native Shopify support. Also, in the future, Shopify could lock in some of the Hydrogen features through its connection to Oxygen.
Hydrogen, being a headless framework, gives merchants control over more complex business flows. Consider the following example cases:
One of the most common reasons for going with headless is the ability to choose a third-party CMS like Sanity or Contentful and expand the editorial capabilities of the site. Hydrogen can fully integrate with any third-party service that exposes API, much like any other headless solution on the market. Moreover, integrations as such could benefit from Hydrogen's ability to control caching strategy for each request.
On the surface, Hydrogen uses the same way of communicating with Shopify (Storefront API) as any other framework. However, underneath, Hydrogen has a potential advantage, given it is served using Oxygen. Shopify can expose some internal mechanisms in a secure way much easier than through the public API.
At this point, there are no major functionalities exposed strictly to Hydrogen. However, we are witnessing less obvious functionalities being handled only thanks to the Shopify team's internal knowledge. A good example would be support for reporting analytics data to the Shopify Reports tab. This functionality may be an obvious essential for merchants. However, it is not easily exposed to other third-party headless frameworks.
Shopify must carefully manage the delicate balance between delivering increased value with Hydrogen and upholding their relationship of trust amongst developers. Yet, users will likely gain an enhanced experience due to pre-existing abstractions of complex functionalities handled exclusively by Shopify's team.
Hydrogen and Oxygen are both very ambitious projects capable of making an impact in an already crowded space. Shopify brought an exceptional development team and established relationships with industry leaders like React or Cloudflare. We can also see more brands adopting Hydrogen to their needs promptly.
Hydrogen is still in the early phase, which must be considered when utilising it as the backbone of our application. An early-stage technology often suffers from rapid direction changes and a lack of established community and best practices around it. It isn’t necessarily a roadblock. However, merchants considering Hydrogen should understand that navigating through those early days of any technology requires a skilful development team.
At this point in time, we also have to consider that a new major version of Hydrogen has been announced:
On Halloween 2022, Shopify stirred the pot with a novel investment in Remix – an up-and-coming framework that had been catching developers' eyes for some time. This unexpected move sent questions and speculations soaring through the entire Shopify sphere regarding how it will impact Hydrogen's future prospects. We didn’t have to wait long for more in-depth announcements in the form of a new Hydrogen roadmap. In a nutshell, it states that we should expect a complete overhaul version of Hydrogen (built on top of Remix) at the end of February 2023.
After a year on the market, Hydrogen's decision to reconstruct its entire framework may seem controversial. But looking deeper reveals that it could be a thoughtful move for them, teeming with potential for real success.
Hydrogen was very ambitious from the beginning. The team behind it made a brave decision to bet on React Server Components (RSC) (a technology that was not production ready at the time). Yet the decision wasn’t unfounded, RSC opens a whole new world of possibilities when it comes to performant site rendering.
The general adoption of RSC is one of the most anticipated shifts in the development space. However, one has to understand that technological shifts of this magnitude don’t happen overnight. Almost two years later, after the Hydrogen project has started, RSC is only starting to get traction, and other frameworks have just begun to catch up - Next 13 latest announcement being one of the more notable examples.
Developing a successful framework is no small feat, especially when leveraging cutting-edge technology. Crafting documentation, fostering community outreach and support, establishing proper release strategies, and devising effective promotion methods are just some of the many obstacles that stand in the way of true success - each potentially taking years to conquer.
To truly understand the Hydrogen transformation, we must look closer at the Remix itself. It is a comprehensive and versatile framework created by two renowned tech industry icons, Michael Jackson and Ryan Florence. The pair are well-known for creating the widely used react-router library and being experienced open-source software developers with an impressive portfolio of projects. Although much less popular than Next.js, Remix generally gathered positive feedback and a committed community around it.
Remix, similarly to Hydrogen, is also built on top of React. However, it stands out from other frameworks regarding its core assumption. It focuses on web standards and native web functionalities, which may also sound appealing to developers experienced in Shopify Liquid-based solutions. And it may be a huge deal.
Potentially, Shopify's acquisition of Remix has zoomed the success potential for Hydrogen. The technology is already proven and validated, with fewer obstacles to adoption. Either by headless developers or Shopify native ones. With the renowned open-source talent on board, new Hydrogen has a strong upper hand in building global recognition. The way all these pieces are coming together looks rather impressive.
Hydrogen 2 is rebuilt from scratch. Meaning that key parts of any application, like data loading, routing, error handling, mutations, and state management, will have to be adapted to the new approach. Although the official roadmap states:
If you’re building on Hydrogen today and wondering what this means for you, we expect that more than 90% of your code will stay the same, with provided guides and tools to help with the rest. Below we’ll get into the core changes that are coming, the motivations behind them, and our planned designs.
Take this with a pinch of salt, given that all those parts are responsible for handling most application business logic. On a positive note, all of the code responsible strictly for presentation (styles, components) could rather be migrated as is.
With no official developer preview currently available, experimenting via migration to Remix is a great way to assess true compatibility between versions before jumping into full implementation. Essentially Hydrogen 2 aims to be a thin Shopify wrapper around Remix.
Given all of the above, our overall feeling is that Hydrogen initially was aiming for a really high bar. While it really achieved a lot, it probably fell just short of being the production ready first choice for any Shopify (or other) brands to go headless in the most effective and scalable way. The RSC implementation outlined above really highlights how seriously Shopify were taking this project, and the engineering talent and resource behind it.
This new approach is a bit more conservative, building up from a framework which is already established in the market (Remix), and utilising that with its core team in place. This is enormous leverage, and the combination of what was achieved with Hydrogen, and what Remix can bring to help improve further, should be a major recipe for success. Nothing is certain of course, and such a major release like this will always take some time to iron out any kinks and become robust. But while we'd be hesitant suggesting Hydrogen for a major build right now, we feel optimistic that in six months time this will be a completely different story and it becomes a major consideration.
I’ve touched on it above, but my outlook for the imminent release and not so distant future of Hydrogen and Oxygen is a positive one. We will obviously know more in the next month or so if all remains on course, but if all goes well I think it could eventually be a game changer for established brands moving or remaining on Shopify.
We have already seen the likes of Mattel and Supreme moving to Shopify, with specific nuances requiring the platform to be flexible to their needs. I think Hydrogen opens the door for this to be much more commonplace, and expect more high profile brands to follow suit. Some of my final thoughts for the future are:
It’s not easy to assess the future of Hydrogen and Oxygen. We can only rely on information from official Shopify communications channels and development-related sources. And those are inclined more toward publicity.
However, given what we know, I'm choosing to be optimistic. I believe that the decision to scrap the previous version and make a fresh start was an informed one and a change of focus from experimentation to building a viable solution for real-world problems.
Aside from Hydrogen and Oxygen, the overall Shopify movement toward more composable architecture is not without significance. The introduction of Commerce Components, stable and resilient Storefront API development, and numerous new APIs (Shopify Functions, Web Pixel API, Multipass, etc.) are significant improvements, clearly impacting especially headless stores.
I'm looking ahead to two promising prospects that may come to a realisation soon:
As outlined at the start, Shopify have just released their Winter ‘23 Editions and, amongst a lot of good content, is the confirmation on a schedule of the Remix’d release of Hydrogen. We’re excited to pick this up and start using in a practical way, and hopefully can update when we learn whether it now hits all of the requirements we’d hope for to be a robust and widely usable solution.
We're hiring Front-end Developers
© 2023 Commerce-UI