Backbone.js ile Yapılan 10 Web Uygulaması [Örnek Olay]

Hiç spagetti koduna dolandınız mı? Uygulamanıza daha sağlıklı bir şey beslemeyi tercih eder misiniz? Öyleyse, Backbone.js ile neler yapılabileceğine bir göz atın. Omurga Model-View-Controller tasarım modeline dayanan bir JavaScript kütüphanesidir, ancak Controller elementi olmadığı için MV * çerçevesi olarak adlandırılması daha iyidir..

Bu inşa etmenize yardımcı olur hızlı, şık ve veri bakımından zengin tek sayfalık web uygulamalarını korur kullanıcı arayüzünden ayrı veri mantığı, verilerinizi DOM’e bağlamanızdan kurtarır ve uygulamanız büyüdükçe ölçeklenir. Backbone varsayılan olarak herhangi bir RESTful API ile senkronize edildiğinden, istemci tarafı uygulamanızı bir RESTful JSON arayüzü ile mevcut sunucu tarafı API'nize kolayca bağlayabilirsiniz.

Bu yazıda, gelecekteki web uygulaması projeleriniz için Backbone.js'nin potansiyelini kavramanıza yardımcı olmak için Backbone kütüphanesinin özelliklerini kullanan 10 web uygulamasını inceleyeceğiz..

1. Trello

Trello projelerinizi Panolar, Kontrol Listeleri, Kartlar, Kart Listeleri olarak düzenlemenize yardımcı olan ve ekip üyesi iletişimi için Sohbetler gibi araçlar sağlayan çevrimiçi bir işbirliği ve proje yönetimi uygulamasıdır..

Trello Backbone.js ile sıfırdan inşa edildi. Omurga, HTML5 Geçmişi API'si ve ön uçtaki Bıyık mantıksız şablon dili ile birlikte çalışır. Trello Teknik Yığınının tüm elemanları, sonuçta ortaya çıkacak şekilde tasarlanmıştır. güncellemeleri kolayca yöneten bakım istemcisi, ve sunucu ile dinamik olarak yeniden senkronize edilir ne zaman bir DOM olayı tetiklendiğinde.

Trello, Kartlar veya Üyeler gibi nesneleri için Omurga Modelini ve Görünümlerini ve ilgili Modeller için Omurga Koleksiyonlarını (örneğin, bir listedeki Kartlar) kullanır. Geliştiriciler ayrıca kendi istemci tarafı Model önbelleğini oluşturdu için daha hızlı güncellemeler ve dahası verimli kod kullanımı.

2. oturaklı

Büyük olasılıkla zaten duymuşsunuzdur Oturaklı, mekanları dünya çapında arkadaşlarınızla paylaşmanıza olanak tanıyan popüler konum tabanlı sosyal ağ uygulaması.

Foursquare'in temel JavaScript API'si Omurga Modelleri etrafında inşa edilmiştir; Foursquare API'sinin model sınıfları (Kullanıcılar, Mekanlar ve Girişler gibi) Omurga Modeli sınıflarının alt sınıflarıdır ve yöntemlerini ve özelliklerini devralırlar.

Kodun uygulaması şu şekilde çizilebilir: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Evet, bu doğru, Omurga geliştirmeye izin veriyor güzel nesne yönelimli JavaScript yaz.

