React is bloated, but going complete Vanilla JS can make your app really difficult to maintain and it severally impacts the DX (Developer Experience).
Just think about writingdocument.querySelector('...') everytime you want to fetch an element from the dom or writing$element.addEventListener(...) everytime you want to attach an event to an element.

I am not an anti-vanillaJS or anti-framework guy but trust me there's a mid-way! that is using a tiny toolkit which acts as a very thin superficial layer over the Vanilla JS ( toppings?? ) but still not something as bloated as a library or a framework. Just imagine if you could replace all thosequerySelector(...) calls withqs(...) orqsa(...) forquerySelectorAll or thoseaddEventListener(...) calls with some JQuery-likeon(...) andoff(...) functions just by adding a tiny toolkit at the top of your app.js file.

I know that a lot of you already use some sort of Javascript toolkits you made for personal use and have even used in client projects but a lot of newcomers think you either have to go completely the framework way or you have to completely go the vanilla js way. but it's a wrong thinking.

To prove my point I am gonna show you the tiny toolkit that I use in my projects, it's calledtez.js ( tez means fast in Hindi ).

/* tez.js | Created By Harsh Singh | MIT License */constdoc=document;exportconstqs=(sel,ctx=doc)=>ctx.querySelector(sel);exportconstqsa=(sel,ctx=doc)=>ctx.querySelectorAll(sel);exportconststyle=(el,obj)=>Object.assign(el.style,obj);exportconstattr=(el,name,val)=>{if(val){returnel.setAttribute(name,val);}returnel.getAttribute(name);};exportconston=(el,evt,hand)=>el.addEventListener(evt,hand,false);exportconstoff=(el,evt,hand)=>el.removeEventListener(evt,hand,false);exportconstready=hand=>{if(/complete|loaded|interactive/.test(doc.readyState)&&doc.body){setTimeout(hand,1);}else{on(doc,'DOMContentLoaded',hand);}};

this tiny javascript toolkit will save you from the pain of going complete vanilla-js way but will also save you from using a framework.

here's a tiny counter app i made with this toolkit.

<divid="counter"></div><buttonid="inc">+</button><buttonid="dec">-</button><scripttype="module"src="/app.js"></script>

import{ready,qs,on}from'/tez.js';constinitApp=()=>{constcounterEl=qs('#counter'),incBtn=qs('#inc'),decBtn=qs('#dec');letcount=0;// initial stateconstupdateCounter=v=>counterEl.textContent=v;updateCounter(count);on(incBtn,'click',()=>updateCounter(++count));on(decBtn,'click',()=>updateCounter(count===0?0:--count));};ready(initApp);// initializes the app when the dom is ready.

you can clearly see that even a tiny toolkit can improve your DX drastically without costing your app the performance benefits of vanilla js.

JaiHind #JaiShreeRam