Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML auf der Autobahn: Wie du mit Jade deine Webentwicklung beschleunigst

    HTML auf der Autobahn: Wie du mit Jade deine Webentwicklung beschleunigst

Jade macht die Entwicklung mit HTML einfacher. (Screenshot: Jade)

Viele Entwickler fragen sich, wie sie die Entwicklung von HTML beschleunigen können. Heute zeigen wir euch Jade – eine auf Node basierende Template-Engine, die genau das verspricht.

Jade ist eine Template-Sprache, die euch eine extrem einfache HTML-Syntax zur Verfügung stellt, die dann in HTML transpiliert wird.

jade
Und so sieht Jade aus – inklusive JavaScript. (Screenshot: Jade)

Dabei ähnelt die Syntax etwa der von Sass oder Stylus – es wird auf (überflüssige) Klammern verzichtet. Bei HTML hat das besonders den Vorteil, dass nie wieder HTML-Elemente falsch geschlossen werden oder umständlich das schließende HTML-Element gesucht werden muss. Jade verhindert also Fehler und macht euch dadurch auch zu besseren Entwicklern, denn ihr spart euch knapp 50 Prozent der Anschläge.

Jade macht HTML einfach einfacher

Die richtige Einrückung der jeweiligen HTML-Elemente passiert über Tab-Stopps innerhalb von Jade. Ihr könnt so ganze HTML-Konstrukte mit nur sehr wenigen Keywords beschreiben. Darüber hinaus wird HTML durch Jade unter anderem mit Logik erweitert: Schleifen, Vererbung, Mixins und Variablen stehen zur Verfügung, um den HTML-Workflow zu optimieren.

Im Gegensatz zu Emmet handelt sich bei Jade nicht um Auto-Complete, sondern um eine echte Template-Engine. Für Jade am Mac kann ich euch Codekit oder Prepros empfehlen, die beide den Umgang mit Jade noch weiter vereinfachen, in dem sie die Konsole für Entwickler durch eine GUI ersetzen.

Darüber hinaus beherrscht Jade ähnliche Shortcuts wie Emmet. So können Klassen in einer Reihe geschrieben werden – sie werden dann entsprechend des Nestings richtig in HTML transpiliert.

Anzeige

Jade-Templates: Fühlt sich an wie LaTeX

In der Praxis sieht das dann so aus, dass eigentlich nur noch Klassennamen geschrieben werden müssen. Um euch einen umfassenden Blick zu ermöglichen, kann ich euch die offizielle Jade-Demo ans Herz legen.

Richtig interresant wird Jade, wenn es um echtes Templating geht. Ihr könnt mit include, extend, block aus verschiedenen Code-Fragmenten ganze HTML-Seiten aufbauen – dabei fühlt sich Jade ähnlicht wie LaTeX an, was für gewisse Projekte sehr interessant sein kann. Dabei ist es egal, ob man HTML-Fragmente generiert oder JavaScript. Mit Sprach-Filtern könnt ihr sogar externe MarkDown-Dateien einfügen – Jade transpiliert den Markdown-Code in HTML.

Fazit: Jade ist cool – auch ohne Templates

Gerade bei statischen HTML-Projekten ist Jade ein absolutes Muss, weil es den Wartungsaufwand gering hält und man viel HTML mit wenig Aufwand erzeugen kann.

Auch wenn ihr die eigentliche Template-Engine gar nicht nutzen wollt – Jade beschleunigt euren Workflow. Emmet ist zwar gut, aber Jade ist besser. Warum? Weil ihr bei Jade den HTML-Code von klassischem Auto-Complete getrennt habt. Emmet hat den Nachteil, dass es sofort HTML generiert – hat man einen kleinen Fehler gemacht, der nicht sofort auffällt, hat man im Nachhinein wieder das Problem der Wartbarkeit.

Jade hingegen bleibt übersichtlich und erzeugt einfach ein neues HTML-Dokument. Und da Jade um einiges übersichtlicher ist – auch völlig ohne Editor oder IDE – bevorzuge ich persönlich Jade. Jade könnt ihr euch auf GitHub runterladen.

Und was meint ihr? Emmet oder Jade?

Finde einen Job, den du liebst

12 Reaktionen
Leo Merkel

Ich habe einen Workflow mit Gulp und Jade entwickelt, den Ihr hier anschauen bzw. runterladen könnt: https://github.com/Lego2012/jekyll-gulp-starter-kit.git

Das Projekt basiert zwar auf Jekyll, aber man sieht in dem Gulpfile (was übrigens aus meiner Sicht besser ist als Grunt) sehr schön, wie ich Jade eingebunden habe. Wenn's Fragen dazu gibt, einfach im Repository posten.

Antworten
Stefan

Sehe es ähnlich wie @Werner.
Die modernen Editoren schließen meist automatisch, ebenso kann ich Blöcke verkleinern um es Übersichtlich zu haben. Fehler kann ich mir oft auch anzeigen lassen.

Allerdings finde ich es auch cool das dieses Klammer getippe hier nicht mehr nötig ist. Das währe der einzige Grund sich mit Jade zu beschäftigen. Das stört mich am Code schreiben eigentlich immer am meisten ;-).

Danke für den Artikel.
Schöne Grüße
Stefan

Antworten
Suther

Was du brauchst, als deutscher Programmierer ist "neo" als Tastaturlayout.
(Warum als "deutscher" ? Weil das Layzout auf die Deutsche Sprache und dem vorkommen der Buchstaben obtimiert ist.)

Mich hat es immer extrem gestört, das man nicht einfach so programmieren Kann, wie man Text tippt...

