10 web-aplikacija izrađenih pomoću Backbone.js [studija slučaja]
Jeste li se ikada upleli u špageti? Biste li radije nahranili vašu aplikaciju nešto zdravije? Ako je tako, zavirite u ono što se može postići Backbone.js. oslonac je JavaScript biblioteka koja se slobodno temelji na dizajnerskom obrascu Model-View-Controller, ali kako joj nedostaje element Controller, bolje je nazvati MV * okvirom.
Pomaže vam u izgradnji brzi, elegantni i bogati podacima web-aplikacije na jednoj stranici, čuva vaše logika podataka odvojena od vašeg korisničkog sučelja, štedi vas od vezanja podataka u DOM i mjerilo kako vaša aplikacija raste. Budući da se Backbone po zadanom sinkronizira s bilo kojim RESTful API-jem, možete jednostavno povezati aplikaciju na strani klijenta s postojećim API-jem na strani poslužitelja putem RESTful JSON sučelja.
U ovom postu proučit ćemo 10 web-aplikacija koje koriste značajke biblioteke Backbone kako biste lakše shvatili potencijal Backbone.js za buduće projekte web-aplikacija.
1. Trello
Trello je aplikacija za online suradnju i upravljanje projektima koja vam pomaže organizirati projekte u okvire, popise za provjeru, kartice, popise kartica i pruža vam alate kao što su razgovori za komunikaciju članova tima.
Trello je izgrađen od temelja s Backbone.js. Okosnica radi zajedno s API-jem za povijest HTML5 i jezikom koji nemaju logike bez teksta na sučelju. Svi elementi Trello Tech Stack dizajnirani su na način koji je rezultirao a održivi klijent koji lako obrađuje ažuriranja, i dinamički se sinkronizira s poslužiteljem kada se pokrene DOM događaj.
Trello koristi Backbone Model i Views za svoje objekte kao što su Cards ili Members i Backbone Collections za povezane modele - na primjer Cards na popisu. I programeri izgradili su vlastitu privremenu predmemoriju modela na strani klijenta za brža ažuriranja i više učinkovita ponovna uporaba koda.
2. Četverokut
Najvjerojatnije ste već čuli četverokut, popularna aplikacija za društveno umrežavanje temeljena na lokaciji koja vam omogućuje dijeljenje mjesta s prijateljima širom svijeta.
Foursquareov osnovni JavaScript API izgrađen je oko Backbone modela, gdje Razredi modela Foursquare API-ja (kao što su Korisnici, Mjesta i Check-ins) su podrazredi klasa Backbone Model i naslijediti njihove metode i svojstva.
Implementacija koda može se skicirati na sljedeći način: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Da, to je točno, Backbone omogućuje devs to napišite lijepo objektno orijentirani JavaScript.
Osobni pogledi također imaju svoju ulogu u aplikaciji Foursquare jer poboljšavaju korisničko iskustvo s značajkama poput početne stranice i popise. Osim Backbonea, Foursquareov JavaScript API također koristi jQuery, Underscore.js (što je jedina tvrda ovisnost Backbonea) i kompilator zatvaranja.
3. Basecamp kalendar
Osnovni logor, popularna aplikacija za upravljanje projektima koristi značajku Backbone.js za značajku kalendara.
Glavni cilj dizajna kalendara Basecamp bio je stvoriti interaktivno sučelje koje čini intuitivno grupno raspoređivanje moguće, i ažurira se u milisekundama. U Basecamp kalendaru Backbone prikazuje Views u ECO (Embedded CoffeeScript) predlošcima kad se ažuriraju modeli (podaci na strani klijenta).
Zanimljivo je primijetiti da tim razvojnih programera nije učinio cijelu Basecamp aplikacijom od jedne stranice koja je primarni slučaj korištenja Backbone.js, već je samo koristila knjižnicu u značajki Calendar gdje su stvarno mogli iskoristiti njezine prednosti. Pokazuje se da ne morate nužno izraditi punu aplikaciju s jednom stranicom s Backboneom; bolje je pažljivo razmisliti o tome gdje se može primijeniti.
Pročitajte više o antipatternsima za Backbone kako biste odlučili trebate li Backbone za cijelu aplikaciju ili ne.
4. Flowdock
Flowdock je aplikacija za komunikaciju tima u stvarnom vremenu koja vam pruža značajke kao što su grupni chat, ulazne poruke za timove i radne procese u stvarnom vremenu
Flowdock je izgrađen od temelja na vrhu Backbone.js. Glavni izazov razvojnog tima bio je omogućiti poruke i radne procese u stvarnom vremenu. Podrazumijevano se Backbone.js spaja na poslužiteljsku stranu preko RESTful sučelja, što ne omogućuje protok podataka u stvarnom vremenu. Stoga su razvojni timovi odlučio spremiti poruke putem Socket.io real-time motora umjesto REST API-ja.
Da bi to postigli, oni napisao je prilagođenu metodu zvao Backbone.sync. Budući da je Socket.io također JavaScript biblioteka, komunikacija između sučelja i sučelja (Node.js) koje pokreće JavaScript je besprijekorna. Flowdock je primarno Rails aplikacija na strani poslužitelja, ali oni imaju zasebnu Node.js pozadinu koja upravlja Socket.io vezama.
Flowdock poboljšava korisničko iskustvo u stvarnom vremenu još više s Bacon.js, zgodnom JavaScript bibliotekom koja omogućuje funkcionalno reaktivno programiranje. Značajka EventStreams od Bacon.js pomaže Flowdocku ažurirati svoj model i zbirke okosnica.
5. Pretraživanje koktela
Pretraživanje koktela je open source aplikacija koja vam daje priliku da pogledate kod vrlo jednostavne implementacije Backbone.js. Backend pokreće Python, ali ono što nam je zanimljivo je datoteka script.js aplikacije.
Ako pregledate kôd, možete vidjeti vrlo osnovnu strukturu okvira Model-View- * koja sadrži jednu Model definirano u Koktel klasa koja ne mijenja zadane postavke roditeljske klase Backbone.Model, jedna Zbirka okosnice za rezultate pretraživanja i 3 Pregleda okosnice svaki dodaje nove metode Backbone.View roditeljska klasa.
Ako pogledate datoteku index.html, možete otkriti kako je programer dodao Backbone.js i njegove ovisnosti, Underscore.js i jQuery u glavi. Underscore.js je jedina teška ovisnost Backbonea dok je jQuery potreban ako želite manipulirati DOM-om uz pomoć Backbone Views (što je slučaj s aplikacijom za pretraživanje koktela).
6. Bitbucket
Bitbucket je hosting izvorni kod i aplikacija za upravljanje kodom slična Githubu. Atlassian, tvrtka iza nje koristi Backbone u JIRA softveru za praćenje komercijalnih problema, njihov drugi glavni proizvod.
Tijekom temeljitog korištenja Backbone.js u svojim aplikacijama, razvojni tim je pronašao nekoliko stvari koje su propustili iz Backbonea. Sreli su se mnogo tihih kvarova uzrokovanih labavim konvencijama definicije Backbone.js. To u osnovi znači da Modeli, Zbirke i Pogledi ne definiraju nužno prilagođene događaje koje izlažu. A ako to nije bilo dovoljno, modeli uopće ne definiraju atributi oni izlažu.
Ova dopustiva priroda je značajka koju obožavaju mnogi programeri, ali ne i Atlassian tim pa su razvili vlastito proširenje Backbone koje se zove Backbone.Brace dodaje mixins i self-dokumentirane atribute i događaje u knjižnicu.
Ako vas uznemirava ista stvar, možete dodati Backbone.Brace u vlastitu aplikaciju jer je to projekt otvorenog koda koji se nalazi na samom Bitbucketu. BitBucket koristi jezik za predloške za brkove kao i Trello za prikazivanje stražnjih pogleda na sučelju.
7. SoundCloud
SoundCloud je popularna platforma za distribuciju zvuka na kojoj možete snimati, prenositi i dijeliti vlastiti zvuk ili besplatno slušati glazbu.
Programeri SoundCloud-a su najprije koristili Backbone.js kao okvir svog mobilnog programa, ali su im se toliko svidjeli da su ga koristili i na klijentskoj stranici njihovog desktopa. U njihovom Backstage blogu objašnjavaju svoj izbor okvira s mogućnostima Backbonea pružaju čvrstu strukturnu osnovu, dok su i dalje fleksibilni.
Skaliranje je glavna briga za aplikaciju za streaming zvuka, a SoundCloud priznaje da je to “ima više veze s organizacijom nego s provedbom” što čini dobro organiziranu ali laganu Backbone idealnim izborom za njih.
SoundCloud koristi Handlebars semantički templating sustav za prikazivanje Backbone Views na sučelju.
8. AirBnB
Airbnb je ludo uspješna zajednica na tržištu gdje možete pronaći i rezervirati različite vrste smještaja u gotovo 200 zemalja širom svijeta
AirBnB je najprije koristio Backbone.js u svojoj mobilnoj aplikaciji baš kao i SoundCloud, ali ju je kasnije sve više koristio u svojim značajkama web aplikacija kao što su Popisi želja, Match, Search, Zajednice i plaćanja. AirBnB je toliko volio Backbonea da se nisu samo zadovoljili korištenjem na prednjoj strani, već su također željeli omogućiti pokretanje knjižnice na pozadini.
Kasnije napravio njihovu knjižnicu s backboneom na strani poslužitelja, Rendr, open source i dostupne na njihovoj Github stranici. Rendr je napisan u Node.js i slijedi filozofiju “nametanje minimalne strukture, omogućujući programeru da koristi knjižnicu na najprikladniji način za njihovu primjenu” baš kao i sama Backbone
Ako ste više zainteresirani za AirBnB-ovu tehnologiju, pročitajte njihov post na njihovom blogu o njihovom putovanju od Rails backend-a do Svetog grala istodobno korištenje Backbone-a na strani klijenta i poslužitelja.
9. Hulu
Hulu aplikacija za streaming videozapisa koja vam omogućuje besplatno gledanje TV emisija i filmova, ako se nalazite u SAD-u.
Hulu je koristio Backbone.js kako bi izgradio besprijekorno i brzo korisničko iskustvo za ljubitelje filma. Sučelje omogućuje brzo kretanje kroz aplikaciju s blagim prijelazima tijekom navigacije. oslonac štedi propusnost za korisnike kao skripte i ugrađene videozapise nemojte se ponovno puniti cijelo vrijeme.
Hulu pokreće Rails motor na pozadini, a ako volite zabavne ali informativne razgovore, možete čitati o tome kako se tim razvojnih timova upetljao u jQuery prije nego što se konačno odluči promijeniti u organiziranija okosnica.
Backbone.js dopustio je Hulu-u da postupno konvertirati njihovo prikazivanje sa strane poslužitelja na stranu klijenta umjesto da radite rizično prepisivanje postojećeg Rails backend-a.
10. Brojanje
Countly aplikacija za mobilnu analitiku u stvarnom vremenu koja vam omogućuje praćenje uspješnosti aplikacije iPhone, Android ili Windows Phone izravno iz prozora preglednika.
Pogledajte izvanredan popis open source softvera koji je korišten za razvoj platforme, uključujući superzvijezde posljednjih godina: Nginx, MongoDB, Node.js za stranu poslužitelja i naravno Backbone.js za frontend.
Broji koristi knjižnicu s semantičkim templatima Handlebars kako bi prikazao Backbone Views koji prikazuju podatke pripremljene i učitane s Backbone modelima. Računalo je aplikacija pogodna za razvojne programere: ne samo da se lako može proširiti, nego i njezina dokumentacija nudi uređivačima s takvim uputama na kako izgraditi prilagođene dodatke na vrhu jezgre Backbone klijenta.
Napomena urednika: Ovo je napisala Anna Monus za Hongkiat.com. Anna je web developer i pisac koda s interesom za znanost, umjetnu inteligenciju i disruptivne tehnologije.
