10 aplicații Web realizate cu Backbone.js [Studiu de caz]

Ai fost vreodată încurcat în codul de spaghete? Ați prefera să vă alimentați aplicația ceva mai sănătos? Dacă da, aruncă o privire asupra a ceea ce se poate realiza cu Backbone.js. șira spinării este o bibliotecă JavaScript bazată în mod liber pe modelul de proiectare Model-View-Controller, dar pentru că nu are elementul Controler, este mai bine să-l numiți un cadru MV *.

Vă ajută să construiți rapid, elegant și bogat în date aplicații web de o singură pagină, vă păstrează logica de date separate de interfața dvs. de utilizator, vă scutește de legarea datelor dvs. în DOM și scade pe măsură ce aplicația dvs. crește. Ca Backbone se sincronizează cu orice API REST în mod implicit, vă puteți conecta cu ușurință aplicația client-side pentru a API existente server-side, printr-o interfață REST JSON.

În acest articol vom studia 10 aplicații web care utilizează caracteristicile bibliotecii Backbone pentru a vă ajuta să înțelegeți potențialul pe care Backbone.js îl are pentru viitoarele proiecte de aplicații web.

1. Trello

Trello este o aplicație de colaborare online și de management de proiect care vă ajută să vă organizați proiectele în tabele, liste de verificare, carduri, liste de carduri și vă oferă instrumente cum ar fi Conversații pentru comunicarea membrilor echipei.

Trello a fost construit de la bază cu Backbone.js. Backbone funcționează împreună cu interfața API HTML5 History și limbajul tematic Mustache fără logică pe interfață. Toate elementele Trello Tech Stack au fost proiectate într-un mod care a condus la o client care poate fi ușor de întreținut, și din nou se sincronizează dinamic cu serverul ori de câte ori un eveniment DOM este declanșat.

Trello folosește modelul de backbone și vizionările pentru obiectele sale, cum ar fi cardurile sau membrii, și colecțiile backbone pentru modelele aferente - de exemplu, cardurile dintr-o listă. Dezvoltatorii, de asemenea și-a construit propria cache pentru modelele clientului pentru actualizări mai rapide și altele eficiența reutilizării codului.

2. Foursquare

Cel mai probabil ați auzit deja despre asta pătrat, aplicația populară de rețea socială bazată pe locație, care vă permite să partajați locații cu prietenii dvs. din întreaga lume.

API-ul Core API-ului Foursquare este construit în jurul modelelor Backbone, unde Clase de model ale API Foursquare (cum ar fi utilizatorii, locațiile și check-in-urile) sunt subclasele din clasele de modele de backbone și moștenesc metodele și proprietățile lor.

Implementarea codului poate fi schițată astfel: fourSq.api.models.Venue = patruSq.api.models.Model.extend (...); Da, asta-i drept, Backbone îi permite lui devs scrie frumos obiect-orientat JavaScript.

Backbone Views au, de asemenea, rolul lor în aplicația Foursquare, deoarece sporesc experiența utilizatorului cu funcții precum hărți și liste de hărți. Altele decât Backbone, API-ul JavaScript de la Foursquare utilizează de asemenea jQuery, Underscore.js (care este singura dependență dificilă a Backbonei) și Compilatorul de închidere.

3. Calendarul Basecamp

Tabăra de bază, aplicația populară de gestionare a proiectelor utilizează Backbone.js pentru funcția Calendar.

Scopul principal al designului Calendarului de bază a fost să creeze o interfață interactivă planificarea intuitivă a grupurilor posibil, și se actualizează în milisecunde. În Basecamp Calendar Backbone redă vizualizările în șabloanele ECO (Embedded CoffeeScript) ori de câte ori Modelele (date de pe partea clientului) sunt actualizate.

Este interesant de observat că echipa de dezvoltator nu a făcut întreaga basecamp o aplicație cu o singură pagină, care este cazul utilizării primară a Backbone.js, dar utilizate numai biblioteca din funcția Calendar în cazul în care acestea ar putea face cu adevărat uz de avantajele sale. Trebuie doar să arătați că nu este necesar să construiți o aplicație completă pentru o singură pagină cu Backbone; este mai bine să ne gândim cu grijă unde se poate aplica.

