Javascript saat ini semakin populer digunakan dalam pengembangan aplikasi berbasis web baik di sisi client (browser) maupun server, yang semakin diperkuat dengan munculnya standar-standar ECMAScript terbaru seperti ECMAScript6 (ES6) atau biasa disebut juga ECMAScript 2015 (ES2015). Untuk lebih lengkapnya mengenai ES6 ini silahkan baca halaman web penjelasan dari Luke Hoban yang sangat bermanfaat ini. Sejarahnya dulu saya ingat Javascript ini adalah bahasa pemrograman client-side yang paling menyebalkan karena perbedaan standar setiap browser, aplikasi web kita berjalan lancar di Interner Explorer 5 atau 6, pas dijalankan dengan Mozilla, Netscape atau Firefox tidak jalan sama sekali dan juga berlaku sebaliknya, Mikocok ehhh maksud saya Microsoft cenderung membuat implementasi mereka sendiri. Seiring dengan semakin maraknya penggunaan aplikasi berbasis web, Javascript semakin banyak digunakan untuk membuat aplikasi web yang responsif dan "reaktif". Istilah "Reaktif" sedang "in" dalam pengembangan web saat ini, yang merujuk kepada kemampuan untuk "mereaktifkan" elemen DOM (Document Object Model)/tag HTML sehingga ketika diubah nilainya pada kode Javascript, maka secara otomatis tag HTML tersebut juga akan berubah, begitu juga sebaliknya apabila kita melalukan perubahan di sisi HTML, maka perubahan tersebut akan terefleksi pada kode Javascript. Beberapa framework/library Javascript yang memungkinkan kita membangun aplikasi web yang reaktif ini antara lain: AngularJS (bukan Angular), Backbone.js, Ember, React, Riot, Polymer, dan yang akan kita bahas kali ini adalah Vue.js yang menyatakan dirinya sebagai "The Progressive JavaScript Framework" (kayanya semua framework menyatakan diri mereka paling hebat dibandingkan dengan framework lain 😬).



Reaktifitas


Untuk melihat contoh "reaktifitas" dengan Vue, silahkan buat sebuah file HTML bernama index.html dan masukkan kode berikut:

index.html


<!doctype html>
<html lang="id">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <script src="assets/js/vue.min.js"></script>
  <title>Contoh Reaktifitas</title>
</head>
<body>
  <div id="spa">
    <div class="jumbotron jumbotron-fluid p-3">
      <h1 class="display-4 text-center">{{ teks_yang_reaktif?teks_yang_reaktif:'Hmmmm...' }}</h1>
      <hr class="my-4"/>
      <p class="lead text-center"><input type="text" class="form-control" v-model="teks_yang_reaktif"/></p>
    </div>
  <script>
  var spa = new Vue({
    el: '#spa',
    data: {
      teks_yang_reaktif: 'Sebuah Teks yang Reaktif!'
    }
  })
  </script>
</body>
</html>



Buka file index.html ini pada browser dan kita akan melihat seperti berikut ini:




Single Page Application


Dengan munculnya library/framework reaktif seperti Vue.js ini mendorong model pengembangan aplikasi berbasis web "Single Page Application (SPA)", dimana semua "view" atau tampilan antar muka dibangun dengan hanya menggunakan sebuah file HTML yang kemudian akan me-load view komponen/modul lain dengan meng-injeksi (atau istilah kerennya: render) secara dinamis dengan Javascript. Dengan model SPA ini maka aplikasi di sisi server tidak lagi harus mengirimkan respon balik halaman HTML full, cukup data saja dalam format JSON (menggunakan AJAX) misalnya yang kemudian akan direaktifkan oleh Vue, setiap perubahan di sisi klien akan memicu perubahan pada server, begitu juga sebaliknya dan pada akhirnya komunikasi data antara client dengan server berlangsung lebih cepat karena ukuran data yang kecil. Kita lihat contoh sederhana dengan menggunakan Vue berikut ini:



index.html


<!doctype html>
<html lang="id">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <script src="assets/js/vue.min.js"></script>
  <script src="assets/js/vue-router.min.js"></script>
  <title>Single Page Application Vue.js</title>