Omurga Görünümleri ayrıca Foursquare uygulamasında da rol oynar; anasayfa haritalar ve listeler. Omurga dışında, Foursquare'in JavaScript API'sini de kullanır. jQuery, Underscore.js (bu Backbone'nun tek zor bağımlılığıdır) ve Kapanış Derleyicisi.

3. Basecamp Takvimi

Basecamp, popüler proje yönetimi uygulaması, Takvim özelliği için Backbone.js'yi kullanıyor.

Basecamp Calendar’ın ana tasarım amacı; sezgisel grup çizelgeleme mümkün ve milisaniye cinsinden kendisini günceller. Basecamp Takviminde Omurga, Modeller (istemci tarafı verileri) güncellendiğinde Görünümleri ECO (Katıştırılmış CoffeeScript) şablonlarına dönüştürür.

Geliştirici ekibinin tüm Basecamp’i Backbone.js’nin birincil kullanım durumu olan tek sayfalık bir uygulama haline getirmediğini, ancak kitaplıktan yalnızca avantajlarını gerçekten kullanabilecekleri Takvim özelliğinde kullandığını unutmayın. Sadece Backbone ile tam bir tek sayfalık bir uygulama oluşturmanız gerekmediğini göstermeye devam ediyor; nerede uygulanabileceğini dikkatlice düşünmek daha iyidir.

Tüm uygulamanız için Omurga ihtiyacınız olup olmadığına karar vermek için Omurga antipatterns hakkında daha fazla bilgi edinin..

4. Flowdock

Flowdock grup sohbeti, ekip gelen kutuları ve gerçek zamanlı iş akışları gibi özellikler sağlayan gerçek zamanlı bir ekip iletişim uygulamasıdır.

Flowdock Backbone.js üzerine sıfırdan inşa edildi. Geliştirme ekibinin ana görevi, gerçek zamanlı mesajlar ve iş akışlarını mümkün kılmaktı. Backbone.js varsayılan olarak sunucu tarafına gerçek zamanlı veri akışını mümkün kılmayan bir RESTful arayüzü üzerinden bağlanır. Bu nedenle devs Socket.io gerçek zamanlı motoruyla mesaj kaydetmeye karar verdi REST API yerine.

Bunu başarmak için onlar özel bir yöntem yazdı denilen Backbone.sync. Socket.io aynı zamanda bir JavaScript kütüphanesi olduğundan, JavaScript odaklı frontend ve backend (Node.js) arasındaki iletişimi kusursuzlaştırır. Flowdock öncelikle sunucu tarafında bir Rails uygulamasıdır, ancak Socket.io bağlantılarını işleyen ayrı bir Node.js arka ucuna sahiptir..

Flowdock gerçek zamanlı kullanıcı deneyimini geliştirir Fonksiyonel reaktif programlama sağlayan kullanışlı bir JavaScript kütüphanesi olan Bacon.js ile daha da fazlası. EventStreams özelliği Bacon.js Flowdock'un Omurga Modeli ve Koleksiyonlarını güncel tutmasına yardımcı olur.

5. Kokteyl Arama

Kokteyl Arama Backbone.js'nin çok basit bir uygulamasının koduna bir göz atma şansı veren açık kaynaklı bir uygulamadır. Arka uç Python tarafından desteklenmektedir, ancak bizim için ilginç olan şey uygulamanın script.js dosyası.

Kodu incelerseniz, Model-View- * çerçevesinin çok temel bir yapısını görebilirsiniz: model içinde tanımlanmış Kokteyl Backbone.Model parent sınıfının varsayılan ayarlarını değiştirmeyen bir sınıf, bir Omurga Koleksiyonu arama sonuçları ve 3 Omurga Görünümü için, her biri yeni yöntemler ekler. Backbone.View ebeveyn sınıfı.

İndex.html dosyasına bakarsanız, geliştiricinin Backbone.js ve bağımlılıklarını nasıl eklediğini keşfedebilirsiniz., Underscore.js ve jQuery baş bölümünde. Underscore.js, JQuery'ye ihtiyaç duyulurken Omurga'nın tek zor bağımlılığıdır. DOM'u Omurga Görünümleri yardımıyla değiştirmek isterseniz (Kokteyl Arama uygulamasında olduğu gibi).

6. Bitbucket

Bitbucket Github'a benzer bir kaynak kodu barındırma ve kod yönetimi uygulaması. Arkasındaki şirket Atlassian, JIRA ticari sorun takip yazılımında Omurga, diğer ana ürünleri de kullanıyor.

Uygulamalarında Backbone.js'nin kapsamlı kullanımı sırasında, geliştirme ekibi Backbone'dan kaçırdıkları birkaç şey buldu. Karşılaştılar Backbone.js’nin gevşek tanım sözleşmelerinden kaynaklanan birçok sessiz hata. Bu temelde modeller, koleksiyonlar ve görüşler anlamına gelir. maruz bıraktıkları özel etkinlikleri mutlaka tanımlamayın. Ve eğer bu yeterli değilse, Modeller her zaman Öznitellikler açığa çıkarırlar.

Bu izin verici nitelik, birçok geliştirici tarafından sevilen bir özelliktir ancak Atlassian ekibi tarafından değil, bu yüzden Backbone adlı kendi Omurga uzantısını geliştirdiler. kütüphaneye mixins ve kendinden belgeli nitelikler ve olaylar ekler.

Aynı şeyden rahatsızsanız, Backbone.Brace'i Bitbucket'te barındırılan açık kaynaklı bir proje olduğu için kendi uygulamanıza ekleyebilirsiniz. BitBucket, bıyık şablon dilini Trello gibi ön uçta Omurga Görünümleri oluşturmak için kullanır.

7. SoundCloud

Ses bulutu kendi sesinizi kaydedebileceğiniz, yükleyebileceğiniz ve paylaşabileceğiniz veya ücretsiz müzik dinleyebileceğiniz popüler bir ses dağıtım platformudur..

SoundCloud'un geliştiricileri, ilk olarak mobil uygulamalarının ön çerçevesi olarak Backbone.js'yi kullandılar, ancak o kadar çok beğendiler ki, masaüstü web sitelerinin istemci tarafında da kullandılar. Backstage Blog'larında, Backbone’un yeteneklerini kullanarak çerçeve tercihlerini açıklıyorlar. hala esnek kalırken sağlam bir yapısal temel sağlar.

Ölçeklendirme, bir ses akışı uygulaması için ana sorundur ve SoundCloud, uygulamanın “örgütle uygulamadan daha çok ilgisi var” iyi organize edilmiş ancak hafif Omurga, onlar için ideal bir seçimdir.

SoundCloud, Omurga Görünümlerini ön uçta görüntülemek için Gidonun semantik şablon sistemini kullanır.

8. AirBnB

Airbnb Dünya çapında yaklaşık 200 ülkede farklı tipte konaklama yerleri bulabileceğiniz ve rezervasyon yaptırabileceğiniz delicesine başarılı bir topluluk pazardır.

AirBnB, ilk olarak SoundCloud gibi mobil uygulamasında Backbone.js'yi kullandı, ancak daha sonra Wishlists, Match, Search, Topluluklar ve Ödemeler gibi web uygulaması özelliklerinde daha fazla kullandı. AirBnB Backbone'u o kadar çok sevdi ki, onu yalnızca ön uçta kullanmak için bir yerleştiğini değil, aynı zamanda kütüphaneyi arka uçta çalıştırmayı mümkün kılmak istedi.

Onlar sonra sunucu tarafı Omurga kitaplığı, Rendr, açık kaynak yaptı ve kendi Github sayfasında mevcuttur. Rendr Node.js ile yazılmıştır ve felsefesini izler. “asgari yapıyı uygulayarak geliştiricinin uygulamaları için en uygun şekilde kitaplığı kullanmasını sağlayın” Tıpkı Omurga'nın kendisi gibi

AirBnB'nin teknoloji yığınına daha fazla ilgi duyuyorsanız, bir Rails arka uçundan Kutsal Kase'ye olan yolculukları hakkında blog yazılarını okuyun. Müşteri ve sunucu tarafında Omurga'nın eşzamanlı kullanımı.

9. Hulu

Hulu ABD’de bulunuyorsanız TV şovlarını ve filmleri ücretsiz izlemenizi sağlayan bir video akış uygulamasıdır..

Hulu, Backbone.js'yi film severler için kesintisiz ve hızlı bir kullanıcı deneyimi oluşturmak için kullandı. Arayüz, gezinirken yumuşak geçişlerle uygulamada hızlıca gezinmenizi sağlar. Omurga kullanıcılar için bant genişliği tasarrufu komut dosyaları ve gömülü videolar olarak yeniden yüklenme her zaman.

Hulu, arka uçta bir Rails motoru kullanıyor ve eğlenceli ancak bilgilendirici konuşmalar yapmak isterseniz, hakkında okuyabilirsiniz. geliştirici ekibi jQuery ile nasıl karıştı? nihayet değiştirmek için karar vermeden önce daha organize Omurga çerçevesi.

Omurga.js Hulu’nun oluşturmalarını aşamalı olarak sunucu tarafından istemci tarafına dönüştürme mevcut Rails backend'ini riskli olarak yeniden yazmak yerine.

10. Sayısal

Countly iPhone, Android veya Windows Phone uygulamanızın performansını tarayıcı penceresinden izlemenizi sağlayan gerçek zamanlı bir mobil analitik uygulamasıdır.

Son yılların süperstarları dahil olmak üzere platformu geliştirmek için kullanılan açık kaynak kodlu yazılımların listesine göz atın: Nginx, MongoDB, sunucu tarafı için Node.js ve elbette ön uç için Backbone.js.

Omurga Modelleri ile hazırlanan ve yüklenen verileri görüntüleyen Omurga Görünümleri oluşturmak için Gidonun semantik şablon kütüphanesini kullanır. Countly geliştirici dostu bir uygulama: sadece kolayca genişletilebilir değil, aynı zamanda dokümantasyonda bunun gibi öğreticilerle birlikte geliştirme sağlıyor Çekirdek Omurga İstemcisinin üstüne özel eklentiler oluşturma.

Editörün Notu: Bu Hongkiat.com için Anna Monus tarafından yazılmıştır. Anna, bilim, yapay zeka ve yıkıcı teknolojilere ilgi duyan bir web geliştiricisi ve kod yazarıdır.