Goodbye Liquid. Hello Hydrogen

82% of Shopify partners on Experts Marketplace specialize in custom storefronts and custom theme development. The market is crammed. But if you’re finding your edge as a Shopify developer/web agency, here’s how you can do it in 2023-2024. (or what I’d do)

The short answer: By learning Hydrogen.

The “Why” is fairly obvious - if you’re been in the space long enough. Shopify Liquid has some major drawbacks and limitations:

• The risk of vendor lock-in is significant. Liquid theme binds your code to Shopify - so if you want to migrate to a different system, good luck. Liquid is (seemingly) built under the assumption that companies won’t evolve because it makes the e-commerce platform the hub around which the whole apparatus of success spins. When brands have to change their platform, the entire system might go to waste - translating into the loss of resources: thousands of hours and hundreds of thousands of dollars

• Customization with Liquid in the background can take a toll on developers. The available options with Liquid are severely limited, whereas installing apps may incur additional fees and hamper performance.

  • You can use additional app scripts, but they can conflict with your theme code, which results in even more redundant and non-reusable code. Any developer with a DRY mindset (don’t repeat yourself) would hate it.

• Another stumbling block is the need for better performance optimization. Liquid is a backend template language used for static content generation - so if you want to make a website more interactive and responsive, you have to use an additional 3rd script, which guarantees to put a brake on your site’s loading speed.

And the most fundamental drawback is that Liquid is a template language - making it challenging to develop. Custom databases and complex logic are tough nuts to crack. I remember reading this somewhere on Shopify Reddit - which perfectly captures the biggest drawback of Liquid:

“Liquid theme restricts you to how and what you can develop. Do you want to create a single-page application? No. Perhaps a progressive web application? No. Is it possible to unit-test your markup? Again, no! Even custom URLs are not an option.”

The engineering wizards at Shopify must have been aware of these drawbacks - because they have been actively working on Shopify Hydrogen - a new programming language that was specifically designed to improve the performance and scalability of Shopify stores.

Hydrogen is intended to be a replacement for Liquid - and Shopify is pushing for it with vigor. They recently acquired the community-favorite RemixJS and plan to use it to improve Hydrogen’s stability and performance.

And this is from Shopify’s Press Release:Remix Joins Shopify To Push Web Forward, written by VP of Engineering at Shopify themselves:

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.

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.

I can tell you from my own experience - the possibilities with Hydrogen are abundant:

• Developers can create fully custom websites with access to the controllers and models, making complex logic and third-party service requests possible. Hydrogen also does not tightly couple code to the Shopify platform, meaning businesses can change platforms without having to start from scratch.

• Better Flexibility: Hydrogen enables developers to create a single-page application, a progressive web application, and to unit-test their code. It also supports custom URLs and has better performance than Liquid.

• Enhanced performance: Hydrogen is optimized for performance and is able to handle large volumes of traffic more efficiently than Liquid. This means that stores built with Hydrogen may load faster and be more responsive.

• Better error handling: Hydrogen has improved error handling and debugging capabilities, making it easier to identify and fix problems with your store.

• Improved developer experience: Hydrogen is designed to be easier to learn and use than Liquid, which should make it easier for developers to build and maintain Shopify stores.

As Shopify developers, I wager we’re at the threshold of a complete disruption - the eCommerce equivalent of transitioning from horse-drawn vehicles to automobiles.

I’ll leave it to you to decide what to do next, but for me, I’d better run.