</head>
<body>
  <div id="spa"><!-- elemen root/utama dari SPA Vue -->
    <!--  Navigasi utama aplikasi SPA
          perhatikan tag "router-link" adalah tag khusus untuk membuat hyperlink ke router Vue -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <router-link class="navbar-brand" to="/">SPA Vue.js</router-link>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigasi" 
        aria-controls="navigasi" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navigasi">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <router-link class="nav-link" to="/">Home</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/berita">Berita</router-link>
          </li>
        </ul>
      </div>
    </nav>

    <!-- link dari "router-link" di atas akan merender view masing2 di dalam tag "router-view" -->
    <div id="main-content">
      <router-view></router-view>
    </div>
  </div>

  <!-- template view untuk komponen "Home" -->
  <script type="text/x-template" id="home">
    <div class="jumbotron jumbotron-fluid"><h1 class="display-4 text-center">{{ judul }}</h1>
      <hr class="my-4"/>
    <p class="lead text-center">{{ konten }}</p>
  </script>

  <!-- template view untuk komponen "Berita" -->
  <script type="text/x-template" id="berita">
    <div>
      <p class="p-1"><input type="text" class="form-control" v-model="keywords" 
        v-on:keyup="search"
        placeholder="Masukkan kata kunci pencarian"></p>
      <div v-if="berita_filtered.length>0">
        <div class="berita p-2" v-for="b in berita_filtered">
          <p class="h4">{{ b.judul }}</p>
          <p class="lead">{{ b.konten }}</p>
          <hr/>
        </div>
      </div>
      <div v-else>
        <div class="berita p-2" v-for="b in berita">
          <p class="h4">{{ b.judul }}</p>
          <p class="lead">{{ b.konten }}</p>
          <hr/>
        </div>
      </div>
    </div>
  </script>

  <!-- kode javascript untuk menjalankan Vue.js -->
  <script src="assets/js/app.js"></script>
</body>
</html>


assets/js/app.js


