10 webapps gemaakt met Backbone.js [casestudy]
Ben je ooit verstrikt geraakt in spaghetti-code? Wilt u uw app liever iets gezonder eten? Als dat zo is, kijk dan wat er met Backbone.js kan worden bereikt. Backbone is een JavaScript-bibliotheek die losjes is gebaseerd op het ontwerppatroon van Model-View-Controller, maar omdat het besturingselement ontbreekt, is het beter om dit een MV * -raamwerk te noemen.
Het helpt u bij het bouwen van snelle, gestroomlijnde en datarijke webapps met één pagina, houdt uw datalogica gescheiden van uw gebruikersinterface, bespaart u van het koppelen van uw gegevens aan de DOM en schaalt naarmate uw app groeit . Omdat Backbone standaard met een RESTful API wordt gesynchroniseerd, kunt u eenvoudig uw client-side app verbinden met uw bestaande server-side API via een RESTful JSON-interface.
In deze post zullen we 10 web-apps bestuderen die gebruikmaken van de functies van de Backbone-bibliotheek om u te helpen het potentieel te begrijpen dat Backbone.js heeft voor uw toekomstige webapp-projecten.
1. Trello
Trello is een online app voor samenwerking en projectbeheer waarmee u uw projecten kunt ordenen in boards, checklists, kaarten en kaartlijsten, en biedt u tools zoals gesprekken voor de communicatie van teamleden.
Trello is vanaf de grond opgebouwd met Backbone.js. Backbone werkt samen met de HTML5 History API en de Mustache logisch-loze templating-taal op de frontend. Alle elementen van de Trello Tech Stack zijn ontworpen op een manier die resulteerde in een onderhoudbare client die eenvoudig updates afhandelt en die dynamisch opnieuw synchroniseert met de server wanneer een DOM-gebeurtenis wordt geactiveerd.

2. Foursquare
Hoogstwaarschijnlijk heb je al gehoord van Foursquare, de populaire locatiegebaseerde app voor sociaal netwerken waarmee je locaties kunt delen met je vrienden over de hele wereld.
De kern JavaScript API van Foursquare is opgebouwd rond Backbone-modellen, waarbij de Model-klassen van de Foursquare-API (zoals Gebruikers, Locaties en Check-ins) de subklassen zijn van de Backbone Model-klassen en hun methoden en eigenschappen overerven .

fourSq.api.models.Venue = fourSq.api.models.Model.extend({ ... });
Ja, dat klopt, Backbone stelt ontwikkelaars in staat om mooi objectgeoriënteerd JavaScript te schrijven .Backbone-weergaven spelen ook een rol in de Foursquare-app, omdat ze de gebruikerservaring verbeteren met functies zoals startpagina's en lijsten . Anders dan Backbone, maakt de JavaScript-API van Foursquare ook gebruik van jQuery, Underscore.js (de enige harde afhankelijkheid van Backbone) en de Closure Compiler.
3. Basecamp-kalender
Basecamp, de populaire app voor projectbeheer, gebruikt Backbone.js voor de functie Agenda.
Het belangrijkste ontwerpdoel van Basecamp Calendar was om een interactieve interface te maken die een intuïtieve groepplanning mogelijk maakt en zichzelf in milliseconden updatet . In Basecamp maakt Agenda Backbone Weergaven in ECO-sjablonen (Embedded CoffeeScript) telkens wanneer Modellen (gegevens aan clientzijde) worden bijgewerkt.

Lees meer over Backbone antipatterns om te beslissen of je Backbone voor je hele app nodig hebt of niet.
4. Stroomdiagram
Flowdock is een real-time app voor teamcommunicatie die u functies biedt zoals groeps-chat, team-inboxen en real-time workflows
Flowdock is vanaf de grond opgebouwd bovenop Backbone.js. De belangrijkste uitdaging van het ontwikkelingsteam was om real-time berichten en workflows mogelijk te maken. Standaard maakt Backbone.js verbinding met de server via een RESTful-interface, waardoor er geen realtime gegevensstroom mogelijk is. Daarom beslisten de ontwikkelaars om berichten op te slaan via de realtime-engine van Socket.io in plaats van de REST-API.

Flowdock verbetert de real-time gebruikerservaring nog meer met Bacon.js, een handige JavaScript-bibliotheek die functionele reactieve programmering mogelijk maakt. De EventStreams-functie van Bacon.js helpt Flowdock om zijn Backbone-model en -collecties up-to-date te houden.
5. Cocktail zoeken
Cocktail Search is een open source-app waarmee u de code van een zeer eenvoudige implementatie van Backbone.js kunt bekijken. De backend wordt mogelijk gemaakt door Python, maar voor ons is het script.js-bestand van de app interessant .
Als u de code bekijkt, ziet u een zeer eenvoudige structuur van het Model-View- * -raamwerk: deze bevat één Model gedefinieerd in de Cocktail- klasse dat de standaardinstellingen van de hoofdklasse Backbone.Model niet wijzigt, één Backbone-verzameling voor zoekresultaten, en 3 Backbone Views, elk voegt nieuwe methoden toe aan de Backbone.View ouderklasse.

