Saya mencoba memahami kegunaan backbone.js dari situsnya http://documentcloud.github.com/backbone , tetapi saya masih belum dapat mengetahuinya.

Adakah yang bisa membantu saya dengan menjelaskan cara kerjanya dan bagaimana bisa membantu dalam menulis JavaScript yang lebih baik?

Backbone.js pada dasarnya adalah kerangka kerja uber-light yang memungkinkan Anda untuk menyusun kode Javascript Anda dalam mode MVC (Model, View, Controller) di mana ...

Model adalah bagian dari kode Anda yang mengambil dan mengisi data,

Lihat adalah representasi HTML dari model ini (tampilan berubah seiring perubahan model, dll.)

dan Pengontrol opsional yang dalam hal ini memungkinkan Anda untuk menyimpan status aplikasi Javascript Anda melalui URL hashbang, misalnya: http://twitter.com/#search?q=backbone.js

Beberapa pro yang saya temukan dengan Backbone:

• Tidak ada lagi Javascript Spaghetti: kode diatur dan dipecah menjadi file .js yang secara semantik bermakna yang kemudian digabungkan menggunakan JAMMIT

• Tidak lagi jQuery.data(bla, bla): tidak perlu menyimpan data dalam DOM, sebagai gantinya, simpan data dalam model

• mengikat acara hanya berfungsi

• pustaka utilitas garis bawah yang sangat berguna

• kode backbone.js didokumentasikan dengan baik dan banyak dibaca. Membuka mata saya ke sejumlah teknik kode JS.

Cons:

• Butuh beberapa saat untuk membungkus kepala saya dan mencari tahu bagaimana menerapkannya ke kode saya, tapi saya seorang pemula Javascript.

Berikut adalah serangkaian tutorial hebat tentang cara menggunakan Backbone dengan Rails sebagai back-end:

CloudEdit: Tutorial Backbone.js dengan Rails:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

ps Ada juga kelas Koleksi yang luar biasa ini yang memungkinkan Anda menangani koleksi model dan meniru model bersarang, tetapi saya tidak ingin membingungkan Anda sejak awal.

Jika Anda akan membangun antarmuka pengguna yang kompleks di peramban maka Anda mungkin akan menemukan diri Anda sendiri pada akhirnya menciptakan sebagian besar bagian yang membentuk kerangka kerja seperti Backbone.js dan Sammy.js. Jadi pertanyaannya adalah, apakah Anda membangun sesuatu yang cukup rumit di peramban untuk pantas menggunakannya (jadi Anda sendiri akhirnya tidak menemukan hal yang sama).

Jika yang Anda rencanakan untuk dibangun adalah sesuatu di mana UI secara teratur mengubah tampilannya, tetapi tidak pergi ke server untuk mendapatkan seluruh halaman baru, maka Anda mungkin memerlukan sesuatu seperti Backbone.js atau Sammy.js. Contoh utama dari hal seperti itu adalah Gmail Google. Jika Anda pernah menggunakannya, Anda akan melihat bahwa ia mengunduh satu potongan besar HTML, CSS, dan JavaScript ketika Anda pertama kali masuk dan kemudian setelah itu semuanya terjadi di latar belakang. Ini dapat berpindah antara membaca email dan memproses kotak masuk dan mencari dan kembali melalui semuanya lagi tanpa pernah meminta seluruh halaman baru untuk dirender.

Ini adalah jenis aplikasi yang unggul dalam membuat kerangka kerja lebih mudah untuk dikembangkan. Tanpa mereka, Anda akan berakhir dengan berbagi koleksi perpustakaan individual yang beragam untuk mendapatkan bagian dari fungsionalitas (misalnya, jQuery BBQ untuk manajemen sejarah, Events.js untuk acara, dll.) Atau Anda akhirnya akan membangun semuanya sendiri dan harus memelihara dan menguji semuanya sendiri juga. Bandingkan itu dengan sesuatu seperti Backbone.js yang memiliki ribuan orang menontonnya di Github, ratusan garpu tempat orang mungkin mengerjakannya, dan ratusan pertanyaan sudah diajukan dan dijawab di sini di Stack Overflow.

Tetapi tidak ada yang penting jika apa yang Anda rencanakan untuk dibangun tidak cukup rumit untuk sebanding dengan kurva pembelajaran yang terkait dengan suatu kerangka kerja. Jika Anda masih membangun situs-situs PHP, Java, atau yang lainnya di mana server back end masih melakukan semua hal yang berat untuk membangun halaman web atas permintaan pengguna dan JavaScript / jQuery hanya mempercayakan proses itu, Anda tidak perlu t akan membutuhkan atau belum siap untuk Backbone.js.

Backbone adalah ...

