10 žiniatinklio programų, padarytų naudojant Backbone.js [atvejo analizė]

Ar kada nors buvote įsipainiojęs į spageti kodą? Ar norėtumėte, kad pašarų savo programą kažką sveikesni? Jei taip, žiūrėkite, ką galima atlikti su „Backbone.js“. Stuburas yra „JavaScript“ biblioteka, kuri yra laisvai pagrįsta modelio „View-Controller“ dizaino modeliu, tačiau, kadangi jai trūksta valdiklio elemento, geriau jį vadinti „MV *“ sistema.

Tai padeda jums sukurti greitas, aptakus ir turtingas vieno puslapio žiniatinklio programos, saugo jūsų duomenų logika atskira nuo jūsų vartotojo sąsajos, taupo jus susieti jūsų duomenis su DOM, ir skalės, nes jūsų programa auga. Kadangi „Backbone“ pagal nutylėjimą sinchronizuojasi su bet kuria „RESTful“ API, galite lengvai prijungti savo kliento pusėje esančią programą prie esamos serverio pusės API per „RESTful JSON“ sąsają.

Šiame pranešime ištirsime 10 žiniatinklio programų, kurios naudojasi „Backbone“ bibliotekos funkcijomis, kad padėtų jums suprasti galimą „Backbone.js“ turinį ateities žiniatinklio programų projektams.

1. Trello

Trello yra internetinis bendradarbiavimas ir projektų valdymo programa, kuri padeda jums organizuoti projektus į lentas, kontrolinius sąrašus, korteles, kortelių sąrašus ir suteikia jums įrankius, pvz., pokalbius komandos nario bendravimui.

„Trello“ buvo pastatytas nuo žemės iki „Backbone.js“. Stuburas veikia kartu su HTML5 istorijos API ir „Mustache Logic-less“ šablono kalba. Visi „Trello Tech Stack“ elementai buvo suprojektuoti taip, kad a patobulinamas klientas, lengvai valdantis naujinimus, ir dinamiškai vėl sinchronizuoja su serveriu kai įjungiamas DOM įvykis.

„Trello“ naudoja „Backbone“ modelį ir rodinius savo objektams, pvz., Kortelėms ar nariams, ir susijusių modelių „Backbone“ kolekcijas, pvz., Sąraše esančias korteles. Taip pat kūrėjai sukūrė savo kliento pusės modelio talpyklą dėl greičiau atnaujinami ir dar efektyvus kodo pakartotinis naudojimas.

2. Foursquare

Labiausiai tikėtina, kad apie tai jau girdėjote Foursquare, populiari vieta, paremta vietiniu socialiniu tinklu, leidžiančiu bendrai naudoti vietas su draugais visame pasaulyje.

„Foursquare“ pagrindinė „JavaScript“ API yra pastatyta aplink „Backbone“ modelius, kuriuose yra Foursquare API modelių klasės (pvz., naudotojai, vietos ir registracijos) yra „Backbone Model“ klasių ir paveldėti savo metodus ir savybes.

Kodo įgyvendinimą galima apžvelgti taip: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Taip, tai teisinga, „Backbone“ leidžia „devs“ parašykite gražų, į objektą orientuotą „JavaScript“.

Stuburo peržiūros taip pat turi savo vaidmenį „Foursquare“ programoje, nes jos pagerina naudotojo patirtį su tokiomis funkcijomis kaip pagrindinio puslapio žemėlapiai ir sąrašai. Išskyrus „Backbone“, „Foursquare“ JavaScript API taip pat naudojasi jQuery, Underscore.js (kuri yra vienintelė sudėtinė priklausomybė nuo stuburo) ir uždarymo kompiliatorius.

3. „Basecamp“ kalendorius

Basecamp, populiarioji projektų valdymo programa naudoja „Backbone.js“ savo kalendoriaus funkcijai.

Pagrindinis „Basecamp“ kalendoriaus tikslas buvo sukurti interaktyvią sąsają intuityvus grupės planavimas įmanoma, ir atnaujina save milisekundėmis. „Basecamp“ kalendoriuje „Backbone“ pateikia „ECO“ („Embedded CoffeeScript“) šablonus, kai atnaujinami modeliai (kliento duomenys).

Įdomu pažymėti, kad kūrėjo komanda nepadarė visos „Basecamp“ vieno puslapio programos, kuri yra pagrindinis „Backbone.js“ atvejis, tačiau biblioteką naudojo tik kalendoriaus funkcijoje, kur jie galėjo iš tikrųjų pasinaudoti savo privalumais. Tiesiog eina parodyti, kad nebūtinai turite sukurti visą vieno puslapio programą su „Backbone“; geriau atidžiai apgalvoti, kur jis gali būti taikomas.

