#DEVELOPMENT
Serverless Website - Ein Fallbeispiel mit Nunjucks
09. Sep 2020
3 min Lesezeit
Eine Webseite zu erstellen bedeutet eigentlich immer sich um Frontend und Backend zu kümmern.
Doch was ist das eigentlich?
Frontend, na klar das sind die HTML5 Tags welche die Struktur der Seite festlegen und das CSS kümmert sich um die Optik?
Bloß nicht zu vergessen, das Javascript, welches für die coole Dynamik wie Animationen (Slideshow, Accordions, etc) und andere Effekte zuständig ist. All das passiert im Browser (Client).
Backend, das sind die dynamischen Inhalte und Objekte einer Seite, welche über ein Content Management System gepflegt werden und in irgendeiner Datenbank (mySQL, etc) vorliegen.
Typische CMS Systeme wären Typo3, Wordpress, Joomla und wie sie nicht alle heißen.
Normal braucht man entweder jeweils einen Experten auf beiden Seiten oder man hat Glück und jemand kennt sich in beiden Gebieten aus. Oft wird dadurch die Seite langsam, ist überdimensional groß für die Anforderungen oder einfach nicht zu durchblicken. Was wenn viele Seiten durch bessere Überlegung nicht standardmässig diesen Weg gehen müssten.
Wir wollten für uns selbst den Test machen. Unsere alte Seite war ein klassisches Typo3, wie viele unserer damaligen Kundenprojekte.
Zuerst machten wir uns Gedanken, was die neue Seite können soll. Wir wollten sie schnell und dynamisch machen, sie sollte UseCases unserer Kunden haben und wir wollten unbedingt einen Blog, in dem wir Geschichten wie diese erzählen können.
Klingt erstmal stark nach CMS Lösung. Wie sollte man sonst Inhalte verwalten, Blog Beiträge erstellen können, SEO Strukturen und URLs verwalten und Zugriff auf alle Elemente haben.
Wenn man es versucht, geht tatsächlich mehr als man denkt. Der Vorteil einer statischen Seite ist naheliegend. Schnell, sicher und kostengünstig!
Unser Blick fiel auf die Template Sprache Nunjucks, anhand der wir jetzt Schritt für Schritt einige Basics anschauen
MONACOFRIENDS.COM - EINE AGENTURSEITE MIT EINEM FIXEN HEADER, NAVIGATION, FOOTER UND HAMMER INHALT ;)
Eine statische Webseite in der jede Unterseite eine eigene HTML Datei ist und individuell verlinkt sein müsste, wäre eine Themaverfehlung. Wir sind schließlich im Jahre 2019. Wir wollen wiederkehrende Elemente wie Header, Menü, Footer, etc auslagern und wiederverwenden. Somit brauchen wir includes und ein Basislayout welches aus diesen und einem Chunk von HTML besteht.
<!DOCTYPE html><html
<head {% block meta %}
<title> {{ title }} </title>
{% endblock %}
{% block cssjshead %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
{% block footerJS %}
BASIC JS
{% endblock %}
{% block additionalFooterJS %}
{% endblock %}
</body></html>
Wie man hier schon sieht, besteht das Template (layout.njk) aus nicht viel, wie aus einer klassischen HTML Struktur die an bestimmten Stellen mit Variablen bzw. mit Blöcken gefüllt wird. Interessant wird es jetzt wenn man die Datei index.njk ansieht. njk ist die Endung der Nunjucks Dateien.
{% import "partials/nav.njk" as nav %}
{% import "partials/navbar.njk" as navbar %}
{% import "partials/footer.njk" as footer %}
{% import "partials/loader.njk" as loader %}
{% set body = 'blog-posts job-post' %}
{% set title = 'Monaco Friends - Jobs' %}
{% extends "layout.njk" %}
{% block cssjshead %}
<style>
body { overflow-x: hidden !important; }
</style>
{% endblock %}
{% block content %}
{{ loader.loader() }}
{{ nav.nav(0,0,0,0,1,config) }}
{{ navbar.navbar(0,1) }}
Ja, was passiert hier? Erstmal importieren wir wiederkehrende Partials. Navigation, Footer und ein Ladeicon. Diese werden einmal programmiert, ausgelagert und eingebunden.
Anschließend erweitern wir unser layout.njk. Danach wird der Meta Title der Seite in einer Variablen gespeichtert und im Template ausgegeben. Ein kleiner Inline CSS Style der den CSS Block erweitert und schon werden Funktionen aus den zuvor inkludierten Partials aufgerufen.
Ja, richtig gehört.
Es gibt quasi Funktionen in HTML Templates. Gleich mehr dazu. Erst kommt noch der Content Block, der das eigentliche HTML der individuellen Seite enthalten kann.
Das wars schon fast. Jetzt brauchen wir uns nur noch ein dynamisches Partial ansehen und der Kreis schließt sich. Am Leichtesten ist es mit dem Partial nav.njk getan, welches für die Navigation und das Highlighting des aktiven Menüpunktes zuständig ist.
{% macro nav(about,work,stories,contact,jobs,config) %}
{% if about %} active{% endif %}
Ein Macro erlaubt wiederverwendbaren Content. Wie in einer Funktion lassen sich dort Felder übergeben, mit denen ich einfach if Abfragen hinterlegen kann um somit unterschiedliche Bereiche zu rendern.
In obrigem Beispiel wird eine Klasse gesetzt, um somit einen aktiven Menüpunkt zu zeigen. So leicht geht es mit wenig Aufwand wiederverwendbare und dynamische Seiten zu bauen.
In der nächsten Story gehen wir ein darauf ein, wie wir verwaltbaren dynamischen Inhalt mit Gulp und diversen anderen Funktionen automatisieren und die Seite weiter aufbauen.
Photo by Irvan Smith on Unsplash