Client side only! How far can we go?

In a nutshell, serverless means to use sombody else's server, I find it unfortunately named because the term PWA is misslabeled as well, it used to be called offline first, atleast that was when everything came first.

• mobile first
• desktop first
• content first
• offline first

Ironically everyone's a winner for taking part and they all came first, good job, gold star

Okay so that is my little silly rant out of the way, what serverless should mean is cutting down the nead for a server and moving everything further than the "edge" moving everything local.

what are you talking about?

Static websites became popular not because they are simple, but because they have no calls to slow backends and databases, they make requests and they sometimes serve spa or frontend framework based UI's to add that dynamic feeling UX.

But what if I told you, everything you know is a lie, we don't need servers to load webpages.. what if I told you, you can persist data in a database whilst remaining offline.

Webpage navigation without servers

Note: Dev markdown is freaking out about the bellow example, the address needs to have the L added back into data / html.

Once you have read the above, take the address and paste that into your browser bar then gasp and come back to me, I've got you .

<a href="data:text/htm,<h1>This is your browser talking</h1>">just a normal link</a>

Okay what gives?
Addresses can have data: or javascript: to treat a link with a different context instead of using a protocol like https.
Infact this is how Base64 encoded strings like images SVGs, (lots more) and evidently html can be loaded in a similar way (both as encoded and not encoded). The browser expands the string that it got and returns it for browser things like rendering. Data, I suspect is like prepared content and that is returned without a get, in the case of html this would start the process to render a Dom. We did all the hard work for the browser, the result is fast!

Okay I demonstrated that you can render a html document without a server in just one string. There is no CSS, no JavaScript you say? Well actually script and style tags work just fine in this mega string.

Soo you want a 4 page website in a single string? Hmm maybe this string could include links to other data: URIs using the same technique? The result would be a mega string x 4.

Now you have a really really big string let's think about making it into a React app with a router. Now we have a really really really big string, you get the picture, unless you are going to sit there and manually write this string I would save your blood pressure for another time, hypothetically I suggest looking into a Webpack tool that can inline all the things and give you this string to rule them all.

Due to string concatenation issues you will need to solve this with encoding and bacticks.

Hmm, we need a database now? Enter indexdb, okay so admittedly you could use local storage, session storage but that's not cool enough. I'd personally shoehorn pouchdb library into your megastring this will make working with indexdb a lot more fun.

But how do we back this website up? A thumb drive of course!

Okay so we actually could go very far without a server, could it be practical? Maybe with the right tooling, you certainly couldn't run a shop client side or do any authentication, (maybe, I don't know enough to trust client side crypto) sooner or later you would have to make a request for some resource, it's just not possible on the modern web. Despite this, it's an interesting thought experiment around thin and fat clients that I challenge you to explore, if you made something cool please come back and show me your feedback!

Bonus round: here's some tips for PWA's 10 years before they where a thing. https://hacks.mozilla.org/2010/01/offline-web-applications/