Bevor es im folgenden Kapitel an die Entwicklung der ersten Facebook-Anwendungen geht, möchten wir kompakt noch ein paar kleine Helfer vorstellen:
- JavaScript Templates
-
Moderne, flexible Webanwendungen basieren meist auf einem intensiven Einsatz von JavaScript und dem dynamischen Laden von Daten. Das Aktualisieren einzelner DOM-Elemente hat auf Dauer keine Perspektive. Stattdessen werden wir in unseren Tutorien das JavaScript Template-System Handlebars werden.
- Twitter Bootstrap
-
Bootstrap ist ein freies CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Formulare, Buttons, Tabellen und andere Oberflächengestaltungselemente. Für das Entwickeln der Test-Anwendungen wird das Framework nicht zwingend benötigt, doch bekanntlich isst das Auge mit, zudem erleichtert es die Arbeit etwas.
- Parse
-
Im ersten Kapitel des Buches hatten wir den Facebook Service Parse oberflächlich angesprochen. In Diesem werden wir erklären wie eine Parse-Anwendung eingerichtet wird, wie der Parse JavaScript SDK eingebaut wird, wie Daten gespeichert und gelesen werden als auch weitere interessante Themen wie Cloud Code und Cron Jobs.
Weder für den Autor noch für den Leser sehr ansprechend. Um etwas Ordnung in diesen Bereich zu bringen, haben wir uns für die Verwendung der JavaScript-Template-Bibliothek Handlebars entschlossen. Mit Handlebars können semantische Templates auf einfache und schnelle Weise gebaut werden.
Das Tool kann entweder von http://handlebarsjs.com/ heruntergeladen werden oder über folgende (inoffizielle) CDN URL eingebunden werden:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js "></script>
Handlebars Templates verwenden normale HTML Tags, ergänzt um Funktionen bzw. Variablen (Handlebar Expressions):
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>
Handlebars-Expressions sind von zwei geschweiften Klammern eingeschlossen. Bei der Kompilierung der Templates werden diese Platzhalter durch die Werte der entsprechenden Variablen ersetzt.
Es gibt verschiedene Ansätze die Templates auszuliefern. Der einfachste ist, die s per <script> Tag in eine HTML-Seite einzubinden:
<script id="entry-template" type="text/x-handlebars-template"> Inhalt des Templates </script>
Das Template wird in JavaScript via Handlebars.compile kompiliert:
var source = $("#entry-template").html(); var template = Handlebars.compile(source);
Die Variable template ist eine Referenz auf eine Funktion, die sowohl das Template als auch Template-Logik enthält. An die Funktion können key-value Paare in Form eines JavaScript-Objekts übergeben werden:
var context = { title: "Mein Blog Beitrag", body: "Dies ist mein erster Beitrag!" }; var html = template(context);
Auf context.title kann in der Template über {{ title }} zugegriffen werden. Durch das Ausführen der Funktion befindet sich in der Variable html nun einfacher HTML-Code:
<div class="entry"> <h1>Mein Blog Beitrag</h1> <div class="body"> Dies ist mein erster Beitrag! </div> </div>
Der HTML-Code kann sowohl aus einem einzelnen HTML-Element als auch hunderten von Elementen bestehen.
Eine der wichtigsten Funktionen für alle Beispiel-Anwendungen ist die Verwendung von Schleifen und Iteratoren:
<div id="comments"> {{#each comments}} <h2><a href="{{id}}">{{title}}</a></h2> <div> {{body}} </div> {{/each}} </div>
In diesem Beispiel wird als Argument eine Reihe von Kommentaren in Form eines Arrays übergeben:
var context = { comments: [{ id: 1, title: "Mein Kommentar", body: "Hier steht Kommentartext" }, { id: 2, title: "Ein anderer Kommentar", body: "..." }] }; var html = template(context);
Auf weitere Funktionen der Bibliothek werden wir direkt in den Anwendungsbeispielen eingehen.
- Mustache
-
Eines der populärsten Template-Systeme ist Mustache. Ein großer Vorteil der Mustache Templates ist die serverseitige Kompilierung, d.h. ein und das selbe Template kann sowohl in JavaScript aber auch PHP oder Java verwendet werden. Dies geht jedoch auf Kosten der Flexibilität in JavaScript. Mustache Templates sind größtenteils kompatibel zu Handlebars-Templates. Die Bibliothek gibt es auf Github zum Download: https://github.com/janl/mustache.js
- Underscore
-
Wer bereits Underscore verwendet, sollte sich das Utility »template« anschauen (http://underscorejs.org/#template). Das System funktioniert analog zu Handlebars, anstelle der geschweiften Klammern werden Variablen jedoch von <% ... %> eingeschlossen.
Um die Funktionsweise auf kurzes zu verdeutlichen: Durch das Hinzufügen von Twitter-Bootstrap CSS Klassen zu klassischen HTML Elementen können diese deutlich ausgeschmückt werden. Im folgenden Beispiel handelt es sich um die Jumbotron Komponente (eng.: component; siehe auch: http://getbootstrap.com/components/#jumbotron):
<div class="jumbotron"> <h1>Hello, world!</h1>
This is a template ...
<a href="#" class="btn btn-primary btn-lg" role="button"> Learn more » </a>
</div>
Sie eignet sich zur Darstellung der Kernaussage einer Seite, zum Beispiel einer Willkommensmeldung und verfügt über eine Überschrift, Textteil sowie Link. Ein Darstellungsbeispiel für die Komponente sowie weitere Bootstrap Elemente ist in Abbildung 5.1 zu sehen. Alle benötigte Komponenten werden wir in den eigentlichen Anwendungsbeispielen benennen.
Abbildung 5.1 Twitter-Bootstrap Template...
