10 app Web realizzate con Backbone.js [Case Study]

Sei mai stato impigliato nel codice degli spaghetti? Preferiresti alimentare la tua app qualcosa di più sano? Se è così, dai uno sguardo a cosa può essere realizzato con Backbone.js. Spina dorsale è una libreria JavaScript che si basa liberamente sul modello di progettazione Model-View-Controller ma, poiché manca l'elemento Controller, è meglio chiamarlo come framework MV *.

Ti aiuta a costruire veloce, elegante e ricco di dati applicazioni web a pagina singola, mantiene il tuo logica dei dati separata dalla tua interfaccia utente, ti salva dal legare i tuoi dati al DOM, e scala man mano che la tua app cresce. Poiché Backbone si sincronizza con qualsiasi API RESTful per impostazione predefinita, puoi facilmente connettere l'app lato client all'API server-side esistente tramite un'interfaccia JSON RESTful.

In questo post studieremo 10 app Web che utilizzano le funzionalità della libreria Backbone per aiutarti a cogliere le potenzialità di Backbone.js per i tuoi futuri progetti di app Web.

1. Trello

Trello è un'app di collaborazione online e di gestione dei progetti che ti aiuta a organizzare i tuoi progetti in schede, elenchi di controllo, schede, elenchi di schede e ti fornisce strumenti come le conversazioni per la comunicazione tra i membri del team.

Trello è stato costruito da zero con Backbone.js. Backbone interagisce con l'API della cronologia HTML5 e con il linguaggio di programmazione senza logica di Mustache sul frontend. Tutti gli elementi del Trello Tech Stack sono stati progettati in un modo che ha portato a client gestibile che gestisce facilmente gli aggiornamenti, e risincronizza dinamicamente con il server ogni volta che viene attivato un evento DOM.

Trello utilizza Backbone Model e Views per i suoi oggetti come Cards o Members, e Backbone Collections per i relativi Modelli - ad esempio Cards in a list. Anche gli sviluppatori costruito la propria cache del modello sul lato client per aggiornamenti più veloci e altro ancora riutilizzo efficiente del codice.

2. Foursquare

Molto probabilmente hai già sentito parlare Foursquare, la popolare app di social networking basata sulla posizione che ti consente di condividere luoghi con i tuoi amici in tutto il mondo.

L'API JavaScript di base di Foursquare è costruita attorno a Backbone Models, dove il Classi modello dell'API di Foursquare (come utenti, sedi e check-in) sono le sottoclassi delle classi del modello Backbone e ereditare i loro metodi e proprietà.

L'implementazione del codice può essere schematizzata in questo modo: fourSq.api.models.Venue = fourSq.api.models.Model.extend (...); Sì, giusto, Backbone consente agli sviluppatori di scrivi un bel JavaScript orientato agli oggetti.

