22 ms·
How we built Hydrogen, a React framework for building custom storefronts
- overallduka 4y agoI really don'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. VanillaJS is very advanced nowadays.
- deleted 4y ago[deleted]
- xal 4y agoLiquid is a love letter to vanillaJS. That will always be the shopify default. Ecommerce is perfect use case for the web native.
- ramesh31 4y agoSalesForce built their Lightning framework with web components. It's a complete dumpster fire. Front end has settled on React for a reason; it's the best way to build UIs for the web.
- blittle 4y agoI'm on the Shopify Hydrogen team. Happy to answer any questions.
- s_severus 4y agoHi! Great work so far. Does the team have a vision for a way to standardize the front-end part of shopify apps? That seems to be the really tricky part of a appstore-based platform going headless.
- faaabio1618 4y agoHi, do you think is the right time to start developing an ecommerce with Hydrogen? It sounds you're still in a beta phase where api may change frequently.
- jplhomer 4y agoI do! As of this week, we're at stable v1 and out of developer preview. https://hydrogen.shopify.dev/ https://hydrogen.shopify.dev/
- iamcreasy 4y agoHello, Thanks for taking question. I am a backend developer and lightly familiar with what React bring in frontend development. I have not familiarity with Nextjs. Given what I know, where does Hydrogen fits into the picture? Why shouldn't I stick to sever side rendered pages when developing Shopify app? Thanks!
- blittle 4y agoIf liquid is what you know and love, 100% stick with it. Liquid isn't going away, and there are plenty of opportunities to build out liquid storefronts. Hydrogen is built for custom storefronts that need more flexibility than what is available in a liquid theme. It's entirely customizable. Hydrogen has better performance capabilities as well, because it can be stream rendered to the client. "Why shouldn't I stick to server side rendered pages?" Hydrogen is still server rendered. Server components themselves never execute in the browser.
- s__s 4y agoI’m not familiar with shopify but I’m about to start a shopify project for a client. Can you elaborate on what the difference is between Hydrogen and a custom theme? Other than the tooling and template language I’m struggling to understand the conceptual differences.
- TheGeminon 4y agoHydrogen is essentially a headless storefront, you have complete control over how your storefront is rendered, but it does come with boilerplate and helpers for some standard primitives that most people will want (e.g. carts). Custom themes allow you to template on top of the Shopify front end, giving you less control.
- jacknews 4y agoI 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.
- alx__ 4y ago> I don't want to be mean > Use your brain, as I'm always telling my kids. Proceeds to be mean. Classic troll move op.
- jplhomer 4y agoShopihydroreact? The name happens to pair nicely with Oxygen, our hosting platform: https://shopify.dev/custom-storefronts/oxygen https://shopify.dev/custom-storefronts/oxygen
- jacknews 4y agoWhich is also badly named, then. These names work great for internal servers or services. Only.
- deltaonefour 4y agoPairs nicely? You realize what happened to the Hindenburg when they paired hydrogen and oxygen together?
- jplhomer 4y agoSounds like an explosive combination ;)
- deltaonefour 4y agoIt crashed and burned.
- bsehl 4y ago
- QuiiBz 4y agoI 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 https://shopify.dev/custom-storefronts/oxygen [1]: https://github.com/lagonapp/serverless/ https://github.com/lagonapp/serverless/
- jplhomer 4y agoLook for a blog post about Oxygen in the coming weeks! Initially, we're partnering with Cloudflare using Workers for Platforms [0] so Oxygen's runtime shares many of the same APIs you'd expect to see in a Cloudflare Worker [1]. [0]: https://blog.cloudflare.com/workers-for-platforms/ https://blog.cloudflare.com/workers-for-platforms/ [1]: https://shopify.dev/custom-storefronts/oxygen/worker-runtime-apis https://shopify.dev/custom-storefronts/oxygen/worker-runtime...
- QuiiBz 4y ago> initially Does that mean you want to roll out your own runtime in the future?
- inopinatus 4y agoSame same, the SSR piece means they’d have to build some kind of storefront PaaS, and it wasn’t immediately obvious what the enabling runtime is (or more interestingly for me, how it ticks).
- dvdhnt 4y agoNot on this team, but have heard nothing but praise internally. Congratulations to the Hydrogen team on shipping!
- dzink 4y agoThe 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.
- bsehl 4y agoThankfully Shopify has a pretty massive SEO team who we've been working very closely with. Static often doesn't work well for many parts of ecommerce — but we support both sub-request and full-page caching (More here: https://shopify.dev/custom-storefronts/hydrogen/framework/cache https://shopify.dev/custom-storefronts/hydrogen/framework/ca...) and we worked with Google to make sure we're doing the right thing from their perspective — this is the recommended approach, which we took: https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering https://developers.google.com/search/docs/advanced/javascrip...
- no_wizard 4y agoThis 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't shipped in stable yet?
- jplhomer 4y agoCorrect, we're shipping with an initial version of React Server Components (RSC) that works in Vite and uses file suffixes. Hydrogen provides missing pieces to the current version of RSC, like data fetching and other dev tooling. We're working to align with Vercel on improving the conventions of server modules (e.g. dropping the filename suffix): https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278 https://github.com/reactjs/rfcs/pull/189#issuecomment-111648... and we anticipate to release future versions of Hydrogen and Next.js that use something like boundary annotations instead.
- no_wizard 4y agoThats pretty cool! To say this though, I prefer the file extensions bit, e.g. `.client.ts` and `.server.ts` over directives. Directives aren't super discoverable at a glance, and I think will lend themselves to a lot more headache in terms of engineering practice. I realize its better for compilers probably, but it hinders DX for large applications IMO.
- bsehl 4y agoInitially we'd proposed just dropping `.client.` and keeping `.server.`. This area overall is still being worked out, and the two options aren't necessarily mutually exclusive.
- jplhomer 4y agoThat's good feedback. The directive approach relies much less on initial discoverability and tedious work which enables it, like naming each and every JS module a certain way up front. Instead, it relies on error handling and developer response/correction. I'm definitely curious to see whether that tradeoff is worthwhile.
- gimliapp 4y agoFor anyone struggling with Tailwind, I would recommend Tailwind DX[0] [0]:https://gimli.app/tailwinddx.html https://gimli.app/tailwinddx.html
- elforce002 4y agoThis is a solution to be used with Shopify backend, right?
- jplhomer 4y agoHydrogen is purpose-built to be used for custom Shopify storefronts, correct. So you're communicating with Shopify's backend using helpers like `useShopQuery` https://shopify.dev/api/hydrogen/hooks/global/useshopquery https://shopify.dev/api/hydrogen/hooks/global/useshopquery As for hosting, you can deploy to Shopify's Oxygen platform (Worker-based), or any other deployment platform that supports Node.js or v8 Worker runtimes.
- elforce002 4y agoWill hydrogen have default UI components too? That would increase productivity since you're also using TailwindCSS as well. Vercel is my go-to choice to deploy my apps and it seems you are trying to support them too.
- jplhomer 4y agoYep, we're planning to offer a `@shopify/hydrogen-ui` package with useful components and hooks. That work is in progress but not quite ready. We have a working prototype of Hydrogen deploying to Vercel, and we need to formalize it into our official documentation: https://github.com/frandiox/hydrogen-vercel-edge https://github.com/frandiox/hydrogen-vercel-edge
- juanpprieto 4y agoYes, Hydrogen includes a large set of commerce-specific primitives https://shopify.dev/api/hydrogen/components https://shopify.dev/api/hydrogen/components. There's is also a full working demo-store that implements these primitives in more complex components https://hydrogen.new/ https://hydrogen.new/
- savrajsingh 4y agoOne big problem we have with shopify is users don't stay logged in for more than 24 hours. Do you guys fix that with hydrogen?
- davecyen 4y agoYou can use hydrogen and the storefront api to renew the customerAccessToken: https://shopify.dev/api/storefront/2022-04/objects/customeraccesstoken https://shopify.dev/api/storefront/2022-04/objects/customera...
- savrajsingh 4y agoThanks for the reply. The scenario is a customer logs in. They come back 4 days later, and we want them to remain logged in and not have to re-login. According to this mutation, you must renew the access token before it expires (presumably for just another 24 hours). So I don't think this solves the issue -- we want users to stay logged in for more than 24 hours -- aka logged in for like a month by checking a "keep me logged in" box. https://shopify.dev/api/storefront/2022-04/mutations/customerAccessTokenRenew https://shopify.dev/api/storefront/2022-04/mutations/custome... What is the strategy for this basic use case?
- davecyen 4y agoJust learned that the token lasts for 6 weeks, so the issue might lie in how you’ve implemented the session. Take a look at the hydrogen demo store, auth is implemented using the customer access token and Hydrogen’s CookieSessionStorage: https://hydrogen.new https://hydrogen.new
- HighlandSpring 4y agoGoing to take this as an opportunity to ask, has anyone here worked with https://www.reactstorefront.io/ https://www.reactstorefront.io/ It looks like a very competent solution but would like to hear from actual users
- dmix 4y agoCool 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.
- danielvaughn 4y agoI just started using Vite, and completely agree. I haven't explored it much but it's super fast so far. Like literally just a few minutes ago, I decided that I wanted a multi-page app instead of an SPA. Took me 5 minutes, didn't need to set up any additional entry points or chunks or anything. Fantastic.
- dmix 4y agoYeah it's basically plug-and-play. Unlike Webpack which required careful configuration unless you use one of the webpack-starter-kits with a thousand dependencies and don't need to build complex apps.
- jandyy 4y ago
- stefanvdw1 4y agoYou have a very interesting comment history. Any reason you are trying to collect downvotes?
- halostatue 4y agoAll 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.
- bromuro 4y agoReact was first released 9 years ago, more than a “hype”, it is still a great success! (And source of my economic wealth too) - a cheap developer
- halostatue 4y agoI’m glad you like it. Someone has to, I guess. I can’t stand it and find all the promotion on it to be promising far more than it delivers. It’s heavier, slower, less comprehensive, and less comprehensible than either Vue, Svelte, or most Vanilla JS implementations of component-oriented sites that I’ve seen. Every single thing about React bothers me, from hooks to JSX (which is so much worse than meaningful templates), and I’d rather use something that makes me happy.
- Spivak 4y agoAfter using Dominate, Hiccup, Slim, and JSX, CDK, I have no desire for templating HTML (or anything) on the level of strings anymore. It’s so stupidly clunky, doesn’t compose well, is hard to mutate, hard to test, you have to deal with all the weirdness of your templating language, logic is split across your controllers and templates.
- halostatue 4y agoWe’re talking about templates in the context of component libraries. In particular, I’m highlighting the template languages of smaller, more capable component library systems than React — Vue (2 and 3) and Svelte. In both Svelte and Vue (both versions), Single File Components are the standard. Yes, there’s logic in your template, but it’s closely related to the core business logic, and it reads a lot better than embedded logic in JSX droppings. On the rest of it, I’d agree that a lot of the JavaScript-based pure templating languages don’t really work well, but IMO that has more to do with JavaScript than the templating languages. I find EEX (Elixir), ERB (Ruby), and Jinja (Django-ish, plus others), Liquid (Ruby / Shopify), and Text Templates (Go) to all be pretty good for what they do — and most of them are templating languages that can be applied to HTML, but are not HTML "native" templating languages (even though some have HTML "native" variants, e.g., HTML templates for Go).
- aclatuts 4y agoI 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 https://shopify.dev/custom-storefronts/hydrogen/getting-star... compared to the liquid way.
- SnowHill9902 4y agoParadoxically Shopify’s default storefronts have poor performance and thus SEO performance because of this.
- jplhomer 4y agoCurious to hear more about your experience. We’ve optimized our latest themes (Dawn) as well as the Hydrogen demo store templates with SEO in mind.
- SnowHill9902 4y agoCan’t provide more information publicly but essentially we changed from a JS-based Shopify storefront to another engine with “old-school” HTML-“first”, very performant storefront and SERP impressions increased by about X10-15 (!) within 2 months. Clicks increased proportionally since CTR kept constant. E-commerce conversion was also similar.