React is bloated, but Vanilla isn't the only solution.
Tags: javascript, beginners, vanilla, toolkit
Published: 2020-08-12 13:44:36

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 writing `document.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 those `querySelector(...)` calls with `qs(...)` or `qsa(...)` for `querySelectorAll` or those `addEventListener(...)` calls with some JQuery-like `on(...)` and `off(...)` 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 called [tez.js](https://github.com/rwbeast/tez.js) ( tez means fast in Hindi ).

```javascript
/* tez.js | Created By Harsh Singh | MIT License */

const doc = document;

export const qs = (sel, ctx = doc) => ctx.querySelector(sel);

export const qsa = (sel, ctx = doc) => ctx.querySelectorAll(sel);

export const style = (el, obj) => Object.assign(el.style, obj);

export const attr = (el, name, val) => {

  if(val) {
 
    return el.setAttribute(name, val);
 
  }

  return el.getAttribute(name);

};

export const on = (el, evt, hand) => el.addEventListener(evt, hand, false);

export const off = (el, evt, hand) => el.removeEventListener(evt, hand, false);

export const ready = 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.

```html
<div id="counter"></div>

<button id="inc">+</button>
<button id="dec">-</button>

<script type="module" src="/app.js"></script>
```

```javascript 
import { ready, qs, on } from '/tez.js'; 

const initApp = () => {

  const counterEl = qs('#counter'),
        incBtn = qs('#inc'),
        decBtn = qs('#dec');

  let count = 0; // initial state

  const updateCounter = 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