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>
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/
Top comments (24)
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.
This is roughly how people learned to write "Basic" before the internet.
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.
"And because you're reading this comment, we're gonna assume you don't know what the internet is..."
(if you're confused, keep watching the video)
Good job Félix, Good job. 😂
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.
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.
GWBASIC !!! When I was 6 years old I created a small addition substraction program on it. Still miss it
That must have helped with homework 🤫
My latest Firefox just searched for your example string hmm
I got an
Address doesn't look rightthe 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.
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.)
Haha, sometimes it feels as if code has a mind of its own
3rd times the charm.
Did you add the
lbased 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.
Did you take it out of the quotes of the a href
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.
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.
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.
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!
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.
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.
Firstly wierd bits of trivia is why I write on Dev. It's what I like to talk about.
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.
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.