Introducing Vue and Weex untuk Native Mobile Apps

Dayat Miftahul Jannah
11:18:33 AM

Vue adalah framework JavaScript populer untuk aplikasi web dengan binding yang mudah antara data dalam memori dan user interface. Sekarang Weex memungkinkan kita untuk membuat source code native mobile apps menggunakan framework Vue!

Mengapa kita menggunakan Vue dan data framework binding lain seperti Angular and React? Apa istimewanya mereka? Kita menggunakannya untuk memastikan bahwa data aplikasi yang disimpan dalam memori tetap sinkron dengan user interface dan sebaliknya.

Kita juga menggunakan framework ini untuk memungkinkan kita membangun aplikasi dengan sangat cepat, dan dengan cara yang dioptimalkan untuk kinerjanya.

Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana menggunakan framework Vue, khususnya bagaimana memahami konsepnya tentang data binding dan template. Kemudian, saya akan memperkenalkan platform Weex, untuk membuat sorce code aplikasi mobile native menggunakan Vue!

Data Binding

 Mari kita lihat contoh sederhana untuk memahami bagaimana framework ini dapat benar-benar menghemat waktu kita. Yang kita inginkan adalah simple input field yang tetap sinkron dengan data aplikasi kita. Aplikasi kita sendiri dapat mengubah data secara terprogram, dan pengguna dapat mengubahnya melalui masukan pengguna, jadi kaita harus melihat UI dan data aplikasi.




Penulisan source code yang akan mendukung data binding ini akan menjadi verbose. Kita perlu membuat event listener dan objek proxy dan dapat diobservasi untuk menangkap perubahan apa pun dalam data aplikasi. Dan kompleksitas ini hanya tumbuh dan tumbuh karena lebih banyak jenis data dan input ditambahkan. Vue dan data framework binding lainnya mencegah kita harus menulis semua kode binding.

Dengan Vue, jika pengguna kita mengubah beberapa data masukan, itu akan menyinkronkan kembali ke data aplikasi seperti:





Atau jika aplikasi mengubah data, itu akan memperbarui browser interface seperti ini:




Saat kita mempertahankan user interface dan data aplikasi bersama-sama dalam sinkronisasi, itu berarti aplikasi kita melakukan persis seperti yang kita harapkan. Vue akan mengelola semua ini dan memungkinkan proses binding data kuat lainnya terjadi.


Persiapan

Sekarang kita tahu mengapa kita menggunakan framework ini, mari kita menyiapkan aplikasi Vue sederhana untuk menjalankan beberapa contoh. Buat file HTML baru di mana saja di komputer Anda dan pastekan kode berikut ke dalamnya:

1:  !DOCTYPE html>  
2:  <html>  
3:  <head>  
4:   <title>Tuts+ Vue</title>  
5:   <script src="https://unpkg.com/vue/dist/vue.min.js"></script>  
6:  </head>  
7:  <body>  
8:   <div id="app">  
9:   </div>  
10:   <script>  
11:    var app = new Vue({ el: '#app' });  
12:   </script>  
13:  </body>  
14:  </html>


Ini adalah file HTML sederhana yang terhubung ke library Vue JS. Ini berisi elemen div dengan ID app. Di dalam script tag kita memiliki variabel disebut app yang kita gunakan untuk menunjukkan view kita — saya akan menjelaskan bagian ini nanti.

Kemudian kita membuat contoh Vue baru, atau 'view'. Konstruktor ini memberi tahu framework elemen mana yang akan berisi UI aplikasi kita dan membuatnya tetap sinkron dengan data aplikasi.
Sekarang klik dua kali pada file HTML untuk membukanya di browser, dan buka jendela konsol browser.

Text Interpolation

Interpolasi teks memungkinkan kita melekatkan expression dalam kode HTML kita yang akan ditafsirkan ketika halaman dirender. Expression bersifat langsung, jadi jika data yang mereka andalkan berubah, halaman akan diperbarui secara real time. Ini dikenal sebagai rendering deklaratif, yang memungkinkan kita untuk menempatkan expression di mana saja dalam konten elemen. Mari kita tinjau dengan contoh sederhana.

JS

1:  <script>  
2:    var app = new Vue({  
3:      el: '#app',  
4:      data:  
5:      {  
6:        message: "Hello world"  
7:      }  
8:    });  
9:  </script>


Kode JavaScript kita sekarang berisi objek data yang akan menyimpan semua data aplikasi kita untuk tampilan ini. Di dalamnya, saya telah membuat propertimessage dengan string Hello world.

Selanjutnya, mari kita tampilkan properti ini di HTML.

HTML

