Thursday, July 10

Pemfaktoran kod yang Perlu diBeri Perhatian Bagi Kelancaran Aplikasi Backbone Anda

Setelah hampir setahun berkubang menggunakan BackboneJs dan RequireJs, berbagai faktor yang perlu diberi perhatian sekiranya anda benar-benar menitik beratkan untuk membangun sebuah aplikasi laman tunggal yang berkesan. Antaranya adalah 

1. Organisasi kod
2. Kebocoran memori pada Backbone.View dan Event
3. Kekerapan berhubung antara client dan server
4. Teknik rendering Backbone.model dalam sesebuah Backbone.Collection

Organisasi kod
Saya menggunakan RequireJs dalam soal organisasi kod. Ini adalah kerana pustaka ini berkhidmat untuk mengatur langsung keperluan-keperluan terhadap pustaka javascript yang lain bagi meminimalkan pencemaran penggunaan pembolehubah yang berskop global. Disamping itu kod yang terhasil adalah lebih mudah dibaca kerana kemodularan skop skrip itu sendiri. Apa yang menarik mengenai teknik ini adalah, aplikasi hanya akan memuat turun pustaka atau skrip yang diperlukan pada saat ia diperlukan. Jadi aplikasi tidak perlu untuk memuat turun keseluruhan kod atau skrip untuk sesebuah aplikasi berfungsi dengan berkesan.

Kebocoran memori pada Backbone.View dan Backbone.Event
Disebabkan ketergantungan BackboneJs kepada jQuery, maka adalah penting untuk anda memastikan setiap elemen yang dihasilkan oleh Backbone.View anda benar-benar dihapuskan dari view sebelum beralih kepada view yang lain. Ini kerana jQuery bertindak untuk meng'cache' atau mengklonkan elemen yang dihasilkan view bagi tujuan pengaksesan yang cepat. Maka kemungkinan besar anda akan terperangkap dengan tindakan jQuery tersebut dengan menghasilkan elemen-elemen yang serupa dengan fungsi yang sama. Ini adalah suatu kesalahan sekiranya anda tidak menyedari peranan tersebut. Anda akan dapati tindakan keatas elemen-elemen yang serupa dan sama itu tadi akan berakibat penghasilan pelaksanaan kod yang beberapa kali diulang-ulang. Backbone ada menyediakan ruang untuk atasi perkara ini, sama ada ada menggunakan kaedah .remove(), .off(), .setElement() atau .delegateEvent(). 

Kekerapan berhubung antara client dan server
Ada keadaan-keadaan tertentu yang memerlukan saya menghubungi server untuk query ke database bagi maklumat-maklumat tertentu. Sebagai contoh, maklumat pengguna yang login ke aplikasi. Maklumat ini pada awal pemulaan aplikasi, sewaktu pengguna sudah berjaya login, telah pun dicapai maklumatnya dari database. Jadi saya akan menentukan untuk menyimpan maklumat ini sama ada melalui kaedah in-memory, sessionStorage atau localStorage. Tetapi saya memilih untuk mengekalkannya sebagai sebagai sebuah objek yang aktif. Cara ini akan menjimatkan masa ulang alik query database kerana maklumat kritikal ini senantiasa diperlukan untuk operasi CRUD. Ini bermakna sebagai seorang pengaturcara, anda perlulah menilai kembali seberapa kerap anda perlu menjalin hubungan dengan server. 

Teknik rendering Backbone.model dalam sesebuah Backbone.Collection
Bagi sebuah Collection yang bersaiz besar, adalah penting untuk memfaktorkan semula teknik anda merender model didalamnya bagi mengelak penyalahgunaan memori pada komputer client. Sekiranya tidak difaktor semula, ini akan menimbulkan ketidakselesaan pada pengguna ketika menggunakan aplikasi. Kebanyakan contoh diluar akan menampilkan teknik jQuery .append() untuk render model dalam collection. Teknik ini akan mengurangkan tahap responsif sesebuah aplikasi terutamanya pada komputer lama. Salah satu cara yang popular untuk mengatasi masalah ini adalah document.createDocumentFragment(). Setakat ini saja cara yang cepat dan efisyen untuk merender subview.

No comments: