© Excellent backgrounds/Shutterstock.com
Kolumne: EnterpriseTales

Kolumne: EnterpriseTales


Zugegebenermaßen kann der Einstieg in die Single-Page-Welt verwirrend sein. Noch vor der ersten Zeile Code müssen verschiedene Tools installiert und unzählige Eingaben in der Kommandozeile getätigt werden. Zwar bieten viele Single-Page-Frameworks mittlerweile Werkzeuge (CLI-Tools [1], [2]), mit deren Hilfe sich Projekte größtenteils automatisiert erstellen und konfigurieren lassen. Trotzdem bleibt bei Neulingen oft ein fader Beigeschmack: Braucht man das wirklich alles? Früher musste man doch nur jQuery herunterladen …

Rein technisch gesehen zeichnet sich eine Single-Page Application (SPA) heute vor allem dadurch aus, dass das HTML der Benutzeroberfläche erst im Browser mithilfe von JavaScript erzeugt wird (clientseitiges Rendering). Dadurch kann ein Großteil der UI-Logik, inklusive des Renderingprozesses, vom Server in den Client verlagert werden. Eine SPA fühlt sich für Benutzer während des Betriebs deshalb häufig flüssiger an als serverseitig gerenderte Webanwendungen. Listing 1 zeigt die Umsetzung einer zugegebenermaßen sehr rudimentären SPA. Um den Code zu vereinfachen, wird hier jQuery [3] verwendet. Die Abfrage von JSON-Daten findet über eine HTTP-basierte Schnittstelle statt. Die Daten werden in der renderApp-Methode in HTML-Fragmente übersetzt, also clientseitig gerendert. Unter der Haube machen das, zumindest in Ansätzen, auch die aktuellen SPA-Librarys und -Frameworks so. Dort kommen jedoch ausgefeilte und performante Konzepte wie Virtual-DOM-Strukturen und Templating Engines zum Einsatz.

Listing 1: Clientseitiges Rendering

class TwitterApp { async init() { this.tweets = await $.get('http://twitter.com/tweets'); this.renderApp(); } renderApp() { const items = this.tweets.map(tweet => $(`<li>${tweet}</li>`)); $(document.body).append($('<ul/>').append(items)); } } new TwitterApp().init();

Zugrunde liegt Node.js

Die Basis für die moderne Webentwicklung bildet Node. js. Die Plattform ist dadurch bekannt geworden, dass sie in immer mehr großen Unternehmen für die Umsetzung leichtgewichtiger und skalierbarer Server verwendet wird. Dabei ist Node.js aber in erster Linie kein Serverframework, sondern eine JavaScript Runtime. Damit lässt sich JavaScript lokal und ohne die Benutzung eines Browsers ausführen. Auch der Zugriff auf das Dateisystem oder das Erstellen von HTTP(S)-Servern ist möglich. Das ist bei der Entwicklung einer SPA hilfreich, weil sich beispielsweise das Ausführen von Tests, statische Codeanalysen oder andere Build-Schritte über die Kommandozeile anstoßen lassen. Auch die CLI-Tools sind in der Regel in JavaScript geschrieben und benötigen zur Ausführung deshalb Node.js.

Zusätzlich zu Node.js gibt es noch den Node Package Manager (npm), ein Dependency-Management-System für JavaScript-Projekte, das das Hinzufügen und Verwalten von Softwarepaketen über die Konsole ermöglicht. Ein Online-Repository [4] bietet Entwicklern Zugriff auf unzählige JavaScript Librarys und Frameworks, die sich beispielsweise für das Erstellen von SPAs oder die serverseitige Entwicklung verwenden lassen.

Die mit npm installierten Abhängigkeiten werden in einer Art Manifestdatei hinterlegt, der package.json. Jedes npm-Projekt enthält eine solche Datei, in der neben den Abhängigkeiten noch Metainformationen wie der Projektname oder die Projektversion hinterlegt sind. Auch lassen sich dort Skripte definieren, die man zum Ausführen verschiedener Build-Schritte nutzen kann (Listing 2).

Listing 2: „package.json“

{ "name": "myapp", "version": "1.0.0", "description": "It can do stuff", "scripts": { "test": "jest", // "npm test" r...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang