10 veebirakendused, mis on tehtud Backbone.js-iga [Case Study]
Kas te olete kunagi spagetikoodiga kokku puutunud? Kas eelistaksite oma rakendust pigem tervislikumaks? Kui jah, siis vaadake, mida saab teha Backbone.js'iga. Selgroog on JavaScripti raamatukogu, mis põhineb lõdvalt mudeli-vaatekontrolleri disainimudelil, kuid kuna sellel puudub kontrolleri element, on parem seda nimetada MV * raamistikuks.
See aitab teil ehitada kiire, klanitud ja andmete rikkalik ühe lehekülje veebirakendused hoiavad teie andmete kasutajaliidesest eraldi, salvestab teid andmete sidumisest DOM-i ja skaala, kui teie rakendus kasvab. Kuna selgroog sünkroonib vaikimisi mis tahes RESTful API-ga, saate hõlpsasti ühendada oma kliendipoolse rakenduse oma olemasoleva serveripoolse API-ga RESTful JSON liidese kaudu.
Selles postituses uurime 10 veebirakendust, mis kasutavad selgroogiraamatu funktsioone, et aidata teil mõista potentsiaalset Backbone.js-i oma tulevaste veebirakenduse projektide jaoks.
1. Trello
Trello on veebipõhine koostöö ja projektijuhtimise rakendus, mis aitab teil oma projekte korraldada tahvliteks, kontrollnimekirjadeks, kaartideks, kaardiloenditeks ja pakub tööriistu, nagu näiteks vestlused meeskonnaliikme suhtlemiseks.
Trello ehitati maast üles Backbone.js'iga. Selgroog töötab koos HTML5 ajaloo API-ga ja vuntside loogikata vähem mallimise keelega. Kõik Trello Tech Stacki elemendid kujundati viisil, mis viis a hooldatav klient, kes hõlbustab lihtsalt värskendusi, ja dünaamiliselt sünkroonib serveriga DOMi sündmuse käivitamisel.
Trello kasutab oma esemete (nt kaardid või liikmed) ja sellega seotud mudelite selgroogkogude selgroog mudelit ja vaateid, näiteks nimekirjas olevaid kaarte. Arendajad ka ehitas oma kliendipoolse mudeli vahemälu jaoks kiiremad uuendused ja veel efektiivne koodide korduvkasutamine.
2. Foursquare
Tõenäoliselt olete juba kuulnud Foursquare, populaarne asukohapõhine suhtlusvõrgurakendus, mis võimaldab teil jagada oma sõpradega kohti kogu maailmas.
Foursquare südamiku JavaScript API on ehitatud selgroog mudelite, kus Foursquare API mudeli klassid (nt kasutajad, kohad ja sisselogimised) on alamklassid selgroogide mudeliklassides ja pärida oma meetodid ja omadused.
Koodi rakendamist saab visandada nii: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Jah, see on õige, selgroog võimaldab kirjutage kena objektorienteeritud JavaScript.
Selgroogide vaated mängivad ka Foursquare-rakenduses, kuna need parandavad kasutuskogemust selliste funktsioonidega nagu kodulehe kaardid ja nimekirjad. Muud kui selgroog, Foursquare JavaScript API ka kasutab jQuery, Underscore.js (mis on selgroo ainus raske sõltuvus) ja sulgemise kompilaator.
3. Basecampi kalender
Basecamp, populaarne projektijuhtimise rakendus kasutab Backbone.js'i oma kalenderfunktsiooni jaoks.
Basecampi kalendri peamine eesmärk oli luua interaktiivne liides, mis teeb intuitiivne rühma ajastamine võimalik, ja värskendab ennast millisekundites. Basecampi kalendris annab selgroog vaateid ECO (Embedded CoffeeScript) mallideks, kui mudelid (kliendipoolsed andmed) on värskendatud.
On huvitav märkida, et arendajameeskond ei teinud kogu Basecampi ühe lehekülje rakenduseks, mis on Backbone.js'i esmane kasutusjuht, vaid kasutas ainult raamatukogu kalendrifunktsioonis, kus nad saaksid tegelikult oma eeliseid ära kasutada. Lihtsalt läheb näitama, et te ei pea tingimata ehitama täielikku ühe lehekülje rakendust koos selgroogiga; see on parem hoolikalt mõelda, kus seda saab rakendada.
Loe lähemalt Backbone antipatterns'ist, et otsustada, kas vajate kogu rakenduse selgroogu või mitte.
4. Flowdock
Flowdock on reaalajas meeskonna suhtlusrakendus, mis pakub funktsioone, nagu grupivestlus, meeskonna postkastid ja reaalajas töövood
Flowdock ehitati maast üles Backbone.js'i peal. Arendusmeeskonna peamiseks väljakutseks oli reaalajas sõnumite ja töövoogude võimaldamine. Vaikimisi ühendab Backbone.js serveri poole RESTful liidese kaudu, mis ei võimalda reaalajas toimuvat andmevoogu. Seepärast on devs otsustas salvestada sõnumeid Socket.io reaalajas mootori kaudu REST API asemel.
Selle saavutamiseks kirjutas kohandatud meetodi kutsus Backbone.sync. Kuna Socket.io on ka JavaScripti raamatukogu, muudab see sujuvaks JavaScripti juhitud frontendi ja backendi (Node.js) vahelise suhtluse. Flowdock on serveri pooleks peamiselt Rails-rakendus, kuid neil on eraldi Node.js-i taustaprogramm, mis haldab Socket.io ühendusi.
Flowdock suurendab reaalajas kasutuskogemust veelgi enam Bacon.js, mugav JavaScript-raamatukogu, mis võimaldab funktsionaalset reaktiivset programmeerimist. . \ T Bacon.js aitab Flowdockil säilitada oma selgroogmudel ja kogud.
5. Kokteilide otsing
Kokteilide otsing on avatud lähtekoodiga rakendus, mis annab teile võimaluse vaadata Backbone.js'i väga lihtsa rakendamise koodi. Taust on powered by Python, kuid see, mis on meile huvitav rakenduse script.js fail.
Kui te seda koodi uurite, näete mudel-View-* raamistiku väga põhistruktuuri: see sisaldab ühte Mudel määratletud Kokteil klass, mis ei muuda Backbone.Model-põhiklassi vaikesätteid, üks Selgroogide kogumine otsingutulemuste ja 3 selgroogivaate puhul lisab igaüks uutele meetoditele Selgroog.Vaade vanemaklass.
Kui vaatate index.html-faili, saate teada, kuidas arendaja Backbone.js ja selle sõltuvused lisasid, Underscore.js ja jQuery peaosas. Underscore.js on ainuke raske sõltuvus selgroost, samas kui jQuery on vajalik kui soovite DOM-i manipuleerida Backbone Views abil (mis on Cocktail Search'i rakenduse puhul).
6. Bitbucket
Bitbucket on lähtekoodi hostimine ja koodi haldamise rakendus, mis on sarnane Githubile. Atlassian, selle taga olev ettevõte kasutab JIRA kommertsküsimuste jälgimise tarkvaras oma põhitoodet.
Backbone.js-i põhjalikul kasutamisel oma rakendustes leidis arendusmeeskond paar asja, mida nad selgroogist mööda jäid. Nad kohtusid palju vaikseid tõrkeid, mis on põhjustatud Backbone.js'i lahti määratlemise konventsioonidest. See tähendab põhimõtteliselt, et mudelid, kogud ja vaated ei pruugi tingimata määratleda kohandatud sündmusi. Ja kui see ei ole piisav, siis mudelid ei määratle isegi alati atribuudid nad paljastavad.
See lubav olemus on paljude arendajate armastatud omadus, kuid mitte Atlassiani meeskond, et nad arendasid oma selgroo laiendust Backbone.Brace that lisab raamatukogule mixins ja ise dokumenteeritud atribuudid ja sündmused.
Kui sama asja on häiritud, saate lisada oma rakendusele Backbone.Brace, kuna see on avatud lähtekoodiga projekt, mis asub Bitbucket'is ise. BitBucket kasutab vuntside mallimise keelt just nagu Trello, et muuta selgroogvaated esipaneelil.
7. SoundCloud
SoundCloud on populaarne heli levitamise platvorm, kus saate salvestada, üles laadida ja jagada oma heli või kuulata muusikat tasuta.
SoundCloudi arendajad kasutasid Backbone.js-i esmalt oma mobiilirakenduse esipaneelina, kuid neile meeldis see nii palju, et nad kasutasid seda ka oma töölaua veebisaidi kliendipoolel. Oma Backstage'i blogis selgitavad nad oma raamistiku valikut koos Backbone'i võimega tagada kindel struktuuriline alus, jäädes siiski paindlikuks.
Skaala muutmine on peamine mure audio voogesituse rakenduse jaoks ja SoundCloud tunnistab seda “on rohkem seotud organisatsiooni kui rakendamisega” mis muudab hästi organiseeritud, kuid kerge selgroo ideaalseks valikuks neile.
SoundCloud kasutab käepidemete semantilise mallimise süsteemi, et teha esipaneelil selgroogvaated.
8. AirBnB
AirBnB on ülimalt edukas kogukonna turg, kus on võimalik leida ja broneerida erinevaid majutusvõimalusi peaaegu 200 riigis üle maailma
AirBnB kasutas kõigepealt oma mobiilirakenduses Backbone.js-i nagu SoundCloud, kuid kasutas hiljem seda üha enam oma veebirakenduse funktsioonides, nagu soovinimekirjad, sobitamine, otsing, kogukonnad ja maksed. AirBnB armastas Backbone'i nii palju, et nad ei suutnud seda kasutada ainult frontendil, vaid tahtsid ka võimaldada raamatukogu juhtimist taustal.
Nad hiljem tegi oma serveripoolse selgroograamatu, Rendr, avatud lähtekoodiga ja saadaval nende Githubi lehel. Rendr on kirjutatud Node.js-is ja järgib filosoofiat “minimaalse struktuuri kehtestamine, võimaldades arendajal kasutada raamatukogu nende rakendamiseks kõige sobivamal viisil” nagu selgroog ise
Kui olete rohkem huvitatud AirBnB tehnoloogiast, lugege nende blogi postitust oma rööbaste tagaplaanist Püha Graali juurde. Seljaaju samaaegne kasutamine nii kliendi kui serveri poolel.
9. Hulu
Hulu on video voogesituse rakendus, mis võimaldab teil vaadata telesaateid ja filme tasuta, kui asute USAs.
Hulu kasutas Backbone. Liides võimaldab teil kiiresti liikuda rakenduse kaudu, kui navigate. Selgroog säästab kasutajate ribalaiust skriptid ja manustatud videod ei saa uuesti laadida kogu aeg.
Hulu juhib taustal Rails'i mootorit ja kui sulle meeldib lõbusa, vaid informatiivse kõnega, saate sellest lugeda kuidas arendaja meeskond jQueryga kokku puutus enne lõpliku otsuse tegemist rohkem organiseeritud selgroograamistik.
Backbone.js lubas Hulule teisendage nende renderdamine järk-järgult serveri küljest kliendi poole selle asemel, et teha oma olemasolevate Rails'i taustaprogrammide riskantset ümberkirjutamist.
10. Lugege
Loendavalt on reaalajas mobiilianalüüsi rakendus, mis võimaldab teil jälgida oma iPhone'i, Androidi või Windows Phone'i rakenduse jõudlust otse brauseri aknast.
Vaadake tähelepanuväärset nimekirja avatud lähtekoodiga tarkvarast, mida kasutati platvormi arendamiseks, kaasa arvatud viimaste aastate superstaarid: Nginx, MongoDB, Node.js serveri poolel ja muidugi Backbone.js esiplaanile.
Kasutatakse loendurite semantilise mallimise teeki, et teha selgroogseid vaateid, mis kuvavad selgroogmudelitega valmistatud ja laaditud andmeid. Arvukalt on arendaja-sõbralik rakendus: see ei ole mitte ainult kergesti laiendatav, vaid ka dokumentatsioon pakub Devidele selliseid õpetusi kuidas ehitada kohandatud pluginaid tuumikraami kliendi peale.
Toimetaja märkus: Selle kirjutas Anna Monus Hongkiat.com-le. Anna on veebiarendaja ja koodikirjutaja, kes on huvitatud teadusest, tehisintellektist ja häirivatest tehnoloogiatest.
