Live data from Hacker News

Fresh – Next-gen web framework

fresh.deno.dev

451–460 of 463 posts

Re: Fresh – Next-gen web framework

#451
post #411

Earlier quoted context omitted.

Tsx is the templating language that is also typescript. So the “controller” and the template are the same function.

So, if I throw `tsc` at the `.tsx` file, you are saying it will work, without any other library (only `npm install tsc`, nothing else allowed)? Don't you have to install additional frameworks, that work with tsx/jsx for that? Afaik `tsc` deals with `.ts` files and nothing else, making typescript and `tsx` actually 2 separate languages, as the name suggests "typescipt extended", but maybe I am wrong.

It’s baked into tsc: https://www.typescriptlang.org/docs/handbook/jsx.html

Re: Fresh – Next-gen web framework

#452
post #451

Earlier quoted context omitted.

So, if I throw `tsc` at the `.tsx` file, you are saying it will work, without any other library (only `npm install tsc`, nothing else allowed)? Don't you have to install additional frameworks, that work with tsx/jsx for that? Afaik `tsc` deals with `.ts` files and nothing else, making typescript and `tsx` actually 2 separate languages, as the name suggests "typescipt extended", but maybe I am wrong.

It’s baked into tsc: https://www.typescriptlang.org/docs/handbook/jsx.html

Hm:

> TypeScript ships with three JSX modes: preserve, react, and react-native. These modes only affect the emit stage - type checking is unaffected. The preserve mode will keep the JSX as part of the output to be further consumed by another transform step (e.g. Babel).

So the only non-React dependent mode would be "preserve", which just keeps it like it is. The other modes of compilation/output would need to be processed by React.

On the other hand: OK, it can be processed by tsc, so technically, they have built-in some React support into TypeScript. Not sure I am a fan of such framework specific features in a compiler. Would have been nicer to have an actual standard for web components, which is not dictated by "this is how React does it" and which can be output without being framework specific. Then each framework can choose to interpret that output however it wants.

Re: Fresh – Next-gen web framework

#453

Earlier quoted context omitted.

> that means there's now 65,535 + 1 more way of serving a web page using Javascript (sigh). You only need one (or none). I personally recommend Next.js for just about anything.

Next is lovely to work with but it has a flaw. It loses client state between pages if you use getServerSideProps. For any app that needs to load some up to date data on every page if the user is hitting it for the first time, but doesn't need to load it if the client already has it, Next doesn't have a solution. You end up using a persist gateway pattern which is a massive amount of work that you shouldn't really nee…

Can you elaborate a little more, or navigate to some GH issue, where this is discussed, please?

Re: Fresh – Next-gen web framework

#454
post #450
post #442

Earlier quoted context omitted.

> which can be rendered on the server and client isomorphically. The same component code runs on both sides. You mean portably. If the same code runs in multiple environments, it's running portably.

Isomorphic is the accepted term for this pattern. https://en.wikipedia.org/wiki/Isomorphic_JavaScript

That is a weird term for two reasons. First, isomorphism is an invertible structure-preserving mapping between two structures. While the trivial case of that mapping being an identity is technically also isomorphism, it renders the relationship between the two structures (here code bases for different environments) into an identity as well. At that point the multiple code bases you're talking about are identical, not just isomorphic. It's like calling humans "vertebrates". While technically correct, if you're talking for example about the consequences of wars, do you talk about the loss of human lives, or the loss of vertebrate lives? I imagine it's not the latter.

And second of course, "portable code" had been the accepted term for this "pattern" (if you can even call it this way) for decades already. I'm not quite sure why one would feel the need to randomly rename things that have already had perfectly functional names.

Re: Fresh – Next-gen web framework

#455

Earlier quoted context omitted.

I've actually worked with things like Create React App, Vue CLI etc a lot but never any of the "meta frameworks". Based on what you are saying, it seems like the main difference it where things are evaluated? So, if I do my filtering on the client (with React) I need to make a request, get all the data, filter, render. For something like Remix or Fresh, you can do it on the server first [0]. Either way, the user has…