// 1. Definisikan komponen Vue
// Komponen "Home" akan menampilkan halaman depan aplikasi
const Home = Vue.extend({ 
  template: '#home',
  data: function() {
    return {
      judul: 'Selamat datang di Single Page Application',
      konten: 'Vue.js memungkinkan developer web membangun aplikasi web yang dinamis, ringan dan cepat.'
    }
  }
});
// Komponen "Berita" akan menampilkan daftar berita
var data_berita = {
  keywords: '',
  berita: [
    {judul: 'Lorem Ipsum', konten: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat, eros quis semper dignissim, libero erat semper ante, non porttitor sem metus a neque.'},
    {judul: 'In Vehicula Vulputate', konten: 'In vehicula vulputate eros vitae porttitor. Praesent commodo accumsan semper. Proin eu tellus purus, eu malesuada sapien.'},
    {judul: 'Aliquam Laoreet Gravida Erat', konten: 'Aliquam laoreet gravida erat, in hendrerit arcu lobortis id. Cras libero augue, aliquam nec sollicitudin id, molestie eu ante.'},
    {judul: 'Donec Adipiscing', konten: 'Donec adipiscing, diam eget tempor volutpat, odio justo molestie dolor, vitae sodales felis risus a mi.'},
    {judul: 'Praesent Mollis', konten: 'Praesent mollis placerat mi ut accumsan. Vivamus ultricies lobortis risus, quis venenatis ligula elementum id.'},
  ],
  berita_filtered: []
};
const Berita = Vue.extend({
  template: '#berita',
  data: function() {
    return data_berita;
  },
  methods: {
    search: function() {
      var katakunci = new RegExp(this.keywords, 'ig');
      if (this.keywords.length > 2) {
        this.berita_filtered = this.berita.filter(el => el.judul.search(katakunci)>-1);
      } else {
        this.berita_filtered = [];
      }
    }
  }
});

// 2. Definisikan routing menuju komponen
const routes = [
  { path: '/', component: Home},
  { path: '/berita', component: Berita }
]

// 3. Buat instance Router Vue
const router = new VueRouter({ routes })

// 4. Tempelkan instance "router" ke App Vue
const spa = new Vue({ router }).$mount('#spa');


Saya akan coba jelaskan beberapa poin penting yang perlu kita perhatikan disini, terutama bagi teman-teman yang baru mengenal Vue:


  1. Untuk contoh SPA ini saya menggunakan juga framework Bootstrap versi 4.0, jadi pastikan bahwa Anda juga sudah mengunduh dan menginstall Bootstrap. Pada tulisan ini semua file CSS saya letakkan pada direktori assets/css/ dan semua file Javascript saya letakkan pada direktori assets/js/;

  2. Untuk menggunakan Vue, kita harus sudah meng-include library Javascript Vue pada bagian head file HTML. Karena kita membangun antar muka SPA, maka kita juga memerlukan Vue Router yang bertugas melakukan routing komponen ke view-nya masing-masing. Unduh library Vue.js di sini dan Vue Router di sini. Atau apabila Anda adalah tipe pemalas download library Javascript gunakan versi CDN masing-masing hehehe;

  3. Perhatikan terdapat custom tag <router-link class="nav-link" to="/">Home</router-link> yang secara otomatis akan dikenali oleh Vue Router dan akan diubah ke tag A sebagai hyperlink menuju route yang ditunjuk oleh atribut "to". Semua hyperlink yang menuju ke route Vue harus menggunakan custom tag ini;

  4. Custom tag <router-view></router-view> berfungsi sebagai tempat penampung (placeholder) dari view untuk masing-masing komponen route;

  5. View atau tampilan untuk masing-masing komponen kita definisikan dengan menggunakan tag <script type="text/x-template" id="berita">. X-Templates adalah salah satu jenis template yang didukung oleh Vue, dan menurut saya yang paling aman dan mudah untuk digunakan untuk kebutuhan aplikasi skala kecil hingga menengah;

  6. Kode dalam bentuk seperti {{ judul }}, {{ konten }} disebut juga sebagai Mustache yang merupakan placeholder untuk data.
    moustache akan otomatis digantikan oleh Vue dengan data yang kita tetapkan pada komponen dan data tersebut sudah bersifat reaktif.

  7. Vue juga memiliki atribut directive, yang kita gunakan pada contoh ini antara lain adalah v-bind, v-if, v-else, v-for, v-model dan v-on. v-model kita gunakan untuk mereaktifkan sebuah tag HTML dengan model data yang kita definisikan pada Vue/komponen, v-if dan v-else memungkinkan kita me-load bagian dari view dengan kondisi tertentu, v-for memungkinkan kita untuk melakukan pengulangan/loop pada view dan sangat berguna untuk menampilkan data dalam bentuk Array atau Object Javascript dan v-on kita gunakan untuk mengaitkan suatu tag HTML dengan "method" yang kita definisikan di dalam kode Javascript Vue;

  8. Semua kode Javascript untuk menjalankan Vue diletakkan pada file assets/js/app.js dan diletakkan pada bagian paling bawah kode HTML;

  9. Variabel objek data_berita pada kode Javascript Vue bersifat static (tidak dinamis), pada aplikasi SPA yang sesungguhnya data berita ini akan diambil melalui AJAX ke database pada aplikasi di sisi server;

  10. Untuk membuat komponen (dalam terminologi aplikasi web MVC tradisional kita bisa anggap komponen merupakan sebuah controller sekaligus model), kita menggunakan sintak Vue.extend({});

  11. Setiap komponen merupakan objek Javascript yang biasanya memiliki property template, data, methods dan/atau computed;

  12. Aplikasi Vue dijalankan dengan membuat instance melalui konstruktor Vue yaitu const spa = new Vue({}). Setelah itu objek spa bisa diakses oleh komponen melalui methods.




Apabila file index.html kita jalankan melalui browser maka kita akan melihat aplikasi kita seperti berikut ini:




Kita bisa lihat bahwa perpindahan antara satu halaman ke halaman lain dilakukan dengan sangat cepat karena tidak membutuhkan request HTTP kembali ke server. Semua proses pengolahan/rendering tampilan antar muka dilakukan di sisi client oleh Vue, request HTTP hanya dibutuhkan untuk komunikasi data dalam format JSON atau plain-text lainnya, bukan untuk kode HTML yang membuat aplikasi menjadi lebih cepat layaknya aplikasi desktop. Pada tulisan bagian 2 kita akan melihat contoh yang sedikit lebih kompleks dengan melibatkan form isian data. Selamat mencoba!