Anche le Views Backbone hanno il loro ruolo nell'app Foursquare, poiché migliorano l'esperienza dell'utente con funzionalità come mappe e liste della homepage. Oltre alla Backbone, fa uso anche dell'API JavaScript di Foursquare jQuery, Underscore.js (che è l'unica dura dipendenza di Backbone) e il compilatore di chiusura.

3. Calendario di Basecamp

Campo base, la popolare app di gestione del progetto utilizza Backbone.js per la sua funzionalità di Calendar.

L'obiettivo principale del design di Basecamp Calendar era creare un'interfaccia interattiva che lo rendesse programmazione di gruppo intuitiva possibile, e si aggiorna in millisecondi. In Basecamp Calendar Backbone esegue il rendering di viste in modelli ECO (Embedded CoffeeScript) ogni volta che vengono aggiornati i modelli (dati lato client).

È interessante notare che il team di sviluppatori non ha realizzato l'intero Basecamp come app a pagina singola, che è il caso d'uso principale di Backbone.js, ma ha utilizzato la libreria solo nella funzione Calendario in cui potevano davvero sfruttare i suoi vantaggi. Basta dimostrare che non è necessario creare un'app completa per singola pagina con Backbone; è meglio riflettere attentamente su dove può essere applicato.

Maggiori informazioni sugli antipodi di Backbone per decidere se hai bisogno di Backbone per l'intera app o no.

4. Flowdock

Flowdock è un'app di comunicazione in tempo reale che ti offre funzionalità come chat di gruppo, caselle di posta in arrivo e flussi di lavoro in tempo reale

Flowdock è stato costruito da zero in cima a Backbone.js. La sfida principale del team di sviluppo era quella di abilitare messaggi e flussi di lavoro in tempo reale. Per impostazione predefinita, Backbone.js si connette al lato server su un'interfaccia RESTful, che non rende possibile il flusso di dati in tempo reale. Quindi gli sviluppatori ha deciso di salvare i messaggi tramite il motore Socket.io in tempo reale invece dell'API REST.

Per raggiungere questo loro ha scritto un metodo personalizzato chiamato Backbone.sync. Poiché Socket.io è anche una libreria JavaScript, rende la comunicazione tra frontend e backend (Node.js) guidati da JavaScript senza soluzione di continuità. Flowdock è principalmente un'app Rails sul lato server, ma hanno un backend Node.js separato che gestisce le connessioni Socket.io.

Flowdock migliora l'esperienza utente in tempo reale ancora di più con Bacon.js, una pratica libreria JavaScript che abilita la programmazione reattiva funzionale. La funzionalità EventStreams di Bacon.js aiuta Flowdock a mantenere aggiornato il suo modello di backbone e le sue collezioni.

5. Ricerca cocktail

Ricerca cocktail è un'app open source che ti dà la possibilità di dare un'occhiata al codice di un'implementazione molto semplice di Backbone.js. Il back-end è basato su Python, ma ciò che è interessante per noi è il file script.js dell'app.

Se si esamina il codice, è possibile vedere una struttura molto basilare del framework Model-View- *: ne contiene uno Modello definito nel Cocktail classe che non modifica le impostazioni predefinite della classe genitore Backbone.Model, una Collezione Backbone per i risultati di ricerca e 3 Visualizzazioni Backbone, ognuno aggiunge nuovi metodi al Backbone.View classe genitore.

Se dai un'occhiata al file index.html, puoi scoprire come lo sviluppatore ha aggiunto Backbone.js e le sue dipendenze, Underscore.js e jQuery nella sezione della testa. Underscore.js è l'unica dura dipendenza di Backbone mentre jQuery è necessario se vuoi manipolare il DOM con l'aiuto di Backbone Views (che è il caso dell'applicazione Cocktail Search).

6. Bitbucket

bitbucket è un'app di gestione del codice sorgente e di gestione del codice simile a Github. Atlassian, la società dietro di esso utilizza Backbone nel software di tracciamento delle emissioni commerciali JIRA, l'altro loro prodotto principale.

Durante il completo utilizzo di Backbone.js nelle loro app, il team di sviluppo ha trovato un paio di cose che mancavano da Backbone. Hanno incontrato molti errori silenziosi causati dalle convenzioni di definizione libera di Backbone.js. Ciò significa fondamentalmente modelli, collezioni e viste non necessariamente definire gli eventi personalizzati che espongono. E se ciò non bastasse, i modelli non definiscono nemmeno sempre il attributi espongono.

Questa natura permissiva è una caratteristica amata da molti sviluppatori ma non dal team di Atlassian, quindi hanno sviluppato la propria estensione Backbone chiamata Backbone.Brace che aggiunge mixin e attributi ed eventi auto-documentati alla libreria.

Se sei infastidito dalla stessa cosa, puoi aggiungere Backbone.Brace alla tua app, in quanto è un progetto open source ospitato su Bitbucket stesso. BitBucket usa il linguaggio di template di Mustache proprio come Trello per il rendering di Backbone Views sul frontend.

7. SoundCloud

