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