Mengenal Virtual DOM: Apa Itu dan Bagaimana Cara Kerjanya?

Virtual DOM adalah istilah yang sering muncul dalam pengembangan website modern, terutama di kalangan pengembang yang menggunakan framework seperti React. Tapi, apa sih sebenarnya Virtual DOM itu?

Untuk memahaminya, pertama-tama kita perlu mengenal konsep dasar yang menjadi pondasinya, yaitu DOM (Document Object Model).

Apa Itu DOM?

DOM adalah representasi struktur halaman website dalam bentuk pohon, di mana setiap elemen seperti teks, gambar, atau tombol diwakili sebagai node. DOM memungkinkan pengembang untuk mengubah tampilan dan struktur halaman secara dinamis menggunakan JavaScript. 

Jadi, bisa dibilang, DOM adalah cara JavaScript “melihat” halaman HTML, yang memungkinkannya melakukan manipulasi elemen-elemen tersebut.

Setiap kali ada perubahan pada halaman, misalnya ketika pengguna mengklik tombol atau ada data baru yang dimuat, browser harus memperbarui DOM. Sayangnya, proses pembaruan ini bisa lambat, terutama jika halaman memiliki banyak elemen yang terlibat.

Misalnya, ketika satu bagian dari halaman berubah, browser harus me-render ulang seluruh halaman untuk menampilkan perubahan tersebut. 

Ini menyebabkan aplikasi lambat, terutama untuk aplikasi yang kompleks dengan banyak komponen. Nah, di sinilah peran Virtual DOM menjadi sangat penting.

Apa Itu Virtual DOM?

Virtual DOM adalah representasi virtual dari DOM yang sebenarnya (real DOM). Ini adalah objek JavaScript yang mereplikasi struktur DOM asli, tetapi tidak langsung mempengaruhi real DOM saat terjadi perubahan. 

Model virtual ini berfungsi sebagai lapisan antara aplikasi dan DOM yang sesungguhnya, memungkinkan pengembang untuk melakukan perubahan tanpa harus berurusan langsung dengan DOM.

Dengan representasi ini, setiap kali ada perubahan pada state aplikasi, sebuah salinan baru dari Virtual DOM dibuat. Model baru ini kemudian dibandingkan dengan versi sebelumnya dalam proses yang disebut diffing. 

Cara Kerja Virtual DOM

Agar lebih mudah dipahami, berikut adalah penjelasan tentang bagaimana representasi visual ini bekerja:

#1. Inisialisasi

Ketika aplikasi pertama kali di-render, model ini membuat representasi awal dari seluruh halaman dalam bentuk pohon. Pohon ini mencerminkan struktur DOM yang nyata dan menyimpan informasi tentang setiap elemen antarmuka yang akan ditampilkan kepada pengguna.

#2. Pembaruan State

Ketika ada perubahan pada state aplikasi, misalnya ketika pengguna berinteraksi dengan elemen seperti tombol atau form, DOM maya ini memperbarui representasi virtualnya. Setiap perubahan yang terjadi pada state akan mencerminkan perubahan pada tampilan aplikasi.

#3. Pembuatan Pohon Virtual Baru

Setelah terjadi perubahan state, DOM maya akan membuat pohon baru yang mewakili tampilan aplikasi yang diperbarui. Pohon virtual baru ini menunjukkan bagaimana antarmuka pengguna akan terlihat setelah perubahan terjadi.

#4. Diffing (Perbandingan)

Pada tahap ini, DOM maya ini melakukan proses diffing, yakni membandingkan antara pohon virtual lama (sebelum ada perubahan) dengan pohon virtual baru (setelah perubahan).

Proses ini memungkinkan sistem untuk menemukan elemen mana yang mengalami perubahan. Hanya elemen-elemen yang berbeda antara kedua pohon ini yang akan diproses lebih lanjut.

#5. Mengupdate Real DOM

Setelah menemukan perbedaan, sistem akan memperbarui hanya elemen yang perlu diubah pada DOM asli. Dengan cara ini, DOM maya menghindari pembaruan seluruh DOM yang bisa memperlambat kinerja.

Pembaruan dilakukan secara efisien dan selektif, sehingga hanya bagian yang mengalami perubahan saja yang akan di-render ulang.

#6. Reconciliation (Sinkronisasi)

Proses terakhir adalah reconciliation, di mana perubahan yang terdeteksi oleh DOM maya ini diterapkan ke DOM asli. Perubahan ini dilakukan dengan cepat dan tepat, sehingga antarmuka pengguna akan langsung mencerminkan pembaruan yang terjadi pada aplikasi tanpa memperlambat kinerja halaman.

