AdityaDees

Perkembangan dunia pemrograman semakin hari semakin menjadi-jadi. Banyak Bahasa pemrograman maupun framework baru bermunculan akhir-akhir ini. Terutama framework JavaScript yang yang banyak bermunculan. Dan semuanya sangat menarik untuk dicoba. 

Framework JavaScript yang terkenal saat ini contohnya Angular JS, Vue JS, React JS dan lain sebagainya dan mungkin banyak orang sudah tahu tentang framework- framework ini.

Namun, akhir-akhir ini, ada framework yang baru terkenal yaitu Svelte JS (Website : https://svelte.dev/). Framework ini Admin tahu dari seorang JavaScript Developer terkenal di Indonesia yaitu Mas Riza Fahmi (Curriculum Director di Hacktiv8 Indonesia).

Svelte Js merupakan sebuah framework JavaScript untuk menulis komponen antarmuka (user interface) yang dibuat oleh Rich Harris. Namun menurut penulisnya, Svelte Js ini bukan sekedar framework JavaScript seperti framework lainnya. 

Tapi lebih dari itu Svelte JS ini seperti compiler, maksudnya kode yang kita tulis di Svelte dikonversi menjadi JavaScript yang sudah dioptimasi.

Salah satu fitur kuncinya Svelte Js ini adalah ukuran filenya kecil karena sudah dikompilasi dan dioptimasi oleh Engine Framework itu sendiri. Dan hebatnya lagi, prosesnya ini tidak menggunakan Virtual Dom.

Berikut Ini Kelebihan Framework Svelte JS :

• Menulis Lebih Sedikit Code
• Tidak Menggunakan Virtual DOM
• Sangat Reactive

Berikut ini merupakan Langkah-langkah menginstal Svelte JS :

(Note : Untuk proses penginstalannya, disarankan menggunakan alat bantu degit untuk membangun kerangka aplikasi. Node dan npm juga merupakan keharusan untuk menggunakan framework ini.)

-        #1 Install Node, NPM dan NPX bagi yang belum install. Karena saya belum install NPX maka saya install dengan cara membuka command prompt (CMD) atau untuk mac dan Linux bisa gunakan terminal.

Ketik : npm install -g npx

 

 

 

 

#2 Install Degit, Ketik : npm install -g degit Di CMD-nya.

 

 

 

#3 Kemudian install Svelte JS, ketik npx degit sveltejs/template my-svelte-project atau bisa download langsung filenya.

 

 

 

 

 

 

Kalau tampilannya begini, silahkan buka browser dan jalankan di http://localhost:5000. Maka akan muncul tampilan seperti dibawah ini.

 

 

 

Untuk mengubah tulisannya, teman-teman bisa modifikasi file App.svelte dan Main.jsdidalam folder src

# File App.svelte

#File Main.js

 

 

 

 

 

 

Jika dijalankan, tampilannya seperti dibawah ini :

Sahabat Coders juga bisa memodifikasi sesuai dengan kemaunnya masing-masing, yang terpenting adalah kita memahami struktur folder dan filenya, kemudian apa yang harus di import, variable apa yang diambil, variable ini diambil dari mana. 

Itu semua harus dipelajari sebelum membuat project dengan Svelte ini, biar tidak kebingungan saat menggunakannya.

Sekian dulu artikel kali ini, semoga apa yang kami bagikan bermanfaat.

#StayCodingSmileAndHappy

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!