... pustaka komponen yang sangat kecil yang dapat Anda gunakan untuk membantu mengatur kode Anda. Itu datang dikemas sebagai file JavaScript tunggal. Tidak termasuk komentar, ia memiliki kurang dari 1000 baris JavaScript yang sebenarnya. Ini ditulis dengan bijaksana dan Anda dapat membaca semuanya dalam beberapa jam.

Ini perpustakaan front-end, Anda memasukkannya di halaman web Anda dengan tag skrip. Ini hanya memengaruhi browser, dan sedikit berbicara tentang server Anda, kecuali bahwa itu idealnya mengekspos API yang tenang.

Jika Anda memiliki API, Backbone memiliki beberapa fitur bermanfaat yang akan membantu Anda berbicara dengannya, tetapi Anda dapat menggunakan Backbone untuk menambahkan interaktivitas ke halaman HTML statis apa pun.

Backbone adalah untuk ...

... menambahkan struktur ke JavaScript.

Karena JavaScript tidak menerapkan pola tertentu, aplikasi JavaScript dapat menjadi sangat berantakan dengan sangat cepat. Siapa pun yang telah membangun sesuatu di luar hal sepele dalam JavaScript kemungkinan akan menghadapi pertanyaan seperti:

1. Di mana saya akan menyimpan data saya?
2. Di mana saya akan meletakkan fungsi saya?
3. Bagaimana saya menghubungkan fungsi saya bersama-sama, sehingga mereka dipanggil dengan cara yang masuk akal dan tidak beralih ke spageti?
4. Bagaimana saya bisa membuat kode ini dapat dikelola oleh pengembang yang berbeda?

Backbone berusaha menjawab pertanyaan-pertanyaan ini dengan memberi Anda:

• Model dan Koleksi untuk membantu Anda mewakili data dan koleksi data.
• Tampilan, untuk membantu Anda memperbarui DOM Anda ketika data Anda berubah.
• Sistem acara sehingga komponen dapat saling mendengarkan. Ini menjaga komponen Anda tetap tidak terpasang dan mencegah spagettifikasi.
• Satu set minimal konvensi yang masuk akal, sehingga pengembang dapat bekerja bersama pada basis kode yang sama.

Kami menyebutnya pola MV *. Model, Tampilan, dan tambahan opsional.

Tulang punggung ringan

Meskipun penampilan awal, Backbone sangat ringan, hampir tidak melakukan apa-apa. Apa yang dilakukannya sangat membantu.

Ini memberi Anda satu set objek kecil yang dapat Anda buat, dan yang dapat memancarkan acara dan mendengarkan satu sama lain. Anda dapat membuat objek kecil untuk mewakili komentar misalnya, dan kemudian objek commentView kecil untuk mewakili tampilan komentar di tempat tertentu di browser.

Anda dapat memberi tahu commentView untuk mendengarkan komentar dan menggambar ulang sendiri ketika komentar berubah. Bahkan jika Anda memiliki komentar yang sama ditampilkan di beberapa tempat di halaman Anda, semua pandangan ini dapat mendengarkan model komentar yang sama dan tetap sinkron.

Cara penyusunan kode ini membantu Anda agar tidak terjerat bahkan jika basis kode Anda menjadi sangat besar dengan banyak interaksi.

Model

Saat memulai, sangat umum untuk menyimpan data Anda baik dalam variabel global, atau dalam DOM sebagai atribut data . Keduanya memiliki masalah. Variabel global dapat saling bertentangan, dan umumnya merupakan bentuk yang buruk. Atribut data yang disimpan dalam DOM hanya dapat berupa string, Anda harus menguraikannya masuk dan keluar lagi. Sulit untuk menyimpan hal-hal seperti array, tanggal atau objek, dan mem-parsing data Anda dalam bentuk terstruktur.

Atribut data terlihat seperti ini:

<p data-username="derek" data-age="42"></p>

Backbone memecahkan ini dengan menyediakan objek Model untuk mewakili data Anda dan metode terkait . Katakanlah Anda memiliki daftar todo, Anda akan memiliki model yang mewakili setiap item pada daftar itu.

Ketika model Anda diperbarui, itu akan menyalakan suatu peristiwa. Anda mungkin memiliki pandangan yang terkait dengan objek tertentu. Tampilan mendengarkan acara perubahan model dan membuat ulang itu sendiri.

Tampilan

Backbone memberi Anda objek View yang berbicara dengan DOM. Semua fungsi yang memanipulasi DOM atau mendengarkan acara DOM pergi di sini.

Tampilan biasanya mengimplementasikan fungsi render yang menggambar ulang seluruh tampilan, atau mungkin bagian dari tampilan. Tidak ada kewajiban untuk mengimplementasikan fungsi render, tetapi itu adalah konvensi umum.

