Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Etsy Moves from React to Preact

github.com

Post reply on HN
Print view View original

51–60 of 71 posts

Re: Etsy Moves from React to Preact

#51

Post by jacobmischka »

ComradePhil wrote: post #47
jacobmischka wrote: post #22

Earlier quoted context omitted.

You clearly didn't read the article. It mentions that in addition to the (relatively small) bundle size savings, the version of Preact they were investigating (as of 2020 when it was written) was also more compatible with the current version of React they were using at the time than the newest version of React (15 -> 16 had a lot of breaking changes). I don't believe the bundle size was really a major contributor to…

Doesn't explain why they could not have continued using React 15.

Did you read the article either?

> While it would be really hard to describe here in detail all of the new features, the code architecture improvements enabled by the React v16.8 Hooks functionality are so significant that it will eventually become harder and harder to recruit developers interested in working in a pre-Hooks codebase. In order to keep up with the rest of the industry and provide our current developers with the best tooling available, I believe it should be a high priority to enable use of Hooks and other modern React functionality. This definitely isn’t anywhere close to the only new feature worth upgrading for, but it does represent an extremely large shift in how developers will be able to write React code.

Re: Etsy Moves from React to Preact

#52

Post by notpachet »

hardwaresofton wrote: post #5

> One important piece of context is that Etsy currently has two major product stacks. For buyer-facing pages, we use PHP server-based rendering with jQuery/vanilla JS on the client to stitch things together. For our seller-facing pages and many of our internal tools, we use React-rendered SPAs with minimal server-based HTML rendering, receiving data from the same PHP server-side stack. The unreasonable effectiveness…

Etsy having Rasmus Lerdorf (the author of PHP) on their payroll doesn't hurt.

Re: Etsy Moves from React to Preact

#53

Post by eyelidlessness »

royjacobs wrote: post #10

One thing I don't understand about the JS ecosystem in general is the focus on minified size. This article does the same thing: preact is 6k or so whereas react is 36k. This comparison seems entirely pointless when the first page load downloads multiple megabytes of assets and, additionally, a lot of users would have React in their browser cache anyway.

> a lot of users would have React in their browser cache anyway

Not cross-origin, anymore. Every major browser now has cache partitioning (cache indexes are keyed by the requesting domain and the resource) for privacy reasons. Which means, for instance, the old optimization of using dependencies from a CDN is now suboptimal.

Re: Etsy Moves from React to Preact

#55

Post by anamexis »

eyelidlessness wrote: post #53
royjacobs wrote: post #10

One thing I don't understand about the JS ecosystem in general is the focus on minified size. This article does the same thing: preact is 6k or so whereas react is 36k. This comparison seems entirely pointless when the first page load downloads multiple megabytes of assets and, additionally, a lot of users would have React in their browser cache anyway.

> a lot of users would have React in their browser cache anyway Not cross-origin, anymore. Every major browser now has cache partitioning (cache indexes are keyed by the requesting domain and the resource) for privacy reasons. Which means, for instance, the old optimization of using dependencies from a CDN is now suboptimal.

I'm guessing almost no one benefitted from cross-origin caching with React anyways, since it is almost always bundled up with Webpack. It's not like jQuery or Font Awesome.

Re: Etsy Moves from React to Preact

#56

Post by brundolf »

royjacobs wrote: post #10

One thing I don't understand about the JS ecosystem in general is the focus on minified size. This article does the same thing: preact is 6k or so whereas react is 36k. This comparison seems entirely pointless when the first page load downloads multiple megabytes of assets and, additionally, a lot of users would have React in their browser cache anyway.

A couple things:

- It definitely shouldn't be downloading multiple megabytes of assets, at least not blocking assets. A reasonable primary JS bundle size (including the framework and other dependencies) is around 150kb; 30kb would be 20% of that. Images, marketings scripts, etc. are excluded because they don't block rendering/interactivity; the browser generally knows to defer those until after the main experience has loaded. The core bundle, on the other hand, blocks rendering content (if it's all rendered client-side) or at least interactivity (if content is rendered server-side and then hydrated client-side). And on top of just the download time, there's the time it takes the browser to parse and compile the code. So yeah, every few kilobytes matter.

- Virtually nobody would have React in their browser cache from a re-usable URL. That was common in the jQuery days, but that's not how things are done today. For better or worse, a modern JS app bundles all of its dependencies statically in a self-sufficient bundle (possibly "chunked" into multiple files, but all domain-local). You could technically do things the old way, but you'd be fighting the tooling and ecosystem at every step. And anyway, your users probably wouldn't benefit from cache hits because no other sites are doing it. There's a hypothetical future where ES modules take off enough that dynamically loading dependencies becomes feasible and popular again, though even then, there are benefits to static bundling (like tree-shaking) that some probably wouldn't want to give up.

Re: Etsy Moves from React to Preact

#57

Post by kansface »

rvense wrote: post #6

Does anyone know how to get off Angular?

I lead a project that did an in place rewrite from angular to react while still shipping new features. We wrote an angular -> react shim so that we could render react leaf nodes. We worked down the angular stack replacing increasingly lower level components. We had a cut over date of no new angular code, then essentially a code freeze for a month or so to do the rest (routing, data store). This project took 4 or maybe 5 months, but the resulting velocity on the other side more than made up for it.

Re: Etsy Moves from React to Preact

#58

Post by imbnwa »

zelphirkalt wrote: post #39
hardwaresofton wrote: post #5

> One important piece of context is that Etsy currently has two major product stacks. For buyer-facing pages, we use PHP server-based rendering with jQuery/vanilla JS on the client to stitch things together. For our seller-facing pages and many of our internal tools, we use React-rendered SPAs with minimal server-based HTML rendering, receiving data from the same PHP server-side stack. The unreasonable effectiveness…

I think it is more that they do not go the "everything must be React" route, that gives them an advantage in that part of the frontend. Way less complex than the whole react ecosystem and it's "components".

Early in its life Facebook Engineering marketed React as "you probably don't know what you're doing with the DOM and incurring all sorts of performance issues with your hand-written Backbone View code, let React do that for you". In truth, you only need a vDOM with a component interface once your view code passes a certain threshold of complexity, but it just gets used everywhere, and for the simplest things, as the go-to solution.

Re: Etsy Moves from React to Preact

#59

Post by eyelidlessness »

anamexis wrote: post #55
eyelidlessness wrote: post #53

Earlier quoted context omitted.

> a lot of users would have React in their browser cache anyway Not cross-origin, anymore. Every major browser now has cache partitioning (cache indexes are keyed by the requesting domain and the resource) for privacy reasons. Which means, for instance, the old optimization of using dependencies from a CDN is now suboptimal.

I'm guessing almost no one benefitted from cross-origin caching with React anyways, since it is almost always bundled up with Webpack. It's not like jQuery or Font Awesome.

I’m not sure I could quantify it, but CDNs were a prominent recommendation for React at least until CRA was pervasive.

Another thing worth mentioning, and another point in Preact’s favor, is ESM and tree-shaking. React still doesn’t officially ship ESM, and the ability to strip unused functionality at build time is hampered by that because ESM is more amenable to static analysis. Whereas Preact, which is already much smaller on the wire, can become smaller still because it supports ESM.

Post reply on HN