Live data from Hacker News

Fresh – Next-gen web framework

fresh.deno.dev

81–90 of 463 posts

Re: Fresh – Next-gen web framework

#81

From https://fresh.deno.dev/docs/getting-started/create-a-route : > Routes are defined as files in the routes directory. [...] If the file name is contact.js and is placed inside of the routes/about/ folder, the route will handle requests to /about/contact. I can't say I'm particularly keen on being told what directory to put files in, or or being told that I must only code exactly one endpoint in each file. Why aren…

You put square brackets around parameters. e.g., routes/greet/[name].tsx https://fresh.deno.dev/docs/getting-started/dynamic-routes

To add on this: Looks like you can do that for directories as well. Here's how it works: https://github.com/lucacasonato/fresh/blob/4bb07f4bcebfc2056...

So the example above could be:

  user/[username]/page/[pagename].ts

Re: Fresh – Next-gen web framework

#82
post #75

I thought by now enough people have framework fatigue that no one bothers with yet another way to develop a website. Is there a reason someone like me should care? Does it improve anything by atleast an order of magnitude?

> Island based client hydration for maximum interactivity.

> Zero runtime overhead: no JS is shipped to the client by default.

Translation: the UX most people on HN complaining about JS want. It’s just the interactive parts, none of the treating a web page like it’s an app, but devs familiar with developing sites that way can use it that way without jamming MBs of JS down users’ browsers.

Re: Fresh – Next-gen web framework

#83

Why this can be great: - The dev experience is closer to the early days of PHP. - TypeScript, Preact out of the box. No need to configure build tools / deploys much faster. It's a pain in the ass to make these working at the same time and targeting both browser and server nowadays. - You can have interactivity without bolt-on client-side scripts that are different from other parts. - The code could be running on the…

Frameworks like Next or Nuxt often render each page server-side, shipping HTML to the client, but then also send enough javascript and json data to the client to "hydrate" the page back into fully interactive components. The whole site, then, really acts as one large javascript app once fully loaded.

The islands approach is different: pages are server rendered, but you can easily define islands of interactivity (like, say, an auto-complete search bar) where just enough javascript is sent to make those components interactive—and only when it's needed. You can control at what point exactly each component is made interactive: as the page loads, when the component becomes visible, when the user first interacts, etc. It's a great way to balance performance and rich interactivity. If the user never scrolls down to your photo carousel at the bottom of the page, the javascript is never requested.

If this sounds like what we used to do with say PHP & JQuery, you're not wrong. The difference here is we have the same javascript-based template logic and component model both clientside and serverside.

Some other projects adopting the islands pattern: https://iles.pages.dev - https://astro.build - https://slinkity.dev

More reading: https://jasonformat.com/islands-architecture/

Re: Fresh – Next-gen web framework

#84
I love that the pendulum is swinging back to file-based routing. It reminds me a lot of the simplicity of cgi and php scripts. I'm sure there's a point where it explodes into a monster of complexity with enormous sites, but for everything smaller it's so much simpler and easier.

Re: Fresh – Next-gen web framework

#85
post #75

I thought by now enough people have framework fatigue that no one bothers with yet another way to develop a website. Is there a reason someone like me should care? Does it improve anything by atleast an order of magnitude?

to me it seems to be promising a more substantial improvement than most frameworks + the deno factor definitely makes it stand out. minimum js needed for interactivity being sent to the client is much better than what we do currently

Re: Fresh – Next-gen web framework

#87
Fresh = Deno version of Astro (static-first with SSR) and Isle (vue-focused) and bigger Next.js/Nuxt SSR (with no client js) modes. Remix also does well here with a focus on only SSR.

It's basically what the original "isomorphic" javascript promise was to have the same code seamlessly running on server and client with a flexible split on what part ran where, now possible down to an individual tag/component.

Also worth mentioning projects like .NET Blazor, Phoenix Liveview and Rails Hotwire that approach client interactivity through their own backend languages instead of JS, usually with some partial refresh mechanism using AJAX or websockets.

