10/28/2017

Vue.Js

Apa Itu Vue JS ?

Vue js adalah salah satu framework javascript. Vue Js merupakan framework untuk kebutuhan front end dari sebuah project.
Vue js merupakan salah satu framework yang banyak digunakan. Jika anda telah terbiasa dengan menggunakan angular js, maka untuk melakukan migrasi ke vue js tidak lah terlalu susah karena mereka mempunyai kemiripan di bagian sintak, hanya saja angular js memiliki development stack yang lebih rumit dibandingkan dengan vue js :). Bagi anda yang penasaran dengan angular js, silahkan lihat di artikel belajar angular js. Vue js juga menggunakan fitur data binding sama seperti angular js. Jika di angular js kita menggunakan fungsi controller, maka di vue js kita akan menggunakan pendekatan dom yaitu kita akan menggunakan id, name atau class dari suatu component html. Vue js juga memiliki component routing yaitu vue-router, akan tetapi bagian router akan dibahas pada artikel selanjutnya :). Pada artikel ini, penulis hanya akan memberikan contoh sederhana vue js dengan menggunakan ecmascript 5 (ES5).

Membuat Hello Word Dengan Vue JS

Seperti biasa, sebelum menggunakan sebuah framework, kita akan melakukan test hello word terlebih dahulu untuk mempermudah pemahaman tentang alur kerja dari sebuah framework yang akan kita gunakan :D. Untuk mendownload dependency, kita akan menggunakan bower. Bagi anda yang masing bingung dengan bower, silahkan baca di artikel Instalasi Perlengkapan Coding Node JS. Silahkan buat sebuah folder dengan nama Belajar-VueJS kemudian akses folder tersebut dengan menggunakan terminal lalu jalankan perintah berikut.


bower init

Lalu silahkan jalankan perintah berikut untuk mendownload dependency yang kita butuhkan seperti vue js dan bootstrap.

bower install bootstrap vue --save

Setelah selesai, silahkan buat sebuah file index.html di dalam folder Belajar-VueJSkemudian isikan codingan seperti berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Belajar Vue JS</title>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css" type="text/css">
    </head>
    <body>

        <div class="container" id="belajar">
            <div class="row">
                <div class="col-lg-3">
                    <div class="form-group">
                        <label>Nama</label>
                        <input type="text" class="form-control" placeholder="Masukkan Nama Anda" v-model="nama"/>
                    </div>

                    <h2>Hello {{ nama }}</h2>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./bower_components/vue/dist/vue.min.js"></script>
        <script type="text/javascript" src="./app.js"></script>
    </body>
</html>

Dari codingan diatas dapat kita lihat, kita melakukan inisialisasi project vue dengan menggunakan id pada html. Disini penulis menggunakan id belajar sebagai root dari project. Jika pada angular kita mengenal dengan ng-model maka pada vue js kita mengenal dengan yang namanya v-model, fungsinya sama yaitu sebagai model. Pada v-model, terdapat variabel nama, dimana variabel nama ini dapat kita tampilkan dengan menggunakan sintak double kurung kurawal {{ }} .
Setelah selesai, silahkan buat sebuah file app.js kemudian isikan codingan seperti berikut.

'use strict';

new Vue({
  el: '#belajar'
});

Nah cukup sederhana, kita bisa melihat bahwa codingan diatas melakukan inisialisasi element dengan menggunakan variabel id belajar, sehingga view yang tadi akan dikenali sebagai project vue js. Setelah selesai, seperti biasa kita akan menggunakan bantuan http-server untuk menjalankan file index.html. Bagi anda yang belum melakukan instalasi http-server, silahkan jalankan perintah berikut.

 npm install -g http-server

Setelah selesai, jalankan perintah berikut pada root project untuk menjalankan http-server.

http-server

Jika berhasil, maka di terminal akan muncul output seperti berikut.

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

Vue.Js Vs Angular.Js

  • ·         Dokumentasi

Vue.js sangat dioptimalkan untuk model berbasis  komponen untuk menggunakan Document Object Model (DOM). Vue.js dapat divisualisasikan sebagai framework yang memperkuat link lemah yang ada pada Angular dan bahkan even react. Dokumentasinya cukup mudah untuk dapat menyesuaikannya jika Anda bermigrasi dari framework lainnya. Angular memanipulasi DOM dengan cara yang kompatibel lintas-browser (cross-browser). Perbedaan utama dalam Vue.js adalah adanya Virtual DOM seperti dalam react. Dengan demikian. Mempengaruhi model pemrograman sederhana dan akhirnya dapat memberikan kinerja yang lebih baik.
  • ·         Kesederhanaan

Vue.js memiliki kurva belajar jauh lebih rumit dibandingkan dengan Angularjs. Sangat mudah bagi seseorang untuk mempelajari segala sesuatu dari Vue.js. hal ini memungkinkan kita untuk menulis JavaSript sederhana, source codenya sangat mudah dibaca. Untuk memulainya, yang Anda butuhkan adalah beberapa tutorial dibagian dokumentasi. Dari sana akan relatif memudahkan Anda. Disisi lain, Angular lebih dari framework injeksi ketergantungan. Harus ada injeksi ketergatungan dalam pemrograman UI.
  • ·         Kemudahan Pengguna

Vue.js ternyata menjadi solusi yang lebih dogmatis dari Angularjs. Hal ini memungkinkan Anda pada struktur aplikasi Anda dengan cara yang Anda inginkan. Sedangkan, Angularjs memuat beberapa implikasi dalam penataan yang Anda benar-benar mungkin berakhir melakukannya dengan cara Angular. Vue.js lebih seimbang dalam hal ini, karena memberikan kesan yang jelas tentang apa yang dilakukan dan apa yang diharapkan untuk melakukannya.
  • ·         Kecepatan dan Performance

Ketika muncul pertanyaan tentang manakah yang lebih cepat, vue.js dengan mudah memberi syarat untuk menjadi pemenang diantara keduanya karena library nya lebih ringan. Bahkan lebih cepat dari React JS. Kedua framework yang support data dua arah yang mengikat sama. Angularjs memperkerjakan pengecekan buruk oleh pencapaian data dari dua arah yang mengikat. Vue.js tidak pernah menimbulkan mengecekan buruk, dengan cara itu menjadi lebih mudah untuk mengoptimalkan.
  • ·         Syntax

Datang kebagian sintaks, beberapa sintaks Vue ini asimilasi yang dari Angular 1. Sebagai contoh, v-if vs ng-if. Angular telah tepat dengan banyak hal, Angular telah memainkan peran besar, vue inspirasi dalam tahap awal pengembangan.
  • ·         Typescript

Dengan Angular 1 sebagian besar disukai untuk aplikasi yang lebih kecil, Angular 2 dikembangkan umumnya sesuai dengan aplikasi skala besar. Ini hampir berarti bahwa Anda akan perlu typescript untuk menjamin keamanan jenis bahasa C# dan Java.
Vue juga memudahkan Anda untuk mengembangkan aplikasi skala besar melalui typing resminya dan dekorator resmi. Namun, tetap opsional dengan Vue.

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)