jQuery serverseitig
jQuery lässt sich dank entsprechender Module auch serverseitig unter Node.js verwenden. Generell gilt auf dem Webserver wie auch im Webbrowser, dass man jQuery jedoch nicht wahllos verwenden sollte.
- Golo Roden
Zweifelsohne ist jQuery eine der am häufigsten verwendeten Bibliotheken in der modernen Webentwicklung. Deren Anwendungsszenarien sind ausgesprochen vielfältig: Die Bandbreite reicht von der dynamischen Analyse und Änderung des Document Object Model (DOM) über das Absenden und Verwalten von AJAX-Anfragen bis hin zur Darstellung von Effekten und Animationen für grafische Benutzeroberflächen.
Diesen Szenarien ist jedoch gemein, dass jQuery stets clientseitig, also innerhalb eines Webbrowsers ausgeführt wird. Wie ich in meinem Vortrag "What jQuery is good for on the server" auf der jQuery Europe 2013 in Wien gezeigt habe, kann man jQuery jedoch auch serverseitig im Rahmen von Node.js auf einfache Art verwenden. Im einfachsten Fall genügt dazu das Modul jquery, das auf dem üblichen Weg mit npm (Node Package Manager) installiert wird:
$ npm install jquery
Anschließend kann der Entwickler die require-Funktion von Node.js verwenden, um das Modul in eine eigene Anwendung zu importieren:
var $ = require('jquery');
Danach kann er jQuery unter Node.js ausführen, um beispielsweise AJAX-Anfragen durchzuführen und das Ergebnis unter Verwendung der üblichen Selektoren zu analysieren:
var $ = require('jquery');
$.ajax({
url: 'http://www.thenativeweb.io',
method: 'GET',
statusCode: {
200: function (data) {
var $title = $(data).find('title');
console.log($title.text());
}
}
});
Intern erzeugt das Modul jquery für die Variable $ ein JavaScript-basiertes DOM, das zunächst lediglich das folgende Dokument enthält:
<html>
<head></head>
<body></body>
</html>
Allerdings ist es ein Leichtes, dieses Dokument mit den üblichen Funktionen von jQuery zu verändern. Beispielsweise lässt sich der Titel der abgerufenen Webseite mit einem entsprechenden, beschreibenden Text als Absatz einfügen, indem man die appendTo-Funktion verwendet:
$('<p>The title is: ' + $title.text() + '</p>').appendTo('body');
Bei Bedarf kann der Entwickler die Funktion create des Moduls jquery verwenden, um ein weiteres Dokument zu erzeugen und ein unabhängiges DOM zu erhalten:
var jq = $.create();
Das Modul jquery basiert intern auf weiteren Modulen. Unter anderem baut es auf dem Modul jsdom auf, das eine reine JavaScript-Implementierung des DOMs darstellt. Anstatt jsdom im Rahmen von jquery zu verwenden, kann man dieses Modul auch direkt ansprechen. Die Installation erfolgt dabei ebenfalls mit npm:
$ npm install jsdom
Um jsdom zu verwenden, muss der Entwickler es zunächst mit der require-Funktion importieren:
var jsdom = require('jsdom');
Das auf diesem Weg importierte jsdom-Objekt stellt die Funktion env zur Verfügung, die ein neues, unabhängiges DOM bietet. Im einfachsten Fall erwartet diese Funktion zwei Parameter: zum einen die Adresse der zu ladenden Webseite, zum anderen einen Callback, der das window-Objekt der geladenen Webseite entgegennimmt. Dieses Objekt stellt alle Eigenschaften und Funktionen des DOMs zur Verfügung, die man auch innerhalb eines Webbrowsers erwarten würde:
jsdom.env('http://www.thenativeweb.io', function (errs, window) {
console.log(window.document.innerHTML);
});
Interessant ist die Möglichkeit, zusätzliche JavaScript-Dateien zu laden und im Kontext der geladenen Webseite auszuführen. Dazu kann man einen weiteren, optionalen Parameter angeben. Aus Gründen der Übersichtlichkeit ist es jedoch ratsam, auf eine alternative Syntax zu wechseln, die ein Parameterobjekt verwendet. Um also beispielsweise jQuery im Kontext einer Webseite auszuführen, muss der Entwickler die Funktion env wie folgt aufrufen:
jsdom.env({
html: 'http://www.thenativeweb.io',
scripts: [ 'http://code.jquery.com/jquery-1.9.1.min.js' ],
done: function (errs, window) {
console.log(window.$('title').text());
}
});
Anstelle einer Adresse kann er der Eigenschaft html auch den Quellcode einer Webseite oder eines Webseitenfragments als Zeichenkette übergeben. Ergänzend zu der Eigenschaft scripts lässt sich außerdem die Eigenschaft src verwenden, um direkt JavaScript-Code im Kontext der Webseite auszuführen.
Besonders interessant ist die Eigenschaft document, die ihrerseits ein Objekt darstellt. Mit ihr lassen sich ein Referrer und Cookies übergeben:
jsdom.env({
html: 'http://www.thenativeweb.io',
scripts: [ 'http://code.jquery.com/jquery-1.9.1.min.js' ],
document: {
referer: '...',
cookie: 'key=...; expires=...; ...'
},
done: function (errs, window) {
console.log(window.$('title').text());
}
});
Die Funktion env bietet noch zahlreiche weitere Möglichkeiten. Beispielsweise kann man festlegen, ob externe Ressourcen geladen und ausgeführt werden sollen oder nicht. Details hierzu finden sich in der Dokumentation von jsdom.
Die Schattenseite
Wie bei allem gilt jedoch, dass Licht auch stets Schatten bedeutet. Dieser besteht im Falle von jsdom in einem intern verwendeten Modul namens contextify. Es dient der isolierten Ausführung einzelner JavaScript-Dateien. Da es nicht in JavaScript, sondern in C++ geschrieben wurde, ist es während seiner Installation zu kompilieren. Während das unter OS X und Linux von Haus aus funktioniert, müssen unter Windows einige spezielle Voraussetzungen erfüllt sein, wie die Dokumentation von jsdom beschreibt:
- Node.js muss in der 32-Bit-Variante vorliegen.
- Visual C++ 2010 muss installiert sein.
- Python 2.7 muss installiert sein.
Sind diese Voraussetzungen allerdings erfüllt, kann man contextify auch unter Windows erfolgreich übersetzen.
Generell gilt auf dem Webserver das gleiche wie auch innerhalb des Webbrowsers: jQuery ist ein durchaus mächtiges Werkzeug, bedeutet aber auch ein gewisses Maß an Ballast. Insbesondere das Modul jsdom ist alles andere als leichtgewichtig.
Daher ist der Entwickler gut beraten, von Fall zu Fall individuell zu entscheiden, ob er wirklich alle Funktionen von jQuery benötigt oder ob für den jeweiligen Anwendungsfall nicht ein spezialisiertes, dafür aber kleineres und leichtgewichtigeres Modul genügt.
tl;dr: jQuery kann dank entsprechender Module auch serverseitig unter Node.js verwendet werden. Besonders hilfreich sind die Module jquery und jsdom. Die Installation unter Windows erfordert jedoch in beiden Fällen spezielle Maßnahmen. Generell gilt auf dem Webserver wie auch im Webbrowser, dass man jQuery nicht wahllos verwenden sollte. ()
