10 Web Apps lavet med Backbone.js [Case Study]
Har du nogensinde været forankret i spaghetti kode? Vil du hellere føle din app noget sundere? Hvis ja, tag et kig på, hvad der kan opnås med Backbone.js. Rygrad er et JavaScript-bibliotek, der er løst baseret på Model-View-Controller designmønsteret, men da det mangler Controller-elementet, er det bedre at kalde det en MV * ramme.
Det hjælper dig med at bygge hurtig, slank og datarig Enkelsidede webapps, holder din datalogik adskilt fra din brugergrænseflade, sparer dig fra at binde dine data til DOM og skalaer som din app vokser. Som Backbone synkroniseres med enhver RESTful API som standard, kan du nemt forbinde din klientside-app til din eksisterende server-side API via en RESTful JSON interface.
I dette indlæg vil vi studere 10 webapps, der udnytter funktionerne i Backbone-biblioteket til at hjælpe dig med at forstå potentialet Backbone.js har til dine fremtidige webapp projekter.
1. Trello
Trello er et online samarbejde og projektstyringsapp, der hjælper dig med at organisere dine projekter i bestyrelser, tjeklister, kort, kortlister og giver dig værktøjer som samtaler til medlemskommunikation.
Trello blev bygget fra bunden med Backbone.js. Backbone virker sammen med HTML5 History API og Mustache logic-less templating sprog på frontend. Alle elementer i Trello Tech Stack blev designet på en måde, der resulterede i a vedligeholdelig klient, der nemt håndterer opdateringer, og Dynamisk synkroniseres med serveren igen når en DOM-begivenhed udløses.
Trello anvender rygradsmodel og visninger til objekter som kort eller medlemmer og backbone-samlinger for relaterede modeller - f.eks. Kort i en liste. Udviklerne også bygget deres eget klient-side model cache til hurtigere opdateringer og mere effektiv kode genbrug.
2. Foursquare
Mest sandsynligt har du allerede hørt om Foursquare, Den populære stedbaserede sociale netværksapp, der gør det muligt for dig at dele spillesteder med dine venner over hele verden.
Foursquare's kerne JavaScript API er bygget omkring Backbone Models, hvor Model klasser af Foursquare API (som brugere, spillesteder og check-in) er underklasserne i rygradsmodellerne og arve deres metoder og egenskaber.
Kodeksens gennemførelse kan skitseres således: fourSq.api.models.Venue = fourSq.api.models.Model.extend (...); Ja, det er rigtigt, Backbone gør det muligt for devs skriv godt objektorienteret JavaScript.
Backbone Views har også deres rolle i Foursquare-appen, da de forbedrer brugeroplevelsen med funktioner som hjemmeside kort og lister. Andet end Backbone, bruger Foursquares JavaScript API også jQuery, Underscore.js (som er Backbone's eneste hårde afhængighed), og Closure Compiler.
3. Basecamp Kalender
Base Camp, Den populære projektstyringsapp bruger Backbone.js til sin kalenderfunktion.
Hovedformålet med Basecamp Calendar var at skabe en interaktiv grænseflade, der gør intuitiv gruppeplanlægning muligt, og opdaterer sig i millisekunder. I Basecamp Calendar Backbone gøres visninger til ECO (Embedded CoffeeScript) skabeloner, når modeller (client-side data) opdateres.
Det er interessant at bemærke, at udviklerholdet ikke gjorde hele Basecamp til en enkelt side-app, som er den primære brug af Backbone.js, men kun udnyttet biblioteket i kalenderfunktionen, hvor de virkelig kunne udnytte sine fordele. Bare viser, at du ikke nødvendigvis behøver at opbygge en fuld enkelt side app med Backbone; Det er bedre at overveje omhyggeligt, hvor det kan anvendes.
Læs mere om Backbone antipatterner for at afgøre, om du har brug for Backbone til hele din app eller ej.
4. Flowdock
Flowdock er en real-time teamkommunikationsapp, der giver dig funktioner som gruppechat, teamindbakke og real-time-workflows
Flowdock blev bygget fra bunden op på Backbone.js. Udviklingsholdets vigtigste udfordring var at aktivere real-time meddelelser og arbejdsgange. Som standard forbindes Backbone.js til serversiden via en RESTful-grænseflade, som ikke muliggør datastrøm i realtid. Derfor dev devs besluttede at gemme beskeder via Socket.io realtidsmotoren i stedet for REST API.
For at opnå dette de skrev en brugerdefineret metode hedder Backbone.sync. Da Socket.io også er et JavaScript-bibliotek, gør kommunikationen mellem den JavaScript-drevne frontend og backend (Node.js) problemfri. Flowdock er primært en Rails app på server side, men de har en separat Node.js backend, der håndterer Socket.io forbindelser.
Flowdock forbedrer realtids brugeroplevelse endnu mere med Bacon.js, et praktisk JavaScript-bibliotek, der muliggør funktionel reaktiv programmering. EventStreams-funktionen i Bacon.js hjælper Flowdock med at holde sin rygradsmodel og samlinger opdateret.
5. Cocktail Søg
Cocktail søgning er en open source app, der giver dig chancen for at se koden til en meget enkel implementering af Backbone.js. Backend er drevet af Python, men hvad der er interessant for os er Appens script.js-fil.
Hvis du undersøger koden, kan du se en meget grundlæggende struktur af Model-View- * rammen: den indeholder en Model defineret i cocktail klasse, der ikke ændrer standardindstillingerne for Backbone.Model forældersklassen, en Backbone Collection for søgeresultater og 3 Ryggradssynvisninger, tilføjer hver nye metoder til Backbone.View forældre klasse.
Hvis du kigger på index.html-filen, kan du opdage, hvordan udvikleren tilføjede Backbone.js og dens afhængigheder, Underscore.js og jQuery i hovedafsnittet. Underscore.js er den eneste hårde afhængighed af Backbone, mens jQuery er nødvendig hvis du vil manipulere DOM'en ved hjælp af Backbone Views (som det er tilfældet med Cocktail Search-appen).
6. Bitbucket
Bitbucket er en kildekode hosting og code management app ligner Github. Atlassian, selskabet bagved bruger Backbone i JIRA kommercielle spørgsmål tracking software, deres andet vigtigste produkt også.
Under den grundige udnyttelse af Backbone.js i deres apps fandt udviklingsholdet et par ting, som de savnede fra Backbone. De stødte på mange tavse fejl som følge af Backbone.js løs definitionskonventioner. Dette betyder grundlæggende, at modeller, samlinger og visninger definerer ikke nødvendigvis de brugerdefinerede begivenheder, de udsætter. Og hvis det ikke var nok, definerer modeller ikke engang altid egenskaber de udsætter.
Denne permissive karakter er en funktion, der er elsket af mange udviklere, men ikke af Atlassian-holdet, så de udviklede deres eget Backbone-udvidelse kaldet Backbone.Brace tilføjer mixins og selvdokumenterede attributter og begivenheder til biblioteket.
Hvis du er irriteret af det samme, kan du tilføje Backbone.Brace til din egen app, da det er et open source-projekt hostet på Bitbucket selv. BitBucket bruger skabeloppemalerende sprog ligesom Trello til at gengive Backbone Views på frontenden.
7. SoundCloud
SoundCloud er en populær lyddistributionsplatform, hvor du kan optage, uploade og dele din egen lyd, eller lytte til musik gratis.
Udviklere af SoundCloud brugte Backbone.js først som frontendrammen for deres mobilapp, men de kunne lide det så meget, at de også brugte det på klientsiden af deres desktopwebsite. I deres Backstage Blog forklarer de deres valg af rammer med Backbone's evne til at tilvejebringe et solidt strukturelt grundlag, mens det stadig forbliver fleksibelt.
Skalering er et hovedanliggende for en lyd streaming app, og SoundCloud erkender det “har mere at gøre med organisationen end implementering” hvilket gør den velorganiserede, men lette rygrad et ideelt valg for dem.
SoundCloud anvender det Semantiske Templating System til håndtering af Backbone Views på fronten.
8. AirBnB
Airbnb er en sindssyg vellykket fællesskabsmarked hvor du kan finde og bestille forskellige typer overnatningssteder i næsten 200 lande verden over
AirBnB brugte for det første Backbone.js i sin mobile app ligesom SoundCloud, men brugte det senere i sine webapp funktioner som Wishlists, Match, Search, Communities og Payments. AirBnB elskede rygraden så meget, at de ikke kun afgjorde at bruge det på fronten, men også ønskede at gøre det muligt at køre biblioteket på backend.
De senere lavet deres server-side Backbone bibliotek, Rendr, open source og tilgængelig på deres Github side. Rendr er skrevet i Node.js og det følger filosofien om “indføre minimal struktur, så bygherren kan bruge biblioteket på den mest hensigtsmæssige måde til deres anvendelse” ligesom rygraden selv
Hvis du er interesseret mere i AirBnBs tech stack, skal du læse deres blogindlæg om deres rejse fra en Rails backend til Hellig Graal of the Samtidig brug af Backbone både på klient- og server-siden.
9. Hulu
Hulu er en video streaming app, der gør det muligt for dig at se tv-shows og film gratis, hvis du befinder dig i USA.
Hulu benyttede sig af Backbone.js til at opbygge en problemfri og hurtig brugeroplevelse for filmelskere. Interfacet giver dig mulighed for at bevæge dig hurtigt gennem appen med forsigtige overgange, mens du navigerer. Rygrad sparer båndbredde for brugere som scripts og indlejrede videoer ikke blive genindlæst hele tiden.
Hulu driver en Rails motor på backend, og hvis du kan lide underholdende men informative samtaler, kan du læse om hvordan udviklerteamet blev indviklet med jQuery inden endelig beslutter at skifte til mere organiseret rygrad ramme.
Backbone.js tillod Hulu til trinvis konvertere deres gengivelse fra server-side til klientside i stedet for at lave en risikabel omskrivning af deres eksisterende Rails backend.
10. tæller
Countly er en mobilanalyseprogram i realtid, der gør det muligt at spore ydeevnen til din iPhone, Android eller Windows Phone app lige fra browservinduet.
Se på den bemærkelsesværdige liste over open source-software, der blev brugt til at udvikle platformen, herunder superstjerner fra de seneste år: Nginx, MongoDB, Node.js til serversiden og selvfølgelig Backbone.js til fronten.
Countly anvender det Semantic Templating Library, der håndterer, til at gøre Backbone Views, der viser data, der er forberedt og fyldt med Backbone Models. Countly er en udviklervenlig app: det er ikke kun let udvideligt, men dokumentationen indeholder også devs med selvstudier som dette på hvordan man opbygger brugerdefinerede plugins oven på kernen Backbone-klienten.
Redaktørens note: Dette er skrevet af Anna Monus til Hongkiat.com. Anna er en webudvikler og kodeforfatter med interesse for videnskab, kunstig intelligens og forstyrrende teknologier.
