DEV Community

Adam Crockett
Adam Crockett

Posted on

👨‍🚀 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 need for a server by
moving everything further than the "edge" moving everything local,. (technically falling off a cliff at this point) .

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(lowercase) added back into data / html.

Once you have read the above, take the address from the href attribute in yellow, don't forget to remove the outer quotes, 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>
Enter fullscreen mode Exit fullscreen mode

Okay what gives?
Addresses can have data: or javascript: to treat a link with a different context instead of using a protocol like https.
In-fact 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.

Edit: Thats not entirely correct.
Despite what I said about a 4 page websites. navigation is disabled in Chrome and Firefox using another data:url, meaning the only way to navigate is actually, through an SPA, maybe Portals or iframes too. I don't really mind that I was wrong, this is a silly post. However I am sure that there are flags to turn off web security, I am also sure that in an Electron style app, this could be turned off as well.

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/

Discussion (25)

Collapse
fdrobidoux profile image
Félix Dion-Robidoux • Edited

You could go even further, and deliver the website by paper and include with that paper a setup to use a AI-powered software that can translate the blury picture of the 5-feet piece of paper containing the website and translate it to an actual website on your browser using machine-learning that uses how most websites look as a model.

I mean, we have it WAY too easy.

Collapse
adam_cyclones profile image
Adam Crockett Author • Edited

This is roughly how people learned to write "Basic" before the internet.

basic language instructions manual

It's a magazine you would have subscribed to in order the hand write the program back out, you could make full games this way.

If anyone is wondering what a magazine is, it's a folding internet that goes out of date extremely quickly.

Collapse
guneyozsan profile image
Guney Ozsan

Back in those days, in order to download an app or a digital video you needed to write a letter with pen and paper to the creator and they mail a floppy disk back to you. Slowest API call ever.

Thread Thread
adam_cyclones profile image
Adam Crockett Author • Edited

Haha, amazing! We should always remember how things where, there is much to be learned.

The mail, it's UDP based, you might get it, eventually.

Collapse
fdrobidoux profile image
Félix Dion-Robidoux • Edited
Thread Thread
adam_cyclones profile image
Adam Crockett Author

Good job Félix, Good job. 😂

Collapse
manishfoodtechs profile image
manish srivastava

GWBASIC !!! When I was 6 years old I created a small addition substraction program on it. Still miss it

Thread Thread
adam_cyclones profile image
Adam Crockett Author

That must have helped with homework 🤫

Collapse
sorincostea profile image
Sorin Costea

My latest Firefox just searched for your example string hmm

Collapse
napoleon039 profile image
Nihar Raote

I got an Address doesn't look right the first time and also got Firefox to search the string the second time.

These are my tries. You have to look carefully at the comma and the full string you enter in the address bar.

Collapse
guneyozsan profile image
Guney Ozsan

Maybe it works like a USB plug. You try with a comma and it doesn't work. Then you try without a comma, and it doesn't work. Then you try again with a comma and this time it works.
(Also sounds like my debugging session.)

Thread Thread
napoleon039 profile image
Nihar Raote

Haha, sometimes it feels as if code has a mind of its own

Collapse
adam_cyclones profile image
Adam Crockett Author

3rd times the charm.

Collapse
adam_cyclones profile image
Adam Crockett Author • Edited

Did you add the l based on my instructions, I mentioned in the note above the instructions?

This absolutely does work in all browsers. Infact this example is based on the example from Mozilla Development Network.

Collapse
adam_cyclones profile image
Adam Crockett Author

Did you take it out of the quotes of the a href

Collapse
sargalias profile image
Spyros Argalias

Very interesting. It's cool to see use cases like this.

As you mentioned, I'm not sure how practical it is, but cool nonetheless!

Collapse
adam_cyclones profile image
Adam Crockett Author

fail

Oh yes, despite what I said about a 4 page website. navigation is disabled in chrome and electron, meaning the only way to navigate is actually, through an SPA. I should get my facts straight. However I am sure that there are flags to turn off, I am also sure that in an Electron style app, this could be turned off as well.

Collapse
adam_cyclones profile image
Adam Crockett Author

Agreed, fun trivia but rarely used, I think I used it once in a server environment when I needed a simple index page and couldn't be bothered to read a file, this style of URL is also locked down in some ways (can't remember what you can't do with it) something to test.

Collapse
guneyozsan profile image
Guney Ozsan

What I first imagined after a few paragraphs was a webpage directly consuming a remote database without an API. Then you went further. Nice and fun thought experiment.

Collapse
adam_cyclones profile image
Adam Crockett Author

Something like SQL straight into html? Hmm this has got me thinking about the inverse of this post. How far can you go without a frontend of any description. I think it would probably be quite far.

Collapse
guneyozsan profile image
Guney Ozsan

Yes exactly! I can’t progress my thinking as further as you because my speciality is very far away from web. But I like reading about interesting use cases and edge cases for any tech stack.

Collapse
codingsafari profile image
Nico Braun
  • You still need a server to serve your page.
  • IndexedDB can only be accessed by the single client, for anything other than storing your favorite theme, it's not feasible.
  • The trend to do more work on the backend and less on the frontend has a good reason.
Collapse
adam_cyclones profile image
Adam Crockett Author

Firstly wierd bits of trivia is why I write on Dev. It's what I like to talk about.

  • pasting text into a URL bar does not require a server.
  • I didn't stipulate that this "website" needed to be shared to anyone, personal client side storage is absolutely storage, but even so pouchdb can sync this with remotes - if you where absolutely determined to use this crazzy idea.
  • the point of the post is silly, it's a thought experiment, nothing more, it didn't warrant bullet points that's very serious impactful way of telling me to stop talking ☹️.
Collapse
nizarbsb profile image
Nizar Boussebsi

Interesting little trick and was a good read. Maybe one day an Open Source framework would leverage this feature and make client-side somehow possible.

Collapse
adam_cyclones profile image
Adam Crockett Author

Perhaps, I can't think of many real world uses but it's got some potential in the caching department for sure. Maybe it's possible to do some sort of SSR in browser.