10 Aplikasi Web Dibuat dengan Backbone.js [Studi Kasus]
Pernahkah Anda terjerat dalam kode spageti? Apakah Anda lebih suka memberi makan aplikasi Anda sesuatu yang lebih sehat? Jika demikian, intip apa yang bisa dicapai dengan Backbone.js. Tulang punggung adalah perpustakaan JavaScript yang secara longgar didasarkan pada pola desain Model-View-Controller tetapi karena tidak memiliki elemen Controller, lebih baik menyebutnya sebagai kerangka kerja MV *.
Ini membantu Anda membangun cepat, ramping, dan kaya data aplikasi web satu halaman, membuat Anda logika data terpisah dari antarmuka pengguna Anda, menyelamatkan Anda dari mengikat data Anda ke DOM, dan sisik saat aplikasi Anda tumbuh. Karena Backbone menyinkronkan dengan API RESTful apa pun secara default, Anda dapat dengan mudah menghubungkan aplikasi sisi klien Anda ke API sisi server Anda yang ada melalui antarmuka JSON RESTful.
Dalam posting ini kita akan mempelajari 10 aplikasi web yang memanfaatkan fitur-fitur perpustakaan Backbone untuk membantu Anda memahami potensi yang dimiliki Backbone.js untuk proyek aplikasi web masa depan Anda..
1. Trello
Trello adalah kolaborasi online dan aplikasi manajemen proyek yang membantu Anda mengatur proyek Anda menjadi Dewan, Daftar Periksa, Kartu, Daftar Kartu, dan memberi Anda alat seperti Percakapan untuk komunikasi anggota tim.
Trello dibangun dari bawah ke atas bersama Backbone.js. Backbone bekerja bersama-sama dengan API Riwayat HTML5 dan bahasa templating kumis logika Kumis di frontend. Semua elemen Trello Tech Stack dirancang sedemikian rupa sehingga menghasilkan a klien yang dapat dikelola yang dengan mudah menangani pembaruan, dan sinkronisasi secara dinamis dengan server setiap kali acara DOM dipicu.
Trello menggunakan Backbone Model dan Views untuk objeknya seperti Kartu atau Anggota, dan Koleksi Backbone untuk Model terkait - misalnya Kartu dalam daftar. Para pengembang juga membangun cache Model sisi klien mereka sendiri untuk pembaruan lebih cepat dan lainnya penggunaan kembali kode yang efisien.
2. Foursquare
Kemungkinan besar Anda sudah pernah mendengar Empat persegi, aplikasi jejaring sosial berbasis lokasi yang populer yang memungkinkan Anda berbagi tempat dengan teman di seluruh dunia.
API JavaScript inti Foursquare dibangun di sekitar Backbone Models, tempat the Kelas model API Foursquare (seperti Users, Venues, dan Check-in) adalah subclass dari kelas Model Backbone dan mewarisi metode dan properti mereka.
Implementasi kode dapat dibuat sketsa seperti ini: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Ya, itu benar, Backbone memungkinkan devs untuk menulis JavaScript berorientasi objek yang bagus.
Backbone Views juga berperan dalam aplikasi Foursquare, karena mereka meningkatkan pengalaman pengguna dengan fitur-fitur seperti peta dan daftar beranda. Selain Backbone, API JavaScript Foursquare juga memanfaatkan jQuery, Underscore.js (yang merupakan satu-satunya ketergantungan keras Backbone), dan Compiler Penutupan.
3. Kalender Basecamp
Tempat penampungan, aplikasi manajemen proyek yang populer menggunakan Backbone.js untuk fitur Kalendernya.
Tujuan desain utama dari Basecamp Calendar adalah untuk membuat antarmuka interaktif yang membuatnya penjadwalan grup intuitif mungkin, dan pembaruan itu sendiri dalam milidetik. Di Basecamp Calendar Backbone merender Tampilan ke template ECO (Embedded CoffeeScript) setiap kali Model (data sisi klien) diperbarui.
Sangat menarik untuk dicatat bahwa tim pengembang tidak membuat Basecamp seluruh aplikasi satu halaman yang merupakan kasus penggunaan utama Backbone.js, tetapi hanya menggunakan perpustakaan di fitur Kalender di mana mereka benar-benar dapat memanfaatkan kelebihannya. Hanya menunjukkan bahwa Anda tidak perlu membangun aplikasi satu halaman penuh dengan Backbone; lebih baik hati-hati memikirkan di mana itu bisa diterapkan.
Baca lebih lanjut tentang antipattern Backbone untuk memutuskan apakah Anda memerlukan Backbone untuk seluruh aplikasi Anda atau tidak.
4. Flowdock
Flowdock adalah aplikasi komunikasi tim waktu nyata yang memberikan Anda fitur-fitur seperti obrolan grup, kotak masuk tim, dan alur kerja waktu-nyata
Flowdock dibangun dari bawah ke atas di Backbone.js. Tantangan utama tim pengembangan adalah mengaktifkan pesan dan alur kerja waktu nyata. Secara default Backbone.js terhubung ke sisi server melalui antarmuka RESTful, yang tidak memungkinkan aliran data waktu nyata. Karena itu para devs memutuskan untuk menyimpan pesan melalui mesin real-time Socket.io bukannya REST API.
Untuk mencapai ini mereka menulis metode khusus bernama Backbone.sync. Karena Socket.io juga merupakan pustaka JavaScript, menjadikan komunikasi antara frontend dan backend (Node.js) yang digerakkan oleh JavaScript mulus. Flowdock terutama merupakan aplikasi Rails di sisi server, tetapi mereka memiliki backend Node.js terpisah yang menangani koneksi Socket.io.
Flowdock meningkatkan pengalaman pengguna waktu nyata bahkan lebih dengan Bacon.js, pustaka JavaScript yang berguna yang memungkinkan pemrograman reaktif fungsional. Fitur EventStreams dari Bacon.js membantu Flowdock memperbarui Model dan Koleksi Backbone-nya.
5. Pencarian Koktail
Pencarian Koktail adalah aplikasi open source yang memberi Anda kesempatan untuk melihat kode implementasi Backbone.js yang sangat sederhana. Backend ini didukung oleh Python, tetapi yang menarik bagi kami adalah file script.js aplikasi.
Jika Anda memeriksa kode Anda dapat melihat struktur yang sangat mendasar dari kerangka kerja Model-View- *: mengandung satu Model didefinisikan dalam Koktail kelas yang tidak mengubah pengaturan default kelas induk Backbone.Model, satu Koleksi Tulang Belakang untuk hasil pencarian, dan 3 Tampilan Backbone, masing-masing menambahkan metode baru ke Backbone. Lihat kelas induk.
Jika Anda melihat file index.html, Anda dapat menemukan bagaimana pengembang menambahkan Backbone.js dan dependensinya, Underscore.js dan jQuery di bagian kepala. Underscore.js adalah satu-satunya ketergantungan Backbone saat jQuery diperlukan jika Anda ingin memanipulasi DOM dengan bantuan Backbone Views (yang merupakan kasus dari aplikasi Pencarian Cocktail).
6. Bitbucket
Bitbucket adalah hosting kode sumber dan aplikasi manajemen kode yang mirip dengan Github. Atlassian, perusahaan di belakangnya menggunakan Backbone dalam perangkat lunak pelacakan masalah komersial JIRA, produk utama mereka yang lain juga.
Selama pemanfaatan Backbone.js secara menyeluruh dalam aplikasi mereka, tim pengembangan menemukan beberapa hal yang mereka lewatkan dari Backbone. Mereka bertemu banyak kegagalan diam yang disebabkan oleh konvensi definisi longgar dari Backbone.js. Ini pada dasarnya berarti Model, Koleksi, dan Tampilan tidak perlu menentukan acara khusus yang mereka paparkan. Dan jika itu tidak cukup, Model bahkan tidak selalu mendefinisikan atribut mereka mengekspos.
Sifat permisif ini adalah fitur yang dicintai oleh banyak pengembang tetapi tidak oleh tim Atlassian sehingga mereka mengembangkan ekstensi Backbone mereka sendiri yang disebut Backbone. menambahkan mixin dan atribut dan acara yang didokumentasikan sendiri ke perpustakaan.
Jika Anda terganggu oleh hal yang sama, Anda dapat menambahkan Backbone.Brace ke aplikasi Anda sendiri, karena ini adalah proyek open-source yang di-host di Bitbucket sendiri. BitBucket menggunakan bahasa tempache Moustache seperti Trello untuk menampilkan Tampilan Backbone di frontend.
7. SoundCloud
SoundCloud adalah platform distribusi audio yang populer di mana Anda dapat merekam, mengunggah, dan membagikan audio Anda sendiri, atau mendengarkan musik secara gratis.
Pengembang SoundCloud menggunakan Backbone.js pertama sebagai kerangka kerja frontend aplikasi mobile mereka, tetapi mereka sangat menyukainya sehingga mereka juga menggunakannya di sisi klien situs web desktop mereka. Dalam Backstage Blog mereka, mereka menjelaskan pilihan kerangka kerja mereka dengan kemampuan Backbone memberikan dasar struktural yang kuat namun tetap fleksibel.
Penskalaan merupakan perhatian utama untuk aplikasi streaming audio, dan SoundCloud mengakui itu “lebih berkaitan dengan organisasi daripada implementasi” yang membuat Backbone terorganisir dengan baik tetapi ringan pilihan ideal bagi mereka.
SoundCloud menggunakan sistem templating semantik Handlebars untuk menampilkan Tampilan Backbone di frontend.
8. AirBnB
AirBnB adalah pasar komunitas yang sangat sukses di mana Anda dapat menemukan dan memesan berbagai jenis akomodasi di hampir 200 negara di seluruh dunia
AirBnB pertama kali menggunakan Backbone.js dalam aplikasi selulernya seperti SoundCloud, tetapi kemudian semakin banyak menggunakannya dalam fitur aplikasi webnya seperti Daftar Keinginan, Pertandingan, Pencarian, Komunitas dan Pembayaran. AirBnB sangat mencintai Backbone sehingga mereka tidak hanya puas menggunakannya di frontend tetapi juga ingin membuatnya mungkin untuk menjalankan perpustakaan di backend.
Mereka nanti membuat pustaka Backbone sisi server mereka, Rendr, open source dan tersedia di halaman Github mereka. Rendr ditulis dalam Node.js dan mengikuti filosofi dari “memaksakan struktur minimal, memungkinkan pengembang untuk menggunakan perpustakaan dengan cara yang paling tepat untuk aplikasi mereka” seperti Backbone itu sendiri
Jika Anda lebih tertarik pada tumpukan teknologi AirBnB, baca posting blog mereka tentang perjalanan mereka dari backend Rails ke Holy Grail of the pemanfaatan Backbone secara simultan baik pada sisi klien maupun server.
9. Hulu
Hulu adalah aplikasi streaming video yang memungkinkan Anda menonton acara TV dan film secara gratis, jika Anda berlokasi di AS.
Hulu memanfaatkan Backbone.js untuk membangun pengalaman pengguna yang lancar dan cepat bagi pecinta film. Antarmuka memungkinkan Anda untuk bergerak cepat melalui aplikasi dengan transisi yang lembut saat Anda menavigasi. Tulang punggung menghemat bandwidth untuk pengguna sebagai skrip dan video tertanam jangan dimuat ulang sepanjang waktu.
Hulu menjalankan mesin Rails di backend, dan jika Anda suka pembicaraan yang lucu tapi informatif, Anda bisa membaca bagaimana tim pengembang terjerat dengan jQuery sebelum akhirnya memutuskan untuk berubah ke kerangka kerja Backbone yang lebih teratur.
Backbone.js memungkinkan Hulu untuk melakukannya secara bertahap mengkonversi rendering mereka dari sisi server ke sisi klien alih-alih melakukan penulisan ulang berisiko backend Rails yang ada.
10. Hitung
Terhitung adalah aplikasi analisis seluler waktu-nyata yang memungkinkan Anda melacak kinerja iPhone, Android, atau aplikasi Windows Phone langsung dari jendela peramban.
Lihatlah daftar perangkat lunak open source luar biasa yang digunakan untuk mengembangkan platform, termasuk para superstar beberapa tahun terakhir: Nginx, MongoDB, Node.js untuk sisi server dan tentu saja Backbone.js untuk frontend.
Countly menggunakan perpustakaan templating semantik Handlebars untuk membuat Tampilan Backbone yang menampilkan data yang disiapkan dan dimuat dengan Model Backbone. Countly adalah aplikasi yang ramah bagi pengembang: aplikasi ini tidak hanya mudah dikembangkan tetapi dokumentasinya juga menyediakan pengembang dengan tutorial seperti ini di cara membuat plugin khusus di atas klien Backbone inti.
Catatan Editor: Ini ditulis oleh Anna Monus untuk Hongkiat.com. Anna adalah pengembang web dan penulis kode dengan minat pada sains, kecerdasan buatan, dan teknologi yang mengganggu.