1:  <div id="app">  
2:   <pre style="font-family: 'helvetica'; ">  
3:     {{ message }}  
4:     {{ message.split('').reverse().join('') }}  
5:    </pre>  
6:  </div>

Ekspresi ditunjukkan dengan sintaks kurung ganda. Vue JS mengelola dependensi setiap expression dan memperbarui halaman langsung jika mereka berubah. Dalam kasus kita, kita memiliki dua expressions, dengan properti message sebagai dependensi masing-masing. Ekspresi pertama {{ message }} hanya menampilkan properti pesan. Ekspresi {{ message.split('').reverse().join('') }} yang kedua mengambil properti pesan, dan kemudian:
  • Membagi string menjadi array:
    [ "h","e","l","l","o"," ","w","o","r","l","d" ]
  • Membalikkan urutan array:
    [ "d","l","r","o","w"," ","o","l","l","e","h" ]
  • Bergabung bersama array untuk mendapatkan "dlrow olleh", yang merupakan pesan yang sama tetapi dicetak mundur.
Sekarang buka browser dan refresh halaman HTML. Kemudian buka jendela konsol browser dan tetapkan app.message nilai baru dan lihat bagaimana output diperbarui di browser


Anda juga dapat menggunakan matematika dalam template expressions, atau data terstruktur dalam objek. Sebenarnya, seperti yang Anda duga, expression Vue hanya JavaScript. Akses ke variabel global adalah sandboxed, sehingga Anda dapat mengakses Math, tetapi tidak window. Ini membantu menjaga aplikasi Anda tetap aman — dan pengguna Anda juga.

Dengan menggunakan Vue hanya dengan beberapa baris kode, kita dapat memiliki data binding dua arah yang canggih. Ini memastikan bahwa user interface dan data aplikasi disinkronkan dengan relatif mudah.

Directives

Directive atau arahan adalah cara lain untuk data binding dalam pandangan kami. Kita dapat menggunakannya untuk mengikat data aplikasi ke attributes, events, input fields, dan repeatable data. Mari kita bahas setiap arahan dan temukan cara kerjanya.
  • v-bind: bind nilai atribut
  • v-model: bind data aplikasi ke elemen input seperti textarea
  • v-on: mendefinisikan suatu event handler
  • v-for: bind ke suatu array atau objek

    v-bind Mengarahkan

    Arahan v-bind digunakan untuk bind data atribut. Ini memungkinkan kita untuk bind data aplikasi ke nilai atribut. Anggap saja seperti interpolasi teks tetapi dalam sebuah atribut. Anda dapat bind class, id, value atau atribut lainnya dengan direktif v-bind.
    Untuk contoh ini, saya ingin bind data aplikasi kami ke atribut data-attr menggunakan v-bind directive v-bind:data-attr.

    JS

    1:  <script>  
2:    var app = new Vue({  
3:      el: '#app',  
4:      data:  
5:      {  
6:        number: 20,  
7:        object:  
8:        {  
9:          type: "Full Name Object",  
10:          names: ["Lawrence","Anothy","Turton"]  
11:        }  
12:      }  
13:    });  
14:  </script>

    HTML

    1:  <div id="app">  
2:   <div v-bind:data-attr=" object.type ">  
3:    {{ object.type }}   
4:   </div>  
5:   <div v-bind:data-attr=" object.names ">  
6:    {{ object.names }}   
7:   </div>  
8:   <div v-bind:data-attr=" number * 20 / 2 ">  
9:    {{ number * 20 / 2 }}  
10:   </div>  
11:   <div v-bind:data-attr=" [ object.type, object.names, number * 20 / 2 ] ">  
12:    {{ [ object.type, object.names, number * 20 / 2 ] }}  
13:   </div>  
14:  </div>

    Dalam contoh di atas, kita mengikat atribut yang disebut data-attr ke serangkaian data sources yang berbeda. Pertama, kita bound dengan type dan names properti object. Lalu kita bound ke math expression, dan kemudian menggabungkan semua binding bersama menjadi satu atribut array.

    Lihatlah output di browser: Anda dapat mengklik pada tab Elements untuk melihat output dari setiap nilai atribut.

    Sekali lagi, Anda dapat mengubah data aplikasi di konsol untuk melihat proses data binding

    Pikirkan arahan v-bind sebagai memungkinkan ekspresi dalam nilai atribut. Ini sangat kuat dan mudah dibuat dengan library Vue.

    v-model Directive

    Arahan ini digunakan secara khusus untuk menjaga data aplikasi tetap sinkron dengan bidang input fields, text areas, and selection elements. Inilah contohnya:

    JS

    1:  script>  
