Wir setzen auf den JAMstack

JAMstack ist eine moderne Architektur für Webseiten, basierend auf Javascript, APIs und vorgerendertem Markup. Diese sind schnell, sicher, kostengünstig und einfach skalierbar.

Bessere Perfomance

Im Gegensatz zu traditional entwickelten Webseiten, die meist ein dediziertes PHP Backend haben und somit bei jedem Abruf generiert werden, generiert man diese schon vorher und lädt den Markup statisch auf ein Content Delivery Network (CDN). So kann der Browser die Webseite ohne jegliche Serverausführungen herunterladen. Nichts ist schneller als das.

Höhere Sicherheit

Wo es keine Server gibt, kann auch nichts gehackt werden. Serverseitige Prozesse werden gegebenenfalls zu Microservices abstrahiert. Im Fall unserer Webseite war dies nicht notwendig, da die Pflege der Inhalte direkt über das Git-Repository erfolgt, in welchem auch der Webseitencode liegt.

Kostengünstig skalieren

Wo es keine Server gibt, müssen natürlich auch keine bezahlt werden. Anstatt sich einen Server zu mieten, der den ganzen Tag läuft und dessen ungenutzte Ressourcen auch bezahlt werden müssen, werden mit dem JAMstack nur die Dateien der Webseite auf ein CDN wie Netlify hochgeladen. So zahlt man nur einen Bruchteil dessen. Oft sogar nichts.

Wie setzt man den JAMstack um?

Als wir wussten, dass der JAMstack für uns in Frage kommt, war die nächste Frage: Wie sieht unser JAMstack aus? Es gibt viele verschiedene Static Site Generators (SSG) in einer Vielzahl von Programmiersprachen. Einige bekannte zur Zeit sind Gatsby, Hugo, Jekyll, Nuxt, Next und Gridsome.

Mit diversen Vue.js und Nuxt.js Projekte in der Vergangenheit, wäre Nuxt natürlich eine gute Wahl gewesen. Kurz vor dem Start fiel uns dann allerdings das aufstrebende Projekt namens Gridsome ins Auge. Dies ist das Vue.js-Pendant zu Gatsby, einem auf React basierenden Static Site Generator, welches sich einer sehr großen Beliebtheit erfreut.

Vorteile von Gridsome

• HTML ist vorgerendert
  • Schneller geht es nicht
  • gut für Suchmaschinenoptimierung
• Bilder werden automatisch optimiert
• Links auf der Seite werden vorgeladen
• Vue.js Single Page Application für schnelles Navigieren ohne eine Seite Nachladen zu müssen

Wo setzt man den JAMstack um?

Beim Hosting gibt es generell viele Optionen, an sich braucht man nur einen Webserver, der statische Inhalte hosten kann. Dennoch gibt es einige Anbieter, die sich auf den JAMstack spezialisiert haben und somit innovative Features mitbringen, welche die Entwicklererfahrung positiver gestalten.

Die aktuell bekanntesten sind Zeit Now und Netlify. Zeit Now hat einen starken Fokus auf Serverless, wohingegen bei Netlify die Benutzerfreundlichkeit unschlagbar ist. Beide Services bieten umfangreiche kostenlose Pläne an. Beispielsweise kann man bei Netlify problemlos eine Seite in Produktion betreiben, ohne einen Cent bezahlen zu müssen. Erst ab einem Traffic-Limit von 100 GB wird man zur Kasse gebeten.

Wir haben uns für Netlify entschieden, da es alle benötigten Features mitbringt und durch die Einfachheit in der Bedienung einfach nur traumhaft für Entwickler ist.

Netlify

Netlify macht das Hosten einer JAMstack Seite zum Kinderspiel. Unsere Webseite war in weniger als 5 Minuten online, vom ersten Einrichten bis hin zur Live-Webseite. Jedes Mal wenn neuer Code in unser Git-Repository gepusht wird, wird die Seite neu gebaut und ist innerhalb von weniger Minuten auch direkt live verfügbar.

Neue Versionen einer Seite können direkt auf speziellen Sub-Domains gehostet werden, dies ermöglicht bei größeren Änderungen diese auch mit verschiedenen Geräten in einer produktionsgleichen Umgebung ausgiebig zu testen.

