Evolusi Library UI Modern

Kenapa ini penting

Belajar React tanpa tahu masalah yang diselesaikannya itu seperti belajar menyetir mobil matic tanpa pernah tahu apa itu kopling. Kamu bisa jalan, tapi tidak paham kenapa mobilnya berperilaku begitu. Dengan memahami sejarah singkat dari DOM manual ke jQuery lalu ke framework modern, kamu akan mengerti kenapa React memaksa kamu menulis kode dengan cara tertentu: kenapa state tidak boleh diubah langsung, kenapa UI "digambar ulang", dan kenapa kita menulis "apa yang ingin ditampilkan" alih-alih "langkah-langkah mengubah tampilan".

Pemahaman ini juga berguna saat wawancara kerja. Pertanyaan seperti "apa itu virtual DOM?" atau "apa bedanya deklaratif dan imperatif?" sangat sering muncul untuk posisi frontend junior.

Konsep inti

Era 1: DOM manual (vanilla JavaScript)

Di awal, setiap perubahan tampilan ditulis tangan. Mau menambah item ke daftar? Kamu buat elemen li, isi teksnya, cari ul-nya, lalu appendChild. Mau menghapus? Cari elemennya, panggil remove(). Mau mengubah angka di keranjang? Cari elemen angkanya, ubah textContent.

Untuk halaman kecil ini tidak masalah. Masalahnya muncul saat ada banyak tempat yang bergantung pada data yang sama. Bayangkan angka "jumlah item keranjang" tampil di navbar, di sidebar, dan di tombol checkout. Setiap kali keranjang berubah, kamu harus ingat mengubah ketiganya. Lupa satu, tampilan jadi bohong. Inilah yang disebut masalah sinkronisasi state dan UI.

Era 2: jQuery

jQuery (2006) membuat manipulasi DOM jauh lebih ringkas: $('#cart-count').text(3). Ia juga menyamakan perbedaan antar browser yang dulu sangat parah. jQuery adalah pahlawan zamannya, tapi ia tetap imperatif: kamu tetap menulis langkah demi langkah cara mengubah DOM. Masalah sinkronisasi tadi tidak hilang, hanya lebih pendek ditulis.

Era 3: Framework dan library berbasis komponen

Sekitar 2010-an muncul AngularJS, lalu React (2013, dibuat Facebook), Vue (2014), dan Svelte (2016). Ide besarnya sama: kamu cukup menjelaskan tampilan sebagai fungsi dari data. Kalau datanya berubah, library yang mengurus perubahan DOM-nya.

Rumus terkenalnya: UI = f(state). Tampilan adalah hasil fungsi dari state (data saat ini).

Imperatif vs deklaratif

Analogi sehari-hari: kamu naik taksi.

• Imperatif: "Pak, maju 200 meter, belok kiri, lurus sampai lampu merah, belok kanan, berhenti di gedung biru."
• Deklaratif: "Pak, ke Grand Indonesia ya."

Dengan cara deklaratif, kamu menyebut tujuan; sopir (React) yang memikirkan rutenya. Di React kamu menulis "kalau isLoggedIn true, tampilkan tombol Logout", bukan "cari tombol Login, sembunyikan, buat tombol Logout, sisipkan".

Virtual DOM

Mengubah DOM asli itu relatif mahal karena browser mungkin harus menghitung ulang layout dan menggambar ulang. React memakai virtual DOM: representasi tampilan dalam bentuk objek JavaScript biasa. Saat state berubah, React membuat "pohon" virtual baru, membandingkannya dengan pohon sebelumnya (proses ini disebut reconciliation atau "diffing"), lalu hanya menerapkan perbedaannya ke DOM asli.

Analogi: kamu punya denah rumah di kertas. Sebelum renovasi, kamu gambar denah baru, bandingkan dengan yang lama, lalu tukang hanya membongkar bagian yang beda. Jauh lebih efisien daripada merobohkan rumah dan membangun ulang.

Catatan penting: virtual DOM bukan sihir yang otomatis lebih cepat dari DOM manual yang ditulis sempurna. Keunggulan utamanya adalah kamu bisa menulis kode deklaratif yang tetap cukup cepat tanpa harus memikirkan optimasi DOM sendiri.

React vs Vue vs Svelte (singkat)

Kenapa bootcamp ini memilih React? Pasar kerjanya paling luas, ekosistemnya paling matang (Next.js, React Native), dan karena React "hanya JavaScript", kemampuan JS yang sudah kamu latih langsung terpakai.

Contoh kode

Berikut perbandingan fitur penghitung keranjang dengan tiga gaya. Perhatikan bagaimana kode imperatif harus mengubah setiap tempat satu per satu.

<!-- Versi 1: DOM manual (imperatif) -->
<p>Navbar: <span id="nav-count">0</span> item</p>
<p>Sidebar: <span id="side-count">0</span> item</p>
<button id="add">Tambah ke keranjang</button>

