Thursday, October 10

Kenali BackboneJS

Tidak seperti kebanyakan bahasa pembangunan web yang lain, JavaScript belum lagi pernah ada sebuah rangka kerja yang benar-benar tulus dan kemas. Kebanyakan dari kita (developer) selalu menghadapi masalah untuk menempatkan javaskrip, baik di bahagian Header maupun Footer dan apabila mula untuk memautkan (bind) antara data dan Document Object Model (DOM), ianya bertambah serabut apabila fungsi aplikasi itu berkembang / bertambah.

Dalam hati ini, kita benar-benar menginginkan laman yang kita hasilkan betul-betul interaktif dan bernyawa. Dan catatan ini diharap dapat dijadikan titik tolak atau pintasan pemahaman untuk mekarnya pengetahuan kita dalam pengaturcaraan




Alhamdulillah, sejak dua menjak ini, keadaan ini mula berubah sedikit demi sedikit. Pelbagai konsep ditampilkan bagi penstrukturan kod dengan lebih teratur dan berkesan. Salah satu konsep yang biasa digunakan adalah model-view-controller dan konsep ini telah diusung kedalam BackboneJS. Cuma ada beberapa kekeliruan pada pustaka Javaskrip ini dimana peranan controller itu telah dimainkan oleh Router dan juga View.


Pustaka kecil Javaskrip ini mula dibina oleh Jeremy Ashkenas sekitar tahun 2010 yang bertujuan menstruktur semula susunan Javaskrip agar aplikasi yang dibangun mudah untuk diselenggara dan dikembang luas fungsinya. Dan secara asasnya, ianya dicipta untuk mengatasi kerumitan dalam membangun sebuah thick web application (aplikasi web dengan business logic yang cukup padat). Di dalam BackboneJS, terdapat 7 komponen dasar, yaitu :
  • Backbone.Events
  • Backbone.Model
  • Backbone.Collection
  • Backbone.Router
  • Backbone.History
  • Backbone.View
  • Backbone.sync

Berikut adalah serba sedikit keterangan mengenainya:

M : Model serta Collection

Model merupakan kelas yang mengawal logik data atau keadaan aplikasi (application state). Seperti kebanyakan rangka-kerja yang lain Backbone.model bertujuan untuk menghubungkan aplikasi dengan pengkalan data (DB) melalui sambungan yang kelihatan abstrak (REST). Dengan adanya Backbone.model  pengurusan data akan lebih terkawal dengan pemanfaatan Collection. Kedua-duanya akan wujud didalam memori komputer Klien semasa aplikasi sedang berlangsung dan ianya akan terhapus dari memori apabila kita tidak lagi berinteraksi dengan aplikasi. BackboneJS juga menanggung hubungan yang persisten antara Server dan Backbone.model dan juga Backbone.Collection Yang menarik tentang backbone.model adalah sekiranya terdapat sebarang perubahan pada isi kandungan model, backboneJS menyediakan sebuah pendengar (listener) yang berperanan untuk bertindak balas terhadap sebarang perubahan.

V : View

Tanggungjawab utama view adalah mengkoordinasi interaksi antara pengguna dan khidmat aplikasi secara langsung. Interaksi keduanya dipermudahkan melalui pelbagai cara, termasuk penggunaan jQuery atau zeptoJS untuk mengelola acara DOM, memanggil data Backbone.model dan Backbone.collection secara langsung melalui `this.model` dan `this.collection`, dan penghasilan 'kepingan' HTML baru yang akan ditampilkan kepada pengguna semasa aplikasi kita bertindak balas terhadap perubahan yang dialami pada keadaan aplikasi (application state).


C: Controller

Tiada Controllers sebenarnya dalam backboneJS

Dikatakan peranan Router dan View boleh disifatkan sebagai Controller, tetapi sebenarnya tidak sama sekali. Tiada pelaksanaan yang benar-benar bersifat Controller secara arkitekturnya. Router bukanlah sebuah Controller. Ianya adalah pengawal masuk ke aplikasi anda. Dan View adalah untuk paparan bukan Controller juga.

Kesimpulan

Dengan saiz failnya yang kecil (4kb), ia berupaya untuk mengelolakan pembangunan aplikasi yang jauh lebih besar. Bagi membuktikan kemampuan pustaka kecil ini, di halaman web rasminya tersenarai berpuluh aplikasi yang berbagai ragam untuk memenuhi berbagai keperluan.

Buat yang sudah biasa dengan jQuery mungkin tiada masalah dalam memahami BackboneJS tetapi persepsi kita mengenai penyusunan Javaskrip itu sendiri akan berubah 180 darjah kerana ia sebenarnya diolah dari bahasa Ruby On Rails. Tiada lagi contoh "hello world" seperti kebiasaanya tapi diganti dengan "To Do Apps"

No comments: