When building light weight interactivity on a webpage, I often find myself in this space between doing it in Vanilla JS or pulling out my big-framework-X of choice.
Mini-frameworks like AlpineJS, Vue-Petite, and Stimulus exist exactly to fill this space.
But whenever I consider reaching for one of these, I usually find that the job can just as easily be done in Vanilla JS. And if it can't, it typically requires the big-framework-X anyway.
Vanilla JS is of course much simpler, ships less bytes to users, and consumes fewer CPU cycles from user devices. And with Vanilla JS my development setup is much simpler too (no npm, bundlers, build-tools, etc. needed).
Here are 4 small tips that might make you choose Vanilla JS more often:
Tip 1 - Use element IDs directly in JS code
When big-framework-X code is compared to vanilla JS, you will often see the vanilla JS sample code littered with
document.querySelector(...) statements (making the Vanilla JS version look bloated). This is pure propaganda. There is no need for this. For simple stuff (where you would typically use vanilla JS), you can just reference HTML elements using their IDs directly in JS:
<input type=checkbox id=MyChk1>
MyChk1.checked = true;
Tip 2 - Use "hidden" for conditionals
One reason that you might use big-framework-X is conditionals - some syntax which renders a section of HTML to the DOM - or not - depending on some condition. A simple Vanilla JS alternative to this is the "hidden" attribute / property. To show/hide a div (and its content), you can simply do this:
<div id=MyDiv1 hidden>...</div>
// swap which divs are visible
MyDiv1.hidden = false;
MyDiv2.hidden = true;
Tip 3 - Template Literals
Another reason that you might use big-framework-X is templating (like React's JSX or Vue's SFC). Vanilla JS actually comes with a powerful templating system called
template literals, which can be utilized in much the same way.
let Title='Shopping list';
let Items=['Apples','Bananas','Dog food'];
Tip 4 - Inline event handlers
You may have been taught that inline event handlers are bad, and that you need to use
element.addEventListener(...) instead. You will often see this when big-framework-X code is compared to vanilla JS (making the Vanilla JS version look bloated).
Once again, this is pure propaganda. For simple stuff (where you would typically use vanilla JS), inline event handlers are perfectly fine, much simpler, terse and readable.
<input type=checkbox onclick="MyDiv1.hidden=this.checked">
Combining all 4
I re-created the obligatory (for big JS frameworks) To Do List application in Vanilla JS combining above techniques:
Fully functional, yet simple and short, and it can easily compete with big-framework-X.