Recent Use Cases & Stories

Info

  • Lesedauer:
    5 min
  • Datum:
    13.3.2019

Tags

#DIGITALISIERUNG #performance #general #coding

Follow us!

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.

Photo by Irvan Smith on Unsplash

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.