10 Web Apps gjorda med Backbone.js [Fallstudie]

Har du någonsin gått ihop med spaghettikod? Vill du hellre mata din app något friskare? Om så är fallet, ta en titt på vad som kan åstadkommas med Backbone.js. Ryggrad är ett JavaScript-bibliotek som är löst baserat på modell-View-Controller-mönstret men eftersom det saknar Controller-elementet är det bättre att kalla det en MV * -ram.

Det hjälper dig att bygga snabb, snygg och datarik enkelsidiga webbapps, håller din datalogik separat från ditt användargränssnitt, sparar dig från att koppla dina data till DOM, och skalar som din app växer. Eftersom Backbone synkroniseras med något RESTful API som standard kan du enkelt ansluta din klientsida-app till ditt befintliga server-API via ett RESTful JSON-gränssnitt.

I det här inlägget kommer vi att studera 10 webbapps som använder funktionerna i Backbone-biblioteket för att hjälpa dig att förstå potentialen Backbone.js har för dina framtida webbapps-projekt.

1. Trello

Trello är en online samarbets- och projekthanteringsapp som hjälper dig att organisera dina projekt i styrelser, checklistor, kort, kortlistor och ger dig verktyg som konversationer för gruppmedlemskommunikation.

Trello byggdes från grunden med Backbone.js. Ryggraden fungerar tillsammans med HTML5 History API och Mustache logic-less templerande språk på fronten. Alla delar av Trello Tech Stack var utformade på ett sätt som resulterade i a underhållbar klient som enkelt hanterar uppdateringar, och Synkroniseras dynamiskt med servern när en DOM-händelse utlöses.

Trello använder Backbone Model och Views för dess föremål som kort eller medlemmar och ryggradssamlingar för relaterade modeller - till exempel kort i en lista. Utvecklarna också byggt sin egen cachemodell för klientsidan för snabbare uppdateringar och mer effektiv kodåteranvändning.

2. Foursquare

Troligtvis har du redan hört talas om Foursquare, den populära platsbaserade sociala nätverksprogrammet som gör att du kan dela mötesplatser med dina vänner över hela världen.

Foursquares kärna JavaScript API är byggt runt Ryggradsmodeller, där Modell klasser av Foursquare API (som användare, mötesplatser och incheckningar) är underklassen i klasserna Backbone Model och ärva deras metoder och egenskaper.

Kodens genomförande kan skisseras så här: fourSq.api.models.Venue = fourSq.api.models.Model.extend (...); Ja, det är rätt, Ryggrad gör det möjligt för devs skriv snygg objektorienterad JavaScript.

Ryggradssyn har också sin roll i Foursquare-appen, eftersom de förbättrar användarupplevelsen med funktioner som hemsida kartor och listor. Annat än Backbone använder Foursquares JavaScript API också jQuery, Underscore.js (vilket är Backbone endast svåra beroende), och Closure Compiler.

3. Basecamp Kalender

Basläger, Den populära projekthanteringsappen använder Backbone.js för sin kalenderfunktion.

Huvuddesign målet för Basecamp Calendar var att skapa ett interaktivt gränssnitt som gör intuitiv gruppschemaläggning möjligt, och uppdaterar sig i millisekunder. I Basecamp Calendar Backbone gör visningar till ECO (Embedded CoffeeScript) mallar när Modeller (klientsiddata) uppdateras.

Det är intressant att notera att utvecklarteamet inte gjorde hela Basecamp en enkelsidig app som är det primära användningsfallet för Backbone.js, men använde bara biblioteket i kalenderfunktionen där de verkligen kunde utnyttja sina fördelar. Visas bara för att visa att du inte nödvändigtvis behöver bygga en fullständig enkelsidig app med Backbone; Det är bättre att noggrant tänka över var det kan tillämpas.

Läs mer om Backbone antipatterns för att bestämma om du behöver Backbone för hela appen eller inte.

4. Flowdock

Flowdock är en applikation i realtidskommunikation som ger dig funktioner som gruppchatt, inloggningar i lag och realtids arbetsflöden

Flowdock byggdes från grunden ovanpå Backbone.js. Utvecklingsgruppens främsta utmaning var att möjliggöra realtidsmeddelanden och arbetsflöden. Som standard kopplar Backbone.js till serverns sida över ett RESTful-gränssnitt, vilket inte gör det möjligt att göra dataflödet i realtid. Därför devsna beslutade att spara meddelanden via Socket.io realtidsmotor istället för REST API.

För att uppnå detta de skrev en anpassad metod kallad Backbone.sync. Eftersom Socket.io också är ett JavaScript-bibliotek gör det kommunikationen mellan JavaScript-driven frontend och backend (Node.js) sömlös. Flowdock är främst en Rails-app på serverns sida, men de har en separat Node.js-backend som hanterar Socket.io-anslutningarna.

Flowdock ökar användarupplevelsen i realtid ännu mer med Bacon.js, ett praktiskt JavaScript-bibliotek som möjliggör funktionell reaktiv programmering. EventStreams-funktionen i Bacon.js hjälper Flowdock att hålla sin ryggradsmodell och samlingar uppdaterad.

5. Cocktail-sökning

Cocktail sökning är en öppen källkods app som ger dig chansen att ta en titt på koden för en mycket enkel implementering av Backbone.js. Bakgrunden drivs av Python, men det som är intressant för oss är Appens script.js-fil.

