Vanilla JS
Yes, you can ditch the framework. Sometimes, all you need is JavaScript! 💌
“Blasphemy! ┗|｀O′|┛ - Did you suggest I abandon my beloved … ehhm… React / Vue / Angular / Svelte / Next / Nuxt / Whatever-is-trending-this-week ???”
Before you close your computer in disgust, hear me out… I recently took a deep dive into a Frontend Masters course on vanilla JavaScript… and honestly? It was like discovering that my little sedan could do donuts in the parking lot! AHHH YEAH! 🤘
So why JavaScript?
To get started, it might be helpful to realize why JavaScript is being heavily used in the first place.
A History Lesson
Single-Page Applications
Remember the good old days? I’m talking about the early 2000s when every click meant watching your browser do a full page reload. The little spinner icon. The flash of white… That brief moment of existential dread wondering if the internet died. 🪦
Then BAM! Single-page Applications (SPAs) came along like a superhero nobody asked for but everyone needed. Gmail showed us you could have an application that lived entirely in the browser. Google Maps let you drag things around without the page having a seizure. Suddenly, web pages felt less like digital pamphlets and more like - you know - real software!
Multi-Page Applications
So, the alternative? Multi-page applications - In a traditional multi-page application, every navigation is like burning down your house and rebuilding it from scratch. Click a link? The server sends you an entirely new HTML document. All your JavaScript state? Gone. Your carefully crafted DOM? Obliterated. That form you were filling out? Better hope you hit save, friend. 😅
MPAs have their place though, SEO loves them, they’re simpler to reason about, and if your site is mostly static content, why over complicate things? Otherwise, when you want that smooth, app-like experience where users forget they’re even using a browser? SPAs are your jam. And of course, with SPAs - you need JavaScript!
Hello JavaScript, my dear friend! ヾ(＠⌒ー⌒＠)ノ
The Million-Dollar Question 💸
Here it is: Why would you build SPA functionality from scratch when frameworks already handle this?
Well, have you seen your bundle size lately? 👀 … Have you noticed that your “simple” blog now requires downloading the equivalent of a small novel just to display “Hello World”?
But here’s the real reason: understanding how navigation works without a framework makes you a better developer, even when using frameworks. It’s like learning to drive manual transmission—sure, you’ll probably drive automatic forever, but now you actually understand what’s happening under the hood instead of just pressing pedals and hoping for the best.
Plus, navigating between pages using just the DOM is surprisingly elegant. No magic. No build steps. Just you, the browser APIs, and the sweet satisfaction of knowing exactly what’s happening.
How SPAs Work
Alright - so back to the inspiration for this blog post. That Vanilla.js course on Frontend Masters was an eye-opener for me! And Max - check out his site here - helped to show us how you could use vanilla JavaScript to build SPAs without a bloated framework.
The idea behind SPAs is simple (in theory, anyway): instead of loading new pages, you just swap out chunks of your current page’s content while staying on the same HTML document.
Here’s the basic flow:
- User clicks a link
- You intercept that click (no actual page navigation happens)
- You fetch new content (maybe via an API, maybe from templates you already loaded)
- You manipulate the DOM to swap in the new stuff
- You update the URL so it looks like the user navigated
- Done correctly, the user experience is fast, dynamic, and your “app” kicks butt!
No browser reload. JavaScript keeps running. State persists. Yay! We’ve built something beautiful! 💅
Want to dive in a little deeper? 🤿 Check out my blog post on Single Page Applications.
Disclaimers ⚠️
Alright - look, vanilla.js development isn’t all sunshine and rainbows. 🌈 There are legitimate reasons frameworks exist, and I am NOT telling you to ignore them… What am I telling you? Well - you need to make informed decisions when you build. Falling in love with vanilla javascript means falling in love with the right solution. 💖 The level of simplicity your project needs. Or that small layer of extensibility you’re looking for. And sometimes, being a great developer means saying no to that shiny thing you’ve always wanted to try.
The Danger Zone 💀
Okay hot shot (▀̿Ĺ̯▀̿ ̿) - so you want to do everything from scratch? Be honest, you’re probably just speed-running your way to building a worse, buggier version of React… And if by some miracle you don’t? I would have to ask why you aren’t just sipping margaritas on the beach somewhere… because you should have retired a long time ago. 🏖️
Average human developers, please consider the following:
- Accessibility: Hope you remembered to manage focus! And announce route changes to screen readers! And handle keyboard navigation! (You didn’t, did you?)
- State management: Without a framework, managing application state across route changes is… let’s call it “character building” 🏋️♂️
- Browser history: You now own every edge case. Back button, forward button, direct URL access — it’s all on you.
- Memory leaks: Forgot to clean up those event listeners when swapping content? Congrats, your app now consumes RAM like a hungry, hungry hippo. 🦛
“JOSE! Make up your mind! First you tell me that vanilla.js rocks, then you give me a list of reasons I should be scared to death about it.”
Guys, Gals - start somewhere small… use your brain, pick your battles, and remember that “I built it from scratch” looks way less impressive on your resume than “I shipped a product people actually use.”
The Verdict
So, should you ditch the framework?
Maybe not entirely. Frameworks exist for good reasons—they solve hard problems and let teams move fast. But knowing what’s possible with vanilla JavaScript? That’s power. That’s understanding. You’ll miss the right solution if you are too blind to ever think for yourself. And vanilla.js gives you the superpower to find what’s right for you. 🦸♂️
The next time someone asks why you’re using React to build a simple blog, you’ll know the answer. The next time you see a bundle size chart that looks like a hockey stick, you’ll know there’s another way. The next time you need to build something small, fast, and framework-free, you won’t be scared.
Because at the end of the day, frameworks are tools, not religions. And sometimes, all you need is JavaScript. Now - when someone asks you why you aren’t using a framework - pause - just smile mysteriously and whisper, “I learned the ancient ways.” 🧙♂️
Need more inspiration? Check out my blog post on Single Page Applications.