PUG – die Template-Engine
Diese Bändchen beschreibt kompakt und übersichtlich die in der Express-Middleware standardmäßig eingesetzte Template-Engine Pug. Express gehört zum Node.js-Stack. Das heißt, alle hier gezeigten Beispiele und Kommandos sind nur in einer Node.js-Umgebung lauffähig.
Pug ist ehemals unter dem Namen JADE veröffentlicht worden. Die Umbenennung wurde aufgrund von Copyright-Streitigkeiten notwendig.
Zielgruppe
Dieses Bändchen wendet sich an Anfänger und an Webentwickler, die neu in der MEAN-Welt sind. MEAN steht für “MongoDb Express AngularJs Node” und bezeichnet eine komplett auf JavaScript basierendes Entwicklungs-Ökosystem. Pug ist eine Option für die Erstellung von Ansichten in Express.
Vielleicht sind Sie aber auch ein Webdesigner, der JavaScript als eine hervorragende Möglichkeit entdeckt hat, seine Webseiten mit dynamischen Elementen aufzuwerten. Dabei haben Sie mit Texten zu tun, mit Formularen, mit der Darstellung von Datenbankinhalten, also alles, was eine dynamische Website ausmacht. Dann wird Ihnen dieses Bändchen einen der Teilaspekte, nämlich das Erzeugen des HTML auf dem Server, in besonders übersichtlicher Form zeigen.
Auf alle Fälle habe ich mich bemüht, keine Voraussetzungen an den Leser zu stellen. Sie müssen kein Informatiker sein, keine Programmiersprache perfekt beherrschen, keine höhere Mathematik kennen. Egal in welchem Zusammenhang Sie auf Pug gestoßen sind, Sie werden diesen Text lesen können.
MEAN
Um alle Beispiele nachvollziehen zu können, benötigen Sie eine lauffähige Node.js-Umgebung. Diese wird auch als “MEAN” (MongoDb, Express, AngularJs, Node) bezeichnet. Pug ist die standardmäßig benutzte Template-Engine der Middleware- und Routingkomponente Express. Ein weiteres Bändchen der Reihe “Jörgs Webbändchen” widmet sich Express und natürlich steht auch eine Einführung in node.js selbst bereit.
Wenn Sie diesen Text zufällig gefunden haben und mit dem Begriff “MEAN” nichts anfangen können, lesen Sie es trotzdem. Sie werden eine der modernsten Techniken der Webentwicklung kennenlernen und künftig gehören Sie zum Kreis hervorragender Entwickler, die hochperformante und zukunftsorientierte Websites bauen.
Was Sie wissen sollten
Leser dieser Reihe müssen kaum Voraussetzungen mitbringen. Etwas HTML kann nicht schaden und wer schon mal eine statische HTML-Seite gesehen hat (den Quellcode natürlich) kommt sicher gut rein. Ich gehe davon aus, dass Sie wenigstens ein aktuelles Windows-System haben. Sie können die Umgebung direkt auf Windows installieren oder auf Linux. Wenn Sie Windows 8 oder 10 haben, können Sie die Hyper-V-Umgebung nutzen, um darauf ein Ubuntu-Linux zu installieren. Es ist einfacher als Sie denken und auf jeden Fall einen Versuch wert.
Wie Sie diesen Text lesen können
Ich will Ihnen nicht vorschreiben, wie Sie diesen Text lesen sollten. Beim ersten Entwurf der Struktur habe ich mehrere Varianten ausprobiert und dabei festgestellt, dass es die ideale Form nicht gibt. Wenn ich mich an den verschiedenen Anwendungsarten orientiere, zerfällt der Text in mehrere Kapitel, die nicht im Zusammenhang miteinander stehen. Der eine oder andere Leser würde sich dann ärgern, dass er viel Geld für ein Buch ausgibt, das nur zu einem Fünftel verwendbar ist. Diese Bändchen löst das Problem, indem es auf ein sehr kleines Thema fokussiert ist und kein “bla-bla” zur Aufblähung des Umfangs dabei ist.
Anfänger sollten den Text als Erzählung lesen, von der ersten bis zur letzten Seite. Wer sich schon etwas auskennt, kann die für ihn weniger interessanten Abschnitte gefahrlos überspringen. Falls Bezüge notwendig sind, habe ich entsprechende Querverweise eingefügt.
Schreibweisen
Das Thema ist satztechnisch nicht einfach zu beherrschen, denn Skripte sind oft umfangreich und es wäre schön, wenn man die beste Leseform optisch unterstützen könnte. Ich habe deshalb oft zusätzliche Zeilenumbrüche benutzt, die der Lesbarkeit dienen, im Editor Ihrer Entwicklungsumgebung aber nichts zu suchen haben.
Generell wird jeder Programmcode mit einer nicht proportionalen Schrift gesetzt. Außerdem verfügen Skripte über Zeilennummern:
1 function test(d){
2 return (d != undefined);
3 }
Wenn Sie etwas am Prompt oder in einem Dialogfenster eingeben müssen, wird dieser Teil der Anweisung fett geschrieben:
$ npm start
Ausdrücke und Befehlszeilen sind manchmal mit allen Arten von Zeichen gespickt und in fast allen Fällen kommt es auf jedes Zeichen an. Besonders das Leerzeichen ist nicht, wie in anderen Programmiertexten, beliebig verwendbar. Sie müssen genau so viele Zeichen eingeben, wie angegeben sind. Damit Sie Leerschritte richtig erkennen, werden diese wo es darauf ankommt mit dem Symbol • gekennzeichnet (ein kleiner Punkt in der Mitte der Zeile):
1 grep –w /^\\s*(•?)+/
Oft werde ich die Verwendung bestimmter Zeichen in einem solchen Ausdruck genau erläutern (ich lasse Sie wirklich nicht mit solchen Zeichenschlangen allein). Dann werden die “wichtigen” Zeichen durch Zeilenumbrüchen alleingestellt und auch in diesem Fall werden Zeilennummern dazu dienen, das betroffene Symbol im Text exakt zu referenzieren (Beachten Sie das #-Zeichen in Zeile 6):
1 !!! 5
2 html(lang='en')
3 head
4 title= title
5 body!= body
6 div#navigation!= partial('navigation.pug')
Jade nutzt Einrückungen zur Struktur. Die Leerzeichen am Anfang einer Zeile haben eine semantische Bedeutung. Die Schrift ist nicht-proportional, sodass die Zeichen abzählbar sind.
Symbole
Um die Orientierung bei der Suche nach einer Lösung zu erleichtern, gibt es eine ganz Palette von Symbolen, die im Text genutzt werden.
Über den Autor
Jörg arbeitet als Trainer, Berater und Softwareentwickler für große Unternehmen weltweit. Bauen Sie auf die Erfahrung aus 25 Jahren Arbeit mit Web-Umgebungen und vielen, vielen großen und kleinen Projekten.
Jörg sind vor allem solide Grundlagen wichtig. Statt immer dem neuesten Framework hinterher zu rennen wären viele Entwickler besser beraten, sich eine robuste Grundlage zu schaffen. Wer dies kompakt und schnell lernen will ist hier richtig. Auf seiner Website www.joergkrause.de sind viele weitere Informationen zu finden.
Jörg hat über 60 Titel bei renommierten Fachverlagen und im Eigenverlag texxtoor in Deutsch und Englisch verfasst, darunter einige Bestseller.
Kontakt zum Autor
Neben der Website können Sie auch direkten Kontakt über www.IT-Visions.de aufnehmen. Wenn Sie für Ihr Unternehmen eine professionelle Beratung zu Web-Themen oder eine Weiterbildungsveranstaltung für Softwareentwickler planen, kontaktieren Sie Jörg über seine Website oder buchen Sie direkt über http://www.IT-Visions.de.
