How we built Hydrogen, a React framework for building custom storefronts

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.<p>To me, though, <i>especially</i> 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.

Cool to see Shopify using Vite and contributing back to that project. I didn&#x27;t know it would be so useful with React since it came out of the Vue world. But I&#x27;ve now read that Evan wanted to make it open to all frameworks which is the best approach.<p>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.

I would love to see more in-depth explanations about Oxygen [0]. I&#x27;m currently creating a similar runtime [1] based on V8 Isolates so that would be interesting to compare.<p>[0]: <a href="https:&#x2F;&#x2F;shopify.dev&#x2F;custom-storefronts&#x2F;oxygen" rel="nofollow">https:&#x2F;&#x2F;shopify.dev&#x2F;custom-storefronts&#x2F;oxygen</a> [1]: <a href="https:&#x2F;&#x2F;github.com&#x2F;lagonapp&#x2F;serverless&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;lagonapp&#x2F;serverless&#x2F;</a>

I really don&#x27;t like the idea that Shopify adopted React so deeply (Polaris is an example), not because I am a Vue developer but I would prefer Shopify to not be so opinionated about any framework.<p>VanillaJS is very advanced nowadays.

I&#x27;m on the Shopify Hydrogen team. Happy to answer any questions.

Not on this team, but have heard nothing but praise internally. Congratulations to the Hydrogen team on shipping!

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 <a href="https:&#x2F;&#x2F;shopify.dev&#x2F;custom-storefronts&#x2F;hydrogen&#x2F;getting-started&#x2F;tutorial&#x2F;products" rel="nofollow">https:&#x2F;&#x2F;shopify.dev&#x2F;custom-storefronts&#x2F;hydrogen&#x2F;getting-star...</a> compared to the liquid way.

For anyone struggling with Tailwind, I would recommend Tailwind DX[0]<p>[0]:<a href="https:&#x2F;&#x2F;gimli.app&#x2F;tailwinddx.html" rel="nofollow">https:&#x2F;&#x2F;gimli.app&#x2F;tailwinddx.html</a>

This is huge, and I think it could have implications beyond the ecommerce store. I know it relies heavily on React Server Components, is part of the long tail on this due to the fact that those haven&#x27;t shipped in stable yet?

The number 1 thing you guys need to check is how do static, vs react, vs any other framework or front end approach do for your users in SEO. Then build with that approach.

One big problem we have with shopify is users don&#x27;t stay logged in for more than 24 hours. Do you guys fix that with hydrogen?

Going to take this as an opportunity to ask, has anyone here worked with <a href="https:&#x2F;&#x2F;www.reactstorefront.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.reactstorefront.io&#x2F;</a><p>It looks like a very competent solution but would like to hear from actual users

Paradoxically Shopify’s default storefronts have poor performance and thus SEO performance because of this.

This is a solution to be used with Shopify backend, right?

I don&#x27;t want to be mean, but the name should be more descriptive, and not pollute the global namespace.<p>&quot;hydrogen&quot; has quite a specific meaning as a chemical element.<p>Shopify:Hydrogen might work, but why? It gives no clue about it&#x27;s function, goals, or anything.<p>How about Shopify-React? Reactify? Shopiract? Use your brain, as I&#x27;m always telling my kids.