10 Aplikasi Web Dibuat dengan Backbone.js [Kajian Kes]

Pernahkah anda terikat dengan kod spageti? Adakah anda lebih suka memberi makan sesuatu aplikasi anda lebih sihat? Jika ya, lihatlah apa yang boleh dicapai dengan Backbone.js. Tulang belakang adalah perpustakaan JavaScript yang longgar berdasarkan corak reka bentuk Model-View-Controller tetapi kerana ia tidak mempunyai elemen Pengawal, lebih baik memanggilnya rangka MV *.

Ia membantu anda membina cepat, rapi dan kaya data aplikasi web halaman tunggal, menyimpan anda logik data berasingan daripada antara muka pengguna anda, menyelamatkan anda daripada mengikat data anda ke DOM, dan skala sebagai aplikasi anda berkembang. Oleh kerana Backbone menyegerakkan dengan mana-mana API RESTful secara lalai, anda boleh dengan mudah menyambung aplikasi pihak klien anda ke API sisi server yang sedia ada melalui antara muka JSON RESTful.

Dalam siaran ini, kami akan mengkaji 10 aplikasi web yang menggunakan ciri-ciri perpustakaan Backbone untuk membantu anda memahami potensi Backbone.js untuk projek aplikasi web masa depan anda.

1. Trello

Trello adalah aplikasi kerjasama dan pengurusan projek dalam talian yang membantu anda menyusun projek anda ke Papan, Senarai Semakan, Kad, Senarai Kad dan menyediakan anda alat seperti Perbualan untuk komunikasi ahli pasukan.

Trello dibina dari bawah dengan Backbone.js. Backbone berfungsi bersama-sama dengan API Sejarah HTML5 dan Bahasa Templat kurang bahasa logik Mustache pada frontend. Semua elemen Trello Tech Stack telah direka dengan cara yang menghasilkan a pelanggan yang boleh dikendalikan yang mudah mengendalikan kemas kini, dan dinamik semula menyegerakkan dengan pelayan setiap kali peristiwa DOM dipicu.

Trello menggunakan Model Backbone dan Views untuk objeknya seperti Kad atau Ahli, dan Koleksi Backbone untuk Model berkaitan - contohnya Kad dalam senarai. Pemaju juga membina cache Model pelanggan mereka sendiri untuk kemas kini yang lebih pantas dan banyak lagi penggunaan semula kod berkesan.

2. Foursquare

Kemungkinan besar anda sudah mendengar tentang Foursquare, aplikasi rangkaian sosial berasaskan lokasi yang popular yang membolehkan anda berkongsi tempat dengan rakan-rakan anda di seluruh dunia.

API teras teras Foursquare dibina di sekitar Model Backbone, di mana Kelas model API Foursquare (seperti Pengguna, Tempat, dan Daftar Masuk) adalah subclass kelas Model Backbone dan mewarisi kaedah dan sifat mereka.

Pelaksanaan kod tersebut boleh dilakarkan seperti ini: fourSq.api.models.Venue = fourSq.api.models.Model.extend (...); Ya, betul, Backbone membolehkan devs tulis JavaScript berorientasikan objek yang bagus.

Pandangan Backbone juga mempunyai peranan mereka dalam aplikasi Foursquare, kerana ia meningkatkan pengalaman pengguna dengan ciri-ciri seperti peta dan senarai laman utama. Selain Backbone, API JavaScript Foursquare juga menggunakan jQuery, Underscore.js (yang merupakan ketergantungan keras Backbone sahaja), dan Penutup Penutupan.

3. Kalendar Basecamp

Kem, aplikasi pengurusan projek popular menggunakan Backbone.js untuk ciri Kalendarnya.

Matlamat utama reka bentuk Kalendar Basecamp adalah untuk mencipta antara muka interaktif yang dibuat penjadualan kumpulan intuitif mungkin, dan mengemas kini dirinya dalam milisaat. Dalam Basecamp Calendar Backbone memaparkan Views ke ECO (Embedded CoffeeScript) templat apabila Model (data sisi klien) dikemas kini.

Sangat menarik untuk dicatat bahawa pasukan pemaju tidak membuat keseluruhan Basecamp aplikasi satu halaman yang merupakan kes penggunaan utama Backbone.js, tetapi hanya menggunakan perpustakaan dalam ciri Kalendar di mana mereka benar-benar dapat memanfaatkan kelebihannya. Hanya pergi untuk menunjukkan bahawa anda tidak semestinya perlu membina aplikasi satu halaman penuh dengan Backbone; Lebih baik untuk berfikir dengan teliti di mana ia boleh digunakan.

