Hinter den Kulissen unserer neuen Webseite 🎉🎈🙌

Posted 22. October 2019 by Jan Becker, Alexsander KĂŒchler and Alexander von Studnitz – 4 min read

Wir freuen uns sehr, unsere brandneue Webseite vorstellen zu dĂŒrfen - gebaut mit den heißesten und neuesten Technologien des Jahrs 2019. Finden Sie heraus wie wir mit Hilfe des JAMStacks, einer modernen Serverarchitektur eine statisch generierte Webseite gebaut haben, die blitzschnell und super modern ist.


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.

Verschiedene Static Site Generatoren

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.

Gridsome Logo

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.

Figma Storyboard

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: '/uploads/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: '/uploads/mobile.png'
  technologies:
    - Vue
    - AWS
    - Nuxt
    - Go
    - Laravel

Folgendes Resultat:

Screenshot der Success Stories

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!


Hat Ihnen der Artikel gefallen? Wir wĂŒrden uns freuen, wenn Sie ihn teilen wĂŒrden.
Fragen und Feedback können Sie gerne an hello@clickbar.dev schicken