SoundCloud è una famosa piattaforma di distribuzione audio in cui è possibile registrare, caricare e condividere il proprio audio o ascoltare musica gratuitamente.

Gli sviluppatori di SoundCloud utilizzavano Backbone.js prima come framework di frontend della loro app mobile, ma a loro piaceva così tanto che lo impiegavano anche sul lato client del loro sito web desktop. Nel loro blog Backstage spiegano la loro scelta del framework con l'abilità di Backbone fornire una solida base strutturale pur rimanendo flessibile.

Lo scaling è una preoccupazione principale per un'app di streaming audio e SoundCloud lo riconosce “ha più a che fare con l'organizzazione che con l'implementazione” che rende il Backbone ben organizzato ma leggero la scelta ideale per loro.

SoundCloud utilizza il sistema di template semantico di Handlebars per il rendering di Backbone Views sul frontend.

8. AirBnB

AirBnB è un mercato di comunità di successo follemente dove puoi trovare e prenotare diversi tipi di alloggi in quasi 200 paesi in tutto il mondo

AirBnB utilizzava per la prima volta Backbone.js nella sua app mobile proprio come SoundCloud, ma in seguito lo utilizzava sempre di più nelle sue funzioni di app Web come liste dei desideri, corrispondenza, ricerca, comunità e pagamenti. AirBnB ha adorato la Backbone così tanto che non si sono limitati a usarlo sul frontend, ma volevano anche far funzionare la libreria sul back-end.

Più tardi ha creato la propria libreria Backbone sul lato server, Rendr, open source e disponibile sulla loro pagina Github. Rendr è scritto in Node.js e segue la filosofia di “imponendo una struttura minima, consentendo allo sviluppatore di utilizzare la libreria nel modo più appropriato per la loro applicazione” proprio come Backbone stesso

Se ti interessa di più nello stack tecnologico di AirBnB, leggi il loro post sul loro viaggio da un back-end di Rails al Santo Graal del utilizzo simultaneo di Backbone sia lato client che lato server.

9. Hulu

Hulu è un'app di streaming video che ti consente di guardare gratuitamente spettacoli televisivi e film, se ti trovi negli Stati Uniti.

Hulu ha fatto uso di Backbone.js per creare un'esperienza utente semplice e veloce per gli amanti dei film. L'interfaccia consente di spostarsi rapidamente attraverso l'app con transizioni delicate durante la navigazione. Spina dorsale salva larghezza di banda per gli utenti come script e video incorporati non essere ricaricato tutto il tempo.

Hulu gestisce un motore Rails sul backend e, se ti piacciono i discorsi divertenti ma informativi, puoi leggere qualcosa in che modo il team di sviluppatori si è impigliato con jQuery prima di decidere finalmente di passare al framework Backbone più organizzato.

Backbone.js ha permesso a Hulu di convertire in modo incrementale il rendering da lato server a lato client invece di eseguire una riscrittura rischiosa del loro backend Rails esistente.

10. Conta

Countly è un'app di analisi dei dispositivi mobili in tempo reale che ti consente di tenere traccia delle prestazioni della tua app per iPhone, Android o Windows Phone direttamente dalla finestra del browser.

Dai uno sguardo al notevole elenco di software open source che è stato utilizzato per sviluppare la piattaforma, comprese le superstar degli ultimi anni: Nginx, MongoDB, Node.js per il lato server e ovviamente Backbone.js per il frontend.

Utilizza in modo significativo la libreria di template semantico di Handlebars per eseguire il rendering di Backbone Views che visualizza i dati preparati e caricati con i modelli Backbone. È un'app per sviluppatori facile da usare: non solo è facilmente estendibile, ma la sua documentazione fornisce anche strumenti di sviluppo con tutorial come questo come creare plug-in personalizzati sul client principale Backbone.

Nota dell'editore: Questo è scritto da Anna Monus per Hongkiat.com. Anna è uno sviluppatore di siti web e autore di codice con un interesse per la scienza, l'intelligenza artificiale e le tecnologie dirompenti.