Front-end with Vue.js & Setup Basic Project

Vue JS adalah framework JavaScript untuk membangun antarmuka pengguna yang dibangun di atas HTML, CSS, dan JavaScript standar, dan menyediakan model pemrograman deklaratif dan berbasis komponen yang membantu mengembangkan antarmuka pengguna secara efisien, baik itu sederhana atau kompleks.

Dua fitur inti Vue;

1. Declarative Rendering: Vue memperluas HTML standar dengan sintaks template yang memungkinkan kita untuk mendeskripsikan output HTML secara deklaratif berdasarkan status JavaScript.
2. Reactivity: Vue secara otomatis melacak perubahan status JavaScript dan memperbarui DOM secara efisien saat terjadi perubahan.

Poin-poin;

Target dan Konsep

Awalnya, VueJS dikembangkan sebagai cara untuk mengambil bagian terbaik dari Angular, dan membangun alat khusus di sekitarnya. Pengikatan data dan cara yang didorong data untuk menangani Model Objek Dokumen atau DOM berbasis HTML lebih disukai daripada bekerja dengan DOM secara langsung.

Vue adalah framework progresif sumber terbuka yang dirancang untuk dapat diadopsi secara bertahap, karena pustaka inti difokuskan di sekitar lapisan tampilan saja. Karena itu, ini lebih dari mampu untuk memberi daya pada aplikasi satu halaman yang canggih dengan bantuan alat modern dan jika ada perpustakaan untuk mendukungnya.

Keuntungan dan Kekurangan

Keuntungan;

• Ukuran yg kecil; Vue.js memiliki ukuran unduhan yang sangat kecil sekitar 18 KB yang sangat baik dibandingkan dengan kerangka kerja lain dengan ukuran besar.

• Arsitektur yang didasarkan pada Component; Vue adalah kerangka kerja yang memungkinkan pembuatan aplikasi web dalam Arsitektur Berbasis Komponen. Ini berarti Anda membuat aplikasi dari komponen mandiri yang dapat digunakan kembali. Idealnya tidak ada komponen yang harus bergantung satu sama lain. Ini adalah cara yang bagus untuk membangun aplikasi skala besar yang dapat dipelihara. Vue.js menggunakan arsitektur berbasis komponen, sehingga memisahkan potongan besar kode menjadi komponen yang lebih kecil. Selain itu, di Vue.js, semuanya adalah komponen, dan setiap komponen ditulis dengan HTML, CSS, dan JavaScript, sehingga mendorong keterbacaan dan kesederhanaan.

• Alat-alat sistem yang padat; Vue.js mendukung banyak alat pengembangan frontend langsung dari kotak dengan sedikit atau tanpa konfigurasi dari Anda. Misalnya, Vue.js mendukung alat seperti Babel dan Webpack. Selain itu, ia menyediakan pengujian unit, perpustakaan end to end testing, sistem perutean yang fleksibel dan mudah digunakan, state management, rendering sisi server (SSR), dan banyak lagi.

• Mudah digunakan; Ini memodernisasi pendekatan pengembangan web yang biasa, memudahkan pemula mana pun untuk langsung terjun dan merasa nyaman hanya dengan beberapa latihan.

Kekurangan;

• Kompleksitas Reaktivitas; Implementasi pengikatan dua arah (two-way data binding) di Vue.js adalah alat yang berguna untuk mengelola komponen Vue.js. Pengikatan dua arah mengacu pada berbagi data antara kelas komponen dan template nya; itu dikembangkan sehingga jika data berubah di satu lokasi, secara otomatis memperbarui yang lain.

• Sumber Daya Komunitas; Awalnya, Vue.js diadopsi terutama oleh orang Cina, dengan perusahaan besar seperti Xiaomi dan Alibaba membantu mempopulerkan kerangka kerja dan menciptakan permintaan di pasar tenaga kerja. Namun, dengan adopsi yang signifikan dari banyak perusahaan China, banyak forum, saluran diskusi, dan sejenisnya sebagian besar dalam bahasa China, membuat adopsi menjadi sulit bagi pengembang yang tidak berbahasa asli.

• Risiko fleksibilitas yang berlebihan; Vue.js sangat fleksibel dan mudah digunakan. Oleh karena itu, mudah untuk memiliki banyak kode spageti di mana-mana karena setiap orang dalam tim perusahaan dapat memiliki pendapat yang berbeda tentang cara melakukan sesuatu.

Inisiasi Proyek Vue 3

Inisiasi proyek menggunakan Vite

1. Pastikan sudah menginstall Node JS beserta NPM
   • Node JS versi LTS
   • NPM versi 8
2. Buka terminal pada folder khusus, contoh; "D:/Documents/GitHub/Projects/"
3. Ketik perintah "npm init vue@latest"
4. Sesuaikan konfigurasi awal sebagai berikut;
   • name; 'fe-trial'
   • typescript; no
   • jsx; no
   • router; yes
   • pinia; yes
   • vitest; no
   • cypress; no
   • eslint; yes
   • prettier; no
5. Ketikkan "code fe-trial" untuk membuka nya di VS Code. Jika tidak bisa, silahkan buka manual folder proyek tadi langsung melalui VS Code
6. Setup VS Code extension
   • Volar (Vue Language Feature)
   • ESLint
   • Prettier
7. Setup Browser extension; VueJS devtools;

Analisis Fitur Dasar dari Vue 3

1. Mulai developing
   • Buka terminal VS Code
   • Ketikkan perintah; "npm run dev"
   • Buka browser dan arahkan ke url "localhost:5173"
2. Struktur folder src dari project Vue 3
   • views (berisi SFC yg dikelompokkan berdasarkan route)
     • Buat file baru disini, namakan sebagai "TestView.vue"
     • Isi dengan kode berikut
     • 
       
   • router (berisi deklarasi router; contoh untuk path /home diarahkan ke views HomeView.vue)
     • Tambahkan konfigurasi route baru pada file index.js di folder router
     • 
       
     • Akses "localhost:5173/test" pada browser
     • Edit "App.vue"
     • 
       
     • buka kembali browser, telah muncul navigasi baru bernama "Test"
     • cermati kode pada baris ke 16
     • ubah "name: 'test'" menjadi "path: '/test'"
     • analisis perbedaan tersebut
   • components (berisi komponen-komponen yang dapat digunakan ulang, contoh; button, input form)
     • tambahkan tag input pada file "TestView.vue", deklarasikan data baru dengan sesuai baris 7-9, lalu panggil data tersebut dengan v-model
     • 
       
     • buka browser, lalu buka vue devtools
     • 
       
     • coba ketikkan "test" pada input yg dibuat tadi, lalu lihat perubahannya pada devtools, perubahan realtime tersebut bernama 2-way data binding dari Vue
     • buat file baru bernama "BaseInput.vue" di folder components
     • 
       
     • cermati bagian emits, props, dan @input
     • @ adalah shorthand dari v-on directive, digunakan untuk menghandle event
     • $emit digunakan untuk mengirimkan event ke parent
     • lalu update:modelValue digunakan untuk mengupdate v-model parent
     • props digunakan sebagai jembatan antara parent dan children komponen
     • ubah file "TestView.vue" menjadi seperti ini
     • 
       
     • cermati import component
     • cermati juga deklarasi komponen
     • lalu cermati pemanggilan komponen pada template
     • analisis dan kembangkan dengan type input yg lain
3. Source Code dari Vue SFC (Single File Component)
   • <script setup lang="ts"></script>
   • <template lang="pug"></template>
   • <style lang="scss" scoped></style>