Setiap tampilan terikat ke bagian tertentu dari DOM, jadi Anda mungkin memiliki searchFormView, yang hanya mendengarkan formulir pencarian, dan shoppingCartView, yang hanya menampilkan keranjang belanja.

Tampilan biasanya juga terikat dengan Model atau Koleksi tertentu. Ketika Model diperbarui, ia akan menyalakan suatu acara yang dilihat oleh pendengarnya. Tampilan mungkin mereka sebut render untuk menggambar ulang sendiri.

Demikian juga, ketika Anda mengetik ke formulir, tampilan Anda dapat memperbarui objek model. Setiap tampilan lain yang mendengarkan model itu akan memanggil fungsi rendernya sendiri.

Ini memberi kita pemisahan keprihatinan yang bersih yang menjaga kode kita tetap rapi dan rapi.

Fungsi render

Anda dapat menerapkan fungsi render dengan cara apa pun yang Anda inginkan. Anda mungkin hanya memasukkan beberapa jQuery di sini untuk memperbarui DOM secara manual.

Anda mungkin juga mengkompilasi template dan menggunakannya. Templat hanyalah string dengan titik penyisipan. Anda meneruskannya ke fungsi kompilasi bersama dengan objek JSON dan mendapatkan kembali string yang dikompilasi yang dapat Anda masukkan ke DOM Anda.

Koleksi

Anda juga memiliki akses ke koleksi yang menyimpan daftar model, jadi todoCollection akan menjadi daftar model todo. Ketika sebuah koleksi mendapatkan atau kehilangan suatu model, mengubah urutannya, atau suatu model dalam suatu pembaruan koleksi, seluruh koleksi mengeluarkan suatu peristiwa.

Tampilan dapat mendengarkan koleksi dan memperbarui dirinya sendiri setiap kali koleksi diperbarui.

Anda dapat menambahkan metode pengurutan dan filter ke koleksi Anda, dan membuatnya mengurutkan sendiri secara otomatis misalnya.

Dan Acara untuk Mengikat Semuanya

Sebisa mungkin, komponen aplikasi dipisahkan satu sama lain. Mereka berkomunikasi menggunakan acara, sehingga shoppingCartView dapat mendengarkan koleksi ShoppingCart, dan menggambar ulang sendiri ketika keranjang ditambahkan.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

Tentu saja, objek lain mungkin juga mendengarkan shoppingCart, dan mungkin melakukan hal-hal lain seperti memperbarui total, atau menyimpan keadaan di penyimpanan lokal.

• Tampilan mendengarkan Model dan menampilkan ketika model berubah.
• Tampilan mendengarkan koleksi dan merender daftar (atau kisi, atau peta, dll.) Saat item dalam koleksi berubah.
• Model mendengarkan Tampilan sehingga mereka dapat mengubah status, mungkin ketika formulir diedit.

Memisahkan objek Anda seperti ini dan berkomunikasi menggunakan acara berarti Anda tidak akan pernah tersimpul dalam ikatan, dan menambahkan komponen dan perilaku baru itu mudah. Komponen baru Anda hanya perlu mendengarkan objek lain yang sudah ada dalam sistem.

Konvensi

Kode yang ditulis untuk Backbone mengikuti serangkaian konvensi yang longgar. Kode DOM termasuk dalam Tampilan. Kode koleksi termasuk dalam Koleksi. Logika bisnis masuk dalam model. Pengembang lain yang mengambil basis kode Anda akan dapat mulai bekerja.

Untuk menyimpulkan

Backbone adalah pustaka ringan yang memberikan struktur pada kode Anda. Komponen dipisahkan dan berkomunikasi melalui acara sehingga Anda tidak akan berakhir berantakan. Anda dapat memperluas basis kode dengan mudah, cukup dengan membuat objek baru dan mendengarkan objek yang ada dengan tepat. Kode Anda akan lebih bersih, lebih bagus, dan lebih mudah dikelola.

Buku kecilku

Saya sangat menyukai Backbone sehingga saya menulis sedikit buku intro tentang itu. Anda dapat membacanya secara online di sini: http://nicholasjohnson.com/backbone-book/

Saya juga membagi materi menjadi kursus online pendek, yang dapat Anda temukan di sini: http://www.forwardadvance.com/course/backbone . Anda dapat menyelesaikan kursus dalam waktu sekitar satu hari.

Berikut ini presentasi yang menarik:

Pengantar Backbone.js

Petunjuk (dari slide):

• Rails di browser? Tidak ada .
• Kerangka kerja MVC untuk JavaScript? Agak .
• Mesin negara besar dan gemuk? Ya !

Backbone.js adalah kerangka kerja JavaScript yang membantu Anda mengatur kode Anda. Ini secara harfiah merupakan tulang punggung di mana Anda membangun aplikasi Anda. Itu tidak menyediakan widget (seperti jQuery UI atau Dojo).

