Apa Itu Front End

Apa itu front end

Setiap aplikasi web punya dua sisi. Sisi yang tampil di layar disebut front end. Sisi yang menyimpan data dan logika di server disebut backend. Saat kamu membuka toko online, halaman produk, tombol beli, dan keranjang adalah front end. Harga yang dihitung di server adalah backend.

Front end berjalan di browser. Ia terdiri dari tiga bahasa: HTML, CSS, dan JavaScript. Masing-masing punya satu tugas. HTML menyusun struktur. CSS mengatur tampilan. JavaScript menangani perilaku. Kamu akan memakai ketiganya sepanjang seri ini.

Ada cara mudah membedakan keduanya. Front end adalah apa yang bisa kamu lihat dan sentuh. Backend adalah apa yang terjadi di tempat lain, jauh dari layar. Saat kamu mengisi formulir dan menekan kirim, front end menampilkan formulirnya. Backend yang memproses data setelah tombol ditekan. Keduanya bekerja sama, tapi kamu hanya melihat satu sisi.

Seri ini fokus pada front end. Kamu tidak perlu menyentuh server sama sekali. Semua contoh berjalan di browser, di mesinmu sendiri. Itu membuat belajar lebih mudah, karena hasilnya langsung terlihat tanpa perlu mengatur server.

Sebelum lanjut, ada satu istilah yang akan sering muncul: halaman web. Halaman web adalah satu dokumen yang tampil di browser. Situs web adalah kumpulan halaman yang saling terhubung. Saat kamu membuka toko online, kamu melihat satu halaman. Saat kamu berpindah dari produk ke keranjang, kamu berpindah antar halaman dalam satu situs.

Cara browser menyusun halaman

Browser tidak langsung menggambar halaman. Ia melewati beberapa langkah. Memahami langkah ini membantu kamu tahu di mana sebuah masalah berada.

Langkah pertama adalah HTML parse. Browser membaca file HTML baris demi baris dan mengubahnya menjadi struktur. Struktur ini disebut DOM, singkatan dari Document Object Model. DOM adalah pohon yang mewakili halaman. Setiap elemen, seperti judul atau tombol, menjadi satu cabang di pohon itu.

Langkah kedua adalah render tree. Browser menggabungkan DOM dengan aturan CSS. Hasilnya adalah daftar elemen yang siap digambar, lengkap dengan ukuran dan warnanya. Elemen yang tersembunyi tidak masuk ke sini.

Langkah ketiga adalah paint. Browser menggambar render tree ke layar. Inilah gambar yang akhirnya kamu lihat. Proses ini berjalan sangat cepat, dan browser mengulanginya setiap kali halaman berubah.

Kenapa urutan ini penting? Karena JavaScript bekerja di tengah alur. Ia bisa mengubah DOM, dan browser lalu menyusun ulang render tree dan menggambar lagi. Itulah cara halaman berubah tanpa dimuat ulang.

Bayangkan DOM sebagai kerangka rumah. Render tree adalah rumah yang sudah dicat dan diberi perabot. Paint adalah foto rumah itu yang kamu lihat. Saat kamu memindahkan satu kursi, kamu tidak membangun ulang rumah. Kamu hanya mengubah satu bagian, lalu mengambil foto baru. Browser bekerja dengan cara yang mirip.

Alur ini juga menjelaskan kenapa halaman kadang terasa lambat. Setiap kali JavaScript mengubah DOM, browser harus menyusun ulang render tree dan menggambar lagi. Semakin banyak yang berubah, semakin lama prosesnya. Di bab performa nanti, kamu akan belajar cara meminimalkan kerja ini.

Kenapa tiga bahasa terpisah

Kamu mungkin bertanya kenapa tidak satu bahasa saja. Jawabannya ada pada tugas yang berbeda. HTML menjawab apa isi halaman. CSS menjawab bagaimana tampilannya. JavaScript menjawab apa yang terjadi saat pengguna berinteraksi.

Pemisahan ini membuat kode lebih mudah dirawat. Kamu bisa mengubah warna seluruh situs tanpa menyentuh isi teks. Kamu bisa memperbaiki perilaku tombol tanpa mengubah strukturnya. Tiap bahasa fokus pada satu hal, dan itu membuat pekerjaan lebih jelas.

Ada satu istilah yang perlu kamu kenal sejak awal: DOM. DOM adalah jembatan antara halaman dan JavaScript. Saat JavaScript ingin mengubah halaman, ia mengubah DOM. Browser lalu menggambar ulang. Kamu akan memakai DOM terus-menerus, jadi pahami dulu bahwa ia adalah representasi halaman di memori.

Ketiga bahasa juga punya kecepatan belajar yang berbeda. HTML paling mudah, karena ia hanya menyusun isi. CSS sedikit lebih rumit, karena ia mengatur posisi dan warna. JavaScript paling menantang, karena ia berisi logika. Seri ini mengikuti urutan itu, jadi kamu tidak akan kewalahan.

Ada satu hal yang perlu kamu ingat. Ketiga bahasa tidak berdiri sendiri. Sebuah halaman nyata memakai semuanya sekaligus. HTML menyusun kerangka, CSS menghiasnya, dan JavaScript membuatnya hidup. Kamu akan melihat ketiganya bekerja bersama di setiap contoh berikutnya.

Pasangan contoh

Kode di bawah mengubah teks sebuah elemen saat tombol ditekan. Versi vanilla memakai document.getElementById untuk menemukan elemen lalu mengubah isinya. Versi React memakai komponen dan state untuk hal yang sama.

<p id="pesan">Halo</p>
<button id="ubah">Ubah teks</button>

<script>
document.getElementById("ubah")
  .addEventListener("click", function () {
    document.getElementById("pesan").textContent =
      "Teks berubah!";
  });
</script>

function App() {
  const [pesan, setPesan] = React.useState("Halo");
  return (
    <div>
      <p>{pesan}</p>
      <button onClick={() => setPesan("Teks berubah!")}>
        Ubah teks
      </button>
    </div>
  );
}

Kedua versi melakukan hal yang sama. Vanilla mengubah DOM secara langsung. React mengubah state, lalu React yang memperbarui DOM untukmu. Perbedaan ini akan menjadi tema besar di bab-bab React nanti.

Perhatikan satu hal pada versi React. Ia memakai React.useState untuk menyimpan teks, dan onClick untuk menangkap klik. Kamu tidak perlu memahami semua ini sekarang. Yang perlu kamu lihat adalah bahwa React menyembunyikan langkah menemukan elemen. Kamu cukup menyebut apa yang ingin tampil, dan React mengurus sisanya.

Kedua pendekatan ini akan kamu temui terus sepanjang seri. Vanilla menunjukkan cara kerja yang sebenarnya. React menunjukkan cara ekosistem membungkusnya agar lebih ringkas. Memahami keduanya membuatmu tidak hanya bisa memakai React, tapi juga tahu apa yang terjadi di baliknya.

Demo Hidup

Tombol di bawah mengubah teks halaman lewat DOM. Tekan tombolnya dan lihat teksnya berganti. Ini contoh paling kecil dari cara JavaScript mengubah halaman.

Perhatikan apa yang terjadi. Saat kamu menekan tombol, browser menjalankan kode yang mengubah isi elemen demo-teks. Browser lalu menyusun ulang render tree dan menggambar lagi. Kamu melihat teks baru dalam sekejap. Itulah alur yang baru saja kamu pelajari, bekerja dalam satu klik.

Rujukan

• MDN: How the web works
• MDN: Introduction to the DOM
• MDN: HTML
• web.dev: How browsers work