Reactive DOM — Finally

DOM API should not be the reason to avoid building with Vanilla JavaScript

As a web developer, if you stop to think about web development, you will realize that all UI libraries and frameworks are just trying to fix the cumbersome of working with DOM and creating reusable code. You can find everything else built into the browser or JavaScript already.

For example, let’s create a simple counter widget.

We can start by defining the HTML like so:

<div class="vanilla-count">
  <p>count: <span class="count-value">0</span></p>
  <button type="button" class="count-down">-</button>
  <button type="button" class="count-up">+</button>
</div>

Without adding any styling, let’s add behavior to it with JavaScript:

const vanillaCount = document.querySelector('.vanilla-count');
const [countDisplay, countDownButton, countUpButton] = vanillaCount.children;
const [countSpan] = countDisplay.children;

let count = 0;

countUpButton.addEventListener('click', () => {
  count += 1;
  countSpan.textContent = count;
})

countDownButton.addEventListener('click', () => {
  count -= 1;
  countSpan.textContent = count;
})

The problem