For responding to user interactions (like filtering or searching) there isn't really a significant difference; like you said, it's just moving the "wait" elsewhere. But many sites are more heavily read than interacted with: blogs, news, documentation, even to some extent HackerNews and comments. These are all "write rarely, read often" sites. In those cases, prerendering can be way faster both for the end-user (it's…

So I looked at https://nextfield.vercel.app/exhibitions to understand how Nest.js's static page rendering works alongside React.

The HTML it returns is really big! 374kb before compression. I turned off Javascript to see how the page loaded without it, and it still downloaded the whole 374kb HTML (I guess that's to be expected).

I dug into the HTML and realised that the reason for the size is that Next.js includes a element that contains the entire data of the page's components as JSON for React to hydrate. This JSON takes up 60% of the whole HTML file! I suppose it's prioritising smooth rendering over reducing data use, but it doesn't seem very optimal, tbh. And it's really inefficient for browsers operating without JS, since every navigation click requires downloading a bloated HTML file.

I found Github issues, SO questions, and blogposts about this drawback, and it seems like this is a common practice for even the largest websites. This massive duplication seems to be a problem that newer frameworks are trying to solve. I wonder if non-dynamic sites like this aren't better off just being static HTML served from CDNs, since they aren't interactive.

Also, the main stylesheet is 1.12mb uncompressed! Bootstrap is part of it, but it seems like there's a lot of other CSS?

(Now I understand more about why my web browsing on mobile consumes so much data even on low-media sites, ouch.)

Re: Fresh – Next-gen web framework

#456
post #417
post #393

Earlier quoted context omitted.

For all the improvements pioneered by Marko, why is eBay still so slow (compared to equivalent ecommerce sites in Next.js and similar)?

My guess, the bottleneck is in the data layer. Honestly it's unfair to compare a small e-commerce site made with Next to one of the biggest websites on the internet. If Ebay was made with Next it would probably be much slower. React is the slowest at SSR of the modern frameworks. Amazon considered using it but it was too slow for them so they keep using Java + sprinkled JS.

What's the story behind Amazon's SSR?

Re: Fresh – Next-gen web framework

#457
post #456
post #417

Earlier quoted context omitted.

My guess, the bottleneck is in the data layer. Honestly it's unfair to compare a small e-commerce site made with Next to one of the biggest websites on the internet. If Ebay was made with Next it would probably be much slower. React is the slowest at SSR of the modern frameworks. Amazon considered using it but it was too slow for them so they keep using Java + sprinkled JS.

What's the story behind Amazon's SSR?

https://twitter.com/amilajack/status/1484970825568505856

Re: Fresh – Next-gen web framework

#458

Earlier quoted context omitted.

For responding to user interactions (like filtering or searching) there isn't really a significant difference; like you said, it's just moving the "wait" elsewhere. But many sites are more heavily read than interacted with: blogs, news, documentation, even to some extent HackerNews and comments. These are all "write rarely, read often" sites. In those cases, prerendering can be way faster both for the end-user (it's…

So I looked at https://nextfield.vercel.app/exhibitions to understand how Nest.js's static page rendering works alongside React. The HTML it returns is really big! 374kb before compression. I turned off Javascript to see how the page loaded without it, and it still downloaded the whole 374kb HTML (I guess that's to be expected). I dug into the HTML and realised that the reason for the size is that Next.js includes a…

So I don't want to take away from your main point: That these frameworks add bloat (even more on top of React). It's an important consideration. Like you said, it's a drawback/trade-off. In our case, we decided it wasn't a dealbreaker and would still be worth it because:

1) That 374kB file is only like 50kB gzipped. We had bigger fish to fry/optimize, like that massive CSS. (Which is a holdover from the PHP days. Phase 2 of the project would eventually have refactored that and tree-shaken it, but it was out of scope for the prototype.) A lot of the bloat you see is because that's still a work in progress and they haven't had a chance to do any optimizations yet. A future version would probably get rid of much of that CSS and maybe even Bootstrap, then think about webfonts, oversized images, etc. There's a lot of work on that front.

2) Our target audience wasn't expected to have Javascript disabled, and with it enabled, Next's hybrid rendering model actually makes it really fast to navigate between pages after an initial page load. In an earlier test, we had the individual exhibition pages side-by-side, the Drupal version next to the Next one in iframes, plus back/forward buttons to navigate through each exhibition in sequence. Originally that was meant just as an easy way to catch visual differences, but we realized that the Next version was loading almost instantly (couldn't even see it load), whereas the Drupal version took 4-5 seconds per navigation. It turned out that Next was able to just download the tiny JSON (~20kB) for each exhibition and injected that into the React shadow DOM for updates; it didn't have to download anything else while navigating between navigations. That was an unexpected, and really powerful, feature that would normally only be available in SPAs.

Realistically, this means that if users had JS on, the initial page load might be a bit bloated, but subsequent navigations between pages should be MUCH faster.

3) The JSON shape was also an artifact of our CMS API (in GraphQL). If we wanted to, we could've optimized it before sending it over the wire.

4) Most importantly... I want to reiterate this... the main benefit of Next.js is NOT page performance, but developer experience. To the extent that there are any improvements at all to page load speed, that is a nice side effect. But even if there weren't, it would still be worth it for us. The big difference is in being able to quickly create new pages/templates, in a single language (JS), with a zero-stack configuration. Especially once we also decided to move the content to a hosted headless CMS. That meant no more LAMP stack to maintain, no more DBs to prune, no more fiddling with CDN caching, Drupal modules, Docker, CI/CD etc. Previously we were spending 80% of our dev time fighting our own stack and framework (Drupal is really really hard to work with, even compared to the messy Node/React ecosystem). Next got us out of the DevOps and infrastructure game completely so we could focus solely on the frontend, and Next + Vercel takes care of everything else. It's not just "serverless" but almost stack-less in a way (managed). All we had to do is write React, push a commit, and done. For a small team, that was HUGE... being able to push out a new template in a matter of hours instead of days/weeks, and being able to deploy to production in seconds (and roll back in seconds) too. In the Drupal world, there are companies like Pantheon and WPEngine and Acquia that try to do the same thing for the PHP landscape (and they do it well), but Next + Vercel is waaaaaay easier and faster. Other competitors in that scape (for JS) are Netlify, Gatsby, etc. These Jamstack hosts are gaining popularity because they are so much easier to work with than the traditional backend + pipeline + frontend model. But of course they have their own tradeoffs and aren't right for every use case -- for example, if we anticipated heavy user interactions (logins, profiles, personalizations, etc.) we would've had to consider a lot more factors. But for write-rarely, read-often informative website, it was the perfect fit for us. YMMV of course!