<script>
  let count = 0;
  document.getElementById('add').addEventListener('click', () => {
    count++;
    // Kita WAJIB ingat mengubah semua tempat yang menampilkan count
    document.getElementById('nav-count').textContent = count;
    document.getElementById('side-count').textContent = count;
    // Lupa satu baris di atas → tampilan tidak sinkron
  });
</script>

// Versi 2: jQuery (masih imperatif, hanya lebih pendek)
let count = 0;
$('#add').on('click', () => {
  count++;
  $('#nav-count').text(count);
  $('#side-count').text(count);
});

// Versi 3: React (deklaratif)
import { useState } from 'react';

export default function Toko() {
  const [count, setCount] = useState(0);

  // Kita hanya menjelaskan "UI untuk nilai count saat ini".
  // Setiap count berubah, React menghitung ulang tampilan dan mengubah DOM seperlunya.
  return (
    <>
      <p>Navbar: {count} item</p>
      <p>Sidebar: {count} item</p>
      <button onClick={() => setCount(count + 1)}>Tambah ke keranjang</button>
    </>
  );
}
// Klik tombol 2 kali → Navbar: 2 item, Sidebar: 2 item (selalu sinkron)

Untuk melihat virtual DOM secara konsep, ini gambaran objek yang dibuat React dari sebuah JSX (disederhanakan):

// JSX: <h1 className="judul">Halo</h1>
// kira-kira menjadi objek seperti ini di memori:
const elemen = {
  type: 'h1',
  props: { className: 'judul', children: 'Halo' },
};
console.log(elemen.type); // → 'h1'

Kesalahan umum

1. Menganggap React adalah framework lengkap. React fokus ke UI. Routing, data fetching tingkat lanjut, dan SSR biasanya ditangani library/framework lain (React Router, Next.js). Pahami batasnya agar tidak bingung mencari fitur yang memang bukan bagian React.
2. Mencampur manipulasi DOM manual dengan React. Menulis document.getElementById(...).textContent = ... di dalam komponen akan "melawan" React; tampilan bisa ditimpa saat re-render berikutnya. Ubah state, biarkan React yang mengubah DOM.
3. Mengira virtual DOM selalu lebih cepat. Yang benar: virtual DOM membuat kode deklaratif cukup efisien. Performa tetap bergantung pada cara kamu menulis komponen.
4. Belajar React sebelum JavaScript kuat. Arrow function, destructuring, spread operator, map/filter, dan module import/export dipakai di hampir setiap baris React. Kalau masih ragu, ulangi materi JavaScript modern dulu.

Latihan

1. Mudah, Tulis dengan kata-katamu sendiri (3-4 kalimat) perbedaan imperatif dan deklaratif, lengkap dengan satu analogi baru selain taksi.
2. Sedang, Buat halaman HTML + JS murni dengan satu tombol "Like" yang menambah angka di dua tempat berbeda. Lalu tulis daftar langkah apa saja yang harus kamu ingat setiap kali menambah tempat ketiga.
3. Menantang, Buat fungsi JavaScript render(state) sederhana yang menerima objek { likes } dan mengembalikan string HTML, lalu pasang ke innerHTML setiap kali state berubah. Ini adalah versi mini dari ide UI = f(state).

<p>Atas: <span id="a">0</span></p>
<p>Bawah: <span id="b">0</span></p>
<button id="like">Like</button>
<script>
  let likes = 0;
  document.getElementById('like').addEventListener('click', () => {
    likes++;
    document.getElementById('a').textContent = likes;
    document.getElementById('b').textContent = likes;
  });
</script>

<div id="app"></div>
<script>
  let state = { likes: 0 };

  function render(state) {
    return `
      <p>Atas: ${state.likes}</p>
      <p>Bawah: ${state.likes}</p>
      <button id="like">Like</button>
    `;
  }

  function update(newState) {
    state = newState;
    document.getElementById('app').innerHTML = render(state);
    // Tombol dibuat ulang, jadi event harus dipasang ulang
    document.getElementById('like').onclick = () => update({ likes: state.likes + 1 });
  }

  update(state); // render pertama → Atas: 0, Bawah: 0
</script>

Ringkasan

• DOM manual dan jQuery bersifat imperatif: kamu menulis setiap langkah perubahan DOM, sehingga rawan tidak sinkron.
• Library modern bersifat deklaratif: UI = f(state), kamu menjelaskan tampilan, library mengurus DOM.
• Virtual DOM adalah representasi UI berupa objek JS; React membandingkan versi lama dan baru lalu hanya mengubah bagian yang berbeda.
• React (JSX + virtual DOM), Vue (template + reaktivitas), Svelte (compiler tanpa virtual DOM) punya ide dasar yang sama.
• React dipilih karena ekosistem dan pasar kerjanya paling luas, serta berbasis JavaScript murni.