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 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.
> which is so much worse than meaningful templates
Why? There is a zero bullshit approach here. No magic syntax. No "v-for" or two way binding. No receiver patters or context parameters.
JSX is 1,000% magic syntax, and anyone telling you otherwise is trying to sell you something.
It looks, feels, and acts wrong in ways that Svelte or Vue templates (and most other templating systems) don’t, to me.
And the whole thing about hooks is a punt from the developers of React saying that they couldn’t figure out a more humane way of smartly figuring out reactive dependencies. The whole trick of figuring out why you have an update loop (and specifying those dependencies) is work that the tooling should be able to figure out for me. What use is one-way binding if I have to specify my update dependencies at least twice in every hook (once in the hook logic and once in the dependency list)?
And you’re right: React’s surface area is narrow, which does not justify the framework’s bundle size or it’s painful developer semantics. Both Vue2 and Vue3 provide more than React does with bundle sizes that are ⅔ as large. Svelte’s runtime, when needed, is even smaller. What excuse does the React team have for causing so much lost developer productivity and wasting bundle sizes? At least Preact has the excuse that it’s a much smaller runtime bundle.
I look at React code and I see cries for help from people stuck in an abusive relationship with their development tools, when there are so many better choices out there. Including plain old vanilla JS (which is increasingly an option from my perspective).
That said, I’d much rather deal with React than Flutter and Dart any day. React still ultimately compiles to real components for the platform, whereas Flutter can’t even pretend to be a good citizen of any platform.
You have no idea what you're talking about. JSX is a line for line transform. It's literally the simplest implementation of templating that's even possible. The next step is just not having any sort of transform or build time and representing your DOM structure as JS code (which is also an option in React and what a lot of other smaller libraries do).
Your entire argument is arguing for React, not against it.
It makes no sense that you complain about magic then ask why dependencies need to be passed into hooks. How do you think other libraries avoid that quirk? Magic. Computed properties in Vue are opaque build time magic. Templates are build time magic. React is the only library that doesn't have build time magic that you need to treat as a black box.
> JSX is 1,000% magic syntax, and anyone telling you otherwise is trying to sell you something.
> It looks, feels, and acts wrong in ways that Svelte or Vue templates (and most other templating systems) don’t, to me.
My biggest example of this (and it drives me crazy) is when mixing Typescript generics in TSX files: you often have to do ridiculous boilerplate like `<T extends any>` because otherwise `<T>` would be recognized as JSX and blow up the syntax tree. Hoorah for the context-sensitive grammar.
Create react app drags in about a million dependencies, and I’ve never met somebody able to make a react app work without it. That’s not “simple” in my book, create-react-app is a tool that so many people are dependent on that it deforms a lot of architectures to avoid having to modify it, using proxies etc
After 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.
We’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.
I’ve found React the complex one, especially with reactive context wrapper hooks (or whatever they’re called). I have a high confidence that when I do an "Inspect element" on a Vue or Svelte component, I’m seeing the tree pretty close to how Vue and Svelte see it. In React, there’s at least twenty hidden layers (at least according to the React development tools last time I touched React code; it was horrible).
You're not wrong. "Higher order components" might be the phrase you're looking for. I could argue that they're not really very popular any more with the introduction of the hooks API. But even without those there's a lot of transient things in the tree that I can't explain.
Vue really got it's act together in many ways from very start. Single file components are super ergonomic. I don't feel React ever nailed that with at least 10x different solutions. That and global state with VueX is so natural compared to, again, 10x different solutions in React.
Vue is a delight in many ways. I'm just currently seething over some issues I had with it's reactive state - and that's where I'm really siding with React. I could go on but I know it's a total rant.
I’m less happy with the Vue 2 -> 3 transition, partially because I think that Vue 3 is probably best described as "React, but designed", so we’re investigating Svelte for our next iteration of real web UIs (as opposed to whatever the hell it is that Flutter provides).
In many ways, Svelte 3 feels like what Vue 3 should have been. The whole way that hooks works feels ugly and inelegant.
I'd quit any job that made me work on a jQuery/vanilla JS labyrinth. React is the best thing to ever happen to frontend development and from my perspective most contrarians on the topic haven't taken the time to learn React and simply immediately dismissed it.
React and JSX are, at best, mediocre. I consider it much more like C++: you’re much more likely to blow your foot off with React than with anything else. The codebases are excessively complex, completely magic, and impossible to debug in comparison to pretty much any other comparable framework, including modern Vanilla JS (with or without Web Components).
I agree with you about jQuery. It had its place. It’s painful to encounter now, especially since it can screw up any other framework that you want to put into a website.
React is * old * (in the frontend world), stable and very very well known. It is a solid, responsible choice to build your framework on top of React in 2022.
You can upgrade a 7 year old React app with very little fuss. Unfortunately, you cannot say the same about Vue or any of the modern libraries. They also have no track record to indicate they will exist 10 years down the line, but I'm pretty sure my React apps will still be fine.
That being said, I'm very excited about SolidJS and the other modern libraries that use JSX.
If they had used any other library there would have been a comment like this telling them they're doing it wrong.
Same thing any time WordPress does anything notable.
Teams make tech decisions based on multiple factors. Sometimes the ones like "bizarrely deep object tree that is impossible to reason about" are found to be less important. Because at the end of the day websites are for the wider public audience, who aren't affected by bike shedding
Also react-dom.min is 15 times larger than solid/preact/lit-html/svelte, is on the bottom of every perf benchmark, and yet we pretend to have engineering mindshare. It feels like new coming kids would just skip engineering school/university just fine for working in this industry. Disappointed.
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.
I 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.
Look for a blog post about Oxygen in the coming weeks! Initially, we're partnering with Cloudflare using Workers for Platforms  so Oxygen's runtime shares many of the same APIs you'd expect to see in a Cloudflare Worker .
Hydrogen 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.
If 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.
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-star... compared to the liquid way.
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't shipped in stable yet?
Correct, 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.
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.
That'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.
Thanks 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.
Can’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.
"Stop naming your software projects after single common English words"
If I had a personal tech blog I would have already done a show/tell HN post for this. It causes multiple problems but the most immediately obvious is difficulty in troubleshooting, because it creates so many search collisions. "Hydrogen" as an element is more common by a factor most easily expressed in exponents.
In this case, good luck finding that one guy from five years ago who had the same problem as you and developed an obscure workaround.
The middle ground is the problem. For example a few years back I had a persistent bug/crash with Pix (mint's default image viewer then). Nothing on git or stack, and search engines didn't know what to do with it. "Pix image viewer" helped but not by a lot. I still don't know if it ever got fixed.
Those names sound stupid. You need a name that gives no hint about the mundane task the framework/startup/programming language does but sounds elitist and pretentious.
The periodic table of elements and Greek and Roman gods provides a nice list of cool sounding words that have likely been used elsewhere. Pick a random element. I'm positive even something like potassium is used somewhere.