Mencoba Belajar Framework Vue.js dan SPA-nya
Beberapa minggu terakhir ini, saya mendapat kesempatan untuk belajar mengenal framework JavaScript yang sedang naik daun ini, dengan warna hijau sebagai warna dasarnya. Yaitu Vue.js versi 2.x . Lalu mengapa belajar Vue.js ? dan tidak belajar React atau lanjutkan saja belajar Angular saja ?
Sebenarnya saya belajar Vue.js juga karena tuntutan pekerjaan. Dimana saya mendapat tugas untuk membantu menulis kode dan mengecek kode dari sebuah project website. Project website ini sebelumnya menggunakan campuran antara jQuery dan React, namun karena suatu alasan, si pemilik project ini ingin memigrasikan website nya menjadi menggunakan Vue.js dan SPA. Alasannya yaitu si pemilik project ingin agar framework yang dipakai oleh websitenya menggunakan framework yang dikembangkan oleh komunitas, kemudian ingin agar kode-kodenya menjadi lebih mudah dibaca dan dipahami tim mereka, dan juga ingin beberapa library dikembangkan oleh komunitas yang sama (di dalam Vue ada seperti Vuex, Vue Router, Vue DevTools, integrasi ke CSS library, dst…) , dan alasan teknis yang lainnya.
Saya tidak akan membahas lebih lanjut mengenai project web tersebut apalagi sampai memberitahu link nya, karena merupakan rahasia pekerjaan dan klien juga. Tapi saya akan membahas proses pembelajaran saya dalam mengenal Vue ini.
Langsung Menggunakan Vue CLI
Pada halaman dokumentasi resminya tentang instalasi framnework Vue.js , memang cukup mudah. Library Vue.js dapat ditambahkan dengan menggunakan link dari CDN saja pada bagian head dari HTML .
Cukup simpel dan framework Vue pun bisa langsung dipakai di file index.html dan script yang dihubungkan ke index.html tersebut. Tapi kelemahan dari metode ini adalah sintaks atau kode JavaScript yang dipakai mesti menggunakan standard ES5 atau standard yang dimengerti oleh browser kebanyakan. Selain itu dengan metode ini , kita tidak bisa membuat komponen dalam format file .vue , membuat web dengan SPA (Single Page Application) , dan menikmati keajaiban dari code splitting dan kompresi file project oleh Webpack.
Untuk itu saya pun memilih menggunakan dan memasang Vue CLI yang sesuai dari dokumentasi di situs Vue nya.
Proses instalasinya cukup mudah dengan menggunakan NPM dari Node.js
Dengan menggunakan Vue CLI ini, maka web yang dibuat menjadi mode Single Page Application (SPA) , bisa menggunakan komponen dengan format file .vue , dan juga beberapa fitur tambahan dengan adanya Webpack tadi. Sintaks JavaScript yang dipakai pun bisa menggunakan ES2015 ke atas atau ES6 , sehingga kode menjadi ringkas dan lebih rapi.
Separation Concern atau File Terpisah-pisah
Sewaktu saya menggunakan Angular versi terbaru yang menggunakan Angular CLI , salah satu fitur favorit saya adalah file-file untuk komponennya dipisah. Yaitu file TypeScript, HTML, dan CSS nya tidak dijadikan dalam satu file, tapi hanya dihubungkan melalui link referensi saja di dalam projectnya. Contohnya dapat dilihat pada screenshot di bawah ini :
Kelebihannya dari konsep terpisah ini adalah kode JavaScript/TypeScript , HTML, dan CSS tidak tercampur aduk dalam satu file. Yang mana tidak membuat semakin pusing jika kode-kode dari setiap jenis tersebut semakin panjang ke bawah.
Di dalam Vue, ada format file .vue yang di dalamnya ada gabungan template, script, dan style . Dimana untuk file template HTML, JavaScript, dan CSS nya tergabung dalam satu file.
Namun setelah saya baca-baca ke bawah dokumentasinya, file .vue ini mendukung separation concern (file) , dengan bantuan Webpack dan vue-loader , yang akan terpasang otomatis jika menggunakan template Vue CLI Webpack. File-file HTML, JS, dan CSS dapat dipisah dalam satu folder, kemudian di dalam file .vue tadi cukup dihubungkan saja dengan tag src .
Struktur folder untuk satu komponen pun menjadi terpisah menjadi seperti gambar di bawah ini. Cukup memudahkan bagi saya untuk mengatur kode-kode dari Vue JS ini.
Mencari Sumber Latihan yang Tepat di Internet
Berikutnya adalah mencari sumber latihan yang bisa dipakai dari internet, referensi yang saya dapat adalah dari web dokumentasi resmi di
dan juga video latihan Youtube yang saya dapat dari channel Net Ninja ini :
Kemudian saya dapatkan juga video latihan dari channel Laracast berikut ini tentang Vue.js 2 .
Saya pun mengikuti latihan dari video-video tersebut, sambil membuka referensi dokumentasi di situs Vue.js dan juga Mozilla Web Docs untuk bantuan referensi penulisan JavaScript ES2015 ke atas.
Lazy Loading Component dan Module Router yang Simpel
Masalah muncul ketika saya sudah mencapai beberapa latihan, dan membuka halaman latihan menjadi lambat karena komponen-komponen latihan sebelumnya langsung dimuat sekaligus. Setelah saya telusuri lebih lanjut ke dalam dokumentasi tentang Routing Navigation di Vue.js , terdapat metode lazy loading component untuk mempercepat memuat halaman. Ini dikarenakan router dan browser hanya akan memuat komponen yang dibutuhkan di dalam halaman yang sedang dibuka.
Mengaktifkan fitur Lazy Loading ini pun cukup mudah di dalam Vue.js , dan dengan bantuan compiler Webpack tentunya. Penulisan kode untuk memuat komponen secara malas ini cukup menggunakan fat arrow function yang menghasilkan Promise, bisa dilihat dibawah ini.
Dengan menggunakan penulisan tersebut, Webpack akan membacanya sebagai tanda untuk pemecahan kode js menjadi beberapa “chunk” atau pecahan. Tidak lupa kita berikan sebuah comment /* webpackChunkName: “nama_pecahan_kode_js” */ , sehingga ketika hasil build selesai, kita dapat melihat nama pecahan komponen dan juga ukurannya dari hasil compile Webpack tersebut. Contohnya dapat dilihat di gambar di bawah ini.
Pecahan-pechan file JS tersebut akan dimuat pada halaman-halaman dan komponen yang membutuhkan ketika dibuka oleh browser. Pembuatan lazy loading untuk setiap komponen di Vue ini terbilang cukup simpel jika dibandingkan lazy loading di Angular yang selama ini saya pakai.
Masalah Ketika Deploy ke Github Pages
Dalam mengikuti latihan dari situs dan video Youtube di atas, hampir tidak ditemui masalah. Masalah-masalah yang muncul seperti penulisan yang salah menurut ESLint ataupun standard ES6 juga bisa diatasi dengan membuka situs dokumentasi ESLint dan Mozilla Web Docs . Masalah untuk mencoba memasukkan library CSS dan JS pihak ketiga juga sudah banyak ditemui di Stackoverflow dan situs-situs blog untuk mengatasi nya.
Tetapi ada masalah muncul, ketika saya ingin menaruh file-file hasil build di folder /dist hasil npm run build , ke dalam Github Pages. Masalah ini tidak muncul ketika saya deploy ke Firebase Hosting, tetapi muncul ketika saya coba taruh ke Github Pages.
Masalah yang muncul yaitu file-file .js , html, css, dan aset gambar tidak bisa dimuat karena link referensi nya salah. Error yang muncul di konsol browser, ketika di cek, yaitu Error 404 atau Not Found (https://http.cat/404).
Setelah ditelusuri, diketahui masalahnya adalah base href url dan juga assetsPublicPath nya yang perlu disetel. Yang saya dapatkan dari referensi nya juga disini :
Saya membuka file yang ada di folder config/index.js , kemudian pada bagian object build di assetsPublicPath perlu diganti sesuai dengan nama repository Github tempat Github Pages itu akan berjalan.
Setelah itu disetel, kemudian jalankan npm run build . Kemudian isi folder /dist tadi kita unggah ke repository Github yang akan menjadi Github Pages . Hasilnya dari Github Pages yang berisi hasil latihan dapat dilihat dan diakses disini https://gulajavaministudio.github.io/demo-latihan-vues/#/ :
Saya juga sudah taruh kode sumber aplikasi web yang berisi demo-demo sederhana dan tidak jelas, hasil belajar mengikuti latihan video tutorial , ke dalam Github Public ini.
Akhir kata…
Demikian tulisan singkat tentang pengalaman mencoba framework Vue.js . Saya lihat framework ini memiliki potensi yang besar untuk situs-situs web dengan skala menengah sampai simpel. Dimana performa hasil nya cukup cepat dan sintaks kodenya juga sederhana. Ke depan mungkin akan saya coba mempelajari state management Vuex , masih menggunakan referensi yang sama dari kanal Youtube NetNinja di atas.
