Jade Template-Sprache für die Entwicklung mit TYPO3 einsetzen

Zuerst wird eine grafische Vorlage erstellt, die jedoch für unsere Kunden nur ein Bild zum Reinschnuppern ist. Daran wird oft nach Bauchgefühl entschieden, ob die Seite künftig so aussehen soll. Von der Funktionalität oder Animationen ist an dieser Stelle noch nichts zu sehen, zudem fühlt sich eine Webseite die "richtige" Fonts beinhaltet einfach komplett anders an, als ein Bild mit integrierter Schrift. Auch media Queries, also die sogenannten Responsive States, also wie eine Webseite auf einem Smartphone oder Tablett aussieht, lässt sich nur mit einem Klick-Dummy wirklich effektiv testen.

Im nächsten, für die Voransicht wohl wichtigsten Schritt, erstellen wir daraus ein HTML- und CSS-Gerüst. Das besteht meist aus einer einzigen Seite mit sämtlichen Inhaltselementen, eventuell auch schon ein wenig Funktionalität und ein paar Animationen. Der Kunde bekommt einen kleinen „Klick-Dummy“ und somit bereits den ersten Eindruck von der Seite. Soweit so gut, doch genau hier kommt Jade ins Spiel.

Jade ermöglicht uns, noch vor dem Einsatz dieses Gerüstes in TYPO3, ein besseres, greifbares Stück der zukünftigen Webseite dem Kunden für seine Entscheidungen mitzugeben. Durch Jade wird es ohne größeren Aufwand möglich statische Inhalte, wie z.B. das Menü, auf allen Seiten einzubinden. Ebenso aber auch die einzelnen Inhaltselemente auf diverse Seiten zu verteilen oder vervielfacht darzustellen.

Während wir unseren Kunden also zuvor eine einzelne Seite mit allen Inhaltselementen vorgezeigt haben, können wir mit Jade einen Klick-Dummy präsentieren, der seinem Namen gerecht wird. Eine Startseite mit nur dafür vorgesehenen Inhalten, eine eigene Newsseite für die Listenansicht und Detailansicht, sowie alle weiteren gewünschten Inhaltselemente oder TYPO3 Extensions, die nun über die Navigation erreichbar sind. Das ist ein wahres Erlebnis!

Nebenbei erwähnt: Auch für uns als Agentur und Entwickler bietet Jade diverse Vorteile gegenüber „händischem“ erstellen von HTML-Gerüsten. Auf dem Bild finden Sie eine einfache Code-Gegenüberstellung zum Vergleich.

Ein weiterer enormer Vorteil ist die Tatsache, dass Jade reinen HTML-, JS- und CSS-Code erzeugt. Wir benötigen also keine PHP-Laufzeitumgebung was beispielsweise für Smarty notwendig ist. Damit kann der Klick-Dummy auch beim Kunden lokal oder auf einem Notebook ohne Internetzugang präsentiert werden, was den Einsatz von Jade nochmals positiv bestärkt. Wir hier im beschaulichen Karlsruhe sind auf jeden Fall sehr happy mit dem Tool!

Hier geht es zur offiziellen Webseite von Jade: https://jade-lang.com/