2:    var app = new Vue({  
3:      el: '#app',  
4:      data:  
5:      {  
6:       message: "message string",  
7:       selected:"",  
8:       checkedNames: []  
9:      }  
10:    });  
11:  </script>

    HTML

    1:  <div id="app">  
2:   <input type="text" v-model="message">  
3:   <textarea v-model="message"></textarea>  
4:   <hr>  
5:   <select v-model="selected">  
6:    <option disabled value="">Select a name</option>  
7:    <option>Jack</option>  
8:    <option>John</option>  
9:    <option>Mike</option>  
10:   </select>  
11:   <span>Selected: {{ selected }}</span>  
12:   <hr>  
13:   <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">  
14:   <label for="jack">Jack</label>  
15:   <input type="checkbox" id="john" value="John" v-model="checkedNames">  
16:   <label for="john">John</label>  
17:   <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">  
18:   <label for="mike">Mike</label>  
19:   <select v-model="checkedNames" multiple>  
20:    <option>Jack</option>  
21:    <option>John</option>  
22:    <option>Mike</option>  
23:   </select>  
24:   <br>  
25:   <span>Selected Names: {{ checkedNames }}</span>  
26:  </div>

    Di petunjuk v-on, setelah titik dua, kita menetapkan event yang ingin kita lampirkan. Dalam contoh ini, ketika click event diaktifkan, kita akan menjalankan beberapa ekspresi. Pertama, kita membuka kotak dialog peringatan, lalu kita mengubah nilai properti clicked. Perhatikan bahwa Anda dapat memanggil fungsi dalam ekspresi v-on.

    v-for Directive

    Arahan ini adalah salah satu yang paling kuat dari semuanya. Kita dapat melihat objek atau array apa pun untuk perubahan dan membuat berulang kali bagian dari kode template kita untuk setiap properti atau elemen yang ditemukan di objek atau array itu. Misalnya, untuk merender deretan nama sebagai daftar:


    JS

    1:  <script>  
2:    var app = new Vue({  
3:      el: '#app',  
4:      data:  
5:      {  
6:       names: [ "Lawrence", "John", "Mike", "Justin" ]  
7:      }  
8:    });  
9:  </script>

    HTML

    1:  <div id="app">  
2:   <ul>  
3:    <li v-for="name in names">{{ name }}</li>  
4:   </ul>  
5:  </div>


    Dalam contoh ini, pertama-tama kita lampirkan perintah v-for ke elemen yang ingin Anda ulangi. Nilai dari direktif menentukan objek atau array yang ingin kita ulang (names) serta variabel yang akan berisi nilai untuk setiap iterasi (name). Sekarang, dalam elemen yang berulang ini, kita dapat menggunakan variabelname dalam ekspresi.

    Jika kita kemudian memodifikasi array, misalnya dengan metode seperti  push, sort atau reverse, data template secara otomatis akan diperbarui. Coba jalankan contoh dan ubah array di jendela konsol.

    Komponen

    Proses binding data terjadi dalam views. Komponen hanya reusable views yang bisa kita ulangi di seluruh aplikasi kita. Setiap komponen harus memiliki beberapa data template yang akan diberikan sebagai bagian dari user interface dan beberapa data aplikasi. Anda dapat secara opsional menyertakan beberapa styling jika Anda mau.

    Mari gunakan lagi v-for direktif ke item daftar output. Tapi kali ini, kita akan membuat setiap item menjadi komponen. Kita akan memberikan nama komponen ini sehingga kita dapat menargetkannya dalam kode template kita: list-item. Komponen juga dapat memiliki "properti terdaftar", yang dapat kita tetapkan nilai yang akan ditetapkan ketika kita membuat komponen. Dalam kasus saya, komponen list-item akan mengharapkan untuk menerima nilai untuk properti name, didefinisikan dengan alat props:["name"].

    Mari sekarang buat komponen ini. Silakan tambahkan kode berikut ke dalam tag skrip Anda:

    JS

    1:  Vue.component('list-item', {  
2:   template: '<li>{{ name }}</li>',  
3:   props: [ "name" ]  
4:  });

    Juga pastikan Anda memiliki data aplikasi berikut:

    1:  var app = new Vue({  
2:    el: '#app',  
3:    data:  
4:    {  
5:      names: [ "Lawrence", "John", "Mike", "Justin" ]  
6:    }  
7:  });

    HTML

    1:  <div id="app">  
