10 tīmekļa lietojumprogrammas, kas izgatavotas ar Backbone.js [Case study]
Vai esat kādreiz bijuši iesprostoti spageti kodā? Vai jūs drīzāk barotu lietotni kaut ko veselīgāku? Ja tā, tad palaidiet to, ko var paveikt ar Backbone.js palīdzību. Mugurkauls ir JavaScript bibliotēka, kas ir brīvi balstīta uz Model-View-Controller dizaina modeli, bet, tā kā tai trūkst Controller elementa, labāk to saukt par MV * sistēmu.
Tas palīdz jums veidot ātra, gluda un datu bagāta vienas lapas tīmekļa lietojumprogrammas, saglabā jūsu datu loģika ir atdalīta no lietotāja interfeisa, saglabā jūs no datu sasaistīšanas ar DOM un kā jūsu lietotne palielinās. Tā kā Backbone pēc noklusējuma sinhronizējas ar jebkuru RESTful API, ar RESTful JSON interfeisu varat viegli savienot savu klienta puses lietojumprogrammu ar esošo servera puses API..
Šajā ziņojumā mēs pētīsim 10 tīmekļa lietojumprogrammas, kas izmantos Backbone bibliotēkas funkcijas, lai palīdzētu jums saprast potenciālo Backbone.js, kas paredzēts jūsu turpmākajiem tīmekļa lietotņu projektiem.
1. Trello
Trello ir tiešsaistes sadarbība un projektu vadības lietotne, kas palīdz organizēt projektus projektos, kontrolsarakstos, kartēs, karšu sarakstos un nodrošina rīkus, piemēram, sarunas par komandas dalībnieku saziņu.
Trello tika uzcelta no zemes uz augšu ar Backbone.js. Mugurkauls darbojas kopā ar HTML5 vēstures API un ūsas loģiku mazāk veidojošo valodu frontendā. Visi Trello Tech Stack elementi tika izstrādāti tā, lai radītu a uzturams klients, kas viegli apstrādā atjauninājumus, un dinamiski atkārtoti sinhronizējas ar serveri kad tiek aktivizēts DOM pasākums.
Trello izmanto mugurkaula modeli un skatus saviem objektiem, piemēram, kartēm vai dalībniekiem, un saistīto modeļu mugurkaulu kolekcijām - piemēram, karšu sarakstam. Izstrādātāji arī veidoja savu klienta puses modeļa kešatmiņu par ātrāki atjauninājumi un vēl efektīva kodu atkārtota izmantošana.
2. Foursquare
Visticamāk, jūs jau esat dzirdējuši Foursquare, populārā vietnes sociālā tīkla lietojumprogramma, kas ļauj kopīgot vietas ar draugiem visā pasaulē.
Foursquare galvenais JavaScript API ir veidots ap mugurkaula modeļiem, kur Foursquare API modeļu klases (piemēram, Lietotāji, Vietas un Reģistrēšanās) ir Backbone Model klases apakšklases mantot savas metodes un īpašības.
Kodu ieviešanu var ieskicēt šādi: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Jā, tā ir taisnība, mugurkauls ļauj rakstiet jauku objektu orientētu JavaScript.
Backbone viedokli arī ir sava loma Foursquare lietotnē, jo tie uzlabo lietotāja pieredzi ar tādām funkcijām kā sākumlapu kartes un saraksti. Izņemot mugurkaulu, Foursquare JavaScript API izmanto arī jQuery, Underscore.js (kas ir tikai mugurkaula smaga atkarība) un slēgšanas kompilators.
3. Basecamp kalendārs
Bāzes nometne, populārā projekta vadības lietotne izmanto kalendāra funkciju Backbone.js.
Basecamp kalendāra galvenais dizaina mērķis bija izveidot interaktīvu interfeisu intuitīva grupu plānošana iespējams, un atjaunina sevi milisekundēs. Basecamp kalendārā mugurkauls sniedz skatus uz ECO (Embedded CoffeeScript) veidnēm, kad tiek atjaunināti modeļi (klienta dati).
Interesanti atzīmēt, ka izstrādātāju komanda nepadarīja visu Basecamp par vienas lapas lietojumprogrammu, kas ir galvenais Backbone.js gadījums, bet tikai izmantoja bibliotēku kalendāra funkcijā, kur viņi patiešām varēja izmantot savas priekšrocības. Vienkārši dodas, lai parādītu, ka jums nav obligāti jāizveido pilna vienas lapas lietotne ar mugurkaulu; tas ir labāk rūpīgi pārdomāt, kur to var izmantot.
Uzziniet vairāk par Backbone antipatterns, lai izlemtu, vai jums ir vajadzīgs mugurkauls jūsu visai lietotnei.
4. Plūsma
Flowdock ir reālā laika komandas sakaru lietotne, kas nodrošina jums tādas funkcijas kā grupas tērzēšana, komandu iesūtnes un reāllaika darbplūsmas
Flowdock tika uzcelta no zemes uz augšu Backbone.js. Attīstības komandas galvenais uzdevums bija nodrošināt reāllaika ziņojumus un darbplūsmas. Pēc noklusējuma Backbone.js savienojas ar servera pusi, izmantojot RESTful interfeisu, kas nepadara iespējamu reāllaika datu plūsmu. Tāpēc devs nolēma saglabāt ziņojumus, izmantojot Socket.io reālā laika dzinēju REST API vietā.
Lai to panāktu, viņi uzrakstīja pielāgotu metodi sauc Backbone.sync. Tā kā Socket.io ir arī JavaScript bibliotēka, tā padara saziņu starp JavaScript balstītu frontendu un backend (Node.js) bezšuvju. Flowdock galvenokārt ir Rails lietotne servera pusē, bet tām ir atsevišķs Node.js backend, kas apstrādā Socket.io savienojumus.
Flowdock uzlabo reālā laika lietotāju pieredzi vēl vairāk ar Bacon.js, ērtu JavaScript bibliotēku, kas nodrošina funkcionālu reaktīvu programmēšanu. Notikumu notikumu plūsma Bacon.js palīdz Flowdock saglabāt savu Backbone modeli un kolekcijas.
5. Kokteiļu meklēšana
Kokteiļu meklēšana ir atvērtā koda lietojumprogramma, kas dod iespēju apskatīt ļoti vienkāršas Backbone.js ieviešanas kodu. Backend tiek darbināts ar Python, bet tas, kas mums ir interesanti lietotnes script.js fails.
Ja pārbaudāt kodu, jūs varat redzēt ļoti vienkāršu Model-View- * struktūras struktūru: tajā ir viens Modelis definēts Kokteilis klase, kas nemaina Backbone.Model vecāku klases noklusējuma iestatījumus Mugurkaula kolekcija meklēšanas rezultātiem un 3 mugurkaula skatiem, katrs pievieno jaunās metodes Backbone.View vecāku klase.
Ja aplūkojat failu index.html, varat uzzināt, kā attīstītājs pievienoja Backbone.js un tā atkarības, Underscore.js un jQuery galvas sadaļā. Underscore.js ir vienīgā mugurkaula atkarība, kamēr jQuery ir nepieciešama ja vēlaties manipulēt DOM ar Backbone Views palīdzību (kas attiecas uz kokteiļu meklēšanas lietotni).
6. Bitbucket
Bitbucket ir avota kodu hostinga un kodu pārvaldības lietotne, kas ir līdzīga Github. Atlassian, uzņēmums, kas atrodas aiz tā, izmanto mugurkaulu JIRA komerciālā jautājuma izsekošanas programmatūrā, otrs galvenais produkts.
Rūpīgi izmantojot Backbone.js savās lietotnēs, attīstības komanda atrada pāris lietas, kuras viņi neatbildēja no Backbone. Viņi sastapās daudzas klusas kļūdas, ko izraisījušas Backbone.js vaļīgās definīcijas konvencijas. Tas būtībā nozīmē, ka modeļi, kolekcijas un skati ne vienmēr definējiet pielāgotos notikumus. Un, ja tas nebūtu pietiekami, modeļi ne vienmēr nosaka atribūti tie atklāj.
Šī pieļaujamā daba ir daudzu izstrādātāju mīlestība, bet ne Atlassian komanda, tāpēc viņi izstrādāja savu Backbone paplašinājumu, ko sauc par Backbone. pievieno bibliotēkai mixins un pašdokumentētus atribūtus un notikumus.
Ja jūs uztraucaties ar to pašu, varat pievienot Backbone.Brace savai lietotnei, jo tas ir atvērta pirmkoda projekts, kas izvietots pats Bitbucket. BitBucket izmanto ūsas šablonu valodu tāpat kā Trello, lai padarītu mugurkaulu skatus uz priekšu.
7. SoundCloud
SoundCloud ir populāra audio izplatīšanas platforma, kurā var ierakstīt, augšupielādēt un koplietot savu audio vai klausīties mūziku bez maksas.
SoundCloud izstrādātāji izmantoja Backbone.js vispirms kā mobilās lietotnes frontend sistēmu, bet viņiem tas patika, ka viņi to izmantoja arī darbvirsmas tīmekļa vietnes klienta pusē. Viņu Backstage emuārā viņi izskaidro savu izvēli par ietvaru ar Backbone spēju nodrošināt stabilu strukturālo bāzi, tomēr joprojām ir elastīga.
Mērogošana ir galvenā audio straumēšanas lietotnes problēma, un SoundCloud atzīst, ka tā ir “ir vairāk saistīts ar organizāciju nekā īstenošana” kas padara to labi organizēto, bet vieglo mugurkaulu par ideālu izvēli.
SoundCloud izmanto vadīklas semantisko veidņu sistēmu, lai padarītu mugurkaula skatu uz priekšu.
8. AirBnB
AirBnB ir ārkārtīgi veiksmīgs kopienas tirgus, kur var atrast un rezervēt dažāda veida naktsmītnes gandrīz 200 valstīs visā pasaulē
AirBnB vispirms izmantoja Backbone.js savā mobilajā lietotnē tāpat kā SoundCloud, bet vēlāk to arvien vairāk izmantoja tīmekļa lietotņu funkcijās, piemēram, vēlmju sarakstos, spēlēs, meklēšanā, kopienās un maksājumos. AirBnB mīlēja mugurkaulu tik daudz, ka viņi ne tikai apmetās to izmantot frontendā, bet arī vēlējās, lai varētu palaist bibliotēku backendā.
Viņi vēlāk padarīja savu servera puses Backbone bibliotēku, Rendr, atvērtā koda un pieejama to Github lapā. Rendr ir rakstīts Node.js, un tas seko filozofijai “uzliekot minimālu struktūru, ļaujot attīstītājam izmantot bibliotēku vispiemērotākajā veidā to lietošanai” tāpat kā pats mugurkauls
Ja jūs interesē vairāk AirBnB tehnoloģiju steku, izlasiet viņu blogu par savu braucienu no Rails backend līdz Svētajam Grālam Vienlaicīga mugurkaula izmantošana gan klienta, gan servera pusē.
9. Hulu
Hulu ir video straumēšanas lietotne, kas ļauj bez maksas skatīt TV šovus un filmas, ja atrodaties ASV.
Hulu izmantoja Backbone.js, lai izveidotu bezšuvju un ātru lietotāju pieredzi filmu mīļotājiem. Interfeiss ļauj ātri pārvietoties pa lietotni ar maigām pārejām, kad jūs navigējat. Mugurkauls ietaupa joslas platumu lietotājiem kā skriptus un iegultos videoklipus nesaņemiet pārkraušanu visu laiku.
Hulu vada „Rails” dzinēju uz aizmugures, un, ja jums patīk uzjautrinošas, bet informatīvas sarunas, varat izlasīt kā attīstītāja komanda sajaucās ar jQuery pirms beidzot nolemj mainīt vairāk organizēts mugurkauls.
Backbone.js ļāva Hulu uz pakāpeniski pārvērst to atveidojumu no servera puses uz klienta pusi tā vietā, lai veiktu riskantu esošo Rails backend pārrakstīšanu.
10. Skaita
Skaitāmi ir reāllaika mobilās analīzes programma, kas ļauj izsekot jūsu iPhone, Android vai Windows Phone lietotnes darbību tieši no pārlūkprogrammas loga.
Aplūkojiet ievērojamu atklātā pirmkoda programmatūras sarakstu, kas tika izmantots platformas izstrādei, ieskaitot pēdējo gadu superzvaigznes: Nginx, MongoDB, Node.js servera pusē un, protams, Backbone.js priekšgalā.
Skaitliski izmanto vadīklu semantisko veidņu bibliotēku, lai padarītu mugurkaulu skatus, kas attēlo datus, kas sagatavoti un ielādēti ar mugurkaulu modeļiem. Daudzkārt ir attīstītājam draudzīga lietotne: tā ir ne tikai viegli paplašināma, bet arī dokumentācija nodrošina devusiem ar tādām konsultācijām kā kā veidot pielāgotus spraudņus galvenajā mugurkaula klienta augšpusē.
Redaktora piezīme: To raksta Anna Monus par Hongkiat.com. Anna ir tīmekļa izstrādātājs un kodu rakstnieks ar interesi par zinātni, mākslīgo intelektu un traucējošām tehnoloģijām.
