10 Web-sovellusta, jotka on tehty Backbone.js n avulla [Case Study]
Oletko koskaan ollut tunkeutunut spagettikoodiin? Haluatko mieluummin ruokkia sovellusta jotain terveempää? Jos näin on, ota kuunnella mitä voidaan tehdä Backbone.js: n avulla. Selkäranka on JavaScript-kirjasto, joka perustuu löyhästi Model-View-Controller -suunnittelumalliin, mutta koska siinä ei ole ohjainelementtiä, on parempi kutsua sitä MV * -kehykseen.
Se auttaa sinua rakentamaan nopea, tyylikäs ja tietovarainen yhden sivun Web-sovellukset tietojen logiikka erillään käyttöliittymästä, säästää tietojen sitomista DOMiin ja asteikot sovelluksen kasvaessa. Koska selkäranka synkronoidaan oletusarvoisesti minkä tahansa RESTful API: n kanssa, voit helposti liittää asiakkaan puolella olevan sovelluksen olemassa olevaan palvelinpuolen sovellusliittymään RESTful JSON -liitännän kautta.
Tässä viestissä tutkitaan 10 web-sovellusta, jotka hyödyntävät Backbone-kirjaston ominaisuuksia ja auttavat sinua tarttumaan mahdollisiin Backbone.js-palveluihin tulevissa web-sovellusprojekteissasi.
1. Trello
Trello on online-yhteistyö- ja projektinhallinnan sovellus, jonka avulla voit järjestää projektejasi hallituksiin, tarkistuslistiin, kortteihin, korttiluetteloihin ja työkaluihin, kuten keskustelut ryhmän jäsenen viestintään.
Trello rakennettiin maasta ylöspäin Backbone.js: n avulla. Selkäranka toimii yhdessä HTML5-historia-API: n ja viiksen logiikkaa vähemmän mallintuskielen kanssa. Kaikki Trello Tech Stackin elementit suunniteltiin tavalla, joka johti a ylläpidettävä asiakas, joka käsittelee päivitykset helposti, ja synkronoi uudelleen palvelimen kanssa kun DOM-tapahtuma käynnistyy.
Trello hyödyntää selkäranka-mallia ja näkymiä esineilleen, kuten Kortit tai jäsenet, ja selkäranka-kokoelmia niihin liittyville malleille - esimerkiksi luettelossa olevat Kortit. Kehittäjät myös rakensi oman asiakaskoneen mallimuistin varten nopeammat päivitykset ja enemmän tehokas koodin uudelleenkäyttö.
2. Foursquare
Todennäköisesti olet jo kuullut luja, suosittu paikallispohjainen sosiaalisen verkostoitumisen sovellus, jonka avulla voit jakaa paikkoja ystäviesi kanssa ympäri maailmaa.
Foursquarein ydin JavaScript API on rakennettu selkärankaisten mallien ympärille Foursquare API: n malliluokka (kuten käyttäjät, paikat ja sisäänkirjautumiset) ovat selkärangan mallien alaluokkia periä niiden menetelmät ja ominaisuudet.
Koodin toteuttaminen voidaan piirtää näin: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Kyllä, se on oikein, selkäranka mahdollistaa devs: n kirjoita mukava esine-orientoitu JavaScript.
Selkärangan näkymillä on myös rooli Foursquare-sovelluksessa, koska ne parantavat käyttäjäkokemusta sellaisilla ominaisuuksilla kuin kotisivujen kartat ja luettelot. Muut kuin selkäranka, Foursquarein JavaScript API käyttää myös jQuery, Underscore.js (joka on selkärangan ainoa vaikea riippuvuus) ja sulkijakompilaattori.
3. Basecamp-kalenteri
Basecamp, suosittu projektihallinnan sovellus käyttää Backbone.js-sovellusta kalenteritoimintoonsa.
Basecamp-kalenterin tärkein suunnittelutavoite oli luoda vuorovaikutteinen käyttöliittymä intuitiivinen ryhmäsuunnittelu mahdollista, ja päivittää itsensä millisekunteina. Basecamp-kalenterissa selkäranka tekee näkymät ECO (Embedded CoffeeScript) -malleiksi aina, kun mallit (asiakaspuolen tiedot) päivitetään.
On mielenkiintoista huomata, että kehittäjätiimi ei tehnyt koko Basecampia yhden sivun sovellukseksi, joka on Backbone.js: n ensisijainen käyttötapaus, mutta käytti vain kirjastoa Kalenteri-toiminnossa, jossa he voisivat todella hyödyntää sen etuja. Ainoastaan menee osoittamaan, että sinun ei tarvitse välttämättä rakentaa täyttä yhden sivun sovellusta, jossa on selkäranka. on parempi harkita tarkkaan, mihin sitä voidaan soveltaa.
Lue lisää Backbone antipatternsista, jos tarvitset selkärankaa koko sovelluksellesi tai ei.
4. Flowdock
Flowdock on reaaliaikainen joukkoviestintäsovellus, joka tarjoaa sinulle ominaisuuksia, kuten ryhmäkeskustelu, tiimi-postilaatikot ja reaaliaikaiset työnkulut
Flowdock rakennettiin maasta ylös Backbone.js: n päälle. Kehitystiimin tärkein haaste oli reaaliaikaisten viestien ja työnkulkujen mahdollistaminen. Oletusarvoisesti Backbone.js muodostaa yhteyden palvelimen puolelle RESTful-liitännän kautta, mikä ei tee reaaliaikaisia tietovirtoja mahdolliseksi. Siksi devit päätti tallentaa viestejä Socket.io reaaliaikaisen moottorin kautta REST API: n sijasta.
Tämän saavuttamiseksi he kirjoitti mukautetun menetelmän olla nimeltään Backbone.sync. Koska Socket.io on myös JavaScript-kirjasto, se tekee kommunikoinnin JavaScript-ohjaimen ja backendin (Node.js) välillä saumattomasti. Flowdock on ensisijaisesti Rails-sovellus palvelimen puolella, mutta niillä on erillinen Node.js-taustajärjestelmä, joka käsittelee Socket.io-yhteyksiä.
Flowdock parantaa reaaliaikaista käyttäjäkokemusta Bacon.js, kätevä JavaScript-kirjasto, joka mahdollistaa toiminnallisen reaktiivisen ohjelmoinnin. EventStreamin ominaisuus on Bacon.js auttaa Flowdockia pitämään selkäranka-mallinsa ja kokoelmansa ajan tasalla.
5. Cocktail-haku
Cocktail-haku on avoimen lähdekoodin sovellus, joka antaa sinulle mahdollisuuden tarkastella Backbone.js: n yksinkertaisen toteutuksen koodia. Taustaa tukee Python, mutta se, mikä meille on mielenkiintoista sovelluksen script.js-tiedosto.
Jos tarkastelet koodia, näet Model-View- * -kehyksen hyvin perusrakenteen: se sisältää yhden Malli määritelty Cocktail luokka, joka ei muuta Backbone.Model-vanhemman luokan oletusasetuksia Selkärangan kokoelma hakutuloksissa ja 3 selkäranka-näkymässä kukin lisää uusia menetelmiä Backbone.View vanhempien luokassa.
Jos tarkastelet index.html-tiedostoa, voit selvittää, miten kehittäjä lisäsi Backbone.js: n ja sen riippuvuudet, underscore.js ja jQuery pääosassa. Underscore.js on ainoa kova riippuvuus selkäranka, kun jQuery tarvitaan jos haluat manipuloida DOM: ia Backbone Views -ohjelman avulla (mikä on Cocktail-hakusovelluksen tapauksessa).
6. Bitbucket
Bitbucket on lähdekoodin ja koodinhallinnan sovellus, joka on samanlainen kuin Github. Atlassian, sen takana oleva yritys käyttää selkärankaa JIRAn kaupallisten kysymysten seurantaohjelmistossa, myös niiden toisessa päätuotteessa.
Backbone.js: n perusteellisen hyödyntämisen aikana kehitystiimi löysi pari asiaa, jotka he jäivät selkärangan ulkopuolelle. He kohtasivat monia hiljaisia epäonnistumisia, jotka johtuvat Backbone.js: n löysästä määrittelystä. Tämä tarkoittaa periaatteessa sitä, että mallit, kokoelmat ja näkymät älä määritä välttämättä määritettyjä mukautettuja tapahtumia. Ja jos tämä ei riitä, Mallit eivät edes määritä määritteet ne paljastavat.
Tämä salliva luonne on monien kehittäjien rakastama ominaisuus, mutta ei Atlassian-tiimi, joten he kehittivät oman Backbone-laajennuksensa nimeltä Backbone.Brace that lisää kokoelmia ja itse dokumentoituja attribuutteja ja tapahtumia kirjastoon.
Jos sama asia on harmissaan, voit lisätä Backbone.Brace-sovelluksen omaan sovellukseen, koska se on avoimen lähdekoodin projekti, joka on itse Bitbucketissa. BitBucket käyttää Mustache-mallinnuskielen aivan kuten Trello, kun haluat tehdä selkäranka-näkymiä frontendissä.
7. SoundCloud
SoundCloud on suosittu äänijakelualusta, jossa voit tallentaa, ladata ja jakaa omaa ääntäsi tai kuunnella musiikkia ilmaiseksi.
SoundCloudin kehittäjät käyttivät Backbone.js: ää ensin mobiilisovelluksensa frontend-kehyksenä, mutta he pitivät siitä niin paljon, että he käyttivät sitä myös työpöydän verkkosivustonsa asiakkaan puolella. Backstage-blogissaan he selittävät valintansa kehyksestä Backbone-kyvyllä tarjota vankka rakenteellinen perusta, mutta ne ovat edelleen joustavia.
Skaalaus on tärkein huolenaihe äänen suoratoistossa, ja SoundCloud myöntää sen “on enemmän tekemistä organisaation kanssa kuin toteutus” joka tekee hyvin järjestäytyneestä mutta kevyestä selkärankaista ihanteellisen vaihtoehdon heille.
SoundCloud käyttää ohjaustangon semanttista mallinnusjärjestelmää selkärankaisten näkymien esittämiseen etupaneelissa.
8. AirBnB
Airbnb on erittäin menestyksekäs yhteisömarkkinapaikka, jossa voit löytää ja varata erilaisia majoituspaikkoja lähes 200 maassa ympäri maailmaa
AirBnB käytti ensin Backbone.js-sovellusta mobiilisovelluksessaan aivan kuten SoundCloudin, mutta myöhemmin hyödynsi sitä yhä enemmän web-sovellusominaisuuksissaan, kuten toiveluetteloissa, otteluissa, haussa, yhteisöissä ja maksuissa. AirBnB rakasti selkärankaa niin paljon, että ne eivät vain asettuneet käyttämään sitä frontendissä, vaan halusivat myös mahdollistaa kirjaston suorittamisen taustalla.
He myöhemmin teki palvelinpuolen selkäranka-kirjaston, Rendr, avoimen lähdekoodin ja saatavilla niiden Github-sivulla. Rendr on kirjoitettu Node.js: iin ja seuraa filosofiaa “vähäisen rakenteen asettaminen, jolloin kehittäjä voi käyttää kirjastoa sopivimmalla tavalla niiden soveltamista varten” aivan kuten selkäranka itse
Jos olet kiinnostunut enemmän AirBnB: n tech-pinosta, lue heidän blogikirjoituksensa matkoistaan Rails-backendistä Pyhään Graaliin. selkärangan samanaikainen käyttö sekä asiakas- että palvelinpuolella.
9. Hulu
Hulu on videoiden suoratoistojärjestelmä, jonka avulla voit katsella televisio-ohjelmia ja elokuvia ilmaiseksi, jos olet Yhdysvalloissa.
Hulu käytti Backbone.js: ää rakentaakseen saumattoman ja nopean käyttäjäkokemuksen elokuvan ystäville. Käyttöliittymän avulla voit siirtyä nopeasti sovelluksen läpi siirtymällä hellävaraisesti. Selkäranka säästää kaistanleveyttä käyttäjille kuten skriptejä ja upotettuja videoita älä päästä uudelleen koko ajan.
Hulu käyttää Rails-moottoria taustalla, ja jos haluat hauskoja mutta informatiivisia keskusteluja, voit lukea siitä miten kehittäjäryhmä tarttui jQueryyn ennen kuin lopulta päätetään muuttaa järjestäytyneempi runkorakenne.
Backbone.js salli Hulun muuntaa asteittain niiden renderointi palvelimen puolelta asiakaspuolelle sen sijaan, että tehtäisiin riskialttiita nykyisiä Rails-taustajärjestelmiä.
10. Laske
aikakatkaisun on reaaliaikainen mobiilianalyysiohjelma, jonka avulla voit seurata iPhonen, Androidin tai Windows Phone -sovelluksen suorituskykyä suoraan selainikkunasta.
Tutustu merkittävään avoimen lähdekoodin ohjelmistoihin, joita käytettiin alustan kehittämiseen, mukaan lukien viime vuosien superstars: Nginx, MongoDB, Node.js palvelinpuolelle ja tietysti Backbone.js for frontend.
Hyödyntää käsikirja-semanttisen mallinnuskirjaston avulla selkärangan näkymiä, jotka esittävät selkärangan malleilla valmistettuja ja ladattuja tietoja. Laskevasti on kehittäjäystävällinen sovellus: se ei ole vain helposti laajennettavissa, vaan sen dokumentaatio tarjoaa myös käyttäjille sellaisia opetusohjelmia kuten miten rakentaa mukautettuja laajennuksia ytimen Backbone-asiakkaan päälle.
Toimittajan huomautus: Tämän on kirjoittanut Anna Monus Hongkiat.comille. Anna on web-kehittäjä ja koodin kirjoittaja, joka on kiinnostunut tiedosta, tekoälystä ja häiritsevistä teknologioista.