Baca lebih lanjut mengenai antipatterns Backbone untuk menentukan sama ada anda memerlukan Backbone untuk keseluruhan aplikasi anda atau tidak.

4. Flowdock

Flowdock adalah aplikasi komunikasi pasukan masa nyata yang menyediakan anda ciri seperti sembang kumpulan, peti masuk pasukan, dan aliran kerja masa nyata

Flowdock dibina dari bawah ke atas Backbone.js. Cabaran utama pasukan pembangunan adalah untuk membolehkan mesej masa nyata dan aliran kerja. Secara lalai Backbone.js menghubungkan ke sisi pelayan melalui antara muka RESTful, yang tidak membuat aliran data masa nyata mungkin. Oleh itu, devs memutuskan untuk menyimpan mesej melalui enjin realtime Socket.io bukan API REST.

Untuk mencapai matlamat ini menulis kaedah tersuai dipanggil Backbone.sync. Memandangkan Socket.io juga perpustakaan JavaScript ia menjadikan komunikasi antara frontend dan backend yang dipacu oleh JavaScript (Node.js) tanpa lancar. Flowdock adalah aplikasi Rails di sebelah pelayan, tetapi mereka mempunyai backend Node.js berasingan yang mengendalikan sambungan Socket.io.

Flowdock meningkatkan pengalaman pengguna masa nyata lebih banyak lagi dengan Bacon.js, perpustakaan JavaScript berguna yang membolehkan pengaturcaraan reaktif berfungsi. Ciri EventStreams daripada Bacon.js membantu Flowdock mengekalkan Model Backbone dan Koleksinya sehingga kini.

5. Cari Cocktail

Carian koktel adalah aplikasi sumber terbuka yang memberi anda peluang untuk melihat kod pelaksanaan Backbone.js yang sangat mudah. Backend dikuasakan oleh Python, tetapi apa yang menarik kepada kami adalah fail script.js aplikasi.

Sekiranya anda mengkaji kod tersebut, anda dapat melihat struktur yang sangat asas dalam rangka Model-View- *: ia mengandungi satu Model ditakrifkan dalam Koktel kelas yang tidak mengubah tetapan lalai dari kelas induk Backbone.Model, satu Koleksi tulang belakang untuk hasil carian, dan 3 Pandangan Belakang Backbone, masing-masing menambah kaedah baru kepada Backbone.View kelas induk.

Jika anda melihat fail index.html, anda boleh mengetahui bagaimana pemaju menambah Backbone.js dan dependenciesnya, Underscore.js dan jQuery di bahagian kepala. Underscore.js adalah satu-satunya pergantungan keras Backbone sementara jQuery diperlukan jika anda ingin memanipulasi DOM dengan bantuan Pandangan Backbone (yang merupakan kes carian aplikasi Cocktail).

6. Bitbucket

Bitbucket adalah kod hosting hosting dan aplikasi pengurusan kod yang serupa dengan Github. Atlassian, syarikat di belakangnya menggunakan Backbone dalam perisian pengesanan isu komersial JIRA, produk utama mereka yang lain juga.

Semasa penggunaan menyeluruh Backbone.js dalam aplikasi mereka, pasukan pembangunan mendapati beberapa perkara yang mereka terlepas dari Backbone. Mereka ditemui banyak kegagalan senyap yang disebabkan oleh konvensyen definisi longgar Backbone.js. Pada dasarnya ini bermakna Model, Koleksi dan Views tidak semestinya menentukan peristiwa adat yang mereka dedahkan. Dan jika itu tidak mencukupi, Model tidak semestinya menentukan sifat-sifatnya mereka mendedahkan.

Ini sifat permisif adalah ciri yang dicintai oleh banyak pemaju tetapi tidak oleh pasukan Atlassian sehingga mereka mengembangkan lanjutan Backbone mereka sendiri yang disebut Backbone.Brace itu menambah campuran dan atribut dan acara yang didokumentasikan diri ke perpustakaan.

Jika anda terganggu oleh perkara yang sama, anda boleh menambah Backbone.Brace ke aplikasi anda sendiri, kerana ia merupakan projek sumber terbuka yang dihoskan pada Bitbucket itu sendiri. BitBucket menggunakan bahasa templat Mustache seperti Trello untuk membuat Views Backbone pada frontend.

7. SoundCloud

SoundCloud adalah platform pengedaran audio popular di mana anda boleh merakam, memuat naik dan berkongsi audio anda sendiri, atau mendengar muzik secara percuma.