Potenziere mal folgendes einzelnes Zeichen auf deinen Tagesablauf als Coder:
{
Nötige Schritte um ALTGr +7 zu drücken:
- Finger komplett aus der Grundhaltung,
- auf Tastatur schauen,
- Tastenkombo tippen,
- Finger zurück in Grundhaltung,
- auf dem Bildschirm die Codezeile wiederfinden.

Mit NEO hab ich alle diese Sonderzeichen auf einer Zusätzlichen Ebene am Haupttastenblock. Das wäre bei Querty:
"asdf" ergeben \/{}
"wert" ergeben …_[]^
"<yxcv" ergeben #$|~`
Zudem habe ich auch die Richtungstasten, Numblock und andere Zeichen auf diversen Ebenen.

Neo ist schnell und einfach nachinstalliert (auch unter windows) und dunter Mac & Linux von Haus aus an board!
Wer sich informieren möchte:
https://www.neo-layout.org/ oder G+ Gruppe: https://plus.google.com/communities/101851854188876249808

Wer einmal den Umstieg wagt, wechselt nie wieder Zurück... versprochen!
Wenn man alleine bedenkt, welche Vorteile das täglich bietet:
- ergonomischer (ermüdungsfreier) tippen,
- 100% (wirklich 100%) ohne auf die Tastatur zu sehen
- extreme Zeitersparnis beim Programmieren wegen den ganzen Sonderzeichen
- Nerd Flavor automatisch inklusive ;)

- Nachteil: asdf liegen nicht mehr Nebeneinander ;) - werden zu uiae

PS:
_[]^\/{}*#$|~` .... Diese Zeichen habe ich gerade in 2 Sekunden getippt. Wer schafft das unter qwertz ?

Antworten
Werner
Werner

Diese Art Sytax gibt es in vielen Bereichen, bei Rails => haml.
Da kann man richtig viel Zeit bei debuggen verbringen, nicht korrekt geschlossen Blöcke finden, Indend errors errors etc.pp. Die versprochene Zeitersparnis ist dann schnell wieder hin.
Zudem muss man sich das erst einmal erarbeiten. Ein neuer Kollege der ein solches Projekt übernimmt, hat dann auch seine Freude.
Optisch gefällt es mir nicht...o.k. Geschmackssache.

Jeder moderne Editor schließt Tags fast schon automatisch, so what? dann benötige ich sicher einen watcher etc. etc.
Lediglich bei Coffeescript macht es Sinn den JS Klammerwahnsinn ausmisten, schafft Überblick.

Antworten
Mario Janschitz
Mario Janschitz

Das Argument mit dem Debuggen hat man auch bei HTML, nur dass man bei HTML mehr potentielle Fehlerquellen hat. Und die Indend-Errors finde ich jetzt auch nicht herausfordernd, weil ich weiß ja wo mein HTML falsch ist und kann dementsprechend im Jade-File nachsehen.

Hingegen hat man bei HTML das Problem, dass gleich mal ein offenes oder geschlossenes Div-Element herumstreunt, und das ist gleich mal unangenehmer zu finden. Von daher sehe ich Jade als absoluten Beschleuniger.

Und die Lernkurve ist praktisch nicht vorhanden. Ich schreibe anstatt

Text

einfach nur „p Text“. Ja, autocomplete kann das auch, aber die Wartbarkeit wird verringert.

Antworten
Patrik
Patrik

Was bedeutet hier Wartbarkeit?
ändere ich die Tag-Definition am Start, ändert so gut wie jeder anständige HTML-Editor das End-Tag -> Fazit keine Wartbarkeit

Desweiteren kann durch pures HTML mit dem Container-Design bessere Lesbarkeit generiert werden...

Jade überzeugt mich pers. überhaupt nicht

Mario Janschitz
Mario Janschitz

Hallo Patrick!
Ich meine den Aufwand, der entsteht, wenn du 2-3 verschachtelte HTML-Elemente an andere Stellen verschieben möchtest. Oder du die Veschachtelung um ein HTML-Fragment herum entfernen möchtest.

Mit Jade bewegst du nur den Element-Namen bzw. änderst die Einrückung. In HTML musst du den Code, sowie die End-Tags des Elements bewegen. Was leicht zu streunenden Tags führen kann.

Nocheinmal: Jade produziert HTML-Code, das heißt alle Vorteile die du bei HTML siehst, hast du auch weiterhin. Jade hilft dir nur den Vorgang des HTML-Schreibens zu beschleunigen.

Und das Argument der besseren Lesbarkeit bei purem HTML ist kein Argument, denn:

Inhalt

gegen
.bla Inhalt

Zorig
Zorig

Hörst sich zwar ganz gut an aber wie ist denn die Performance? Soweit ich das verstehe wird das html ja per nodejs dynamisch generiert. Oder werden html Dateien generiert und irgendwo abgelagert?

Antworten
Mario Janschitz
Mario Janschitz

Es wird transpiliert. Jade-Syntax wird ein HTML gewandelt. Daher auch keine Performance-Probleme.

Antworten
Mario Janschitz
Mario Janschitz

Hallo! Super, dass ich eure Neugier dafür wecken konnte!
Ich nutze Sublime Text und dafür gibt es Jade-Syntax :)

Antworten
Marco Willi
Marco Willi

Liest sich interessant. Danke Mario. Dein Beitrag zu Emmet hat mich damals schon bereichert. Werde mir das mal anschauen und auch schauen, ob es das bereits für Brackets als Plugin gibt.

Antworten
Rathes Sachchithananthan

Zusammen mit Grunt kann Jade bestimmt in der Tat richtig viel Spaß machen! Muss ich mal ausprobieren!

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot