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

61–70 of 71 posts

Re: Etsy Moves from React to Preact

#61

Post by hardwaresofton »

notpachet wrote: post #52
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.

TIL, that makes a lot of sense

Re: Etsy Moves from React to Preact

#62

Post by tracerbulletx »

jacobmischka wrote: post #22
MoSattler wrote: post #15

So Etsy wants to replace a core part of their frontend tooling to save 30KB in bundle size?

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…

There were almost no significant breaking changes between 15 and 16, the chances of an app even using one of the few APIs that changed was very very small..

Re: Etsy Moves from React to Preact

#63

Post by jacobmischka »

tracerbulletx wrote: post #62
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…

There were almost no significant breaking changes between 15 and 16, the chances of an app even using one of the few APIs that changed was very very small..

Rather, their dependencies seem to have had breaking changes for some reason when updating those versions. I don't know, that's what the article claimed.

Re: Etsy Moves from React to Preact

#64

Post by zimmerx »

KronisLV wrote: post #24
zimmerx wrote: post #18

Earlier quoted context omitted.

Speaking from building both react and Preact sites serving millions of customers - the difference is noticeable when you add everything up. Minification or not, starting with a 6x bundle size puts you in a precarious position to have to care more about how it grows over time adding other assets. Downloading, parsing and then executing a larger bundle size will impact performance and we've been able to see time to int…

> Minification or not, starting with a 6x bundle size puts you in a precarious position to have to care more about how it grows over time adding other assets. If this were true, wouldn't it apply in equal measure to other resources? And if that's true, then why do we still see multiple MB large pages that are full of images or even videos? Personally, the arguments expressed in "The Website Obesity Crisis" back in 20…

Maybe I should have been clearer with me follow on paragraph where I talk about parsing of JavaScript and downloading of that - rather than all other assets. I agree with you that the web is broken and that we send way too much to the client in the first place.

However, there are many ways of mitigating additional assets getting in the way of both being able to interact the site and see it within a reasonable amount of time. We look at this through the lense of performance, where downloading some assets in the background might not necessarily harming your experience.

That's not to say we shouldn't be optimising for the smallest amount of network requests a site should make and think carefully about when to load images in. Your examples are what bad looks like and it's a shame, but there are now more and more sites that do a stellar job (or starting to) of giving you a great experience with less downloaded.

However if you were to download a 5mb image asynchronously that isn't part of your initial above the fold, Vs a 5mb payload of react that's needed to run the site... I know which one is going to make your browser a very unhappy bunny.

Re: Etsy Moves from React to Preact

#65

Post by pjmlp »

imbnwa wrote: post #58
zelphirkalt wrote: post #39

Earlier quoted context omitted.

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…

One thing that makes me happy to spend more time on backend stuff, is that I get spared this kind of stuff and just keep doing SSR as I have always done, with a little bit of JavaScript when needed.

The irony to see all JavaScript frameworks re-inventing SSR to deal with the performance problems to do everything on the client, specially mobile phones.

Re: Etsy Moves from React to Preact

#67

Post by rvense »

kansface wrote: post #57
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 mayb…

Interesting to know it can be done. We're probably not at a place where we can consider it, but it would be nice to plan for. Can you tell me more about your Angular -> React shim?

Re: Etsy Moves from React to Preact

#68

Post by imbnwa »

pjmlp wrote: post #65
imbnwa wrote: post #58

Earlier quoted context omitted.

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…

One thing that makes me happy to spend more time on backend stuff, is that I get spared this kind of stuff and just keep doing SSR as I have always done, with a little bit of JavaScript when needed. The irony to see all JavaScript frameworks re-inventing SSR to deal with the performance problems to do everything on the client, specially mobile phones.

AMP was a clear signal of the extent to which mobile web development was seriously flawed that Google had to go to major content publishers and say "look, your frontend is trash and nowhere near concise enough on mobile in either layout or behavior, just use our transformation layer"

Re: Etsy Moves from React to Preact

#69

Post by kansface »

rvense wrote: post #67
kansface wrote: post #57

Earlier quoted context omitted.

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 mayb…

Interesting to know it can be done. We're probably not at a place where we can consider it, but it would be nice to plan for. Can you tell me more about your Angular -> React shim?

For some reason, this code [1] is still accessible on the public internet! This dates back to CoreOS and the Tectonic (CoreOS's k8s distro) Console. The code needed to be rewritten, I had familiarity with React, and after the nth time Angular 2 broke backwards compatibility in an RC, we went for it.

It was a little different than I remembered. We moved all data into Redux and piped it into the various Angular bits. Then, it was a matter of making the angular-> react bridge (using ngreact) introduced in this PR.

1. https://github.com/openshift/console/commit/4cc9c5d79f3fdea1...

Re: Etsy Moves from React to Preact

#70

Post by [deleted] »

jacobmischka wrote: post #51
ComradePhil wrote: post #47

Earlier quoted context omitted.

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…

[deleted]
Post reply on HN