The Naked SPA — Part I — Vanilla you Say?
Update Feb 2022: this article was written two years ago. In the meantime, my approach has evolved, but I’m still very much into lean/fast/lightweight, preferably without big bloated frameworks, instead using Web Components / https://lit.dev and https://xo-js.dev.
A Bare All Experiment in Single Page Application Building
If, like me, you’ve been following web development for a while, you’ll have noticed how best practices have dramatically changed over the years, how stuff gets ‘cool’ and hyped, then dismissed and forgotten; how browser wars have slowly disappeared, and the whole server-client thinking has shifted, then shifted again…
Nothing special. The Times They Are a-Changin’.
I’ve gotten used to this continuous evolution, but hey, I’m a nerd, so when a web app feels sluggish, I sometimes dive in. When the Developers Tools show that my PC downloaded 2.1MB just to get started with the app, I wonder… and start writing blogs.
This is the first part of a series about “The Naked SPA”, an experiment in dropping everything but the bare essentials in Single Page Application Development.
I’ve been around in software development since the start of the World Wide Web, early nineties.
Working with the web has evolved, slowly but steadily, and almost every aspect of it has been overhauled multiple times.
Back in the nineties, it started with static HTML, FTPed to webservers. You had your early web agencies that did it for you, since no one else knew what was going on.
Then came along fully server-rendered HTML. Bulky Content Management Systems (CMS) started appearing that allowed you to focus on content, then merged it into templating engines and served it, accompanied with elaborate caching mechanisms to make it all scale.
And lately, well, it’s the glorious return of fully static HTML, this time with complete MVVM frameworks and completely separated REST or GraphQL APIs.
It’s been a bumpy journey, and I have been there, done that.
As a CTO, my hands-on full-stack Web App Development activities are now limited to rapid prototyping, PoCs and developing and maintaining a few owned sites, but I’ve always kept up with the latest techniques and frameworks, such as Angular, React and Vue, and of course with the always evolving state of the Web itself.
Looking at the current state of the Web, it turns out that …. “Nothing’s Changed, Really”.
Still going strong:
- HDD (hype driven development)
We seem to never learn… - Short Framework Lifecycles
Remember knockout.js? Oh oh Angular… - Religious Wars about Tech Stacks
Oh wait, there actually is something that did change:
- Framework Bloat
OMG, did we just download 2.1MB to show a login page?
For all these reasons (and more), I have taken it upon myself to run a little experiment where I force myself to build a web app without any:
- JavaScript frameworks
- Responsive grid systems
- Reset/reboot CSS files
- HTML bootstrapping
… and create a modern SPA with just enough skin on the bone to be fully operational.
And FAST!
It’s been a cathartic experience in the sense that it has given me a lot of insight in how we all tend to take a lot of stuff for granted, how we tend to not rethink when new possibilities come along, how we are in fact burdened by existing knowledge. Excuse my spirituality ;-).
Essential Choices
HTML Semantics
As we bare it all anyway here, let’s also tell each other our little secrets: I have a semantics fetish.
The benefit of writing semantic HTML stems from what should be the driving goal of any web page: the desire to communicate. By adding semantic tags to your document, you provide additional information about that document, which aids in communication. Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries. — From “Why Use Semantic HTML?” — LifeWire
In The Naked SPA, I want to make sure I use the semantic tags HTML5 defines, such as header, footer, main, section and nav.
CSS, Grid, Responsive Design
Combined with the semantic HTML skeleton, implementing a CSS3 Grid is super easy:
Try to do that with a helper framework such as Bootstrap!
In fact, the end result looks much cleaner, with the best part being that the semantics aren’t completely overgrown with large amounts of CSS classes and div nestings.
In the next part of this series, I’ll focus on the VanillaJS parts of The Naked SPA and on the static SPA infrastructure.
