Panduan Lengkap Membangun SPA Fungsional Dari Scratch
Kerangka front-end membantu pengembang membuat aplikasi web modern yang disebut aplikasi halaman tunggal (SPA). SPA biasanya mengunduh kode aplikasi awal (HTML, CSS, dan JavaScript) dari sisi server, dan sumber daya berikutnya dimuat secara dinamis ke halaman, biasanya sebagai respons terhadap tindakan pengguna.
React, Angular.js, Ember.js, dan Vue.js adalah beberapa framework web front-end paling populer yang digunakan saat ini. Masing-masing menawarkan keunggulan dan keterbatasan spesifik dibandingkan yang lain, tetapi Vue.js populer sebagai jalan tengah yang ideal.
Tutorial ini akan membantu Anda mempelajari Vue.js dengan cepat. Kami akan membahas konsep utama kerangka kerja saat kami membangun aplikasi Vue baru.
Pengetahuan JavaScript adalah prasyarat untuk menggunakan Vue.js.
Hari ini kita akan mempelajari:
- Apa itu Vue.js?
- Vue.js dibandingkan dengan framework lainnya
- Konsep dan fitur Vue.js
- Contoh kode Vue.js
- Penggunaan Vue.js tingkat lanjut
- Apa yang harus dipelajari selanjutnya
Apa itu Vue.js?
Dibuat oleh Evan You pada tahun 2013, Vue.js adalah kerangka kerja JavaScript deklaratif yang progresif untuk membuat aplikasi satu halaman yang cepat. Ini progresif karena dapat dengan mudah menskalakan dari perpustakaan ke kerangka fitur lengkap.
Vue menawarkan ekosistem yang dapat diadopsi yang dapat menskalakan antara pustaka dan kerangka kerja berfitur lengkap. Ini menjadi semakin populer selama bertahun-tahun, dengan 176 ribu bintang GitHub
Berdasarkan arsitektur MVC, Vue (diucapkan “tampilan”) difokuskan hanya pada lapisan tampilan, dan Vue menyediakan sistem yang memungkinkan Anda membuat perubahan secara deklaratif pada DOM. Ini berarti Anda tidak perlu khawatir tentang bagaimana UI aplikasi Anda dirender atau bagaimana perubahan diterapkan ke DOM.
Di bawah terpal, Vue menggunakan Virtual DOM untuk membuat perubahan yang diperlukan pada UI dan status aplikasi Anda.
Ada beberapa cara untuk menambahkan Vue ke sebuah proyek.
Impor sebagai paket CDN di halaman
Pada laman web HTML yang ada, tambahkan baris kode berikut di dekat tag <body> penutup.
<script src="https://unpkg.com/vue@next"></script>Menggunakan manajer paket
Anda dapat menginstal Vue pada proyek yang ada dengan menjalankan npm install vue@next.
Alternatifnya, jalankan yarn add vue@next jika Anda menggunakan manajer paket Yarn. Tag @next memberi tahu manajer paket kami untuk menginstal versi stabil terbaru.
Menggunakan alat CLI resmi
Vue menyediakan alat Antarmuka Baris Perintah, yang dapat merancah proyek dengan pengaturan build yang telah ditentukan untuk alur kerja frontend modern.
Menjelang akhir artikel ini, kita akan menjelajahi manfaat menggunakan CLI yang disediakan dan mempelajari cara menyiapkan proyek siap produksi menggunakan template awal.
Perhatikan bahwa menggunakan CLI memerlukan pemahaman tentang alat build front-end.
Vue.js dibandingkan dengan framework lainnya
Ada tiga framework front-end JavaScript yang populer:
- Vue.js
- Angular
- React
Semua kerangka kerja ini memiliki filosofi dan tujuan yang sama. Salah satu perbedaan utama adalah bahwa Angular dikembangkan oleh Google, dan React dikembangkan oleh Facebook. Vue.js tidak memiliki perusahaan teknologi besar di balik pengembangannya.
Vue.js sering dianggap sebagai jalan tengah. Ini menawarkan lebih banyak alat daripada Bereaksi tetapi lebih sedikit dari Sudut. Selain itu, sintaks Vue.js lebih sederhana. Vue.js juga menawarkan manajemen status bawaan dan vue-router, router resmi Vue.js.
Namun, ini tidak menampilkan fungsi klien HTTP atau validasi formulir. Vue berfokus pada membangun antarmuka pengguna dan membuat komponen yang dapat digunakan kembali.
Vue.js juga berbeda dari perpustakaan lain yang lebih kecil.
- jQuery adalah pustaka JavaScript kecil yang membuat vanilla JS lebih mudah untuk ditulis. jQuery memiliki build-step tambahan yang tidak dimiliki Vue, yang membuat Vue lebih fleksibel.
- Node.js adalah kerangka kerja lintas platform, back-end yang mengeksekusi kode JavaScript di sisi server. Tidak seperti Vue.js, tidak ada DOM yang digunakan.
- Nuxt.js adalah kerangka kerja frontend berdasarkan Vue.js. Nuxt.js dan Vue.js menangani logika secara berbeda karena Vue selalu berjalan di sisi klien sedangkan Nuxt.js tidak.
Konsep dan Fitur Vue.js
Desain Vue memungkinkan Anda mengadopsi kerangka kerja sesedikit yang Anda inginkan, membuatnya mudah untuk diintegrasikan ke dalam proyek yang sudah ada. Di bawah ini, kami akan membuat aplikasi To-Do sederhana untuk mendemonstrasikan kemudahan adopsi Vue sambil mempelajari konsep inti framework.
Struktur File Vue.js
Seperti banyak kerangka kerja frontend lainnya, Vue.js memungkinkan pengguna membagi halaman web menjadi komponen yang dapat digunakan kembali, masing-masing dengan HTML, CSS, dan JavaScript sendiri untuk merendernya.
Templat HTML dan Vue CDN
Mari kita mulai dengan membuat file index.html di folder bernama vue-todo. Buka terminal dan jalankan perintah berikut:
mkdir vue-todo
cd vue-todo
touch index.htmlKami akan memulai dengan template HTML kosong dan menambahkan Vue dari CDN. Untuk melakukan ini, buka file index.html yang baru Anda buat dengan editor teks dan tambahkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Vue!</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
</body>
</html>Termasuk paket Vue melalui CDN seperti yang telah kita lakukan di atas, membuat objek Vue tersedia secara global. Objek ini berisi metode untuk membuat instance aplikasi dan komponen pendaftaran.
Membuat Instance Aplikasi
Aplikasi Vue biasanya diatur ke dalam pohon komponen bersarang yang dapat digunakan kembali. Komponen yang digunakan sebagai titik awal untuk aplikasi, disebut sebagai komponen root, dirender ketika kita memasangnya ke DOM.
Vue menyediakan sebuah metode yang disebut createApp() yang menerima opsi untuk mengonfigurasi komponen root dan mengembalikan instance aplikasi. Kita kemudian dapat me-mount aplikasi menggunakan metode mount().
Melanjutkan contoh kami, tambahkan kode berikut untuk menyiapkan aplikasi Vue Anda:
<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
const TodoApp = {};
const app = Vue.createApp(TodoApp);
app.mount("#app");
</script>Kami menggunakan <div> dalam dokumen kami sebagai simpul DOM target untuk aplikasi kami. Perhatikan bahwa kita dapat meneruskan opsi ke metode createApp().
Mari menginisialisasi daftar tugas kita sebagai larik kosong untuk saat ini. Ubah objek TodoApp agar terlihat seperti ini:
const TodoApp = {
data() {
return {
todos: [],
};
},
};Saat instance Vue dibuat, ia mencari elemen di halaman web untuk dikontrol. Itu dapat didefinisikan dengan menetapkan elemen itu sebagai id (biasanya div). Id ini kemudian disebutkan dalam instance Vue sebagai nilai kunci el.
<!-- This is the div that is assigned the id= 'app' -->
<div id='app'></div>
<script>
new Vue({
// This `id` is used as a value of `el` so that it knows
// which element `Vue` should be mounted on.
el: '#app'
})
</script>Sintaks Templat
Jika Anda memiliki pengalaman dengan HTML dan JavaScript, apa yang telah kami lakukan sejauh ini seharusnya terasa familiar. Ini adalah salah satu keunggulan Vue.js dibandingkan framework front-end seperti React dan Angular.
Kembali ke aplikasi kita, kita memerlukan cara untuk merender item dalam daftar Tugas kita dan menambahkan/menghapus item. Untuk merender data, Vue menyediakan cara mudah untuk melakukannya.
Pertama, tambahkan contoh item daftar Tugas ke larik Anda:
todos: [
{
title: "Shop for Christmas",
},
],Selanjutnya, perbarui HTML Anda agar terlihat seperti berikut:
<ul>
<li v-for="todo in todos">
{{ todo.title }}
</li>
</ul>Atribut v-for di sini memungkinkan kita untuk menautkan dan merender daftar ke DOM. Ini disebut direktif, dan seperti yang sudah bisa Anda tebak, ini berperilaku seperti loop for-in JavaScript.
Direktif diawali dengan v- untuk mengindikasikan bahwa mereka adalah atribut khusus yang disediakan oleh Vue. Mereka menerapkan perilaku reaktif khusus ke DOM yang dirender.
Penggunaan kurung kurawal ganda menginterpretasikan data dari komponen contoh sebagai teks biasa. Ini dikenal sebagai interpolasi teks.
Ekspresi JavaScript didukung dan akan dievaluasi sebagai JavaScript dalam cakupan data instance aktif saat ini.
Komponen dan Props
Komponen adalah instans Vue yang dapat digunakan kembali yang dapat dilampirkan ke aplikasi atau instans komponen root. Mereka menerima opsi yang sama sebagai instance root, seperti:
- data
- computed
- watch
- methods
- lifecycle hooks
Komponen harus didaftarkan ke instance aplikasi sebelum dapat dirender. Kita bisa melakukan ini dengan metode component(). Anda akan menemukan komponen yang sangat berguna untuk menjaga basis kode Anda rapi dan teratur saat Anda mulai membuat aplikasi yang lebih besar.
Mari buat beberapa perubahan pada aplikasi Todo kita untuk melihat komponen beraksi. Pertama, kami akan mengganti tag awal dan akhir <li> dengan yang berikut:
<todo-item
v-for="todo of todos"
v-bind:title="todo.title"
></todo-item>Selanjutnya, tambahkan baris berikut tepat sebelum app.mount():
app.component("todo-item", {
props: {
title: String,
},
template: `
<li>
{{ title }}
</li>
`,
});Anda bisa melihat jika kami sudah membuat dan mendaftarkan komponen baru bernama todo-item ke instance program kami. Properti props tentukan data yang bisa dilanjutkan ke komponen dari program induk atau turunan komponennya.
Nilai yang diserahkan ke properti template harus berbentuk string berisi HTML yang akan dirender.
Komponen dirender dalam HTML dengan melanjutkan nama komponen ke tag khusus. Dalam program contoh kami, ini seperti terlihat . Direktif v-bind dipakai untuk mengikat atribut atau prop komponen ke ekspresi.
Di sini, kami menggunakannya untuk melanjutkan data secara aktif dari loop kami ke komponen.
Metode
Sistem komponen bisa dijangkau dari dalam template komponen. Kita bisa menambah sistem ke instance komponen dengan melanjutkan object dengan sistem yang diharapkan ke pilihan sistem komponen.
Vue dengan cara otomatis mengikat nilai this untuk sistem hingga selalu mengarah ke instance komponen.
Catatan: Anda harus menghindar penggunaan sistem panah saat mendeskripsikan sistem, karena hal tersebut menahan Vue mengikat nilai this yang tepat.
Lihatlah contoh penggunaan sistem dalam instance komponen berikut ini.
index.js:
const TodoApp = {
data() {
return {
todos: [
{
title: "Shop for Christmas",
},
],
todo: "",
};
},
methods: {
addTodo() {
if (this.$data.todo.length > 0) {
this.$data.todos.push({ title: this.$data.todo });
this.$data.todo = "";
}
},
},
};index.html:
<div>
<input v-model="todo" />
<button v-on:click="addTodo">Add todo</button>
</div>Komponen kita telah dimodifikasi untuk memiliki properti data tambahan, todo, yang nilainya akan kita ikat ke tag <input /> di HTML. Kami juga menambahkan metode addTodo() untuk membuat item tugas baru dengan nilai masukan.
v-model adalah direktif yang digunakan untuk membuat data binding dua arah pada input form, textarea, dan elemen pilih. Secara otomatis memilih cara yang benar untuk memperbarui elemen berdasarkan jenis masukan. Direktif v-on mendengarkan event DOM.
Dalam contoh kita, ini digunakan untuk memanggil metode addTodo() saat tombol diklik.
Contoh kode Vue.js
Sekarang setelah kita memahami dasar-dasar cara membuat aplikasi Vue.js, mari selami lebih dalam fungsi-fungsi yang berbeda dengan beberapa contoh kode. Ini adalah tugas umum yang kemungkinan besar akan Anda terapkan di aplikasi Anda sendiri.
Dengarkan saat elemen diklik
JS:
new Vue({
el: '#app',
methods: {
doSomething() {
alert('Clicked!');
}
}
});HTML:
<div id="app">
<button @click="doSomething">Click here</button>
</div>Kelas yang mengikat
JS:
new Vue({
el: '#app',
data: {
className: 'red-text'
}
});HTML:
<div id="app">
<div id="content" :class="className">
Text Text
</div>
</div>Perbarui konten komponen
JS:
new Vue({
el: '#app',
data: {
content: ''
}
});HTML:
<div id="app">
<div v-html="content"></div>
<input type="text" placeholder="Enter your text" v-model="content">
</div>Bangun input pilih dari array
JS:
new Vue({
el: '#app',
data: {
socialNetworks: ['Twitter', 'Facebook', 'TikTok', 'LinkedIn', 'MySpace']
}
});HTML:
<div id="app">
<span>Social Networks:</span>
<select id="networks">
<option v-for="(network, index) in socialNetworks" :value="index">{{ network }}</option>
</select>
</div>Penggunaan Vue.js tingkat lanjut
Penyiapan kami sejauh ini (termasuk build terpaket dari CDN) terlihat bagus dan bekerja dengan sangat baik untuk proyek berukuran kecil hingga menengah di mana JavaScript hanya digunakan untuk meningkatkan tampilan tertentu. Namun, dalam proyek yang lebih kompleks, atau saat frontend Anda sepenuhnya didorong oleh JavaScript, kerugian ini menjadi jelas:
- Definisi global memaksa nama unik untuk setiap komponen
- Templat string tidak memiliki penyorotan sintaks dan membutuhkan garis miring jelek untuk HTML multibaris
- Tidak ada dukungan CSS berarti bahwa sementara HTML dan JavaScript dimodulasi menjadi komponen, CSS secara mencolok ditinggalkan
- Tidak ada langkah build yang membatasi kita ke JavaScript HTML dan ES5 daripada preprosesor seperti Pug (sebelumnya Jade) dan Babel
Semua ini diselesaikan dengan komponen file tunggal dengan ekstensi .vue. Tersedia juga banyak komponen, pustaka, dan alat sumber terbuka yang dapat meningkatkan fungsionalitas dan pengalaman pengembangan aplikasi Anda.
Anda dapat menggunakan CLI Vue untuk mem-bootstrap proyek dengan cepat dengan pengaturan konfigurasi alat yang paling umum untuk Anda. Untuk memulai, jalankan perintah berikut.
Ini akan menginstal vue-cli secara global dan membuat biner vue tersedia dari mana saja di baris perintah Anda.
// using npm
npm install -g @vue/cli
// using yarn
yarn global add @vue/cliSetelah terinstal, Anda dapat membuat proyek menggunakan perintah vue create app-name. Anda akan diberi petunjuk tentang konfigurasi proyek Anda. Anda dapat memilih untuk menggunakan default atau mengatur konfigurasi Anda sendiri.
Menjalankan perintah ini dengan CLI versi 4.5 memberikan hasil sebagai berikut:
Jika Anda memilih untuk menggunakan preset Vue v3, perintah tersebut akan membuat direktori proyek yang terlihat seperti berikut:
Apa yang harus dipelajari selanjutnya
Itu saja yang Anda perlukan untuk mulai menggunakan Vue dengan alat dan fitur JavaScript modern untuk mengembangkan aplikasi kaya fitur!
Meskipun kami telah belajar banyak untuk membangun aplikasi tugas yang sangat sederhana ini, kami baru saja menyentuh permukaan dari apa yang mampu dilakukan oleh Vue. Ada juga banyak lagi konsep yang masih harus dipelajari, termasuk yang berikut:
- Render kondisional
- Binding kelas dan gaya
- Pengubah acara dan masukan
- Plugin Vue.js
- Vuex: pola pengelolaan negara
Lanjutkan membaca tentang Vue.js di Educative
- Buat aplikasi dari nol dengan Vue.js
- Tulis dan uji komponen pertama Vue.js Anda dengan Jest
- Membandingkan kerangka kerja JavaScript frontend paling populer