Interaktivitas dinamis menggunakan Vue.js 2.0

Era kini sebuah sistem front-end sering kali tidak hanya digunakan untuk menampilkan informasi. Google Mail misalnya, menciptakan tampilan front-end yang kaya akan interaksi mulai dari menulis email, mem-filter dan mencari email, hingga konfigurasi email itu sendiri.

Pastinya, menciptakan sistem yang dapat melakukan berbagai hal kaya interaksi tersebut, bukanlah hal yang mudah untuk dilakukan. Nah, Vue.js bisa mencoba menghadirkan solusi untuk membuat aplikasi front-end kaya interaksi.

Kenapa Vue.js?

Sebagai pengguna, kita perlu bertanya dan menimbang kenapa harus menggunakan Vue.js? Karena, terdapat tools sejenis yang mungkin kita sudah familiar terlebih dahulu, seperti katakanlah:

  • Angular
  • jQuery
  • React
  • Elm

Kita semua pastinya telah sependapat bahwa pembuatan aplikasi dinamis menggunakan jQuery terasa sangatlah mudah, pada awalnya. Ketika ada interaksi tertentu, kita hanya perlu event-handling menggunakan on. Tapi, begitu aplikasi menjadi jauh lebih kompleks, yang terjadi sering kali adalah kode kita justru menjadi lebih susah untuk dibaca.

Oleh karenanya, Angular pertama kali muncul mencoba memberikan solusi satu paket. Solusi satu paket yang dikemas dalam bentuk framework tersebut, memungkinkan pengembangan aplikasi front-end yang lebih teratur dan terkonsentrasi. Hanya saja, terdapat beberapa masalah pada Angular 1 yang membuatnya terkadang lambat.

React kemudian datang dengan memperkenalkan konsep Virtual DOM dan bahasa JSX. Kedua hal tersebut merevolusi cara pandang terhadap pengembangan aplikasi front-end kaya guna dengan mengenalkan konsep Component sebagai blok-blok interaksi yang bisa terhubung dengan satu-sama-lain menggunakan konsep Dispatcher. Banyaknya konsep khas di React membuatnya terasa lebih locked-in.

Vue.js memiliki pandangan lain dalam hal ini, dengan memperkenalkan konsep yang tidak jauh beda dengan jQuery tapi juga menawarkan struktur organisasi ala Angular, dan juga konsep komponen dan life-cycle yang tidak jauh berbeda dengan React. Gabungan hal tersebut membuat Vue lebih mudah dipelajari daripada React, tapi jauh lebih baik daripada jQuery untuk dukungan interaksi yang cukup kompleks.

Elm merupakan hal yang paling berbeda daripada setiap solusi di atas, dimana ianya adalah suatu bahasa yang perlu dikompilasi agar menghasilkan file JS dan HTML terkait. Paradigma-nya yang functional juga tidak sebarapa umum untuk ditemukan.

Namun demikian, ke-empat library tersebut ada baiknya untuk dipelajari untuk menambah wawasan.

New Vue

Cara termudah untuk memulai menggunakan Vue untuk membuat suatu halaman kaya interaksi adalah dengan menggunakan new Vue.

Mari mulai dengan contoh sederhana, kita memiliki kode HTML seperti berikut:

<div id='counter'>  
   <button>
     I am hit {{ counter }} times
   </button>
</div>  

Agar kode diatas bisa ter-render dengan benar, kita perlu menciptakan instansi Vue pada element #counter diatas:

new Vue({  
  el: "#counter",
  data: function() {
    return {
      counter: 0
    };
  },
})

Agar tombol diatas melakukan penjumlahan pada counter, maka kita perlu menciptakan fungsi untuk melakukan hal tersebut. Setiap fungsi operasi pada instansi vue terdapat pada objek methods:

new Vue({  
  // ... kode lain
  methods: {
    increment: function() { this.counter += 1; }
  },
})

Untuk mem-binding event click, kita menggunakan konstruksi v-on:click pada element HTML yang diinginkan, dalam kasus ini adalah tombol increment diatas.

<div id='counter'>  
   <button v-on:click='increment'>
     I am hit {{ counter }} times
   </button>
</div>  

Sharing data antar instansi Vue

Sering kali, instansi vue satu dengan yang lain perlu melakukan komunikasi, atau sinkronisasi data. Hal ini sering terjadi misal dalam kasus pembuatan fitur filtering, fitur input data dan validasinya, atau fitur-fitur lain yang sering dijumpai pada aplikasi front-end yang tidak sederhana.

Sinkronisasi dapat dilakukan dengan sangat sederhana di Vue. Kita hanya perlu menciptakan instansi yang katakanlah kita namankan store, seperti halnya menciptakan instansi vue pada umumnya:

var store = new Vue({  
  data: {
    state: {
      orderedBooks: []
    }
  }
});

Kemudian, setiap elemen yang perlu sinkronisasi dapat dengan mudah melakukan hal seperti berikut:

var cart = new Vue({  
  data: function() {
    shared: store.state
  }
});

Akses terhadap orderedBooks kemudian dapat dijangkau menggunakan:

var orderedBooks = this.shared.orderedBooks;  

Secara lengkap, maka kita bisa memiliki contoh seperti berikut:

var cart = new Vue({  
  el: '#cart',
  data: function() {
    shared: store.state
  },
  methods: {
    makePurchase: function() {
      jQuery.ajax({
        url: '/order',
        data: this.shared.orderedBooks
      });
    }
  },
});

var itemTable = new Vue({  
  el: '#itemTable',
  data: function() {
    shared: store.state,
    items: [{..}, {..}]
  },
  methods: {
    addToCart: function(itemId) {
      this.shared.orderedBooks.push(itemId);
    }
  },
});

Bottom line

Tentu saja masih ada bebereapa hal yang belum kita bahas, seperti computed data, yang memiliki karakteristik seperti methods, hanya saja digunakan untuk menampilkan data.

Namun dengan demonstrasi singkat diatas, kita telah melihat bagaimana mudahnya cara mengintegrasikan Vue kedalam suatu proyek development web.

Dengan Vue, kita tidak perlu mempelajari terlalu banyak hal baru seperti konsep Dispatcher dan Component yang ada di React, atau $watcher yang ada di Angular. Kesederhanaan Vue juga memungkinkan kita menggabungkan Vue dengan tools-tools lain seperti Backbone ataupun Redux (walaupun terasa tidak diperlukan).

Dalam arti lain, Vue memiliki tingkat adaptasi dengan tools yang sudah ada dengan kadar setingkat jQuery, namun ianya juga menyediakan fitur kelas atas seperti yang ditawarkan oleh Angular dan React namun dibawakan dengan bahasa yang lebih sederhana.

Artikel - Artikel Terkait