Backbone.js: Hello World Tutorial

December 09, 2013

Backbone.js ist ein Frontendframework für JavaScript mit dem man den Inhalt einer Seite über eine API laden kann. Im Klartext heißt das, das bei Seitenwechseln oder dem nachträglichen Laden von Daten wirklich nur diese Übertragen werden und dann von Backbone.js in die Seite eingefügt werden.

Dies wird oft bei sogenannten single page apps praktiziert und hat oft Geschwindigkeitsvorteile und gegenüber klassischem AJAX eine durchdachte Struktur.

Im folgenden Beispiel erstellen wir ein Hello World mit Backbone.js:

HTML Struktur

Unsere HTML Datei ist relativ kurz, da der Inhalt durch Backbone.js hinzugefügt wird.

Die Abhängigkeiten wie jQuery und underscore.js werden vor backbone.js geladen.

<code class="html"><html>
    <head>
        <meta charset="utf-8">
        <title>Backbone.js Hello World Tutorial</title>
    </head>
    <body>
        <div id="hello"></div>

        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script src="http://underscorejs.org/underscore.js"></script>
        <script src="http://backbonejs.org/backbone-min.js"></script>
        <script src="helloworld.js"></script>
    </body>
</html>
</code>

JavaScript

In diesem Beispiel habe ich das JavaScript in eine separate Datei geschrieben (helloworld.js), allerdings wäre ein <script> tag im HTML auch möglich.

<code class="javascript">(function($){
    var HelloView = Backbone.View.extend({
        el: $('#hello'),
        initialize: function(){
            this.render();
        },
        render: function(){
            $(this.el).html("<h1>Hello World</h1>");
        }
    });

    var helloView = new HelloView();
})(jQuery);
</code>

Wenn wir diese Seite im Browser aufrufen sehen wir, dass das das h1 Element mit dem Inhalt “Hello World” auf der Seite auftaucht:

<code><div id="hello">
  <h1>Hello World</h1>
</div>
</code>

Zunächst instanzieren wir ein Backbone.View Objekt und setzen das Element in das unsere render Funktion schreiben soll. Die Auswahl des richtigen Elementes geschieht hier durch die jQuery übliche Selektion (el: $('#hello')).

Da wir die render Funktion innerhalb von initialize aufrufen, wird beim laden dieser Datei unser View gerendert.

Demo auf jsfiddle.net

Fazit

Backbone nimmt einem einiges an Arbeit ab, im Gegensatz zu anderen Frameworks wie Angular oder Ember erscheint es aber sehr langwierig und es gibt ein paar sehr nette Vergleiche die bei gleicher Funktionalität weitaus weniger Code benötigen, wenn man nicht mit Backbone arbeitet.

Als Vergleich ist todomvc.com immer eine gute Anlaufestelle, bei der man sich anschauen kann wie die Funktionalität in verschiedenen JavaScript MVC Frameworks umgesetzt ist.