Wie wir mit Gridsome innerhalb von 6 Wochen unsere Webseite neu designt haben

Von der Idee zum Code

Mithilfe des Prototyp-Tools Figma, skizzierten wir die ersten Screendesigns. Diese wurden dann sukzessive in Code umgewandelt, hauptsächlich Vue-Komponenten in Gridsome. Die Vue-Komponenten Architektur erlaubt es dabei einfache und wiederverwendbare Komponenten zu erstellen, wie zum Beispiel unsere Success Storys.

Anatomie einer Success Story

Im Vorfeld haben wir uns Gedanken gemacht, was wir mit einer Success Story erzählen möchten. Dabei sind wir zu dem Schluss gekommen, dass eine Success Story aus 6 groben Komponenten bestehen sollte:

1. Der Hero
2. Die Herausforderung
3. Die Lösung
4. Das Ergebnis
5. Der Kunde
6. Der clickbar. Ansprechpartner

Natürlich haben die jeweiligen Komponenten gegebenenfalls ihre eigenen Unterelemente mit entsprechender Hierarchie.

Diese Aufteilung macht es einfach, aus jeder dieser konzeptionellen Komponenten eine entsprechende Vue-Komponente zu erstellen, die am Ende im Success Story-Template zusammengebaut wird. Fast wie Lego.

Der Inhalt für die jeweiligen Success Storys kommen aus speziellen Text-Dateien im YAML-Format. Das YAML-Format ist sowohl für Entwickler als auch Maschinen einfach lesbar. Dies ist uns wichtig, da Menschen Code verstehen müssen, um gemeinsam daran arbeiten zu können. Somit verzichten wir auf eine Pflege in einem Datenbanksystem, was die Ressourcen von Servern und Entwicklern bei der Wartung deutlich spart.

Wie setzt sich die Lösung zusammen?

So wird aus diesem Textausschnitt:

solution:
  sections:
    - keyAspects:
        - title: 'Skalierbare Cloud Architektur'
          description: >
            Dank AWS Elastic Beanstalk, Auto Scaling und einer asynchronen
            Architektur können beliebig viele 3D Modelle gleichzeitig optimiert
            werden.  Diese intelligente Nutzung von Ressourcen sorgt für kurze
            Verarbeitungszeiten und geringe Betriebskosten.

        - title: 'Server Side Rendering'
          description: >
            Für maximales SEO und minimale Ladezeiten wird jede Seite der
            Rapidcompact Web-App schon zur Build-Zeit generiert. Anschließend
            sorgt ein CDN für die globale Verteilung sämtlicher Assets.

      image: '/images/blog/desktop.png'
    - keyAspects:
        - title: 'Stripe Integration'
          description: >
            Stripe ist einer der führenden Anbieter von Online-Zahlungsdiensten
            und ermöglicht die einfach Integration von Abonnements und
            Pay-As-You-Go Modellen, wie sie bei SaaS Plattformen immer weiter
            verbreitet sind.

        - title: 'Accessible UX Design'
          description: >
            Eine Nutzeroberfläche sollte nicht nur optisch ansprechend, sondern
            auch zugänglich und einfach bedienbar sein. Nach diesen Grundsätzen
            wurde das Design von Rapidcompact Cloud entworfen und getestet.

      image: '/images/blog/mobile.png'
  technologies:
    - Vue
    - AWS
    - Nuxt
    - Go
    - Laravel

Folgendes Resultat:

Mit diesen Werkzeugen gerüstet konnten wir mit ähnlicher Simplizität und Geschwindigkeit den Rest unserer neuen Webseite umsetzen.

Zusammenfassung

Dank des modernen Ansatzes konnten wir innerhalb kürzester Zeit unsere neue Webseite fertigstellen. Ermöglicht durch den JAMstack, in diesem Falle explizit Gridsome und Netlify konnten wir in extrem kurzer Zeit eine Lösung schaffen, welche sowohl kostengünstig, sicher als auch performant ist.

Sie haben Interesse oder weitere Fragen zum JAMstack?

Rufen Sie uns einfach an, wir nehmen uns gerne Zeit für Sie!