Zur Startseite

Was ist JAMStack? Die neue Architektur für Websites

Veröffentlicht am
939 Wörter - Lesezeit: ca. 5 Minuten

Der JAMStack ist eine Architektur zur Erstellung von Websites und Anwendungen. Das "JAM" in Jamstack steht für JavaScript, APIs und Markup-HTML. Es bietet Geschwindigkeit, Flexibilität beim Hosting und Sicherheit.

Was ist JAMStack? Die neue Architektur für Websites | Titelbild

Viele Leute haben schon von WordPress oder Drupal gehört – das sind Content-Management-Systeme, die in der Webentwicklung nicht wegzudenken sind. Aber was ist, wenn Du Deine Website schneller haben möchtest? Was, wenn Du flexibleres Hosting wünscht? Was, wenn Du versuchst, die Sicherheit zu erhöhen? Wenn Du mit dem JAMStack baust, ist das möglich!

Was JAMStack bedeutet

J steht für JavaScript: JavaScript ist eine interpretierte Programmiersprache, die als Skriptsprache für Webbrowser fungiert und als Hauptskriptsprache für die meisten Webseiten dient. Es ist eine einfache, leichtgewichtige und flexible Programmiersprache, die verschiedene Eigenschaften besitzt, die sie zu dem machen, was sie heute ist. 

A steht für API: APIs bieten eine Möglichkeit, asynchrone Anfragen an Webseiten zu stellen, die auf verschiedenen Servern laufen. Sie können sowohl bestimmte Daten zurückgeben als auch Daten zurück an den Server senden. Dadurch können Websites untereinander kommunizieren. So kann man unter anderem externe Dienste in die Website einbauen.

M steht für Markup: HTML ist das, was Du benutzt, um den Text und die Textformatierung auf einer Webseite zu erstellen. Markup beschreibt im Prinzip nur die Summe aller HTML-Inhalte. Für den JAMStack bedeutet das, dass die einfachen Textinhalte nicht von einer Datenbank bereitgestellt werden, sondern als fertiger Markup.

Wie JAMStack Websites funktionieren

Eine JAMStack-Anwendung hat keinen zentralen großen Server, auf dem das gesamte System läuft. Vielmehr werden viele voneinander unabhängige, aber in sich funktionale, Systeme genutzt. So werden Teillösungen geschaffen, die als API zur Verfügung gestellt werden und die Webentwicklung signifikant verändern.

Statt große monolithische CMS-Systeme aufzubauen, die alles auf einmal machen. Wird das Frontend und das Backend getrennt voneinander betrachtet und unabhängig voneinander entwickelt. Auch dynamische Teilbereiche einer Website werden als Insellösungen betrachtet. Ein Beispiel:

  • Das Frontend wird mit React gebaut
  • Die Inhalte werden durch ein Headless-CMS verwaltet
  • Die Kontaktdaten werden von der Google MyBusiness API bereitgestellt
  • Für den Mitgliederbereich wurde eine eigene API-Lösung entwickelt

Entwickler werden nun noch stärker gefordert einen Überblick über verschiedene Ansätze in der Webentwicklung nachzudenken und sind nicht von einzelnen Systemen abhängig.

Contentpflege

Da wir kein CMS und keine Datenbank haben und wir als Entwickler nicht wollen, dass Redakteure im Quellcode rumpfuschen, benötigen wir eine Lösung, wie die Inhalte gepflegt werden können. Die Abhilfe schaffen Headless Systeme.

Du kennst bestimmt die typischen Programme wie WordPress, Typo3 oder Drupal. Diese Systeme sind typische Beispiele für die üblichen CMS Systeme. Sie übernehmen sowohl die Verwaltung der Daten und wie diese dargestellt werden.

Ein Headless CMS kümmert sich nur um die Daten. Die Inhalte werden dann meist über eine REST-API oder GraphQL-API zur Verfügung gestellt und können so in verschiedenen Programmen geladen werden. So kann man anhand der Datenbasis mehrere Systeme bespielen und unter anderem auch die eigene Website.