Citiți mai multe despre anticorpi de backbone pentru a decide dacă aveți nevoie de Backbone pentru întreaga aplicație sau nu.

4. Flowdock

Flowdock este o aplicație de comunicare în timp real a echipei care vă oferă funcții cum ar fi chat-ul de grup, intrările de echipe și fluxurile de lucru în timp real

Flowdock a fost construit de la sol pe partea de sus a Backbone.js. Principala provocare a echipei de dezvoltare a fost aceea de a permite mesajele și fluxurile de lucru în timp real. În mod implicit, Backbone.js se conectează la partea serverului printr-o interfață RESTful, ceea ce nu permite efectuarea unui flux de date în timp real. Prin urmare, programele dev a decis să salveze mesajele prin intermediul motorului Socket.io în timp real în loc de API-ul REST.

Pentru a realiza acest lucru, ei a scris o metodă personalizată denumit Backbone.sync. Deoarece Socket.io este, de asemenea, o bibliotecă JavaScript, comunicarea dintre interfața bazată pe JavaScript și backend-ul (Node.js) este neîntreruptă. Flowdock este în primul rând o aplicație Rails pe partea de server, dar acestea au un backend separat Node.js care gestionează conexiunile Socket.io.

Flowdock îmbunătățește experiența utilizatorului în timp real chiar mai mult cu Bacon.js, o bibliotecă JavaScript la îndemână care permite programarea funcțională reactivă. Caracteristica EventStreams a Bacon.js ajută Flowdock să-și păstreze modelul și colecțiile de coloane vertebrale actualizate.

5. Cocktail Search

Căutare în căutări este o aplicație open source care vă oferă șansa de a arunca o privire la codul unei implementări foarte simple a Backbone.js. Backend-ul este alimentat de Python, dar ceea ce este interesant pentru noi este fișierul script.js al aplicației.

Dacă examinați codul, puteți vedea o structură foarte fundamentală a cadrului Model-View- *: acesta conține unul Model definită în Cocktail clasă care nu modifică setările implicite ale clasei parentale Backbone.Model, una Backbone Collection pentru rezultatele căutării și 3 Vizualizări pentru Backbone, fiecare adaugă noi metode la Backbone.View clasa părinților.

Dacă analizați fișierul index.html, puteți descoperi modul în care dezvoltatorul a adăugat Backbone.js și dependențele acestuia, Underscore.js și jQuery în secțiunea capului. Underscore.js este singura dependență puternică a Backbone în timp ce jQuery este necesar dacă doriți să manipulați DOM cu ajutorul vizualizărilor Backbone (care este cazul aplicației Cocktail Search).

6. Bitbucket

BitBucket este un program de găzduire a codului sursă și o aplicație de gestionare a codului similară cu Github. Atlassian, compania din spatele ei folosește Backbone în software-ul de urmărire a problemelor comerciale JIRA, și celălalt produs principal al acestora.

În timpul utilizării aprofundate a Backbone.js în aplicațiile lor, echipa de dezvoltare a găsit câteva lucruri pe care le-au pierdut din Backbone. Au întâlnit-o multe defecțiuni silențioase cauzate de convențiile de definire liberă ale Backbone.js. Acest lucru înseamnă în esență modele, colecții și viziuni nu definesc neapărat evenimentele personalizate pe care le expun. Și dacă acestea nu erau suficiente, modelele nu definesc niciodată întotdeauna atribute ei expun.

Această natură permisivă este o caracteristică iubită de mulți dezvoltatori, dar nu de echipa Atlassian, astfel încât ei și-au dezvoltat extensia Backbone proprie numită Backbone.Brace, care adaugă bibliotecă mixuri și atribute și evenimente auto-documentate.

Dacă sunteți supărat de același lucru, puteți adăuga Backbone.Brace la propria aplicație, deoarece este un proiect open-source găzduit pe Bitbucket în sine. BitBucket utilizează limba tematică Mustache, la fel ca Trello, pentru redarea vizualizărilor backbone pe interfață.

7. SoundCloud

SoundCloud este o platformă populară de distribuție audio, unde puteți să înregistrați, să încărcați și să distribuiți propriul dvs. audio sau să ascultați muzică gratuit.

