Serverless Website - Ein Fallbeispiel mit Nunjucks (Part 1)
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) }}
hier steht der Inhalt ... 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.
Genau ihr Ding?
Ist dieses Thema interessant für sie? Oder haben sie
vielleicht eine ähnliche Herausforderung und möchten unsere Einschätzung
dazu haben?
Wir nehmen uns gerne 30 Minuten Zeit und tauschen uns in
einem kostenlosen Strategiegespräch mit ihnen aus!
Jetzt Termin buchen
Das wird Sie auch interessieren!
#performance #MARKETING #DIGITALISIERUNG
Für welches E-Commerce System soll ich mich entscheiden: Shopify vs. Magento vs. WooCommerce
Alle brauchen einen eigenen Online Shop! Aber wie lässt sich das sinnvoll umsetzen?
#DIGITALISIERUNG #performance #general #coding
Serverless Website - Ein Fallbeispiel mit Nunjucks (Part 1)
Langsame CMS Systeme mit ewigen Ladezeiten aufgrund schlechter Datenbankabfragen. Muss das wirklich sein? Wir zeigen am Beispiel unserer Seite eine Variante ohne Content Management System
#general #MARKETING #performance
Der Vergleich: Traditional vs Headless CMS
Eher Wordpress oder Strapi? Typo3 oder Contentful? Die Vor- und Nachteile kurz erklärt und welche Richtung wir in Zukunft einschlagen werden.