Reactive UI dan Data Binding Otomatis di JavaScript (Tanpa Framework)

Selama ini banyak developer berpikir bahwa membuat antarmuka reaktif (Reactive UI) hanya bisa dilakukan menggunakan framework seperti React, Vue, atau Angular. Padahal, JavaScript murni (vanilla JS) juga mampu membangun antarmuka yang dinamis dan responsif dengan konsep Reactive UI di JavaScript dan data binding otomatis.

Reactive UI adalah pendekatan di mana tampilan (UI) secara otomatis menyesuaikan diri dengan perubahan data. Artinya, ketika suatu variabel berubah, elemen HTML yang menampilkannya ikut berubah tanpa perlu kita update secara manual. Konsep ini memanfaatkan kombinasi observer pattern, proxy object, dan event-driven programming.

Apa Itu Reactive UI di JavaScript?

Reactive UI memungkinkan kamu membangun antarmuka yang “hidup” — di mana perubahan data langsung tercermin di tampilan.
Sebagai contoh, ketika pengguna mengisi form, menambahkan item ke daftar, atau mengubah nilai variabel, tampilan akan memperbarui secara otomatis tanpa reload.

Hal ini dapat dicapai dengan pendekatan data binding, yaitu menghubungkan antara data (model) dan tampilan (view).
Ketika data berubah, view ikut berubah — dan sebaliknya.

Contoh Data Binding Sederhana

Berikut contoh dasar reaktivitas menggunakan Proxy, salah satu fitur powerful di JavaScript modern.

const appState = {
  name: "Arvian",
};

const state = new Proxy(appState, {
  set(target, prop, value) {
    target[prop] = value;
    render();
    return true;
  },
});

function render() {
  document.getElementById("output").textContent = `Halo, ${state.name}!`;
}

document.getElementById("inputName").addEventListener("input", (e) => {
  state.name = e.target.value;
});

render();

<input type="text" id="inputName" placeholder="Ketik namamu..." />
<p id="output"></p>

Penjelasan:

Proxy digunakan untuk mendeteksi perubahan data.
Setiap kali properti name berubah, fungsi render() dipanggil untuk memperbarui tampilan.
Tidak perlu addEventListener tambahan hanya untuk update teks.

Reactive Binding untuk Banyak Elemen

Mari kita buat versi yang sedikit lebih kompleks, di mana beberapa elemen HTML terikat ke satu data objek:

const data = { username: "Guest", age: 20 };

const reactive = new Proxy(data, {
  set(target, key, value) {
    target[key] = value;
    document.querySelectorAll(`[data-bind=${key}]`).forEach((el) => {
      el.textContent = value;
    });
    return true;
  },
});

document.getElementById("updateBtn").addEventListener("click", () => {
  reactive.username = document.getElementById("nameInput").value;
  reactive.age = document.getElementById("ageInput").value;
});

<input type="text" id="nameInput" placeholder="Nama" />
<input type="number" id="ageInput" placeholder="Umur" />
<button id="updateBtn">Update</button>

<p>Halo, <span data-bind="username"></span>!</p>
<p>Umur kamu: <span data-bind="age"></span> tahun.</p>

Keunggulan pendekatan ini:

Data dan tampilan saling sinkron secara otomatis.
Tidak perlu manipulasi DOM berulang.
Lebih ringan dibanding framework besar.

Menambahkan Two-Way Binding (Data ⇄ View)

Pada contoh sebelumnya, binding masih satu arah (data → tampilan). Kita bisa membuat versi dua arah (two-way binding) dengan menambahkan event listener pada input.

document.querySelectorAll("[data-model]").forEach((input) => {
  const key = input.getAttribute("data-model");

  input.addEventListener("input", (e) => {
    reactive[key] = e.target.value;
  });
});

<input data-model="username" placeholder="Nama..." />
<input data-model="age" type="number" placeholder="Umur..." />

<p>Hai, <span data-bind="username"></span>! Umur kamu <span data-bind="age"></span> tahun.</p>

Sekarang, saat kamu mengetik di input, teks di bawahnya akan berubah otomatis tanpa tombol update! Ini adalah inti dari konsep two-way binding — sama seperti fitur di Vue.js, tapi dibuat manual menggunakan JavaScript murni.

Pengembangan: Reactive Component System

Kita bisa memperluas sistem ini agar mendukung komponen modular, mirip seperti React atau Vue. Misalnya, setiap komponen memiliki state dan fungsi render-nya sendiri.

function createComponent(rootId, initialState, template) {
  const state = new Proxy(initialState, {
    set(target, prop, value) {
      target[prop] = value;
      render();
      return true;
    },
  });

  function render() {
    document.getElementById(rootId).innerHTML = template(state);
  }

  render();
  return state;
}

// Contoh penggunaan
const counter = createComponent("app", { count: 0 }, (state) => `
  <h2>Counter: ${state.count}</h2>
  <button onclick="counter.count++">Tambah</button>
  <button onclick="counter.count--">Kurang</button>
`);

<div id="app"></div>

Dengan sedikit logika tambahan, kita bisa membuat sistem komponen reaktif sederhana tanpa framework.

Kapan Reactive UI Digunakan

Reactive UI sangat berguna untuk aplikasi yang datanya sering berubah atau membutuhkan pembaruan langsung di layar, seperti:

Form dinamis dan validasi otomatis
Dashboard real-time
Aplikasi catatan (notes), to-do list, atau shopping list
Mini app interaktif di browser

Untuk aplikasi yang sangat besar, framework seperti React, Vue, atau Svelte bisa menjadi pilihan, tetapi memahami konsep reactivity manual seperti ini akan membuat kamu lebih paham cara kerja internal framework modern.

Kesimpulan

Dengan memahami konsep Reactive UI di JavaScript, kamu bisa membangun aplikasi yang dinamis tanpa harus bergantung pada framework besar. Melalui pendekatan Proxy, data binding, dan event-driven update, JavaScript murni mampu memberikan pengalaman pengguna yang interaktif, cepat, dan efisien.

Konsep ini menjadi dasar dari framework modern seperti Vue dan React — jadi menguasainya akan membuatmu lebih siap untuk memahami ekosistem JavaScript yang lebih luas.