Live data from Hacker News

A whole website in a single JavaScript file

deno.com

41–50 of 170 posts

Re: A whole website in a single JavaScript file

#41

Is there a particular advantage to how this is done here with Deno or is this just an example of server side rendering being possible in Deno? The latter is fine as I'm a fan of Deno :) just missing why it's such a popular post (maybe more Deno fans?)

It was mainly intended to be a "cute" example of the latter.

Technically if you were doing this in Node, you would need at least a package.json and would have to configure your TS/JSX transpile, etc...

Re: A whole website in a single JavaScript file

#42
I mean, this is a "single file website" in the sense that `" rel="nofollow">https://google.com">` is a "search engine implementation in one line of code".

The only semi-interesting thing here is that this demo pulls dependencies from 3rd party registries via HTTP without an explicit install step. It's really not that different than doing regular Node.js development with a committed node_modules (hi, Google), except that if node.land or crux.land go down, you've lost your reproducibility.

The thing about "familiar/modern techonologies" seem like superficial vanity. A vanilla Node.js equivalent might look something like this

    import {createServer} from 'http'
    import {parse} from 'url'

    const route = path => {
      switch (path) {
        case '/': return home()
        case '/about': return about()
        default: return error()
      }
    }

    const home = () => `Hello world`
    // etc...

    createServer((req, res) => {
      res.write(route(parse(req.url)))
      res.end()
    }).listen(80)
Which is really not anything to write home about, nor an intimidating monstrosity by any measure. Serving cacheable HTML is really not rocket science, it simply does not require "the latest and greatest" anything.

Re: A whole website in a single JavaScript file

#43
This is great.

I've been dabbling in Deno for a while now. Standard lib is there. Testing is there. All the packages I'd ever want are there. Linting, a strong style guide, and a documentation generator too.

And unlike other beasts, it feels so minimal and out of the way.

Re: A whole website in a single JavaScript file

#44
post #3

"time to interactive: 1.0s / first content paint 1.0s" My man, let me introduce you to ... HTML. It has "time to interactive" at 0.0 seconds and content paints instantly!

No, not even remotely accurate.

The browser still has to fetch and render the HTML. JS-heavy sites do tend to be slower, but no site has a 0s TTI/FCP.

Re: A whole website in a single JavaScript file

#45
post #42

I mean, this is a "single file website" in the sense that ` " rel="nofollow">https://google.com"> ` is a "search engine implementation in one line of code". The only semi-interesting thing here is that this demo pulls dependencies from 3rd party registries via HTTP without an explicit install step. It's really not that different than doing regular Node.js development with a committed node_modules (hi, Google), except…

Now, add jsx and ssr to your example, deploy it, then compare with the deno version in terms of performance, code length, and dev time.

Re: A whole website in a single JavaScript file

#46
post #42

I mean, this is a "single file website" in the sense that ` " rel="nofollow">https://google.com"> ` is a "search engine implementation in one line of code". The only semi-interesting thing here is that this demo pulls dependencies from 3rd party registries via HTTP without an explicit install step. It's really not that different than doing regular Node.js development with a committed node_modules (hi, Google), except…

Now, add jsx and ssr to your example, deploy it, then compare with the deno version in terms of performance, code length, and dev time.

Why? Just so you can tell another developer that there's a compiler transpiling non-standard syntax into function calls that concatenate strings at runtime? While the output HTML that the user sees is exactly the same? That's exactly why I'm calling out to be library vanity. My example is SSR, that's literally the default baseline. It doesn't make a very strong argument to imply my 5 min thing will somehow be worse if only you get to decide what random garbage to add to it to make the alternative look better. E.g. Make hegel types work in the original and then let's talk loss of productivity from arbitrary decisions.

Deployment for a vanilla node.js thing is as simple as adding `node index` as the entry point in your favorite provider (because they all have node.js images these days), I've had such a thing humming along for years. Again, it's really not rocket science.

Re: A whole website in a single JavaScript file

#47
Tons of big websites use something quite similar to this for their maintenance pages - pop a page of HTML in a JS function, upload it to a Cloudflare worker, and attach that worker to a wildcard route to catch everything on your domain temporarily when you want users to see your maintenance page. It's a common strategy that works well.

Re: A whole website in a single JavaScript file

#48
post #42

I mean, this is a "single file website" in the sense that ` " rel="nofollow">https://google.com"> ` is a "search engine implementation in one line of code". The only semi-interesting thing here is that this demo pulls dependencies from 3rd party registries via HTTP without an explicit install step. It's really not that different than doing regular Node.js development with a committed node_modules (hi, Google), except…

I wouldnt say an iframe and this are in any way shape or form comparable. this is a "full-fledged" website.

> except that if node.land or crux.land go down, you've lost your reproducibility.

Dependencies are cached. This is no different from if npm would go down.

> The only semi-interesting thing here is that this demo pulls dependencies from 3rd party registries via HTTP without an explicit install step

Given that this seems interesting to you, it seems you haven't heard of Deno (https://deno.land). It is not related to node in terms of environment, its a new completely separate runtime.

In regards to your node example, this is fairly different: the dependency pulled in from deno.land is a wrapper around the built-in http server, which does various error handling for you and simplifies the usage. The router isnt a simple switch statement either; its a URLPattern (the web's version of path-to-regexp) based minimal router. Campring these to the node built-ins isnt exactly a fair comparison I would say.

Also on top of this, with node you need a configuration to get typescript working, then you need a package.json, etc etc.

Re: A whole website in a single JavaScript file

#49
This is great, I'm not sure why this is being misinterpreted so much. Serving generated HTML from Node using Express many years ago was also great at the time. You can still do that, but in my experience the tooling is quite dated/fragmented and the ecosystem+language has evolved significantly since then. Nowadays, SSR+Node generally refers to front-end frameworks with SSR capabilities (Next, Nuxt, SvelteKit, etc.) or generation of static files. Building a dynamically server side rendered site using TypeScript+JSX but without the issues of client side frameworks, hydration, SPA routing, etc. sounds revolutionary, even though it shouldn't(?)

Re: A whole website in a single JavaScript file

#50
post #13

Earlier quoted context omitted.

I think it's actually much worse than that - it's a little tricky to tell on mobile, but going from "stats" to "bagle" and back again - looks like this mucks up the client side cache? While one whole second is "90s slow" for a first render for a static site - it's truly ludicrous for navigating back to an already cached page? How are the cache control headers with this set-up - is there a varnish or similar cdn/cache…

The request headers have no-cache set. I assume this is because it's in a live developer playground page instead of a production deployment.

Still, that's quite different from live editing static files on disk - then you'd normally get cache and invalidation (if-modified-since/304 etc).
Post reply on HN