Skaitykite daugiau apie „Backbone antipatterns“, kad nuspręstumėte, ar jums reikalinga „Backbone“ visai programai.

4. „Flowdock“

„Flowdock“ yra realaus laiko komandos ryšių programa, kuri suteikia jums funkcijas, pvz., pokalbių grupėje, komandų pašto dėžutes ir realaus laiko darbo eigą

Flowdock buvo pastatytas nuo žemės iki „Backbone.js“. Pagrindinis vystymo komandos uždavinys buvo įgalinti realaus laiko pranešimus ir darbo eigą. Pagal nutylėjimą „Backbone.js“ prisijungia prie serverio pusės per „RESTful“ sąsają, kuri neleidžia atlikti realiojo laiko duomenų srauto. Todėl devai nusprendė išsaugoti pranešimus per Socket.io realaus laiko variklį vietoj REST API.

Tam pasiekti jie parašė pasirinktinį metodą vadinamas „Backbone.sync“. Kadangi „Socket.io“ taip pat yra „JavaScript“ biblioteka, „JavaScript“ pagrindu sukurtas „frontend“ ir „backend“ („Node.js“) ryšys tampa vientisas. „Flowdock“ visų pirma yra „Rails“ programa serverio pusėje, tačiau jie turi atskirą „Node.js“ programinę įrangą, kuri tvarko „Socket.io“ ryšius.

„Flowdock“ pagerina naudotojo patirtį realiu laiku dar daugiau su „Bacon.js“, patogia „JavaScript“ biblioteka, leidžiančia veikti funkcionaliai. „EventStreams“ funkcija „ Bacon.js „Flowdock“ padeda atnaujinti „Backbone“ modelį ir kolekcijas.

5. Kokteilių paieška

Kokteilių paieška yra atviro kodo programa, kuri suteikia jums galimybę pažvelgti į labai paprasto Backbone.js įgyvendinimo kodą. „Backend“ maitina „Python“, bet mums tai įdomu programos script.js failas.

Jei išnagrinėsite kodą, pamatysite labai pagrindinę „Model-View- *“ struktūros struktūrą: jame yra vienas Modelis apibrėžta Kokteilis klasė, kuri nekeičia numatytųjų „Backbone.Model“ klasės parametrų Stuburo kolekcija paieškos rezultatams ir 3 „Backbone Views“, kiekvienas prideda naujus metodus „Backbone.View“ tėvų klasė.

Jei žiūrite į index.html failą, galite sužinoti, kaip kūrėjas pridėjo „Backbone.js“ ir jo priklausomybes, Underscore.js ir jQuery skyriuje. Underscore.js yra vienintelė sunki priklausomybė nuo stuburo, o jQuery reikia jei norite manipuliuoti DOM naudodami „Backbone Views“ (tai yra „Kokteilių paieškos“ programa).

6. Bitbucket

Bitbucket yra šaltinio kodo priegloba ir kodų valdymo programa, panaši į „Github“. Atlassian, kompanija už jos ribų naudoja „Backbone“ JIRA komercinės problemos stebėjimo programinėje įrangoje.

Išsamiai panaudojus „Backbone.js“ savo programose, vystymo komanda rado keletą dalykų, kurių jie praleido iš „Backbone“. Jie susidūrė daugybė tylių gedimų, atsiradusių dėl „Backbone.js“ laisvos apibrėžties konvencijų. Tai iš esmės reiškia, kad modeliai, kolekcijos ir peržiūros nebūtinai apibrėžkite pasirinktinius įvykius, kuriuos jie atskleidžia. Ir jei to nepakanka, modeliai netgi ne visada apibrėžia atributai jie atskleidžia.

Ši leidžianti prigimtis yra daugelio kūrėjų mėgstama savybė, bet ne „Atlassian“ komanda, todėl jie sukūrė savo „Backbone“ plėtinį, pavadintą „Backbone“. prideda mišinius ir savarankiškai dokumentuotus atributus ir įvykius bibliotekai.

Jei jums patinka tas pats dalykas, galite pridėti „Backbone.Brace“ į savo programą, nes tai atviro kodo projektas, kuriame yra pats „Bitbucket“. „BitBucket“ naudoja „ūsų“ šablonų kalbą, lygiai taip pat, kaip „Trello“, skirtą „Backbone Views“ pateikimui ant priekinės dalies.

7. „SoundCloud“

„SoundCloud“ yra populiari garso platinimo platforma, kurioje galite įrašyti, įkelti ir bendrinti savo garsą arba klausytis muzikos nemokamai.