Dezvoltatorii de SoundCloud utilizate mai întâi ca Backbone.js cadrul frontend aplicației mobile, dar le-a plăcut atât de mult încât l-au angajat, de asemenea, pe partea de client a site-ul lor pe desktop. În blogul Backstage ei explică alegerea cadrului lor cu abilitatea Backbone de a oferă o bază structurală solidă, rămânând în același timp flexibile.

Scalarea este o preocupare principală pentru o aplicație audio streaming, iar SoundCloud recunoaște că aceasta “are mai mult de-a face cu organizarea decât cu implementarea” ceea ce face ca Backbone-ul bine organizat, dar ușor, să fie o alegere ideală pentru ei.

SoundCloud utilizează sistemul de template-uri semantice Handlebars pentru redarea vizualizărilor backbone pe interfață.

8. AirBnB

Airbnb este o piață comunitară de succes, unde puteți găsi și rezerva diverse tipuri de cazare în aproape 200 de țări din întreaga lume

Airbnb utilizat în primul rând Backbone.js în aplicația sa mobilă la fel ca SoundCloud, dar mai târziu utilizat mai mult în caracteristicile sale aplicație web, cum ar fi wishlists, meci, Căutare, Comunități și plăți. AirBnB i-au plăcut pe Backbone atât de mult încât nu s-au stabilit numai pentru utilizarea pe interfață, ci și au vrut să facă posibilă rularea bibliotecii pe spatele.

Mai târziu a realizat biblioteca Backbone pe partea de server, Rendr, open source și disponibile pe pagina lor Github. Rendr este scris în Node.js și urmează filozofia lui “impunând o structură minimă, permițând dezvoltatorului să folosească biblioteca în modul cel mai adecvat pentru aplicarea lor” exact ca Backbone în sine

Dacă sunteți interesat mai mult de stadiul tehnic al AirBnB, citiți-vă postarea de blog despre călătoria lor dintr-o fundație Rails la Sfântul Graal al utilizarea simultană a Backbone atât pe partea client-server, cât și pe partea de server.

9. Hulu

Hulu este o aplicație de streaming video care vă permite să urmăriți gratuit emisiuni TV și filme, dacă vă aflați în SUA.

Hulu a făcut uz de Backbone.js pentru a construi o experiență fără întreruperi și rapiditate a utilizatorului pentru iubitorii de filme. Interfața vă permite să vă mișcați rapid prin aplicație cu tranziții ușoare pe măsură ce navigați. șira spinării salvează lățimea de bandă pentru utilizatori ca scenarii și videoclipuri încorporate nu reîncărcați tot timpul.

Hulu rulează un motor Rails pe backend, și dacă vă place discuții amuzante, dar informative, puteți citi despre modul în care echipa de dezvoltatori a intrat în jQuery înainte de a decide în cele din urmă să se schimbe la mai bine organizat.

Backbone.js a permis Hulu să să convertească treptat randarea lor de la server la partea clientului în loc să facă o rescriere riscantă a backendului Rails existent.

10. Numeroase

Countly este o aplicație de analiză mobilă în timp real care vă permite să urmăriți performanța aplicației dvs. iPhone, Android sau Windows Phone chiar din fereastra browserului.

Aruncati o privire la lista remarcabilă a software-ului open source care a fost utilizat pentru a dezvolta platforma, inclusiv superstaruri din ultimii ani: Nginx, MongoDB, Node.js pentru partea de server și, desigur, Backbone.js pentru frontend.

Numeroasele utilizări ale bibliotecii semantice Handlebars templating pentru a afișa opțiunile Backbone care afișează datele pregătite și încărcate cu Modele Backbone. Countly este o aplicație prietenoasă pentru dezvoltatori: nu este doar ușor de extensibil, dar documentația acesteia oferă de asemenea și tutori cum se construiesc plugin-uri personalizate pe partea de sus a clientului Backbone core.

Nota editorului: Acest lucru este scris de Anna Monus pentru Hongkiat.com. Anna este un dezvoltator web și scriitor de coduri cu interes pentru știință, inteligență artificială și tehnologii perturbatoare.