How we built Hydrogen, a React framework for building custom storefronts
In this technical retrospective (2022), @vlucas shares practical architectural lessons learned from running, scaling, or migrating production software under lean constraints.
Core Principles for Independent Builders:
Defaulting to simpler architectures (such as monolithic frameworks, SQLite, or managed VPS) prevents early engineering bankruptcy.
Evaluating true compute and egress costs reveals that high cloud bills can often be slashed by 80%+ through judicious re-platforming.
Code you write at 2 AM as a solo engineer must be easy to debug six months later without complex microservice dependencies.
Community Debate Themes:
HN engineers debated the tradeoffs between cloud convenience and raw server economics, database indexing strategies, and resisting premature architectural complexity.
CATEGORY Frugal Engineering →
HISTORICAL ERA Pandemic Bubble (2020–2022)
COMMUNITY SCORE 157 points
TOTAL DISCUSSIONS 101 comments
I have always wanted to use React with Shopify, but I feel binding the data manually from the Shopify API via GQL is very unergonomic. You have to understand Shopify API way deeper than usual to get started. There should have been basic but non-optimal ways to get data for 90% of the use cases already included. The GQL query they showcase is just complicated https://shopify.dev/custom-storefronts/hydrogen/getting-started/tutorial/products ↗ compared to the liquid way.
I would love to see more in-depth explanations about Oxygen [0]. I'm currently creating a similar runtime [1] based on V8 Isolates so that would be interesting to compare.
[0]: https://shopify.dev/custom-storefronts/oxygen ↗ [1]: https://github.com/lagonapp/serverless/ ↗
Cool to see Shopify using Vite and contributing back to that project. I didn't know it would be so useful with React since it came out of the Vue world. But I've now read that Evan wanted to make it open to all frameworks which is the best approach.
My life has been made a lot easier since I ditched Webpack for Vite. Faster build times, way less complexity, cleanly breaks up projects into small .js files on a per-route basis etc.
All of this would be far more interesting to me if it weren’t based on React. Almost any other technological choice would have been better, from my perspective. I get it, React developers are cheap because people have bought into the React hype.
To me, though, especially with hooks, React creates a bizarrely deep object tree that is impossible to reason about in comparison with pretty much every other tooling that exists.
I don't want to be mean, but the name should be more descriptive, and not pollute the global namespace.
"hydrogen" has quite a specific meaning as a chemical element.
Shopify:Hydrogen might work, but why? It gives no clue about it's function, goals, or anything.
How about Shopify-React? Reactify? Shopiract? Use your brain, as I'm always telling my kids.