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

31–40 of 71 posts

Re: Etsy Moves from React to Preact

#31

Post by kilburn »

KronisLV wrote: post #25
alifaziz wrote: post #7

Earlier quoted context omitted.

Do you mind to share why?

Would also like to know why! The old AngularJS was pretty horrible in my experience, but Angular 2+ was leaps and bounds better! As a "batteries included" framework i prefer it to the alternatives that one would typically consider for front end development instead: React, Vue, Svelte etc. (though i would pick Vue/Svelte for more lightweight sites and maybe React because of its ecosystem) That said, it still is pretty…

> To me, using TypeScript in React just felt needlessly cumbersome, especially with functional/hook based components.

Out of curiosity: can you explain how/why? My experience has been quite simple, especially if only using functional components and hooks:

  interface Props {
    prop1: string;
    prop2: number;
  }

  const Component : React.FC =
  ({prop1, prop2}) => {
    // types are inferred correctly
  }
Hooks have been similarly easy: React's core hooks auto-infer the proper types, and custom hooks built on them don't require any particular type-plumbing in my experience...

Re: Etsy Moves from React to Preact

#32

Post by rvense »

alifaziz wrote: post #7
rvense wrote: post #6

Does anyone know how to get off Angular?

Do you mind to share why?

Mostly I have various stylistic misgivings with Angular. I feel like I spend a lot of time on ceremony and piles of RxJS that would've just been simple function calls in React, which is what I did before. There are some things related to state management, especially module initialization, that it seems to me is a leading to a lot of code bloat to handle an initial state with null state that shouldn't actually ever exist, but that might be user error.

More acutely, though, since upgrading to version 12 a few weeks ago, build times have run into several minutes (most of it spent in the "Sealing" phase), and it's developed a habit of crashing the dev server process due to running out of heap (on 16GB machines). We've tried various suggested workarounds and they work for some of our devs, but not for me. The past week or so even a single character change means waiting for the dev server to run out of heap, then restarting it and waiting for a complete rebuild. This takes several minutes all in all and requires manually restarting the server in the middle of it.

I tried addressing the issue but I couldn't find a solution that actually worked, so I tried to upgrade to Angular 13 in the hope that it might go away. That took a day to just get it to build, but then I couldn't get our application to start. So now I've put off upgrading, which is obvs also a worrying prospect.

We're an early stage start-up in the middle of a major crunch and it's frankly a bit of a nightmare. I've been keeping busy in other parts of the stack as best I can, but as you can imagine that's really not what a three-person team needs.

Is this the fault of me, my lack of knowledge of Angular internals, and our messy code base? Most likely! But I did years of React before and I was never in such a mess. I also find the Angular build system quite hard to understand and debug and I'm not entirely sure what the benefit is. Something about server-side rendering? IDK. I do some Elixir/Phoenix in my spare time, I feel like I get 99% of the functionality there for 1% of the effort (and machine resources).

We're going to need to bring in outside help if I don't crack it in the next few days but I'm frankly not really sure what the budget is like. Fun times!

Re: Etsy Moves from React to Preact

#34

Post by bsaul »

i_hate_pigeons wrote: post #8
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 imagine the client facing pages are very sensitive to seo/crawling so that's why they go for server side rendering

server side rendering also points you toward more cacheable content. Things you put on a CDN are faster and way cheaper.

Re: Etsy Moves from React to Preact

#35

Post by KronisLV »

kilburn wrote: post #30
KronisLV wrote: post #24

Earlier quoted context omitted.

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

> If this were true, wouldn't it apply in equal measure to other resources? No. On sites that buy in to react/preact, there are parts of the site that won't work until react/preact has loaded. In contrast, the site will work perfectly fine without having loaded those large beautiful images. If done correctly, images won't even affect the layout of the page. Likewise, it doesn't matter if google analytics and the 10 t…

> Likewise, it doesn't matter if google analytics and the 10 thousand myriad tracking pixels take a minute to load: users shouldn't notice any difference here.

So much for me being able to open 100-200 tabs across all windows on my browser without needing more RAM.

Or even using a browser on my older phone without it feeling slow/sluggish or the browser killing the battery life of the device.

To clarify for the downvoters: my point is that it might not matter for the average user for whom the site is optimized, they might be able to tolerate ads, autoplaying videos, popups, incredible waste of resources just to get visually attractive UI etc. and be none the wiser about any of it (possibly not even knowing that things could be different), but it definitely matters for people who want more out of web in regards to usability.

In my eyes, there's little difference between the current state of web and using Electron for desktop applications instead of native solutions, both seem to be driven by financial initiatives and result in a degraded experience, playing directly into Wirth's law and thus making interfacing with computers worse as a whole (though admittedly the state of the web feels more malicious than a team wanting one Electron codebase for multiple platforms).

Re: Etsy Moves from React to Preact

#37

Post by tarjei_huse »

codeptualize wrote: post #29

I wonder what the other differences and considerations are. The article is focused on issues that might arise from switching, but does not really cover the “why” of switching beyond bundle size. A valid reason, but I assume there is something to say for React or is it really that similar that switching is a no brainer?

The way I read the document is that the main reason is that they do not have to upgrade their whole stack including dependencies like React Router.

Stepping off the dependency upgrade treadmill is an interesting and valid point that I think many HN readers dream of. It seems to me that Etsy has ended up so far behind current React that going to Preact is a very valid direction to take.

Re: Etsy Moves from React to Preact

#38

Post by youngtaff »

elyobo wrote: post #13
i_hate_pigeons wrote: post #8

Earlier quoted context omitted.

I imagine the client facing pages are very sensitive to seo/crawling so that's why they go for server side rendering

In theory it shouldn't matter but you can SSR with React if that's important.

Problem is SSR with a JS framework is often slower than the other equivalents, not sure why but I see it time and again

Then the hydrations costs on the client typically start at 500ms, and that's 500ms the main thread could be doing something useful with

Re: Etsy Moves from React to Preact

#39

Post by zelphirkalt »

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".

Re: Etsy Moves from React to Preact

#40

Post by Jenk »

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.

Do browsers share cache across domains? Seems like an easy vector to poison.

Post reply on HN