Behind the scenes
5.7.2021 | Photo by Noel Broda on Unsplash

Wir haben unsere Website neu aufgebaut und möchten darüber berichten, welche Technologien wir nutzen.

Die klassischen CMS Websites nutzen für die Seiten-Auslieferung PHP mit einer Datenbank als Data Store. Ohne Caching werden bei jedem Aufruf der Website die Inhalte der Seite aus der Datenbank gelesen, die Webseite gerendert und vom Webserver ausgeliefert. Für dynamische Komponenten der Webseite, die nach dem Laden ausgeführt werden, wird in der Regel Javascript genutzt. Dies wird meist nach wie vor mit jQuery gelöst. Die Folge ist, dass jede Menge Javascript Plugins geladen werden, die für eine einzelne Seite evtl. gar nicht benötigt werden. Man kann die Plugins mit Hilfe des CMS in eine einzelne Javascript Datei überführen. Dies gilt ebenfalls für die CSS-Dateien. Fakt ist jedoch, dass diese Dateien sehr groß werden und vom Browser des Endnutzers geladen werden müssen.

Dieses Vorgehen führt zu schlechten Lighthouse Ergebnissen in den Browser Developer Tools, auf Pingdom oder auf PageSpeed Insights. In diesem Fall ist die Agentur oder der Website Ersteller gefragt hier gute Ergebnisse zu erzielen.

Dies gilt im Übrigen auch für die Größen der Bilder. Eine optimale Komprimierung der Bilder kann man mit der SqooshApp erreichen. Google Pagespeed moniert alle Medien, die zu groß sind und damit die Ladezeiten der Website erhöhen.

Einer der Gründe für die Erstellungen von Frameworks wie Vuejs, React und Angular für die Implementierung von stark dynamisch ausgeprägten Webapplikationen ist oben genanntes Verhalten. Durch die Verwendung von Komponenten ist die Testbarkeit und ein einfacherer Aufbau von Webseiten mit Hilfe von Komponenten möglich.

Frontend Technologie
Als Frontend Technologien haben wir Angular, Reactjs und Vuejs getestet und uns letztendlich für Nuxtjs entschieden.

Nuxtjs
Vuejs ist sehr leicht zu erlernen und mit Nuxtjs gibt es eine hervorragende Möglichkeit Webseiten als HTML Dateien zu generieren. Nuxtjs stellt Server Side Rendering (SSR) zur Verfügung, wenn man nicht nur HTML Dateien ausliefern möchte. REST-API- und GraphQl-Anbindungen sind ohne weiteres möglich, wobei man aber darauf achten sollte, dass API Keys nicht im transpilierten Javascript Code veröffentlich werden. Hot Reloading macht es uns einfach, Änderungen direkt auf unserem lokalen Rechner zu entwickeln. Das erleichtert den Entwiclungsprozess enorm. Wenn ein neues Website Release fertig gestellt wird, checken wir die Website in unser Git Repo ein. Daraufhin wird die Website komplett getestet, HTML generiert ein Docker Container gebaut, der in unser Docker Repository geladen wird. Danach erfolgt automatisch der Deploy des neuen Release. Mit diesem DevOps Workflow sind wir in der Lage unsere Website mehrfach am Tag zu aktualisieren.

Backend Technologien
Unser API's entwickeln wir mit Typescript und nutzen Nestjs, Prisma und Graphql. Für spezielle Anwendungen nutzen wir Golang.

Docker
Wir nutzen Docker und verteilen unsere Services über Loadbalancer auf unsere Docker Hosts. Der gesamte Prozess vom Rollout der SSL Zertifikate bis hin zum Container Lifecycle Management erfolgt vollautomatisch. Innerhalb von ein paar Minuten nach dem Deploy ist eine Website online. Das Einzige, was vorhanden sein muss, ist ein DNS Record der auf unsere Loadbalancer verweist. Für den Rollout haben wir aus dem Grunde eine Service Discovery in Golang entwickelt, mit deren Hilfe sich ein Docker Host am Loadbalancer registrieren kann und so automatisch neue Services im Loadbalancer onboarded werden, wenn eine bisher nicht bekannte App gestartet wird.

Damit sind wir in der Lage neue Microservices für unsere Dienstleistungen schnell und sicher zu betreiben und Kunden zur Verfügung zu stellen.

Content Management
Für das Content Management nutzen wir das nuxtjs/content Modul. Es ist ein git dateibasiertes Headless CMS. Die Texte werden als Markdown Text in einem Texteditor oder mit dem Live-Editing-Modus erfasst. Unsere Website wird mit Hilfe eines Git Repositories gespeichert und wird damit versioniert. So können wir den Stand der Website zu jedem beliebigen Zeitpunkt wiederherstellen.

Was kommt als nächstes?
Wir werden unsere Website erweitern, eine Shopping-Cart Lösung implementieren und alle Hosting Produkte auf der Website verfügbar machen.

Stay tuned!