Re: Fresh – Next-gen web framework

#459
post #454
post #450

Earlier quoted context omitted.

Isomorphic is the accepted term for this pattern. https://en.wikipedia.org/wiki/Isomorphic_JavaScript

That is a weird term for two reasons. First, isomorphism is an invertible structure-preserving mapping between two structures. While the trivial case of that mapping being an identity is technically also isomorphism, it renders the relationship between the two structures (here code bases for different environments) into an identity as well. At that point the multiple code bases you're talking about are identical, not…

The word portable is too general to be meaningful here. If I said my JS library was “portable” most would assume it meant that it ran across multiple OSes under Node.JS. If I said it was isomorphic, I need no further context, because it’s a well-understood bit of jargon in that context.

Personally, I don’t really think it’s useful to dissect the semantics of every bit of jargon; plenty of it is semantically imperfect, like the word “factoid” used to describe factual information or figurative uses of literally. It’s just a word being used to describe a somewhat specific concept in the context of a niche. You would still need to be initialized in what it means in context even if it were semantically correct. The helpful thing here is that a simple search like “isomorphic js” gets you up to speed almost immediately. OTOH, if I search for “portable” libraries on NPM, it’s all “cross platform” stuff. If this term didn't exist, that would make it hard to find libraries and frameworks satisfying this niche.

It’s neither here nor there, my chief annoyance with this general thread was people claiming that “this is just like PHP” or “this is just like Rails” and the problem is, it’s not really like that at all. It’s not like older attempts at “live” server code, nor is preact components really much like templating. The different approaches have their merits, and achieve similar end goals, but the developer experience is starkly different in ways that are maybe difficult to understand from simple examples, but absolutely definitive in real world apps. Don’t look at me, though. I write all of my backends in Go.

Re: Fresh – Next-gen web framework

#460
post #291

Earlier quoted context omitted.

The incentives here seem strongly skewed towards having your name on a new framework for career purposes rather than improving the ecosystem at large

That seems wrong, intuitively. If anything, having meaningful contributions to a long standing project go through should relatively advance your cause, not hinder it.

Intuitively maybe. In practice definitely not. Creator of xxx with 100 stars has obvious and easily understood impact where "contributor" could mean anything
Post reply on HN