6. Bitbucket
Bitbucket is een broncode-hosting- en -codemanagement-app vergelijkbaar met Github. Atlassian, het bedrijf erachter, gebruikt Backbone in de JIRA-software voor het bijhouden van commerciële problemen, ook hun andere hoofdproduct.
Tijdens het grondige gebruik van Backbone.js in hun apps vond het ontwikkelteam een aantal dingen die ze van Backbone misten. Ze stuitten op veel stille mislukkingen veroorzaakt door de losse definitieconventies van Backbone.js. Dit betekent in feite dat modellen, collecties en weergaven niet noodzakelijkerwijs de aangepaste gebeurtenissen definiëren die ze blootstellen . En alsof dat nog niet genoeg is, definiëren modellen niet eens altijd de attributen die ze blootleggen.

Als je geïrriteerd bent door hetzelfde, kun je Backbone.Brace toevoegen aan je eigen app, want het is een open-sourceproject dat wordt gehost op Bitbucket zelf. BitBucket maakt gebruik van de taal voor het temmen van snorren net als Trello voor het weergeven van Backbone Views op de frontend.
7. SoundCloud
SoundCloud is een populair audio-distributieplatform waar u uw eigen audio kunt opnemen, uploaden en delen, of gratis naar muziek kunt luisteren.
Ontwikkelaars van SoundCloud gebruikten eerst Backbone.js als het frontend framework van hun mobiele app, maar ze vonden het zo leuk dat ze het ook gebruikten aan de clientzijde van hun desktopwebsite. In hun Backstage Blog leggen ze hun raamwerk uit met het vermogen van Backbone om een solide structurele basis te bieden en toch flexibel te blijven .

SoundCloud maakt gebruik van het stuursysteem Semantic Templing voor het weergeven van Backbone Views op de frontend.
8. AirBnB
AirBnB is een waanzinnig succesvolle community marketplace waar je verschillende soorten accommodaties kunt vinden en boeken in bijna 200 landen over de hele wereld
AirBnB gebruikte Backbone.js als eerste in zijn mobiele app, net als SoundCloud, maar maakte er later meer en meer gebruik van zijn webapp-functies zoals Verlanglijst, Match, Search, Communities en Payments. AirBnB was zo dol op Backbone dat ze niet alleen genoegen namen met het gebruik op de frontend, maar het ook mogelijk wilden maken om de bibliotheek op de backend te laten draaien.

Als je meer geïnteresseerd bent in de technische stack van AirBnB, lees dan hun blogpost over hun reis van een Rails-backend naar de Holy Grail van het gelijktijdige gebruik van Backbone zowel aan de client- als de serverzijde .
9. Hulu
Hulu is een app voor videostreaming waarmee je gratis tv-programma's en films kunt kijken als je je in de VS bevindt.
Hulu maakte gebruik van Backbone.js om een naadloze en snelle gebruikerservaring voor filmliefhebbers te bouwen. Met de interface kun je snel door de app navigeren met zachte overgangen terwijl je navigeert. Backbone bespaart bandbreedte voor gebruikers omdat scripts en ingesloten video 's niet steeds opnieuw worden geladen .

Backbone.js stond Hulu toe om hun rendering incrementeel van server-side naar client-side te converteren in plaats van een riskante herschrijving van hun bestaande Rails-backend uit te voeren.
10. Countly
Countly is een real-time app voor mobiele analyse waarmee u de prestaties van uw iPhone-, Android- of Windows Phone-app rechtstreeks vanuit het browservenster kunt volgen.
Bekijk de opmerkelijke lijst met opensourcesoftware die werd gebruikt om het platform te ontwikkelen, inclusief de supersterren van de afgelopen jaren: Nginx, MongoDB, Node.js voor de serverkant en natuurlijk Backbone.js voor de frontend.

Noot van de redactie: dit is geschreven door Anna Monus voor Hongkiat.com. Anna is een webontwikkelaar en codeschrijver met interesse voor wetenschap, kunstmatige intelligentie en disruptieve technologieën.

Stel een aangepast domein in voor Github-pagina's
Naast het gratis geven van Github-pagina's, laat Github ons ook toe om onze eigen domeinnaam te gebruiken voor de pagina die we hebben gemaakt. Dus in plaats van het volgende bestandsformaat te gebruiken: {username}.github.io/{project-name}, kun je in plaats daarvan de blog zoiets als www.myawesomeblog

Hoe u uw direct rapport het best kunt beheren
Vandaag gaan we een kleine spoedcursus in creatieve richting volgen. Nadat u al een tijdje aan het ontwerpen bent, merkt u misschien dat u de baas bent over een andere persoon in uw team, of het nu een andere ontwerper is, of een programmeur, een copywriter of een andere professional.Er is slechts één probleem: je hebt nog nooit de leiding over een teamlid gehad en je hebt geen idee wat je moet doen.