Vorheriger Artikel Nächster Artikel

Backbone.js: Wie der Baukasten für Web-Apps funktioniert

Aus dem
t3n Magazin Nr. 30

12/2012 - 02/2013

Bereits 2006 trieb die JavaScript-Bibliothek die Web-Entwicklung stark voran, indem sie die Cross-Browser-Kompatibilität von JavaScript-Code enorm verbesserte. Seitdem hat sich vieles getan und Web-Applikationen lösen zunehmend Desktop-Applikationen ab. Doch dafür ist mehr als bloße Browser-Unabhängigkeit nötig. Die JavaScript-Bibliothek Backbone.js macht es möglich.

Backbone.js: Wie der Baukasten für Web-Apps funktioniert

Das Web ist in kontinuierlicher . Es wird immer schneller und die Messlatte der Benutzerfreundlichkeit steigt stetig. Ob Grafikbearbeitung, Musikwiedergabe oder ganze Office-Pakete – Anwendungen, welche man klassischerweise lokal installierte, wandern zunehmend ins Web. Neue Möglichkeiten der verteilten und gleichzeitigen Zusammenarbeit, ständige und ortsunabhängige Verfügbarkeit sowohl der Programme als auch der Daten oder der Verzicht auf mühsame Installationsvorgänge sind nur einige Vorteile.

Um dies möglich zu machen, müssen Entwickler vor allem ein Problem klassischer Websites beheben: das ständige Neuladen der gesamten Site nach der Interaktion durch den Benutzer. Flash diente sich hierfür bereits vor Jahren als Lösung an. Da Apple jedoch entschied, Flash auf iPhone und iPad nicht zu unterstützen, verlor Flash zunehmend an Bedeutung. Hinzu kamen unzureichende Performance sowie insbesondere die Tatsache, dass Flash eine proprietäre Technologie ist.

backbone.js 5
rbmaradio.com, das Online-Radio der Red Bull Music Academy, stellt Sendungen mittels Backbone.js und Backbone.Marionette zur Verfügung.

Die Alternative kam von findigen Entwicklern, die in das Potenzial sahen, Web-Applikationen zu entwickeln, die Desktop-Programmen das Wasser reichen können. JavaScript ist auf jedem Gerät mit modernem verfügbar und wird durch eine offene Instanz (ECMA) standardisiert. Dadurch hat es sich trotz vieler Kritik mittlerweile weltweit auch gegen Konkurrenten wie Silverlight oder Shockwave durchgesetzt. Passend dazu endet Douglas Crockfords Artikel „The World's Most Misunderstood Programming Language Has Become the World's Most Popular Programming Language“ mit dem Satz: „It's better to be lucky than smart.“

JavaScript ist tot, lang lebe JavaScript

Dennoch: Mit der Art und Weise, wie JavaScript mehrheitlich in heutigen Websites Verwendung findet, scheint es beinahe unmöglich, eine ganz auf JavaScript basierende Applikation zu entwickeln, geschweige denn wartbar zu halten. Denn die Daten traditioneller Webseiten befinden sich vom Server als HTML gerendert bereits im DOM, dem Document Objekt Model. Letzteres ist die Schnittstelle, über welche JavaScript auf das HTML zugreifen und es verändern kann.

Die JavaScript-Funktionen bedienen sich beim DOM und generieren daraus dynamische HTML-Elemente (DHTML, Dynamic HTML). Dies führt dazu, dass die Programmlogik stark an das Design gekoppelt ist. Diese Art des Entwickelns ist jedoch sehr fehleranfällig, etwa wenn der Grafiker eine Änderung im HTML vornimmt. In diesem Fall kann das dazu führen, dass die JavaScript-Logik nicht mehr funktioniert. Will man nun mit JavaScript eine Single-Page-Applikation erstellen, kommt noch viel mehr Logik hinzu: Seitenwechsel, HTML-Generierung, Synchronisierung mit dem Server, Speicherverwaltung und die Wahrung der Konsistenz der Daten. Um diesen neuen Aufgaben gerecht zu werden, braucht es eine saubere Architektur, sinnvoll gekapselte Datenstrukturen und vor allem die Entkoppelung des Designs (HTML und CSS) von der Logik (JavaScript). Und genau hier setzen neue JavaScript-Bibliotheken wie Backbone.js an.

Merkmale einer Single-Page-Applikation

Eine Single-Page-Applikationen ist nicht einfach eine vom Server gelieferte HTML-Seite. Vielmehr liefert der Server beim ersten Aufruf eine in JavaScript geschriebene Applikation aus. Diese Applikation rendert das HTML direkt im Browser. Ist die Applikation erst einmal ausgeliefert, kommuniziert sie mit dem Server nur noch, wenn Daten geschrieben oder gelesen werden. Die Kommunikation funktioniert per Ajax, einer asynchronen Funktion zur Datenübertragung. Für den Datenaustausch wird in der Regel JSON (JavaScript Object Notation) oder XML verwendet. JSON ist wie XML ein standardisiertes Format zur Datenübertragung. Es ist jedoch viel kompakter als XML sowie direkt von JavaScript lesbar.

Für das Rendern von HTML-Templates ist traditionell der Webserver zuständig. Da der Webserver die Daten nun aber der Applikation per JSON übergibt, muss die JavaScript-Applikation diese selbst in HTML konvertieren. Für das Templating gibt es eine Vielzahl an JavaScript-Frameworks.