„SoundCloud“ kūrėjai pirmiausia naudojo „Backbone.js“ kaip savo mobiliosios programos „frontend“ sistemą, tačiau jiems taip pat labai patiko, kad jie taip pat naudojasi darbalaukio svetainės kliento pusėje. Savo „Backstage“ tinklaraštyje jie paaiškina savo pasirinkimo sistemą su „Backbone“ sugebėjimu užtikrinti tvirtą struktūrinį pagrindą, tačiau vis dar išlieka lanksti.

Skaidymas yra pagrindinis garso transliacijos programos rūpestis, ir „SoundCloud“ pripažįsta, kad jis yra “labiau susijęs su organizavimu nei įgyvendinimas” Tai yra gerai organizuotas, bet lengvas „Backbone“.

„SoundCloud“ naudoja „Handlebars“ semantinio šablono sistemą, skirtą „Backbone Views“ atvaizdavimui priekinėje dalyje.

8. „AirBnB“

„AirBnB“ yra neįtikėtinai sėkminga bendruomenės rinka, kurioje galite rasti ir užsisakyti įvairių būstų beveik 200 pasaulio šalių

„AirBnB“ pirmiausia „Backbone.js“ naudojo savo mobiliajame programoje, kaip ir „SoundCloud“, bet vėliau ją vis dažniau naudojo žiniatinklio programų funkcijose, pvz., Pageidavimų sąrašuose, atitiktyje, paieškoje, bendruomenėse ir mokėjimuose. „AirBnB“ mylėjo „Backbone“ tiek, kad jie ne tik išsprendė naudojimąsi „frontend“, bet ir norėjo, kad biblioteką būtų galima paleisti ant „backend“.

Jie vėliau padarė savo serverio šoninės bibliotekos, Rendr, atviro kodo ir yra jų „Github“ puslapyje. Rendr yra parašytas „Node.js“ ir seka „filosofija“ “nustatyti minimalią struktūrą, leidžiančią kūrėjui naudoti biblioteką tinkamiausiu būdu jų taikymui” kaip ir pats pagrindas

Jei jus domina daugiau „AirBnB“ technologijų stekų, perskaitykite savo dienoraščio įrašą apie savo kelionę iš bėgių kelio į Šventąjį Gralą. Vienu metu naudojant „Backbone“ tiek kliento, tiek serverio pusėje.

9. Hulu

Hulu yra vaizdo transliacijos programa, leidžianti nemokamai žiūrėti TV laidas ir filmus, jei esate JAV.

„Hulu“ pasinaudojo „Backbone.js“, kad sukurtų sklandų ir greitą filmavimo mėgėjų patirtį. Sąsaja leidžia greitai pereiti per programą su švelniu perėjimu, kai naršote. Stuburas taupo pralaidumą vartotojams kaip scenarijus ir įterptieji vaizdo įrašai neperkrauti Visą laiką.

„Hulu“ atlieka „Rails“ variklį ant „backend“, o jei jums patinka linksmas, bet informatyvus pokalbis, galite skaityti apie tai kaip kūrėjų komanda susipynė su jQuery prieš galutinai nusprendus pakeisti labiau organizuotas pagrindas.

„Backbone.js“ leido „Hulu“ palaipsniui konvertuoti jų atvaizdavimą iš serverio pusės į kliento pusę vietoj to, kad būtų atlikta rizikinga jų esamų „Rails backend“ perrašymo tvarka.

10. Suskaičiuojama

Suskaičiuojama yra realiu laiku esanti mobiliosios analizės programa, kuri leidžia stebėti „iPhone“, „Android“ ar „Windows Phone“ programos našumą tiesiai iš naršyklės lango.

Pažvelkite į nepaprastą atviro kodo programinės įrangos sąrašą, kuris buvo naudojamas platformai kurti, įskaitant pastarųjų metų superžvaigždė: „Nginx“, „MongoDB“, „Node.js“ serverio pusėje ir, žinoma, „Backbone.js“ už „frontend“.

Suskaičiuojant „Backbone Views“, rodančius duomenis, paruoštus ir įkeltus su „Backbone“ modeliais, naudokite „Handlebars“ semantinio šablono biblioteką. Skaičius yra programuotojui palanki programa: tai ne tik lengvai plečiama, bet ir dokumentai taip pat suteikia „Devs“ su tokiais mokymais: kaip sukurti pagrindinius pagrindinio kliento priedus.

Redaktoriaus pastaba: Tai parašė Anna Monus už Hongkiat.com. Anna yra žiniatinklio kūrėjas ir kodų rašytojas, besidomintis mokslo, dirbtinio intelekto ir trikdančiomis technologijomis.