2:   <ul>  
3:    <list-item v-for="name in names" v-bind:name="name"></list-item>  
4:   </ul>  
5:  </div>

    Di sini Anda dapat melihat komponen list-item akan diulang untuk setiap nama yang ditemukan dalam array. Setiap nama akan ditetapkan ke nama variabel yang didefinisikan dalam v-for directive. Kita mengirimkan properti name ke komponen menggunakan v-bind.
    Setiap contoh hanyalah salinan dari komponen. Kita dapat memodifikasi setiap salinan atau contoh secara terpisah satu sama lain. Jadi pikirkan komponen sebagai cetak biru dan contoh sebagai salinan yang dibuat dari cetak biru. Lihatlah hasil akhirnya.


    Kompilasi dan Vue CLI

    Kita telah bekerja dengan file HTML yang sangat sederhana dan membiarkan Vue menginterpretasikan semuanya pada saat run-time. Namun, Vue hadir dengan tool commind-line. Anda mungkin bertanya pada diri sendiri mengapa. Salah satu alasannya adalah bahwa template halaman yang dikompilasi sebelumnya akan berkinerja lebih baik daripada template yang diinterpretasi oleh Vue pada saat run-time. Alasan lain adalah bahwa, jika kita membangun aplikasi berskala besar dan mencoba memasukkannya ke dalam satu file HTML, itu akan cepat menjadi tidak terkendali. 
    Jadi kita perlu modularitas untuk memecah aplikasi besar menjadi bagian yang lebih kecil.

    Instalasi Vue CLI

    Untuk menggunakan baris perintah, Anda harus membuka jendela konsol untuk sistem operasi Anda.
    • Untuk Mac, tekan Command-Space lalu ketikkan terminal dan tekan Return.
    • Untuk Windows, cari command prompt di menu startup, pastikan untuk mengklik kanan dan "open as administrator".
    • Untuk Linux, tekan Control-Alt-T.
    Sebelum melanjutkan, pastikan Anda memiliki versi terbaru Node.js yang diinstal. Kemudian kita perlu menginstal Webpack, yang akan mengkompres ukuran file proyek kita, membuatnya lebih cepat di browser kita. Kemudian kita dapat menginstal Vue CLI dan menjalankan perintah yang relevan untuk platform Anda:

    Mac & Linux

    • sudo npm install -g webpack
    • sudo npm install -g vue-cli

    Windows (pastikan Anda menjalankan konsol sebagai administrator)

    • npm install -g webpack
    • npm install -g vue-cli
    Itu dia! Kita sekarang siap untuk mulai menyiapkan proyek Webpack canggih kita. Pertama, arahkan ke direktori tempat kita ingin membuat proyek kita, dalam kasus saya desktop, dan kemudian buat proyek. Anda dapat mengganti myapp dengan nama proyek apa pun yang Anda inginkan.
    • vue init webpack myapp
    Anda akan dituntun melalui serangkaian pertanyaan tentang proyek Anda, yang meminta Anda untuk mengisi data seperti judul dan deskripsi dan menanyakan Anda apakah akan menginstal plugin pihak ketiga. Untuk contoh ini, Anda dapat menjawab tidak untuk semua tambahan opsional. Setelah dibuat, kita perlu menginstal dependensi, jadi arahkan ke direktori proyek, dan kita akan menjalankan perintah install.
    • cd myapp
    • npm install
    Biarkan NPM menginstal semua paket dependensi, dan kemudian kami siap untuk melanjutkan.

    Buat sebuah Proyek Vue

    Setelah paket-paket itu diinstal, kita dapat menjalankan server pengembangan dengan mengetik npm run dev. Jendela browser Anda akan terbuka, menampilkan halaman berikut.




    Kita tidak akan melalui struktur keseluruhan proyek, tetapi ketika Anda membuka direktori myapp, Anda akan melihat direktori src. Ini berisi file App.vue, file main.js dan, di direktori components, file Hello.vue.

    File Vue adalah komponen. File main.js mengonfigurasi tampilan awal dan kemungkinan konfigurasi lainnya juga. Mari kita lihat file App.vue dan Hello.vue.




    Di sini Anda dapat melihat setiap komponen Vue dibagi menjadi tiga bagian:
    • <template>: HTML markup yang membentuk bagian dari UI.
    • <script>: data aplikasi, filter, metode, properti yang dihitung, pengamat, dan metode.
    • <style>: styling CSS atau Sass dari komponen kami.

      Kompilasi

      Menyusun semua komponen bersama-sama akan menghasilkan aplikasi berskala besar. Ini berarti ketika kita sedang mengembangkan, kita bekerja pada potongan kode modular kecil, yang disebut komponen, bukan seluruh aplikasi. Di Vue kita memiliki komponen file tunggal yang berisi JavaScript, HTML, dan CSS. Ia bahkan akan mengurus ES6 untuk ES5, Sass ke CSS dan Jade ke HTML jika Anda memilih untuk menggunakan bahasa tersebut.

      Anda akan melihat di file App.vue, saya telah menyoroti di mana impor komponen Hello.vue. Komponen dapat bersarang di dalam komponen lain!

      Saat menyusun, proyek kita dibangun dengan proses berikut:




      Kita masih menggunakan sintaks yang sama seperti pada contoh sebelumnya. Namun, kita sekarang bekerja dengan file Vue yang lebih kecil dan mengumpulkannya bersama. Kita juga memiliki beberapa fitur yang lebih canggih seperti preprocessors dan Jade, Sass, ES6 dan kompresi Webpack.

      Weex

      Kini setelah memahami library Vue, mari lihat sekilas bagaimana kita dapat menggunakan aplikasi web kita dan mengubahnya menjadi aplikasi mobile native, yang dapat dipasang di iOS atau Android.

      Weex adalah hybrid framework, yang berarti memungkinkan beberapa teknologi, seperti hybrid car yang dapat menggunakan listrik dan bensin. Dalam kasus kita, kita menggunakan kode JavaScript dari aplikasi web kita, tetapi kita merender ke user interface asli. Juga, dari JavaScript kita dapat mengakses API asli perangkat untuk mengakses perangkat keras seperti kamera, sensor, dan sistem file.




      Dengan Weex, alih-alih merender aplikasi kita ke HTML, kita menggunakan XML. Sebenarnya, HTML dan XML sangat mirip, sehingga sintaksnya akan terlihat familiar. XML ini kemudian akan dikonversi ke komponen asli. Sekarang JavaScript kita akan dapat berbicara dengan komponen asli seperti itu berbicara ke DOM di Vue dengan HTML. Tidak hanya itu, tetapi komponen asli dapat ditata dan diposisikan dengan CSS termasuk animasi, transisi dan banyak lagi, dan mereka dapat diintegrasikan ke lapisan asli.

      Itu hanya sebuah teaser dari apa yang dapat dilakukan Weex. Dalam tutorial selanjutnya, saya akan membawa Anda lebih mendalam dengan Weex, dan kita akan melihat cara membuat beberapa aplikasi native cross-platform yang praktis.

      Pros

      Vue memiliki sintaks yang sederhana dan meningkatkan popularitas dengan sangat cepat. Weex memungkinkan kita membuat aplikasi seluler menggunakan JavaScript dan Vue, tetapi tetap menghadirkan pengalaman aplikasi native.

      Cons

      Vue sendiri stabil, tetapi Weex masih dalam pengembangan awal — saat ini berada di dalam inkubator Apache. Tapi jangan khawatir, Weex akan segera siap produksi, dan itu didukung oleh Alibaba raksasa teknologi. Jadi, jika membangun pada pratinjau pengembang mengkhawatirkan Anda, Anda mungkin menunggu hingga Weex mencapai rilis penuh.

      Kesimpulan

       

      Anda sekarang telah melihat bagaimana binding data adalah alasan utama untuk menggunakan Vue dan framework serupa. Mereka menghemat waktu pengembangan dan menyediakan cara standar untuk membangun aplikasi. Anda juga telah melihat cara menggunakan interpolasi teks, direktif, dan event dalam Vue, dan bagaimana fitur-fitur ini bekerja bersama untuk menjaga sinkronisasi data aplikasi dengan antarmuka pengguna.

      Kita memulai dengan proyek dasar dengan hanya satu view. Namun kemudian kita membuat proyek yang lebih maju yang memiliki tampilan yang lebih kecil dan modular yang disebut komponen. Komponen-komponen membiarkan kita menghancurkan proyek kita sehingga lebih mudah untuk dituliskan kedalam source code dan dipelihara. Setelah itu, kita melihat bagaimana menggunakan compiler Vue untuk memungkinkan transpilasi ES6, Jade dan Sass ke dalam bahasa standar, sementara mengompresi ukuran file ke minimum.

      Semua pengetahuan ini akan membantu Anda ketika Anda mulai coding dengan Weex. Weex akan memungkinkan kita untuk mengambil aplikasi web Vue kita dan mengubahnya menjadi aplikasi seluler. Weex sedikit berbeda — kami menggunakan XML dengan komponen khusus, alih-alih HTML — tetapi kita masih dapat menggunakan teknologi web lainnya, seperti CSS dan JavaScript. Itu berarti kita tidak perlu mengubah logika aplikasi kita dari aplikasi web ke aplikasi seluler.
      Nantikan postingan saya berikutnya di Weex developmen. See You Next Time :)