Re: Fresh – Next-gen web framework

#88
post #75

I thought by now enough people have framework fatigue that no one bothers with yet another way to develop a website. Is there a reason someone like me should care? Does it improve anything by atleast an order of magnitude?

[deleted]

Re: Fresh – Next-gen web framework

#89

From https://fresh.deno.dev/docs/getting-started/create-a-route : > Routes are defined as files in the routes directory. [...] If the file name is contact.js and is placed inside of the routes/about/ folder, the route will handle requests to /about/contact. I can't say I'm particularly keen on being told what directory to put files in, or or being told that I must only code exactly one endpoint in each file. Why aren…

[deleted]

Re: Fresh – Next-gen web framework

#90

Earlier quoted context omitted.

(I am not affiliated with any of these technologies, but am a Next/Vercel customer. I am also not super familiar with anything except Next, but this is my attempt at an explanation.) I think they all try to solve the same problem: how to get a modern interactive app to run on (and be performant) what is essentially a hacked-together ecosystem, HTML + Javascript, with decades of backward compatibility baggage. The ess…

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 just HTML being downloaded from one single source) and also for the origin server (you build once, CDN caches it everywhere and takes over from there). Typically, the tradeoff is that it's also a PITA to manage these buildchains, especially once you get into obscure webpack or babel configs. Next.js handles it really elegantly.

Next.js has other benefits too, especially when coupled with Vercel. It is more than CRA + static builds, and even if you never end up using the rehydration system, the routing/image optimization/per-commit preview sandboxes may still be helpful, though not life-changing. For me the killer feature was being able to detach the data layer from the (write-rarely, read-often) frontend, such that the frontend could always just assume it would have access to the latest data from the API (because Next.js takes care of that).

To give you a before-and-after comparison... I worked on this page previously: https://www.fieldmuseum.org/exhibitions

That version is running on Drupal. Some of it was in a Drupal template, some of it was in-house PHP. To fetch data, we had to use a mix of Drupal built-ins and some raw SQL, mixed into some ugly templating language. Then through custom modules we had to add jQuery and React, sprinkled on top. Drupal had to "build" the page into HTML whenever we save, and then a separate buildchain would add back the Javascript on top of that and try to bundle it all. The developer experience was ugly and required needed at least four languages (Drupal, PHP, jQuery, React). Filtering is done serverside, so filtering by e.g. Type = 3D movie requires an API call and takes several seconds. If you turn off Javascript the whole page breaks and you can't access any of the links anymore. This version is pretty fast thanks to in-house optimizations and extensive caching by Pantheon (a specialist PHP host), otherwise it would be really, really slow. Our dev and staging machines were hell to use because every page took like 10-20 seconds to load.

The new version (WIP, and I don't work there anymore): https://nextfield.vercel.app/exhibitions

That is 100% Next.js/React and only that, no more PHP or jQuery needed and no other frameworks. Data was moved to a headless CMS (DatoCMS in our case, which returned convenient GraphQL responses). It is slightly smaller over the network. All filtering is clientside and instant. If you go to a different exhibition page, it just has to load the JSON data for the new exhibition (text and image URLs + thumbnails), in like a 25kB JSON instead of the whole HTML page (headers and footers and all) all over again. The images are resized on the server for your viewport needs before they're sent to you (though TBH I am not a big fan of that feature because it's not preloading images right now). Even if you had JS disabled, the page would still load and the images and links would still work, you'd just lose the interactive filters.

So for users, the new version is hopefully a bit faster. The real improvement was in the developer experience, being able to code everything in React and not have to think about how it's going to get rendered into HTML or how we're going to balance our caching strategy (invalidations vs not overloading origin). And devs didn't need to use PHP at all anymore.

CRA wouldn't handle much of that, it'd just serve up a SPA run by a single server.

Post reply on HN