Om du undersöker koden kan du se en mycket grundläggande struktur i modell-View-* -ramen: den innehåller en Modell definierad i Cocktail klass som inte ändrar standardinställningarna för Backbone.Model förälderklassen, en Ryggradssamling för sökresultat och 3 ryggradssyn, lägger varje nya metoder till Backbone.View föräldraklass.

Om du tittar på index.html-filen kan du upptäcka hur utvecklaren lade till Backbone.js och dess beroenden, Underscore.js och jQuery i huvuddelen. Underscore.js är det enda hårda beroendet hos Ryggrad medan jQuery behövs om du vill manipulera DOM med hjälp av Backbone Views (vilket är fallet med Cocktail Search-appen).

6. Bitbucket

Bit hink är en källkod värd och kodhanteringsapp som liknar Github. Atlassian, företaget bakom det använder Backbone i JIRA kommersiella problem spårning programvara, deras andra huvudprodukt också.

Under det grundliga utnyttjandet av Backbone.js i sina appar hittade utvecklingsgruppen ett par saker som de saknade från Backbone. De stötte på många tysta misslyckanden orsakade av Backbone.js lös definitionskonventioner. Detta innebär i grunden att Modeller, Samlingar och Visningar definierar inte nödvändigtvis de anpassade händelserna som de exponerar. Och om det inte var tillräckligt, definierar Modeller inte ens attribut de exponerar.

Denna permissiva karaktär är en egenskap som är älskad av många utvecklare men inte av Atlassian-laget så de utvecklade sin egen Backbone-förlängning som heter Backbone.Brace that lägger till mixins och självdokumenterade attribut och händelser till biblioteket.

Om du är irriterad av samma sak kan du lägga till Backbone.Brace till din egen app, eftersom det är ett open source-projekt värd för Bitbucket själv. BitBucket använder Mustache-templerande språk precis som Trello för att göra Backbone Views på fronten.

7. SoundCloud

Soundcloud är en populär ljuddistributionsplattform där du kan spela in, ladda upp och dela med dig av ditt eget ljud, eller lyssna på musik gratis.

Utvecklare av SoundCloud använde Backbone.js som frontendramen för deras mobilapp, men de tyckte om det så mycket att de också använde det på klientsidan av deras skrivbordssida. I deras Backstage Blog förklarar de sitt val av ramar med Backbone förmåga att ge en solid strukturell grund medan du fortfarande är flexibel.

Skalning är ett huvudsakligt problem för en audio streaming app, och SoundCloud erkänner det “har mer att göra med organisationen än genomförandet” vilket gör den välorganiserade men lätta Backbone ett idealiskt val för dem.

SoundCloud använder sig av Semantic Templating System för hantering av Backbone Views på fronten.

8. AirBnB

Airbnb är en galen framgångsrik gemenskapsmarknad där du kan hitta och boka olika typer av boende i nästan 200 länder över hela världen

AirBnB använde för det första Backbone.js i sin mobilapp precis som SoundCloud, men utnyttjade den senare i sina webappfunktioner som önskelistor, match, sök, grupper och betalningar. AirBnB älskade Backbone så mycket att de inte bara bosatte sig för att använda den på fronten utan också ville göra det möjligt att köra biblioteket på backend.

De senare gjorde sin server-sida Backbone bibliotek, Rendr, öppen källkod och finns på deras Github-sida. Rendr är skrivet i Node.js och det följer filosofin om “införa minimal struktur, så att utvecklaren kan använda biblioteket på det mest lämpliga sättet för deras tillämpning” precis som Backbone själv

Om du är intresserad mer i AirBnBs tech stack, läs deras blogginlägg om deras resa från en Rails backend till Holy Grail of the Samtidigt utnyttjande av Backbone både på klient- och serversidan.

9. Hulu

Hulu är en video streaming app som gör att du kan titta på TV-program och filmer gratis, om du befinner dig i USA.

Hulu utnyttjade Backbone.js för att skapa en sömlös och snabb användarupplevelse för filmälskare. Med gränssnittet kan du snabbt flytta dig via appen med försiktiga övergångar när du navigerar. Ryggrad sparar bandbredd för användare som skript och inbäddade videor bli inte omladdad hela tiden.

Hulu driver en Rails-motor på backenden, och om du gillar underhållande men informativa samtal kan du läsa om hur utvecklarteamet gick ihop med jQuery innan du äntligen bestämmer dig för att byta till mer organiserad Backbone-ramverk.

Backbone.js tilläts Hulu till omvandla gradvis deras rendering från serverns sida till klientsidan istället för att göra en riskabel omskrivning av deras existerande Rails-backend.

10. Grev

Countly är en mobilanalys i realtid som gör att du kan spåra resultatet av din iPhone, Android eller Windows Phone app direkt från webbläsarfönstret.

Ta en titt på den anmärkningsvärda listan med öppen källkodsprogramvara som användes för att utveckla plattformen, inklusive superstjärnorna de senaste åren: Nginx, MongoDB, Node.js för serverns sida och naturligtvis Backbone.js för fronten.

Greve använder sig av Semantic Templating Library för att göra Backbone Views som visar data förberedda och laddade med Backbone Models. Countly är en utvecklingsvänlig app: det är inte bara lätt utbyggbart men dess dokumentation ger också devs med handledning så här på hur man bygger egna plugins ovanpå kärnan Backbone-klienten.

Redaktörens anteckning: Detta är skrivet av Anna Monus för Hongkiat.com. Anna är en webbutvecklare och kodförfattare med intresse för vetenskap, artificiell intelligens och störande teknik.