Belajar Vue - Sejarah, Latar Belakang & Mengapa Membutuhkan Vue

#Pendahuluan

Sebelum menulis baris kode Vue pertama, penting untuk memahami dari mana Vue berasal dan masalah apa yang dia pecahkan. Framework bukan sekadar kumpulan API — dia adalah jawaban terhadap kesulitan tertentu. Ketika kalian paham masalahnya, setiap keputusan desain di Vue akan terasa masuk akal, bukan sekadar aturan yang harus dihafal.

Episode 1 menceritakan perjalanan Vue dari proyek pribadi menjadi salah satu framework frontend terpopuler di dunia, membedah filosofi progressive framework, lalu membandingkannya dengan pendekatan tradisional dan React. Ini adalah episode cerita dan konteks — tidak banyak kode, tapi pemahaman yang dihasilkan akan menyertai kalian selama 23 episode berikutnya.

#Evolusi dan Sejarah Vue

#Kelahiran dan Versi Awal

Vue pertama kali dirilis oleh Evan You pada tahun 2014. Evan saat itu bekerja di Google dan memakai Angular untuk berbagai proyek. Dia merasa Angular terlalu berat untuk kebutuhan tertentu, lalu mulai menulis library yang lebih ringan dan lebih mudah diadopsi — sesuatu yang bisa mengambil bagian terbaik dari Angular tanpa memaksakan seluruh ekosistemnya.

2014 -> Vue 1: reactive binding dan template dasar
2016 -> Vue 2: Virtual DOM, komponen, dan Vuex
2020 -> Vue 3: Composition API dan Proxy reactivity

Vue 2 yang rilis tahun 2016 menjadi titik lompatan popularitas berkat Virtual DOM, sistem komponen yang matang, dan Vuex untuk state management. Komunitas tumbuh cepat dan dokumentasi berbahasa non-Inggris yang lengkap membuat Vue diminati developer di seluruh dunia.

#Vue 3 dan Revolusi Internal

Vue 3 rilis tahun 2020 sebagai penulisan ulang besar-besaran. Dua perubahan paling fundamental:

• Composition API: cara baru mengorganisasi logika berbasis fungsi, menggantikan cara berbasis option yang tersebar.
• Proxy-based reactivity: sistem reaktivitas ditulis ulang memakai Proxy JavaScript sehingga bisa melacak perubahan properti baru dan penghapusan properti secara akurat.

Meski banyak yang berubah, Vue 3 mempertahankan sintaks template dan Options API agar migrasi dari Vue 2 terasa familiar. Pendekatan ini mencerminkan nilai inti Vue: evolusi tanpa perombakan total.

#Pendekatan Progressive Framework

#Adopsi Bertahap

Filosofi utama Vue adalah progressive framework — kalian tidak perlu memutuskan segalanya di awal. Sebuah halaman web biasa bisa menambahkan satu Vue app kecil hanya untuk bagian tertentu, misalnya form atau komponen counter, tanpa menulis ulang seluruh situs:

Vue di dalam satu halaman HTML

<div id="app">{{ message }}</div>
 
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const { createApp } = Vue;
createApp({
  data() {
    return { message: "Halo Vue" };
  },
}).mount("#app");
</script>

Kode di atas cukup dimuat lewat satu tag script — Vue langsung bekerja di halaman yang sudah ada. createApp({...}).mount("#app") membuat aplikasi Vue dan menautkannya ke elemen DOM.

#Dari Widget ke Full Application

Karena adopsi bertahap, kalian bisa berhenti di tingkat mana pun sesuai kebutuhan:

• Tingkat 1: beberapa Vue app di halaman statis untuk interaktivitas ringan.
• Tingkat 2: single-page application dengan Vue Router dan Pinia.
• Tingkat 3: fullstack dengan Nuxt untuk server-side rendering.

Semakin naik level, semakin banyak alat ekosistem yang dipakai, tapi semuanya optional. Vue tidak pernah memaksa — inilah yang membedakannya dari framework yang bersifat all-or-nothing.

#Masalah yang Diselesaikan Vue

#Reactive UI Binding dan Declarative Rendering

Dengan JavaScript vanilla, mengubah data lalu memperbarui DOM adalah pekerjaan manual dan mudah salah:

Pola imperatif yang menyakitkan

const count = document.querySelector("#count");
let value = 0;
document.querySelector("#btn").addEventListener("click", () => {
  value = value + 1;
  count.textContent = value;
});

Di sini kalian mengendalikan langkah demi langkah (imperatif): tambahkan listener, baca elemen, tulis ulang teks. Vue menggantinya dengan declarative rendering — kalian hanya mendeskripsikan tampilan, dan Vue menangani sinkronisasi:

Declarative rendering di Vue

<script setup>
import { ref } from "vue";
const value = ref(0);
</script>
 
<template>
  <p>{{ value }}</p>
  <button @click="value++">Tambah</button>
</template>

ref(0) membuat state reaktif, dan saat value berubah, Vue otomatis memperbarui bagian template yang bergantung padanya. Perhatikan: tidak ada querySelector, tidak ada textContent, tidak ada listener manual.

#Simplifikasi State dan Composition

Masalah kedua yang dipecahkan Vue adalah kompleksitas state dan logika. Di aplikasi besar, kode UI cepat menjadi jalinan callback dan variabel global yang sulit dilacak. Vue menyediakan:

• Composables: logika yang bisa dipakai ulang antar komponen.
• Pinia: store global dengan state, getters, dan actions.
• Reactivity API: ref, reactive, computed, dan watch yang membentuk lapisan data yang terstruktur.

Pendekatan berbasis komponen membuat setiap bagian UI punya batas yang jelas: props masuk, events keluar, dan logika internal tersembunyi. Ini akan kita bangun bertahap mulai episode 5.

#Vue vs React vs Framework Lain

#Perbedaan Fundamental

React dan Vue sama-sama framework komponen berbasis JavaScript, tapi ada perbedaan filosofi:

#Kapan Memilih Vue

Vue paling cocok ketika kalian menginginkan sintaks template yang mudah dibaca, kurva belajar yang landai, dan kemampuan mengadopsi secara bertahap di proyek yang sudah ada. React unggul untuk ekosistem paling luas dan kontrol penuh melalui JSX. Tidak ada pilihan yang salah — keduanya framework kelas dunia, dan memahami keduanya akan membuat kalian developer frontend yang lebih baik.

#Penutup

Episode 1 memberi kalian konteks sejarah dan filosofi: Vue lahir dari kebutuhan akan framework yang ringan dan progresif, berkembang dari Vue 1 ke Vue 3 dengan penulisan ulang besar di tahun 2020, dan memecahkan masalah reactive binding serta kompleksitas state dengan declarative rendering dan composition.

Inti yang harus dibawa pulang:

• Vue diciptakan Evan You pada 2014 sebagai framework yang lebih ringan dan mudah diadopsi.
• Vue 3 menghadirkan Composition API dan Proxy-based reactivity.
• Filosofi progressive framework: adopsi bertahap dari widget ke full application.
• Declarative rendering menggantikan manipulasi DOM manual.
• Vue memakai template HTML; React memakai JSX.
• Tidak ada framework terbaik mutlak — pilih sesuai kebutuhan tim dan proyek.

Di episode 2 selanjutnya kita akan membedah konsep dasar dan arsitektur utama — bagaimana sistem reaktivitas Proxy bekerja di balik layar, peran Virtual DOM dan template compilation, siklus hidup komponen, serta anatomy Single File Component dengan <script setup>, template, dan scoped styles. Ini adalah fondasi teknis untuk semua episode selanjutnya.