Pemaju SoundCloud menggunakan Backbone.js pertama sebagai kerangka frontend aplikasi mudah alih mereka, tetapi mereka menyukainya begitu banyak sehingga mereka juga menggunakannya di sisi klien laman web desktop mereka. Di Blog Belakang mereka, mereka menerangkan kerangka pilihan mereka dengan keupayaan Backbone untuk menyediakan asas struktur pepejal sementara masih tetap fleksibel.

Penskalaan merupakan kebimbangan utama untuk aplikasi penstriman audio, dan SoundCloud mengakui bahawa ia “mempunyai lebih banyak kaitan dengan organisasi daripada pelaksanaan” yang menjadikan tulang belakang Backbone yang teratur tetapi ringan merupakan pilihan ideal untuk mereka.

SoundCloud menggunakan sistem templat semantik Handlebars untuk memaparkan Views Backbone pada frontend.

8. AirBnB

AirBnB adalah sebuah pasar komuniti yang sangat berjaya di mana anda boleh mencari dan menempah pelbagai jenis penginapan di hampir 200 negara di seluruh dunia

AirBnB menggunakan Backbone.js terlebih dahulu dalam apl mudah alihnya seperti SoundCloud, tetapi kemudiannya memanfaatkan ciri aplikasinya seperti Wishlists, Match, Search, Komuniti dan Pembayaran. AirBnB sangat menyukai Backbone sehingga mereka tidak hanya menetap untuk menggunakannya di frontend tetapi juga mahu membolehkan perpustakaan berjalan di belakang.

Mereka kemudian membuat perpustakaan Backbone sisi pelayan mereka, Rendr, sumber terbuka dan boleh didapati di laman Github mereka. Rendr ditulis dalam Node.js dan ia mengikuti falsafah “mengenakan struktur minimum, membolehkan pemaju menggunakan perpustakaan dengan cara yang paling sesuai untuk permohonan mereka” sama seperti Backbone itu sendiri

Sekiranya anda lebih berminat dengan tumpuan teknologi AirbnB, baca postingan blog mereka mengenai perjalanan mereka dari backend Rails ke Holy Grail daripada Penggunaan Serentak Backbone secara serentak pada klien dan pelayan.

9. Hulu

Hulu adalah aplikasi streaming video yang membolehkan anda menonton rancangan TV dan filem secara percuma, jika anda berada di AS.

Hulu menggunakan Backbone.js untuk membina pengalaman pengguna yang lancar dan cepat untuk pencinta filem. Antara muka membolehkan anda bergerak dengan cepat melalui aplikasi dengan peralihan lembut semasa anda menavigasi. Tulang belakang menjimatkan lebar jalur untuk pengguna sebagai skrip dan video terbenam tidak boleh dimuat semula setiap masa.

Hulu mengendalikan enjin Rails pada backend, dan jika anda suka perbincangan lucu tetapi bermaklumat, anda boleh membaca bagaimana pasukan pemaju tersangkut dengan jQuery sebelum akhirnya memutuskan untuk menukar kepada rangka kerja Backbone yang lebih teratur.

Backbone.js dibenarkan Hulu ke secara serentak menukar rendering mereka dari pelayan ke sisi pelanggan dan bukan melakukan penulisan semula risiko backend Rail yang sedia ada.

10. Count

Count adalah aplikasi analitik mudah alih masa nyata yang membolehkan anda menjejaki prestasi aplikasi iPhone, Android atau Windows Phone anda dari tetingkap penyemak imbas.

Lihatlah senarai yang luar biasa dari perisian sumber terbuka yang digunakan untuk membangunkan platform, termasuk superstar tahun-tahun kebelakangan: Nginx, MongoDB, Node.js untuk sisi pelayan dan sudah tentu Backbone.js untuk frontend.

Countly menggunakan perpustakaan templat semantik Handlebars untuk menghasilkan Views Backbone yang memaparkan data yang disediakan dan dimuatkan dengan Model Backbone. Countly adalah aplikasi mesra pemaju: ia bukan sahaja mudah diperluaskan tetapi dokumentasinya juga menyediakan devs dengan tutorial seperti ini pada bagaimana untuk membina plugin peribadi di atas pelanggan Backbone teras.

Nota editor: Ini ditulis oleh Anna Monus untuk Hongkiat.com. Anna adalah seorang pengembang web dan penulis kod dengan minat untuk sains, kecerdasan buatan, dan teknologi yang mengganggu.