Ini memberi Anda satu set kelas dasar yang dapat Anda rentangkan untuk membuat kode JavaScript bersih yang berinteraksi dengan titik akhir tenang pada server Anda.

JQuery dan Mootools hanyalah kotak alat dengan banyak alat proyek Anda. Backbone bertindak seperti arsitektur atau tulang punggung untuk proyek Anda tempat Anda dapat membangun aplikasi menggunakan JQuery atau Mootools.

Ini adalah video pengantar yang cukup bagus: http://vimeo.com/22685608

Jika Anda mencari lebih banyak tentang Rails dan Backbone, Thoughtbot memiliki buku yang cukup bagus ini (tidak gratis): https://workshops.thoughtbot.com/backbone-js-on-rails

Saya harus mengakui bahwa semua "keunggulan" MVC tidak pernah membuat pekerjaan saya lebih mudah, lebih cepat, atau lebih baik. Itu hanya membuat pengalaman keseluruhan kode lebih abstrak dan memakan waktu. Pemeliharaan adalah mimpi buruk ketika mencoba men-debug konsepsi seseorang tentang apa arti pemisahan. Tidak tahu berapa banyak dari Anda yang pernah mencoba untuk memperbarui situs FLEX yang menggunakan Cairngorm sebagai model MVC tetapi apa yang perlu waktu 30 detik untuk memperbarui sering kali dapat memakan waktu lebih dari 2 jam (berburu / melacak / debugging hanya untuk menemukan satu peristiwa tunggal ). MVC dulu dan sekarang, bagi saya, merupakan "keuntungan" yang bisa Anda dapatkan.

Inilah posting Memulai cepat yang saya tulis di BackboneJS. Semoga ini bisa membantu! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

backbone.js adalah Model-View-Controller (MVC) dengan JavaScript tetapi Extjs lebih baik daripada backbone untuk Pola MVC oleh skrip java

Dengan backbone Anda mendapat kebebasan untuk melakukan hampir semua hal yang Anda inginkan. Daripada mencoba memotong api dan menyesuaikan saya akan menggunakan Backbonejs untuk kesederhanaan dan kemudahan implementasi. Sekali lagi sulit untuk mengatakan apa yang Anda butuhkan dari dua satu adalah perpustakaan dan komponen lainnya

Backbone dibuat oleh Jeremy Ashkenas yang juga menulis CoffeeScript. Sebagai aplikasi yang beratnya JavaScript, yang sekarang kita kenal sebagai Backbone bertanggung jawab untuk menyusun aplikasi menjadi basis kode yang koheren. Underscore.js, satu-satunya ketergantungan backbone, juga merupakan bagian dari aplikasi DocumentCloud.

Backbone membantu pengembang mengelola model data di aplikasi web sisi klien mereka sebanyak mungkin disiplin dan struktur sebanyak yang Anda dapatkan dalam logika aplikasi sisi server tradisional.

Manfaat tambahan menggunakan Backbone.js

1. Lihat Backbone sebagai perpustakaan, bukan sebagai kerangka kerja
2. Javascript sekarang sedang disusun dengan cara terstruktur, the Model (MVVM)
3. Komunitas pengguna besar

Ini juga menambahkan perutean menggunakan pengontrol dan tampilan dengan KVO. Anda dapat mengembangkan aplikasi "AJAXy" dengannya.

Lihat sebagai kerangka Sproutcore atau Cappuccino yang ringan.

Adalah pola desain MVC di sisi klien, percayalah .. Ini akan menghemat banyak kode, belum lagi kode yang lebih bersih dan jelas, kode pemeliharaan yang lebih mudah. Awalnya mungkin sedikit rumit, tapi percayalah ini perpustakaan yang bagus.

Sudah banyak jawaban bagus. Backbone js membantu menjaga kode terorganisir. Mengubah model / koleksi menangani tampilan rendering otomatis yang mengurangi banyak overhead pengembangan.

Meskipun memberikan fleksibilitas maksimum untuk pengembangan, pengembang harus berhati-hati untuk menghancurkan model dan menghapus tampilan dengan benar. Kalau tidak, mungkin ada kebocoran memori dalam aplikasi.

Aplikasi web yang melibatkan banyak interaksi pengguna dengan banyak permintaan AJAX, yang perlu diubah dari waktu ke waktu, dan yang berjalan secara waktu nyata (seperti Facebook atau StackOverflow) harus menggunakan kerangka kerja MVC seperti Backbone.js. Ini cara terbaik untuk membangun kode yang bagus.

Jika aplikasi ini hanya kecil, maka Backbone.js berlebihan, terutama untuk pengguna pertama kali.

Backbone memberi Anda sisi klien MVC, dan semua kelebihan yang tersirat dari ini.