Making Dooitkoo – Bagian 6 : The Client

Di sisi klien (browser) saya pakai beberapa library, yang utama adalah KnockoutJS, sebuah library javascript yang menyediakan fasilitas data-binding antara elemen HTML dan data (model). Selain Knockout, saya juga pake antara lain:

  • jquery
  • moment
  • accounting
  • toastr
  • yepnope
  • amplify

Karena saya terbiasa koding pake bahasa yang strongly & statically-typed (ActionScript 3.0), pengalaman pertama dengan JavaScript terasa sangat menyebalkan. Error ga jelas, ga ada compile-time checking, refactoring yg kadang malah bikin error, dsb. Tapi karena udah niat belajar untuk menguasai JavaScript, sebelnya ditahan-tahan aja. Lama-lama juga terbiasa.

Struktur aplikasi

Struktur klien ga terlalu rumit. Hanya ada 4 komponen utama yaitu:

  1. ViewModel
  2. Data Object
  3. Modul Data Service. Semua request ke server harus lewat module ini.
  4. Publisher-subscriber (pub-sub) channel. Mirip konsep event-bus di flash/flex.

Client

KnockoutJS

Dari sekian banyak library & framework JavaScript, kenapa pilih KnockoutJS?

  • Sangat gampang dipelajari karena API-nya sederhana. Karena KO adalah library, bukan framework, saya cukup belajar APInya aja.
  • Dokumentasinya cukup lengap. Banyak contoh & tutorial

Binding

Apa itu binding? Agak susah jelasinnya. Untuk programer flex istilah ini ga asing lagi karena flex pake data binding di mana-mana. Intinya, binding adalah mekanisme yang memungkinkan satu elemen merespon perubahan/update kondisi elemen yang lain.

KO menyediakan binding 1-arah & 2-arah dengan memanfaatkan atribut data-bind di elemen HTML. Dalam prakteknya, untuk memanfaatkan binding, elemen HTML perlu tahu tentang ViewModel tapi ViewModel ga perlu tau tentang elemen HTML. Jadi, satu ViewModel bisa dipake sama elemen yg berbeda-beda.

Mvvm

Observable

Bagian utama dari KO adalah Observable. Sebuah observable akan mengirim pemberitahuan (notifikasi) kepada semua observer (pengamat) pada saat nilai atau kondisinya berubah sehingga observer bisa meresponnya. Observable adalah kunci dari binding. Tanpa observable, binding atas sebuah objek/elemen hanya akan terjadi satu kali pada saat binding diinisialisasi tapi perubahan selanjutnya ga akan bisa direspon oleh observernya karena ga ada notifikasi.

ObservableArray

Observable array adalah observable khusus yang disediakan untuk membungkus sebuah array. Setiap kali elemen ditambahin, dihapus, atau digeser observable array akan mengirim notifikasi. Observable array ga bisa mendeteksi perubahan objek di dalam array. Hanya struktur arraynya aja.

Computed Observable

Computed observable adalah observable yang mengamati observable lain. Setiap kali observable yang diamati berubah nilai/kondisinya, computed observable akan merespon, lalu mengirim notifikasi.

Struktur Binding Dooitkoo

Karena Dooitkoo pake halaman-halaman HTML yang relative rumit (ada runtime template, dsb), saya bikin struktur viewmodel hirarkis supaya lebih gampang kodingnya.

Binding structure

Prakteknya, sebagai contoh untuk halaman dashboard, saya pake struktur sbb.

Dashboard vm

Optimasi Loading Speed

Untuk mempersingkat waktu yang dibutuhkan browser untuk download semua aset & file javascript, saya pake beberapa metode:

  1. Gabungin (concatenate) file javascript. Jadi, 2 atau lebih file .js digabungin jadi satu biar request dari browser ke server minimal. File gabungan ini dipake di production server. Di development server, tetep pake file yang asli.
  2. Minify file javascript & CSS pake YUI compressor.
  3. Atur server supaya kirim aset (js, css, html) dalam bentuk gzip pake setingan di .htaccess.

Berikutnya …

Bikin dashboard. Stay tuned 😉

Also in this category ...