#7. Re-rendering

Setelah pembaruan diterapkan pada DOM asli, browser akan melakukan re-rendering untuk menampilkan elemen yang sudah diperbarui kepada pengguna. Berkat pendekatan ini, proses terjadi lebih cepat karena hanya bagian yang berubah saja yang perlu di-render ulang, bukan keseluruhan halaman.

Contoh Penggunaan Virtual DOM pada React

Mari kita lihat contoh penggunaan model virtual ini dalam framework React melalui aplikasi sederhana, yaitu aplikasi penghitung (Counter).

Struktur Awal Aplikasi React

Kita memiliki komponen React yang menampilkan angka (misalnya 0) dan sebuah tombol untuk menambah angka tersebut.

javascript

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>  {/* Menampilkan nilai angka */}
      <button onClick={() => setCount(count + 1)}>
        Tambah Angka
      </button>
    </div>
  );
}

export default Counter;

Cara Kerja Virtual DOM

1. Inisialisasi: Saat komponen Counter pertama kali di-render, React membuat Virtual DOM yang berisi elemen <h1> dan tombol <button>. Model ini menjadi representasi tampilan yang akan dilihat pengguna, yaitu angka 0 dan tombol.
2. Pembaruan State: Ketika pengguna mengklik tombol “Tambah Angka“, fungsi setCount akan memperbarui state di React, mengubah nilai count menjadi 1.
3. Pembuatan Virtual DOM Baru: Setelah state diperbarui, React membuat Virtual DOM baru yang mencerminkan tampilan setelah perubahan. Pada pohon Virtual DOM yang baru, elemen <h1> akan menampilkan angka 1, sementara tombol tetap tidak berubah.
4. Diffing: React membandingkan Virtual DOM yang lama (angka 0) dengan Virtual DOM yang baru (angka 1). Sistem mendeteksi bahwa hanya elemen <h1> yang berubah.
5. Pembaruan DOM Nyata: Setelah proses diffing, hanya elemen <h1> di DOM nyata yang diperbarui, yaitu dari angka 0 menjadi 1. Elemen lainnya, seperti tombol, tidak mengalami perubahan sehingga tidak perlu di-render ulang.

Kelebihan dan Kekurangan Virtual DOM

Berikut adalah beberapa kelebihan dan kekurangan dari representasi virtual ini:

#1. Kelebihan

• Kinerja yang Lebih Cepat dan Efisien: Hanya elemen yang berubah yang diperbarui, mengurangi beban pada browser.
• Pengelolaan Pembaruan yang Lebih Mudah: Pengembang cukup mengubah state aplikasi; framework seperti React akan mengelola pembaruan UI secara otomatis.
• Pengurangan Re-rendering yang Tidak Perlu: Hanya komponen yang berubah yang di-render ulang, menjaga kinerja aplikasi yang kompleks.
• Abstraksi yang Membantu Pengembangan: Pengembang tidak perlu khawatir tentang detail spesifik DOM; semua perubahan ditangani oleh React.
• Kompatibilitas dengan Browser yang Lebih Baik: Meminimalkan masalah perbedaan implementasi DOM di berbagai browser.

#2. Kekurangan

• Overhead pada Aplikasi Kecil: Pada aplikasi kecil, penggunaan model virtual ini bisa berlebihan dan tidak membawa peningkatan signifikan.
• Pembelajaran dan Implementasi: Memahami cara kerja model ini membutuhkan waktu dan pengetahuan tentang konsep terkait.
• Konsumsi Memori: Membutuhkan memori tambahan untuk menyimpan salinan virtual, terutama pada aplikasi besar.
• Bukan Teknologi yang Paling Cepat untuk Semua Kasus: Dalam aplikasi sangat dinamis, kinerja representasi virtual ini mungkin juga tidak optimal.
• Keterbatasan dalam Pengelolaan Komponen yang Sangat Besar: Proses diffing bisa menjadi berat pada aplikasi dengan ribuan komponen.

Baca Juga: Mengenal Svelte JS: Framework JavaScript Idaman Developer

Kesimpulan

Virtual DOM berfungsi sebagai jembatan antara aplikasi dan DOM asli. Dengan proses diffing dan reconciliation, pembaruan elemen pada halaman dapat dilakukan dengan efisien tanpa mempengaruhi performa keseluruhan aplikasi. 

Ketika mengembangkan aplikasi berbasis web yang memanfaatkan Virtual DOM, kamu membutuhkan layanan hosting IDwebhost yang cepat dan optimal. Dengan kombinasi Virtual DOM yang efisien dan hosting yang terpercaya, kamu bisa memberikan performa terbaik bagi pengguna aplikasi webmu.