Ein weiterer Vorteil von einem Headless CMS ist, dass man Logiken im Backend aufzubauen kann. Mit den sogenannten „Collections“ definiert man welchen Datensatz man definieren will und ergänzt diese Collection durch Felder. Dadurch entsteht ein eigener riesiger Baukasten, indem man selbst definieren, in welche Form die Daten im CMS gepflegt werden sollen.

Warum JAMStack Websites schneller sind

Die JAMStack Websites werden zudem überwiegend mit einem Static Site Generator gebaut. Das Frontend muss nicht aufwendig von einem Server generiert werden (was zum Beispiel WordPress und Drupal machen), sondern es wird einfach vor generiert. Wenn nun jemand Deine Website besucht, muss der Server nicht aufwendig die Seiten generieren, sondern spielt ganz einfach die fertige Website als statische Datei aus. Dynamische Inhalte werden ganz einfach per JavaScript nachgeladen. 

Warum ist das schneller? Da die meisten Websites und Unterseiten eher statisch sind und keine Daten reinladen, ist dieses Vorgehen praktischer in der Umsetzung.

Wieso das Hosting günstiger ist

Dadurch, dass die meisten JAMStack-Websites statisch generiert werden, ist das Hosting für diese Websites erschwinglich. Hohe Rechenleistung wird nicht benötigt, da der Server nichts verarbeiten muss und nur die Website ausliefern muss. Die ganzen fertig generierten Dateien werden einfach auf den Server hochgeladen. Kombiniert man dieses System mit einem zuverlässigen CDN-Service wie Netlify, steht der Geschwindigkeit nichts mehr im Weg.

Warum sie trotzdem flexibel sind

Der statische Aspekt einer JAMStack-Website lässt denken, dass diese Websites nicht dynamisch sind und keine Daten verarbeiten können. Mit JavaScript können clientseitig Daten in die Webseite reingeladen werden. APIs, die clientseitig nicht kommuniziert werden dürfen, können durch serverlose Datenverarbeitung (Serverless-Functions) als Proxy in eine Website eingebaut werden. So kann man auch mit JAMStack-Websites komplizierte Mitgliederseiten oder Online-Shops realisieren.

Der Nachteil

Die Vorteile für diese Seiten überwiegen. Dennoch hast Du bestimmt noch nichts von JAMStack-Websites gehört. Das liegt schlicht daran, dass Du für diese Website wirklich programmieren können musst. Wir reden hier von echter Entwicklung mit Test-Driven-Development und CI/CD-Pipelines. Websites, die wir einfach zusammenzuklicken über WordPress oder anderen Baukastensystemen profitieren nicht vom neuen Ansatz. Dadurch haben diese Websites nur wenig Popularität, obwohl die Vorteile wie Skalierbarkeit überwiegen.

Dieser Nachteil ist für uns Programmierer auch gleichzeitig ein großer Vorteil. Die Developer Experience für solche Seiten ist extrem angenehm. Wir können diese Websites ohne aufgeblähte Oberflächen programmieren und können so rasante Websites realisieren. Dennoch können wir aber mit einem Headless CMS den Redakteuren eine Oberfläche bieten, sollte das gewünscht sein.

Ein weiterer Nachteil kann sein, dass Kunden von dem Webentwickler abhängig sind. Natürlich sollte die Regel sein, dass erfahrene Entwickler an einer Website arbeiten, doch die Realität sieht meist anders aus. Eine einfache Änderung an der Seite kann dazu führen, dass der Kunde überfordert ist, da man sich nicht einfach in ein CMS einloggen kann. Daher bieten wir neben normalen Websites auch unser Website-Abo an. So musst Du als Kunde Dich um nichts kümmern und profitierst von den JAMStack-Vorteilen.

Fazit

JAMStack-Websites sind in den Augen unserer Entwickler die Zukunft für jede Art von Website. Die Kosten sind extrem niedrig und die Seiten können ohne hohe Serverkosten skalieren. Durch die Integration von APIs kannst Du alle gewünschten Funktionalitäten integrieren. Der Geschwindigkeitsvorteil ist ebenfalls nicht zu ignorieren!

 

Website-Checkliste

Website-Checkliste

Teste Deine Website auf Herz und Nieren mit dieser interaktiven Checkliste.

Zum Newsletter anmelden

Mit dem Absenden bestätigst Du, dass Du unsere Datenschutzerklärung akzeptierst.