Backbone.js

Mehr Struktur für dein nächstes Web-Projekt! Backbone.js hilft dir dabei, komplexe Web-Applikationen und Single-Page Applikationen nachhaltig zu erstellen. Wie du die Javascript-Bibliothek richtig anwendest, das zeige ich dir hier.

Javascript ist schon lange nicht mehr nur da, um kleine Features in Websites einzubauen. Modernes Frontend zu entwickeln bedeutet, komplexe Applikationsstrukturen aufzubauen und wartbar zu machen. Dafür gibt es mittlerweile eine große Anzahl an sogenannten MV* (Model-View-*) Frameworks – die Basis von Backbone.js.

MV* Frameworks sind am bekannten MVC (Model-View-Controller) Pattern angelehnt. Wo genau die Logik des Controllers in den einzelnen Frameworks verankert ist, dafür gibt es verschiedene Ansätze.

MV* Frameworks bieten sich für den Aufbau größerer Web-Applikationen an, die viel Interaktion zulassen sollen. Ein perfektes Beispiel ist Google Docs. Hier wird enorm viel Logik auf der Client-Seite ausgeführt. So muss der Nutzer die Seite nicht jedes Mal neu laden, wenn er etwas ändert. Zudem wird die Website ganz anders wahrgenommen – mehr wie ein natives Software-Programm, weniger als herkömmliche Webseite.

Ein Javascript Framework ist dann der falsche Ansatz, wenn:

... eine stark Backend-lastige Seite aufgebaut werden soll.
... wenige Interaktionen durch den Benutzer notwendig sind.
... die Seite hauptsächlich vom Server gerendert und angezeigt wird.

Wie man eine Single-Page-Applikation korrekt strukturiert, um eine gut wartbare Code-Basis aufzubauen? Ganz einfach:

Die vermutlich häufigste Antwort lautet: Modular! Allerdings klingt das einfacher, als es wirklich ist.
Auf Basis des mittlerweile weit verbreiteten MV* Frameworks Backbone.js.
- Backbone basiert auf dem Model-View-Router Prinzip und ist ein guter Bausatz, für eine modulare Applikation.

Die Komponenten von Backbone.js

Diese werden verwendet, um die Kommunikation zwischen persistenten Daten (Datenbank) und der Darstellung (View) zu übernehmen.

Um viele Instanzen eines Models vom Server zu laden, bietet Backbone sogenannte Collections an. Eine Collection besteht normalerweise aus mehreren Objekten desselben Types. Zum Beispiel könnte man ein Model für die Kontakte einer Seite wie folgt machen:

var Contact = Backbone.Model.extend();

var max = new Contact({

    firstName: “Max”,

    lastName: “Mustermann”
});

Diese wiederum werden in einer Collection namens “contacts” gespeichert. Über diese Collection kann man nun alle Kontakte laden.

var Contacts = Backbone.Collection.extend({

    model: Contact,

    url: '/contacts'
});

Auf die Attribute eines Models kannst du mit der getter und setter Methoden zugreifen.

max.get(‘lastName’) // ‘Mustermann’

Um das Model erstmalig zu laden – oder den neuesten Stand vom Server abzufragen – gibt es die Methode Model.fetch(). Mit der Model.save() Methode kannst du ein geändertes Model speichern. Backbone übernimmt währenddessen die Kommunikation – indem es Ajax-Requests für die jeweilige Aktion absendet.

Je nachdem, ob ein Model schon auf dem Server existiert (bereits eine ID hat), wird ein POST oder PUT Request gesendet. Das Model wird in JSON an den Server übermittelt und die Url kann sowohl beim Model als auch bei der Collection angegeben werden. Wird die Url nur bei der Collection angegeben, verwendet Backbone diese automatisch für die einzelnen Models:

Collection: ‘/contacts’,

Model mit id 5: ‘/contacts/5’

Die "View" ist für die Logik jeglicher Darstellung von Content auf einer Webseite verantwortlich. Für das Rendern von Views wird intern die Templating-Library Underscore.js verwendet. Underscore ist die einzige Abhängigkeit von Backbone.js.

Standardmäßig bietet dir Backbone einige Methoden an – wie zum Beispiel render() oder initialize() –, um das Rendering der View zu kontrollieren. Natürlich kannst du diese auch erweitern! Dafür stellt Backbone ergänzende Funktionen über einige Libraries bereit. Eine kurze Suche nach “backbone baseview” oder “backbone superview” zeigt dir kleine Libraries. Diese ermöglichen zum Beispiel durch postRender() oder postPlaceAt() methoden ein noch spezifischeres View-Handling.

var ContactRow = Backbone.View.extend({

    tagName: 'li',

    className: 'contact-row',

    template: _.template()

    initialize: function() {
        ...
    },

    render: function() {
        ...
    }
});

Der Router stellt sicher, dass jede Seite über eine eigene Url erreichbar ist. Eine wichtige Eigenschaft für Usability und SEO Optimierungen! Backbone ermöglicht dir außerdem, eine Single-Page-Applikation zu bauen, die den Web-Standards mit eindeutigen Urls entspricht. Das heißt: Mit Backbone wird bei einem Wechsel der View auch die Url geändert und ein Eintrag in der Browser-History erzeugt. Dadurch kann der Besucher mit dem Vorwärts- und Zurück-Button des Browsers innerhalb der Seite (Applikation) navigieren.

Zudem unterstützt der Backbone Router HTML5 Pushstate-API. So wird die Url direkt verändert und der – für das Backbone Routing – wichtige Teil nach dem #-Zeichen an den Server übermittelt. Das ist wichtig, damit auch Suchmaschinen auf der Seite navigieren können.

Fazit

Standardmäßig benötigt man eine Schnittstelle, um die Daten persistent zu speichern. Backbone bringt eine Abstraktion für AJAX-Requests mit – womit dir der Datenaustausch erleichtert wird. Zum Beispiel können mit einem einfachen model.save() die Daten an den Server gesendet und mit model.fetch() vom Server geladen werden. Alternativ kann man die Daten auch im localStorage speichern – insofern man keinen Server für die Speicherung verwenden möchte.

Ein weiterer Vorteil von Backbone ist die unabhängige Verwendung einzelner Komponenten – je nachdem, was du für das aktuelle Projekt benötigst. Somit kannst du zum Beispiel nur das Routing von Backbone einsetzen und die Views mit einer anderen Library rendern lassen.

Eine gute Übersicht über die Funktionen und Methoden des Frameworks findest du auf der offiziellen Seite: backbonejs.org und underscorejs.org.

-------------

Quellen: