In Zukunft möchten wir auch die Coder unter euch mit spannenden Informationen versorgen. In diesem Artikel geht es um die Javascript-Bibliothek Backbone.js.

Bei einem aktuellen Projekt ging es um die Umsetzung einer Quiz-Anwendung. 10 Fragen sollen nacheinander beantwortet werden – die Seite hierbei jedoch nicht verlassen oder neu geladen werden. Der erste Gedanke war natürlich: „Wird schon irgendwie mit jQuery gehen“.  Aber geht das Ganze nicht einfacher als ständig von Hand DIVs zu manipulieren?

Ja, das geht einfacher und besser. Mit Backbone.js.

Was ist Backbone.js?

Zusammengefasst ist Backbone.js ein JavaScript-MVC-Framework. Hierbei können Daten auf dem Client als Model dargestellt werden. Diese Daten werden in vordefinierten Views dargestellt und können auch über ein RESTful Interface gespeichert werden. Erfunden wurde das Ganze von Jeremy Ashkenas, der auch bei der Entwicklung von CoffeeScript mitwirkte.

Dieser Artikel soll euch einen ersten Überblick darüber verschaffen, wie die Entwicklung mit Backbone.js funktioniert und welche Möglichkeiten von diesem Framework geboten werden.

Die Anwendung im Detail

Zurück zur Anwendung an sich. Wie erwähnt handelt es sich um ein Quiz mit 10 Fragen. Zu jeder Frage gibt es ein Bild, sowie drei Antwortmöglichkeiten. Der User sieht während dem gesamten Quiz die Anzahl der korrekt beantworteten Fragen. Los geht’s!

Das Model

Zunächst werden die Klassen Frage und Spiel angelegt. Die Klasse Spiel dient als eine Art Verwaltung mit Anzahl der korrekt beantworteten Fragen etc. Die Klasse Frage enthält die spezifischen Informationen zu den einzelnen Fragen.

Question = Backbone.Model.extend({
    initialize: function(){      
    },
    defaults:{     
      image_url: '',     
      question: '',
      answer_a: '',
      answer_b: '',
      answer_c: '',
      correct: ''
    }
  }); 

var question1 = new Question({image_url:"../img/bild1.jpg", ....usw.});

Dies ist also die Model-Darstellung einer Frage. Per Javascript können dann ganz einfach beliebige Instanzen erzeugt werden. Attribute können natürlich gelesen, geändert oder validiert werden. Alles per Backbone.js.

Nun soll auch das Spiel als Model dargestellt werden.

Game = Backbone.Model.extend({
    initialize: function(){
      this.on("change:correct_answers", function(){
          //Update View
        }
      });
    },
    defaults:{
      current_question: 1,
      correct_answers: 0
    },
    get_next_question: function(){
      //Naechste Frage anzeigen

    }               
  });

var the_game = new Game();

Im Konstruktor wird direkt ein Event Listener registriert. Dieser aktualisiert eigenständig die Anzahl der richtigen Fragen in der View, sobald der User eine Frage korrekt beantwortet. Die selbst definierte Methode „get_next_question()“ rendert die View der nächsten Frage.

Gerade diese Views sind aus meiner Sicht eines der Highlights von Backbone.js!

Die View

Zunächst wird die View Klasse  in Backbone angelegt.

  QuestionShow = Backbone.View.extend({
        initialize: function(){
            this.render();
            this.variables=variables;
        },
        render: function(){
            var template = _.template( $("#question_show_template").html(), variables );
            $(this.el).html( template );
        },
        events: {
            "click #next" : "showNext", //Klick auf "Antworten"
        },
        showNext: function(){
          //Naechste Frage
        }      
    });

In der Render-Funktion wird das DIV „#question_show_template“ verwendet. Dies ist die eigentliche HTML-View (siehe unten).
Klick-Events, wie z.B. ein Klick auf den Button „Frage beantworten“,  werden direkt in dieser Klasse definiert. Über this.variables kann in jeder Methode der View-Klasse auf alle Attribute (der Frage) zugegriffen werden.
Beispiel: Über this.variables.correct erfährt man die erwartete Antwort zu dieser Frage (und kann diese dann mit dem User Input vergleichen).

Was noch fehlt ist die angesprochene HTML-View. Backbone.js muss schließlich genau wissen, wie die Daten dargestellt werden sollen.

<div class="row">
  <div class="large-12 columns">
    <img src="<%= image_url %>" />
  </div>    
</div>

<div class="row">
  <div class="large-12 columns">
    <p><%= question %></p>  
    <div>
      <input type="radio" name="answer" value="1"> <%= answer_a %>
      <input type="radio" name="answer" value="2"> <%= answer_b %>
      <input type="radio" name="answer" value="3"> <%= answer_c %>  
    </div>
  </div>      
  <button id="next">Jetzt antworten</button>   
</div>

Jedes Mal wenn die View gerendert wird, werden automatisch die Attribute in das HTML eingefügt. Hier muss man also nicht händisch alle DIVs einzeln mit jQuery verändern, sondern definiert nur einmal dieses Template. Den Rest erledigt Backbone.js. W3C-konform ist das ganze zudem auch!

Der Entwicklungsworkflow zusammengefasst

Die Entwicklung mit Backbone.js geht wirklich schnell und erspart aus meiner Sicht langfristig Arbeit. Zunächst werden die Models und deren Beziehungen in Backbone modelliert. Zur Laufzeit werden diese dann mit Leben gefüllt.
Das Ganze ist sehr modular, übersichtlich und wartbar aufgebaut. Die Fragen werden z.B. einfach in einer Textdatei angelegt. Weiterführend könnte man so auch Listen oder Menüs dynamisch generieren lassen.

Die Möglichkeit View-Templates zu definieren erspart zudem sehr viel Arbeit. Das Template wird einmal angelegt – das Rendern und Befüllen der DIVs wird komplett von Backbone.js übernommen.

Zudem sei hier noch zu das „C“ aus MVC hervorzuheben. Über simple Aufrufe wie z.B. save() oder get() sendet Backbone.js einen entsprechenden AJAX-Request über eine RESTful JSON-Schnittstelle. Daten können so serverseitig gespeichert bzw. geladen werden ohne die Seite zu verlassen. Speziell für Single-Page-Anwendungen sehe ich dies als sehr nützliche Funktionalität.

Am besten gefällt mir persönlich die Ordnung, die durch die Verwendung von Backbone.js entstanden ist. HTML-Oberfläche, Javascript und Datenbank/Model sind klar voneinander abgegrenzt. Zudem ist ein gutes Zusammenspiel dieser  Komponenten durch das Framework gewährleistet. Alles ist sehr modular voneinander abgegrenzt. Die Lernkurve empfand ich persönlich als sehr gering. Entwickler mit MVC-Erfahrung sollten keinerlei Schwierigkeiten haben sich zurechtzufinden.
Im Nachhinein sehe ich den Einsatz des Frameworks in diesem Projekt als sehr sinnvoll an. Natürlich muss man etwas Zeit in die Modellierung stecken. Dafür erspart man sich enorm viel Zeit bei nachträglicher Wartung und enorm viel Kopfschmerzen beim Hantieren mit jQuery-Selektoren.

Habt ihr schon Erfahrungen mit Backbone.js gesammelt? Könntet ihr euch einen Mehrwert durch die Entwicklung mit Backbone.js vorstellen? Wir sind auf eure Meinungen und Erfahrungswerte gespannt!