8 Kesalahan Paling Umum Yang Dilakukan Pengembang Backbone.js

Backbone.js adalah kerangka kerja minimalis yang bertujuan untuk menyediakan sekumpulan struktur data dan fitur sederhana yang dapat Anda gunakan untuk membuat front-end aplikasi web terstruktur. Di luar kotak, komponen Backbone.js menyediakan lingkungan intuitif yang mungkin sudah Anda kenal saat bekerja dengan model dan tampilan di back-end. Model dan koleksi di Backbone.js sederhana, tetapi dilengkapi dengan beberapa fitur yang sangat berguna, seperti opsi untuk mengintegrasikannya dengan mudah dengan REST JSON API. Tetapi mereka juga cukup fleksibel untuk disesuaikan dengan hampir semua penggunaan praktis.

Dalam tutorial Backbone.js ini, kita akan melihat beberapa kesalahan umum yang sering dilakukan oleh pengembang lepas yang mencoba mempelajari Backbone.js untuk pertama kalinya dan cara untuk menghindarinya.

Kesalahan #1: Mengabaikan Fungsi Arsenal of Backbone.js

Backbone.js mungkin merupakan kerangka kerja minimalis, tetapi (bersama dengan Underscore.js) menyediakan sejumlah besar fitur dan fungsionalitas yang dapat dengan mudah mencakup kebutuhan paling dasar dan beberapa kebutuhan kritis yang muncul saat mengembangkan aplikasi web modern. Satu kesalahan umum yang sering dilakukan pengembang pemula adalah mereka menganggap Backbone.js sebagai kerangka kerja klien mirip MVC untuk web. Meskipun bagian ini berbicara tentang sesuatu yang sangat jelas, ketika berbicara tentang Backbone.js, adalah kesalahan yang sangat kritis untuk tidak menjelajahi kerangka kerja secara menyeluruh. Kerangka ini mungkin berukuran kecil, tetapi inilah yang menjadikannya kandidat yang bagus untuk eksplorasi menyeluruh ini. Terutama kode sumbernya yang kecil dan beranotasi dengan baik.

Backbone.js menyediakan minimal yang diperlukan untuk memberi aplikasi web Anda struktur yang dapat dimanfaatkannya. Dengan ekstensibilitas dan banyak plugin, mempelajari Backbone.js dapat digunakan untuk membangun beberapa aplikasi web yang luar biasa. Beberapa fitur Backbone.js yang paling jelas diekspos melalui model, koleksi, dan tampilan. Komponen router dan histori menyediakan mekanisme yang sederhana namun elegan untuk mendukung perutean sisi klien. Meskipun Underscore.js adalah ketergantungan dari Backbone.js, itu cukup terintegrasi dengan baik ke dalam kerangka kerja, karena model dan koleksi keduanya mendapat banyak manfaat dari sabuk utilitas luar biasa untuk JavaScript ini dan juga tersedia untuk Anda.

Kode sumber kerangka kerja ditulis dan diberi keterangan dengan sangat baik sehingga orang mungkin bisa membaca semuanya sambil minum secangkir kopi. Pemula dapat memperoleh banyak manfaat dari membaca anotasi sumber, karena mereka dapat belajar banyak tentang cara kerja kerangka kerja secara internal, dan juga mengadopsi serangkaian praktik terbaik yang rapi dalam hal JavaScript.

Kesalahan #2: Memodifikasi DOM sebagai Respons Langsung terhadap Peristiwa Sewenang-wenang

Sesuatu yang cenderung kita lakukan ketika pertama kali mulai belajar Backbone.js adalah tidak melakukan hal-hal seperti yang direkomendasikan oleh Backbone.js. Misalnya, kami cenderung menangani acara dan melihat pembaruan seperti yang kami lakukan dengan jQuery di situs web sederhana. Backbone.js dimaksudkan untuk memberi aplikasi web Anda struktur yang kaku melalui pemisahan masalah yang tepat. Apa yang sering kami lakukan dengan Backbone.js adalah memperbarui tampilan sebagai respons terhadap peristiwa DOM arbitrer:

 var AudioPlayerControls = Backbone.View.extend({ events: { 'click .btn-play, .btn-pause': function(event) { $(event.target).toggleClass('btn-play btn-pause') } }, // ... })

Ini adalah sesuatu yang harus dihindari di semua biaya. Dimungkinkan untuk memunculkan contoh-contoh yang tidak jelas di mana hal ini mungkin masuk akal; tetapi dalam banyak kasus, ada banyak cara yang lebih baik untuk melakukannya. Faktanya, salah satu cara yang dapat saya contohkan di sini adalah dengan menggunakan model untuk melacak status pemutar audio dan menggunakan informasi status tersebut untuk merender tombol (atau lebih khusus lagi nama kelasnya):

 var AudioPlayerControls = Backbone.View.extend({ events: { 'click .btn-play, .btn-pause': function(event) { this.model.set('playing', !this.model.get('playing')) } }, initialize: function() { this.listenTo(this.model, 'change', this.render) this.render() }, // ... })

 <button class=”btn btn-<%- playing ? 'pause' : 'play' %>”></button>

Mungkin ada situasi langka di mana manipulasi langsung DOM dari event handler akan masuk akal, tetapi biaya yang diperlukan untuk mengelola manipulasi DOM kompleks dari event handler hampir tidak pernah sepadan. Ini adalah sesuatu yang Backbone.js ingin selesaikan. Menggunakan Backbone.js untuk melakukan sesuatu seperti ini adalah sebuah kesalahan.

Kesalahan #3: Meremehkan Biaya Rendering

Karena Backbone.js membuatnya sangat mudah untuk merender dan merender ulang DOM sesuka hati atau sebagai respons terhadap peristiwa, kita sering mengabaikan seberapa besar pengaruhnya terhadap kinerja keseluruhan aplikasi web. Ada banyak cara kita bisa berakhir dengan meronta-ronta metode render pada pandangan kita. Seringkali ini tampaknya tidak banyak, karena browser web modern menjadi perangkat lunak yang berkinerja tinggi. Namun seiring pertumbuhan aplikasi web, dan jumlah data yang ditanganinya bertambah, penurunan kinerja menjadi semakin nyata.

Kita bisa melihat ini dalam tindakan melalui contoh yang dibuat-buat di mana kita mulai dengan koleksi kecil model, dan membuatnya menjadi tampilan daftar:

 var AudioPlayerPlaylist = Backbone.View.extend({ template: _.template('<ul> <% _.each(musics, function(m) { %> <li><%- m.title %></li> <% }) %> </ul>'), initialize: function() { this.listenTo(this.collection, 'add', this.render) }, // ... })

Dalam contoh Backbone.js ini, kami melakukan rendering ulang setiap kali model ditambahkan ke koleksi. Ini akan bekerja dengan baik. Namun, karena peristiwa "tambah" diaktifkan setiap kali model ditambahkan ke daftar, bayangkan mengambil daftar besar model dari server. Metode render akan dipanggil beberapa kali secara berurutan, sekali untuk setiap model dalam respons dari server. Model yang cukup besar akan cukup untuk membuat aplikasi Anda tersendat dan merusak pengalaman pengguna. Terkadang respons kecil sudah cukup, tergantung pada kerumitan tampilan yang diberikan.

Solusi yang sangat cepat untuk ini adalah dengan tidak memanggil metode render untuk setiap model yang ditambahkan. Dalam situasi seperti ini, model akan ditambahkan dalam batch, dan Anda benar-benar dapat melakukan sesuatu untuk membuat metode render hanya aktif saat dipanggil tetapi tidak dipanggil kembali dalam jangka waktu tertentu. Ketergantungan Backbone.js Underscore.js hadir dengan fungsi utilitas yang berguna untuk ini: “_.debounce”. Yang Anda butuhkan untuk memanfaatkan ini adalah mengubah baris JavaScript yang mengikat acara dengan ini:

 this.listenTo(this.collection, 'add', _.debounce(_.bind(this.render), 128))

Ini akan menyebabkan event callback dipicu setiap kali event "add" terjadi, namun, ia akan menunggu selama 128 milidetik dari event terakhir sebelum benar-benar menjalankan metode render.

Dalam kebanyakan kasus, ini akan dianggap sebagai solusi seperti perbaikan cepat. Sebenarnya, ada cara yang lebih tepat untuk menghindari render thrashing. Pengembang di belakang Trello pernah menulis posting blog yang membahas tentang pengalaman dan pendekatan mereka dalam meningkatkan kinerja rendering saat menggunakan Backbone.js.

Kesalahan #4: Membiarkan Pendengar Acara Terikat Di Luar Penggunaannya

Membiarkan pendengar acara yang tidak digunakan terikat mungkin adalah sesuatu yang dapat terjadi terlepas dari kerangka kerja JavaScript apa yang Anda gunakan, atau jika Anda menggunakannya sama sekali. Meskipun Backbone.js memudahkan untuk menghindari masalah ini, tentu merupakan kesalahan untuk tetap meninggalkan lubang potensial untuk kebocoran memori yang mudah di aplikasi web Anda. Komponen “Event” dari Backbone.js tentu saja merupakan implementasi yang cukup rapi. Ini memungkinkan objek JavaScript untuk mengimplementasikan fitur berbasis peristiwa dengan mudah. Karena tampilan adalah tempat sebagian besar konsumsi acara kami biasanya terjadi, mudah untuk membuat kesalahan ini di sana:

 var AudioPlayerControl = Backbone.View.extend({ initialize: function() { this.model.on('change', _.bind(this.render, this)) // ... }, // ... })

Baris pengikatan peristiwa dalam cuplikan kode ini tidak jauh berbeda dari yang ada di contoh pertama. Semua yang telah kita lakukan di sini adalah kita telah mengubah “this.listenTo(this.model, …)” menjadi “this.model.on(…)”. Karena kami sangat terbiasa dengan panggilan “.on()” untuk pengikatan peristiwa dari pengalaman kami dengan beberapa kerangka kerja dan pustaka JavaScript lainnya, ketika kami mulai menggunakan Backbone.js, kami sering cenderung menggunakan panggilan “.on()” untuk mengikat acara. Ini akan baik-baik saja, hanya jika kita repot-repot memanggil ".off()" untuk melepaskan pengikatan event handler ketika mereka tidak lagi diperlukan. Tapi kami jarang melakukan itu, dan itu akhirnya menjadi sumber kebocoran memori.

Backbone.js menawarkan cara sederhana untuk menyelesaikan masalah ini. Ini melalui penggunaan metode "object.listenTo()". Ini memungkinkan objek yang Anda panggil "listenTo()" untuk melacak peristiwa apa yang sedang didengarkannya, dan juga memudahkan untuk melepaskan semua peristiwa itu sekaligus. Tampilan, misalnya, secara otomatis berhenti mendengarkan semua peristiwa terikat segera setelah Anda memanggil "remove()" di atasnya.

Kesalahan #5: Membuat Tampilan Monolitik

Jika Anda memikirkannya, minimalisme Backbone.js memberikan fleksibilitas yang luar biasa tentang bagaimana Anda ingin merancang front-end aplikasi web Anda. Dengan model, koleksi, dan tampilan sebagai blok penyusun komponen Anda, Anda harus membuatnya seringan dan sespesifik mungkin. Lebih sering daripada tidak, itu adalah tampilan yang akhirnya menjadi aspek terberat dari aplikasi web Anda dalam hal kode. Tetapi sangat penting agar Anda tidak membuat tampilan monolitik raksasa yang akhirnya mencoba melakukan semua yang ditawarkan aplikasi Anda. Alih-alih membuat tampilan "AudioPlayer" raksasa dengan semua logika yang dijejalkan ke dalamnya, bagi menjadi beberapa tampilan logis seperti tampilan untuk daftar putar, tampilan untuk kontrol, tampilan untuk visualizer, dan sebagainya. Jenis perincian apa yang ingin Anda pastikan mungkin bergantung pada aplikasi yang Anda coba buat.

Ini karena dengan tampilan granular, di mana setiap tampilan melakukan sesuatu yang spesifik dan melakukannya dengan benar, mengembangkan aplikasi web dengan Backbone.js menjadi sangat mudah. Kode Anda harus lebih mudah dipelihara dan mudah diperluas atau dimodifikasi di masa mendatang. Lalu ada ekstrem lainnya, di mana Anda akhirnya melakukannya secara berlebihan. Tampilan Backbone.js dirancang untuk memudahkan Anda bekerja dengan model atau koleksi, dan ini mungkin dapat berfungsi sebagai petunjuk tentang bagaimana Anda harus menyusun aplikasi Anda. Ian Storm Taylor membagikan beberapa ide berharga di blognya yang mungkin harus Anda ingat saat menerapkan tampilan.

Kesalahan #6: Tidak Menyadari Bahwa Backbone.js Dapat Diadaptasi ke API yang Tidak Tenang

Backbone.js bekerja dengan RESTful API berbasis JSON di luar kotak. Yang Anda butuhkan hanyalah jQuery (atau sesuatu yang menjadi penggantinya, seperti Zepto). Namun, Backbone.js sangat dapat diperluas. Faktanya, Backbone.js dapat diadaptasi untuk menggunakan jenis API lain dan bahkan jenis format penyandian lainnya.

Komponen Backbone.js yang berhubungan dengan interaksi front-end dengan layanan back-end adalah “Sync”. Komponen ini memperlihatkan sejumlah atribut yang dapat dengan mudah Anda timpa untuk menyesuaikan cara Backbone.js berinteraksi dengan titik akhir API. Bahkan, dimungkinkan juga untuk mengganti mekanisme sinkronisasi default dengan sesuatu yang tidak terlalu tradisional, seperti menggunakan localStorage untuk menyimpan data, alih-alih layanan back-end.

Ada banyak plugin yang memudahkan untuk menyesuaikan perilaku sinkronisasi Backbone.js. Misalnya, sebuah plugin bernama Backbone.dualStorage memungkinkan Anda menggunakan layanan back-end dan penyimpanan lokal untuk menyimpan data. Saat aplikasi Anda offline, plugin menggunakan localStorage untuk terus melayani permintaan dari data yang di-cache, dan melacak perubahan yang mungkin Anda sinkronkan dengan server nanti saat Anda online.

Meskipun menggunakan Backbone.js dengan back-end yang dirancang agar RESTful dan kompatibel dengannya lebih mudah digunakan, bukan berarti hanya itu yang bisa digunakan oleh Backbone.js. Dengan beberapa perubahan pada mekanisme sinkronisasi Backbone.js default, Anda dapat mengadaptasinya ke berbagai API layanan back-end dan format penyandian.

Perlu disebutkan bahwa bagian lain dari Backbone.js juga fleksibel, dan dengan cara opsional. Misalnya, Anda tidak harus menggunakan mesin templating default yang disertakan dengan Underscore.js. Anda bahkan tidak perlu menggunakan komponen tampilan dari Backbone.js dan dapat menggantinya dengan yang lain sepenuhnya jika Anda mau.

Kesalahan #7: Menyimpan Data di Tampilan, Bukan di Model

Salah satu kesalahan yang mungkin sering kita lakukan sebagai pemula belajar Backbone.js adalah menyimpan data secara langsung di view sebagai atribut. Data ini mungkin ada untuk melacak beberapa keadaan atau beberapa pilihan pengguna. Ini adalah sesuatu yang harus dihindari.

 var AudioPlayerVisualizer = Backbone.View.extend({ events: { 'click .btn-color': function(event) { this.colorHex = $(event.target).data('color-hex') this.render() } }, // ... })

Anda selalu dapat membuat beberapa model dan koleksi tambahan tanpa titik akhir. Ini dapat membantu Anda menyimpan data yang tidak harus disimpan di back-end, atau mungkin bersifat sementara. Menyimpannya dalam model memberi Anda manfaat untuk dapat mendengarkan perubahan. Tampilan yang relevan, atau bahkan beberapa tampilan, dapat mengamati model-model ini dan me-render ulang jika diperlukan.

Bayangkan jika Anda benar-benar menyimpan variabel pelacakan status pada tampilan dan harus memanggil metode render setiap kali Anda mengubahnya. Kehilangan satu panggilan saja ke metode render ini dapat membuat aplikasi Anda dalam keadaan rusak, dalam hal apa yang dialami pengguna di layar. Selain itu, dengan tampilan kecil Anda mungkin harus menyinkronkan variabel status ini pada beberapa objek tampilan dan kemudian harus memanggil metode render juga.

Kesalahan #8: Menggunakan jQuery “.on()” Alih-alih Acara yang Didelegasikan

Backbone.js, menurut pendapat saya, memiliki satu cara luar biasa untuk menangani peristiwa DOM. Tidak menggunakannya menimbulkan banyak kerugian. Fungsi pengikatan acara ".on()" jQuery dapat terasa nyaman, tetapi seringkali ternyata merepotkan dalam jangka panjang. Misalnya, ketika elemen dilepaskan dari DOM, jQuery secara otomatis menghapus semua event handler yang terikat ke elemen menggunakan ".on()". Ini berarti bahwa setiap peristiwa DOM yang Anda coba ikat dari dalam tampilan perlu di-rebound jika Anda melepaskan elemen root dari DOM dan memasangnya kembali.

 var AudioPlayerControls = Backbone.View.extend({ events: { 'click .btn-play, .btn-pause': function() { /* ... */ }, 'click .btn-prev': function() { /* ... */ }, 'click .btn-next': function() { /* ... */ }, 'click .btn-shuffle': function() { /* ... */ }, 'click .btn-repeat': function() { /* ... */ } }, // ... })

Saat elemen yang sesuai dengan tampilan ini dilampirkan kembali ke DOM, yang harus Anda lakukan hanyalah memanggil "delegateEvents()" pada tampilan untuk mengikat semua peristiwa ini.

Perhatikan bahwa penting untuk memahami bagaimana peristiwa ini terikat. Alih-alih mengikat event pada elemen yang ditentukan oleh pemilih, Backbone.js sebenarnya mengikat event handler ke elemen root tampilan. Ini berfungsi dengan baik di hampir semua kasus, dan pada kenyataannya bekerja lebih baik untuk sebagian besar kebutuhan kita. Mengubah atau mengganti elemen anak di subpohon DOM tampilan tidak memerlukan Backbone.js untuk mengikat setiap peristiwa lagi pada elemen baru. Pendengar yang ada terus bekerja.

Namun, ini mencegah peristiwa tertentu untuk didengarkan. Salah satu contohnya adalah di mana Anda mungkin ingin mendengarkan acara gulir di "jendela" atau pada elemen yang dapat digulir anak. Dalam hal elemen anak, Anda dapat membuat sub-tampilan untuk elemen itu dan menangani acara di sana.

Kesimpulan

Backbone.js, menjadi kerangka kerja yang sangat ringkas namun dapat diperluas, adalah pilihan yang sangat baik untuk aplikasi web yang menuntut banyak fleksibilitas di belakang layar. Tidak seperti kerangka kerja seperti Angular.js dan Ember.js yang selalu ada untuk memberi tahu Anda cara melakukan apa yang ingin Anda lakukan, Backbone.js mundur selangkah, memberi Anda seperangkat alat yang hebat, dan memungkinkan Anda memutuskan cara menggunakannya mereka. Saya harap tutorial Backbone.js untuk pemula ini akan membantu Anda menghindari beberapa kesalahan pengembangan umum dan membangun sesuatu yang luar biasa dengannya.