Vom Server wird immer die gesamte Applikation dem Browser geliefert. Für die Darstellung der Seite, auf der sich der Benutzer befindet, ist die JavaScript-Applikation selbst zuständig. Um dies umsetzen zu können, braucht es allerdings Client-seitiges Routing, also das Verbinden einer Route (zum Beispiel eineseite.com/kontakt) mit einer Aktion. In diesem Fall eine JavaScript-Funktion, welche definiert, was unter einem Pfad genau geschehen soll.

backbone.js 2
Eine Single-Page-Applikation wird beim ersten Aufrufen der Seite an den Browser ausgeliefert.

Da die Applikation mit dem Server Daten im JSON-Format austauscht, müssen die Daten auch im Browser strukturiert abgelegt werden. Eine häufig verwendete Methode ist, diese im DOM mit versteckten Elementen abzulegen. Eine viel bessere Art allerdings sieht vor, die Daten in verschachtelten JavaScript-Objekten, also entkoppelt vom DOM, zu organisieren.

Da die JavaScript-Applikation die Kontrolle über Änderungen an der Seite hat, also kein Neuladen der gesamten Seite durchgeführt wird, können dem Benutzer nützliche Feedbacks in Form von Meldungen, Farbsignalen oder Animationen einfach und kontrolliert vermittelt werden. Dies hat auch den Nebeneffekt, dass sich eine Single-Page-Applikation viel schneller und dynamischer anfühlt als eine herkömmliche Website.

Backbone.js

Backbone.js versucht, die einzelnen Zuständigkeiten einer Single-Page-Applikation in verschiedene Module zu entkoppeln. Die Entscheidung, welche Teile verwendet werden, liegt beim Entwickler. Backbone.js ist somit eine Bibliothek, kein Framework, und damit vergleichbar mit einem Werkzeugkasten, der Werkzeuge lediglich zur Verfügung stellt. Deren Nutzung obliegt dabei dem Entwickler, für komplexe Aufgaben lassen sich die Werkzeuge kombinieren.

Backbone.js beruht auf dem Bottom-Up-Prinzip: Schritt für Schritt lassen sich Funktionalitäten der Applikation hinzufügen. Dies macht es sehr flexibel und unterscheidet es vor allem von vielen seiner Framework-Konkurrenten, etwa Ember.js und Angular.js. Ein Framework gibt Rahmenbedingungen vor und hat oftmals darauf beruhende Automatismen integriert. Innerhalb dieses Rahmens verkürzt sich häufig die Entwicklungszeit. Passt das angestrebte Produkt jedoch nicht in den vorgesehenen Rahmen, sind häufig zeitraubende Workarounds notwendig. Erweiterungen bestehender Applikationen sind daher mit Frameworks eher schwierig umsetzbar.

backbone.js 3
Das Zusammenspiel der Backbone.js-Module ermöglicht die flexible Entwicklung einer Web-Applikation.

Kritik erntete Backbone.js in letzter Zeit wegen seiner minimalistischen Herangehensweise. Viele Entwickler stört es, dass man häufig die gleiche Logik mehrmals programmieren muss. Sie vermissen also genau die Eigenschaften eines Frameworks. Die Tatsache, dass Backbone.js kein Framework ist, muss es jedoch nicht unproduktiv machen. Es kümmert sich einfach nur um Kernfunktionalitäten. Dafür verfügt es über ein ausgeklügeltes Plugin-System: Beim Start eines neuen Projekts ist die Architektur frei wählbar, im Anschluss bieten sich verschiedene Frameworks als Backbone.js-Aufsatz für die Entwicklung an – etwa Backbone.Marionette.

Im laufenden Betrieb benötigt Backbone.js eine Ajax-Bibliothek (zum Beispiel jQuery oder Zepto) sowie die Utility-Bibliothek Underscore.js. Letztere erweitert JavaScript um viele Array- und Objekt-Funktionen. Unter anderem ist es damit möglich, JavaScript-Objekte zu durchsuchen, zu filtern, zu verändern und zu vererben.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von rahul am 15.07.2013 (15:52 Uhr)

    good

    Antworten Teilen
  2. von mohrekopp am 06.08.2013 (09:06 Uhr)

    Ein hervorragendes Grundgerüst für Backbone bietet Chaplin: http://chaplinjs.org/

    Antworten Teilen
  3. von fabbaci am 20.11.2013 (14:17 Uhr)

    "Für das Rendern von HTML-Templates ist traditionell der Webserver zuständig."

    Das ist nicht korrekt. Der Webserver ist für die Auslieferung der Inhalte zuständig, gerendert wird die Webseite traditionell von der HTML-Engine im Browser, z.B. Webkit.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich JavaScript
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst

Mit Breach gibt es einen neuen Open-Source-Browser, dessen Oberfläche vollständig in JavaScript geschrieben wurde. Dank der modularen Natur des Browsers soll sich das Interface per JavaScript und … » weiterlesen

Echte Nerds spielen JavaScript: Wavepot lässt dich Songs und Sounds in Echtzeit programmieren
Echte Nerds spielen JavaScript: Wavepot lässt dich Songs und Sounds in Echtzeit programmieren

Wavepot macht es unglaublich einfach, direkt im Browser eigene Lieder und Sounds zu schreiben –  in JavaScript. Jede Änderung wird sofort umgesetzt, was zu einem extrem unterhaltsamen Erlebnis führt. » weiterlesen

Freies JavaScript-Framework am Ende: Yahoo stellt Arbeit an YUI ein
Freies JavaScript-Framework am Ende: Yahoo stellt Arbeit an YUI ein

Yahoo wird mit sofortiger Wirkung die Arbeit am quelloffenen YUI-Framework einstellen. Als Gründe nannte der Konzern ein gesunkenes Interesse von Seiten der Community und die stark veränderte … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen