Beberapa Hal tentang Vue.js

Beberapa hari terakhir ini, saya bermain-main dengan Vue.js dan bikin aplikasi mainan kecil (seperti stock trader app ini). Sambil sedikit-sedikit dipake juga untuk bikin personal project yang mungkin akan rilis dalam waktu dekat (pantau infonya biar nggak ketinggalan ya 😬).

Impresinya? Well, Very good.

Hmm, kayaknya saya bakal pake Vue.js kedepannya untuk eksperimen-ekperimen yang lain.

Beberapa hal yang saya suka dari Vue adalah ringan, simpel, dari segi performa juga cepat (sekarang lebih cepat dari React JS), dan Vue bisa diimplementasi dengan atau tanpa jQuery.

Disamping punya dokumentasi yang informatif dan mudah diikuti, source code-nya pun sangat readable. Saat menggunakan Vue, saya juga nggak butuh banyak eksternal library, nggak harus install plugin-plugin yang lain untuk bisa langsung dipakai — kalaupun memang mau ada banyak plugin yang udah tersedia.

Saya juga udah cukup nyaman dengan vanilla dari Vue.js. Dan yang nggak bikin pusing adalah Vue.js punya official package untuk routing, ajax, dan state management. Waktu pertama kali belajar React, kendala saya waktu itu adalah nyari libary apa yang mau dipake dan memastikan itu selalu up to date. Dan itu butuh waktu, banget. Dengan pakai Vue, saya bisa langsung pake packages yang yang memang didukung official seperti vuex dan vue-router.

Dan kalau kamu mau implemen Vue.js di code base yang sudah ada, misal di project ruby on rails yang udah kamu bikin, pun nggak ribet. Selain itu, nggak banyak magic di Vue.js, karena basically semua yang ada di dalamnya adalah object.

Lebih dalam lagi, beberapa hal tentang Vue.js:

Strukturnya intuitif

Ini contoh satu file komponen vue:

  <template>
    <div id="home-c">
        <h1>Hello</h1>
    </div>
  </template>

  <script>
    export default {
      // Define your component
    }
  </script>

  <style scoped>
    #home-c { display: block }
  </style>

Dalam sebuah project Vue, setiap komponen dibuat menggunakan format .vue, yang masing-masing punya <script></script> tag tersendiri. Kita bisa import semua dependensi yang diperlukan untuk masing-masing komponen disitu. Kita bisa maintain Vue yang dalam representasi state via data method, dan definisikan inherited properties yang diturunkan dari komponen lain. Kita juga bisa membuat method-method sendiri, dalam object method.

Di bagian lain komponen ini adalah dia punya sebuah template tersendiri, yang mirip seperti render method di React. Menurunkan functions atau props ke children component-nya pun menurut saya cukup intuitif. Dan terakhir tentang komponen ini adalah, masing-masingnya punya styling tersendiri. Apapun styling yang ditulis dalam <style scoped></style> nggak akan mempengaruhi komponen yang lain dan independen (kalau nggak suka, tinggal hapus parameter scoped-nya).

Lifecycle Events

Diagram ini menggambarkan event hooks lifecycle dalam satu instance, mengimplementasikannya sama seperti menambahkan beforeCreate kalau di React. Seiring berjalannya waktu menulis dengan Vue, diagram ini akan sangat berguna. Percayalah.

Vue CLI

vue-cli juga keren. Dengan tool ini kita bisa buat initial projects, yang memang officially diimplementasikan untuk Vue.js. Dan saat ini ada empat pilihan template yang bisa kita pakai: webpack, webpack-simple, browserify, browsery, dan simple. Dari offcicial project template ini kita bisa build project kedalam satu halaman static html/js/css. Atau, bisa juga dibikin seperti Express app dengan mudah. Ini membuat Vue.js cukup bersahabat untuk jadi serverless.

Perbandingannya dengan React?

Disamping beberapa hal yang udah saya bahas diatas, Vue.js mungkin nggak untuk semua orang. Misalnya bagi yang pakai React, udah nyaman dengan proses development yang full Javascript approach, dan nggak mau belajar template DSL (Domain Spesific Language).. IMHO bisa jadi satu alasan valid untuk melihat itu sebagai kekurangan di Vue.js. Tergantung selera masing-masing.

Tapi bagi mereka yang masih terbiasa dengan penggunaan javascript - jQuery dan belum pernah nyoba pendekatan MV* atau Javascript Framework untuk Single Page Application, belajar syntax dan konsep baru dari React.js butuh waktu tersendiri. Dibanding React, Vue punya learning curve yang nggak begitu curam. Dalam hal ini Vue.js menang karena fokus dengan approachability, yang memungkinan mereka dengan pengetahuan dasar html - javascript - css bisa mempelajarinya dalam waktu yang sesingkat mungkin.

Dan seiring berjalannya waktu, melihat komunitas Vue yang semakin aktif, saya jujur semakin penasaran dengan perkembangannya. Kerennya adalah, Vue.js yang notabene one man project tetap bisa stand out ditengah hiruk pikuk Javascript Framework dengan ReactJS-nya Facebook dan Angular-nya Google.

Selain itu, mengelola dan mengembangankan Vue.js sudah jadi full-time job Evan You, authornya Vue.js itu sendiri! kamu bisa cek di https://www.patreon.com/evanyou. Dan doi bener-benar serius untuk ngembangin projectnya ini. Saat saya nulis artikel ini, issues di repo githubnya ada 52 yang open dan ada 3496 yang sudah closed. Dari 52 issues itu mungkin cuman beberapa yang benar-benar bug. Artinya: ini bukan tanda open-source project yang diabaikan dan akan ditinggal dalam waktu dekat ini.

Jadi, apa Vue.js pantas dicoba? Yap. Coba meluncur ke dokumentasi aja, dan luangkan waktu satu atau dua jam bermain-main mulai dari vue-cli dengan full webpack template-nya! 😉