Author
Der Jamstack-Ansatz zur Erstellung statischer Websites beschreibt eine moderne Webentwicklungsarchitektur auf der Grundlage von JavaScript (J), APIs (A) und Markup (M). Dieser Ansatz entkoppelt das Front- und Backend von traditionell monolithischen Anwendungen. Ursprünglich bezog sich der Begriff auf einen bestimmten Technologie-Stack, wird aber heute als Ansatz zur Architektur von statischen Webanwendungen interpretiert.
Ein Ergebnis dieser Entwicklung von einem Technologie-Stack für die Webentwicklung zu einem Architektur-Stil ist, dass sich der Name unmerklich von JAMstack zu Jamstack geändert hat.
Was ist Jamstack?
Wie ein Serverless (Serverloser)-Ansatz bedient Jamstack eine Website oder Anwendung aus einem statischen Speicher und nutzt Microservices. Der Kern des Jamstack-Ansatzes für die Webentwicklung besteht darin, so viele Softwareaufgaben wie möglich von der Serverseite auf den Client zu übertragen.
Jamstack-Apps sind nicht per se serverlos, bei denen es darum geht, wie das Backend verwaltet wird, indem typische Serveraufgaben und -verwaltung an einen Cloud-Anbieter ausgelagert werden, dennoch haben sie viele Ähnlichkeiten.
Können wir Ihnen bei Ihrem nächsten Appentwicklungsprojekt helfen?
Flexible Modelle für Ihre Bedürfnisse!
Jamstack-Stärken
Jamstack-Websites und -Apps gewinnen zunehmend an Beliebtheit gegenüber traditionellen, monolithischen statischen Website-Architekturen – aufgrund folgender Eigenschaften:
- Schneller – Durch Prerendering und CDN-Bereitstellung werden statische Seiten schneller dargestellt.
- Sicherer – keine Schwachstellen auf dem Server oder in der Datenbank, da diese nicht verwendet werden.
- Skalierbar – CDN-Bereitstellung bedeutet, dass eine Jamstack-Anwendung automatisch skaliert wird, ohne dass die Entwickler die Kapazitäten erhöhen müssen, wenn eine höhere Nutzung oder plötzliche Ausschläge mehr Ressourcen erfordern.
Jamstack-Nachteile
Trotz aller Vorteile, die der Jamstack-Ansatz für die statische Webentwicklung mit sich bringt, ist der Ansatz nicht unbedingt immer die beste Wahl für eine neue Website oder App. Der Aufbau und die Pflege einer Jamstack-Website erfordert Zugang zu Webentwicklungsexpertise, die nicht billig ist.
Auch wenn die Eingewöhnung in ein Headless CMS, das Inhalte als Markup bereitstellt, nicht sonderlich schwierig ist, so ist es dennoch weniger anfängerfreundlich. Diejenigen, die für die Inhalte verantwortlich sind, wie z. B. Content Marketer und Redakteure, müssen möglicherweise neue Fähigkeiten erlernen, einschließlich der Verwendung von Markup. Die Alternative wäre die Einrichtung einer separaten, eher technischen Rolle, die für die Bearbeitung und Veröffentlichung von Inhalten zuständig ist. Allerdings steigen dadurch wiederum die Kosten.
Trotz der Nachteile kann die Migration einer bestehenden monolithischen statischen Website auf einer Plattform wie WordPress auf Jamstack viele technische Vorteile mit sich bringen und, wenn sie gut umgesetzt wird, die Leistung sowie die Benutzerfreundlichkeit erheblich verbessern. Es handelt sich jedoch um eine Investition, die nicht immer in die aktuelle Unternehmensstrategie passen wird.
Wenn Sie besprechen möchten, ob Jamstack für Ihr nächstes statisches Webentwicklungsprojekt oder ob Sie eine bestehende Anwendung migrieren sollten, kontaktieren Sie uns. Unsere Experten stehen Ihnen gerne mit ihrer Erfahrung zur Seite und geben Ihnen eine ausführliche Einschätzung.
Lassen Sie uns in der Zwischenzeit die technischen und konzeptionellen Stärken und Schwächen von Jamstack etwas näher beleuchten.
Wann funktioniert IT-Outsourcing?
Und wann nicht ?
Statische Website vs. Dynamische Website
Für die Einführung von Jamstack ist es sinnvoll, zunächst den Unterschied zwischen dynamischen, auch Real-Time (Echtzeit) genannten, und statischen Websites bzw. Apps zu definieren. Alle Webanwendungen fallen in eine dieser beiden Gruppen.
Bei dynamischen Anwendungen wird bei der Anforderung einer Webseite durch einen Nutzer die Seite zum Zeitpunkt der Anforderung erfasst und dann im Browser dargestellt. Ein bekanntes Beispiel für dynamische Anwendungen sind Social-Media-Feeds, die automatisch im Browser aktualisiert werden, ohne dass der Browser neu geladen werden muss.
Bei statischen Anwendungen hält der Server die Seiten zum Abruf bereit. Die Seite, die Sie gerade lesen, wird zum Beispiel statisch geladen. Der Inhalt wurde im CMS erstellt und hochgeladen, ein Klick auf die URL zum Aufrufen der Seite. Ihr Browser schickte eine Anfrage an den Server, auf dem unsere B2B-Site gehostet wird, der wiederum den Code der statischen Seite zum Lesen schickte.
Wenn dieser Artikel in unserem CMS aktualisiert würde, während Sie ihn lesen, wären die Änderungen auf Ihrem Bildschirm nicht sichtbar, es sei denn, Sie aktualisieren die Seite und senden somit eine neue Anfrage an den Server.
Dynamische Websites zeichnen sich durch ihre Funktionalität, ihre Anpassungsfähigkeit und ihre leichte Aktualisierbarkeit aus. Wenn Sie sich für einen dynamischen Ansatz entscheiden, können Sie komplexe Systeme erstellen. Der Nachteil der meisten dynamischen Websites ist der vergleichsweise hohe Verbrauch von Systemressourcen – ein Webserver und eine Datenbank sind erforderlich.
Statische Websites, wie diese hier, bestehen aus fertigen Webseiten (HTML, JS, Grafiken, Schriftarten), die heruntergeladen und auf dem Server gespeichert werden. Die Vorteile statischer Websites sind kurze Ladezeiten und eine bessere Widerstandsfähigkeit gegen Hackerangriffe. Wenn sie richtig aufgebaut sind, können statische Websites auch hohe Besucherzahlen besser verarbeiten in Vergleich zu dynamischen Websites.
Allerdings gibt es auch Nachteile. Um auch nur die kleinste Änderung an einer statischen Website vorzunehmen, müssen Sie sie von Grund auf neu erstellen. Das ist genau die Herausforderung, für die Static Site Generators (SSG) und Jamstack entwickelt wurden.
Jamstack Technologien – JavaScript, APIs, Markup
Der ursprüngliche JAMstack konzentrierte sich auf einen Technologie-Stack aus JavaScript, APIs und Markup:
JavaScript (JS)
Eine Programmiersprache zur Programmierung dynamischer Funktionen. JavaScript wird in so gut wie allen modernen Webanwendungen für das Frontend und zunehmend auch für das Backend verwendet (z. B. Node.js).
APIs
Eine Reihe von Technologien, die Unterprogrammdefinitionen, Kommunikationsprotokolle und Werkzeuge für die Erstellung von Software umfassen.
Markup
Eine Computersprache, die Tags enthält, um Elemente innerhalb eines Dokuments zu definieren. Sie unterscheidet sich von einer typischen Programmiersyntax und ist auch für Personen lesbar. Die am häufigsten verwendeten Markups sind HTML und XML.
Jamstack Architektur
JAMstack hat sich zu Jamstack hin entwickelt, welches sich allgemeiner auf den architektonischen Ansatz zur Erstellung entkoppelter statischer Websites bezieht und sich weniger mit der speziellen Wahl des dafür verwendeten Tech-Stacks befasst. Es gibt eine Reihe von Kontroversen darüber, welche Websites und Anwendungen als „Jamstack“ klassifiziert werden können, wobei die Architektur einen Konsens darstellt:
Entkopplung von Back- und Frontends
Front- und Backend sind in einer Jamstack-Webanwendung immer entkoppelt, was der offensichtlichste Unterschied zu einer klassischen monolithischen Architektur ist.
Das Frontend kann von Grund auf in JavaScript oder mit einer beliebigen JS-Bibliothek bzw. einem Framework wie Reactjs, Angular oder Vuejs kodiert werden. Häufig wird es auch mit einem statischen Website-Generator wie Next.js, Gatsby oder Hugo erstellt.
Inzwischen gibt es auch Jamstack-Site-Builder wie Stackbit, Builder.io und CloudCannon, die die Einstiegshürde für technisch weniger versierte Personen senken und Entwicklern zeitgemäße Werkzeuge für eine effiziente Anpassung bieten. Der Nachteil von Website-Buildern ist, dass sie den Code unweigerlich aufblähen und die Geschwindigkeit verringern. Allerdings nicht in demselben Ausmaß wie z. B. bei WordPress-Buildern.
Backend und Frontend sind in der Regel über APIs integriert und serverseitige Prozesse können serverlose (serverless) Funktionen nutzen.
Von Natur aus statisch
Jamstack-Websites sind immer statisch und enthalten dynamische Elemente, die in der Regel vorgerendert sind. Sie werden in Form von Diensten Dritter eingeführt, beispielsweise Disqus für Kommentare. Das Frontend von Jamstack-Anwendungen wird in HTML-, CSS- und JavaScript-Dateien erstellt und kompiliert.
Statische Websites werden schneller geladen und lassen sich leichter skalieren. Der Nachteil ist die starke Abhängigkeit von Drittanbieterdiensten bei dynamischen Elementen.
Schrittweise erweitert
Vorgerenderte Websites können durch die Einführung von JavaScript nur bei Bedarf verbessert werden, wodurch die Browserleistung optimiert wird.
Optimieren einer Jamstack-Anwendung
Jamstack.wtf empfiehlt die folgenden Best Practices, um die Leistungsfähigkeit eines Jamstack-Build zu optimieren:
Ein CDN verwenden
Vorgefertigtes Markup bedeutet, dass eine statische Website über ein Content Delivery Network (CDN) für optimale Leistung und automatische Skalierung bereitgestellt werden kann.
Atomare Deployments
Die Verwendung von atomaren Deployments, die einen vollständigen Snapshot der Website abbilden, helfen dabei, nach Aktualisierungen weltweit eine einheitliche Website-Version zu erhalten.
Cache-Invalidierung im CDN einstellen
Ihre CDN-Einstellungen sollten die Cache-Invalidierung für neue Builds aktivieren, so dass Aktualisierungen fast sofort nach der Freigabe live gehen.
Vollständige Versionskontrolle
Verwenden Sie ein Versionskontrollsystem wie Git, um Ihre Codebasis zu hosten, damit der Dateiversionsverlauf aufgezeichnet wird und alle Änderungen nachvollziehbar sind. Die Versionskontrolle erleichtert auch eine effizientere Zusammenarbeit.
Builds automatisieren
Automatisieren Sie die Benachrichtigung des Servers über neue Builds, damit er das Projekt erstellen und das CDN mit der neuen Version aktualisieren kann. Dies wird in der Regel über Webhooks erreicht.
Entwickeln einer Jamstack-basierten Website
- Wählen Sie einen Host mit einem schnellen CDN, um Ihre statischen Dateien bereitzustellen. Das können Amazon Web Services (AWS) wie S3, Netlify oder Custom Setups mit CloudFlare sein.
- Entscheiden Sie sich für einen Static Site Generator (SSG) oder programmieren Sie Ihr Frontend von Grund auf in JavaScript. Es gibt eine Vielzahl von SSGs, die beliebtesten sind:
- Jekyll ( entwickelt in Ruby),
- Hugo (basiert auf Googles Programmiersprache Go),
- Gatsby (verwendet ReactJS),
- Hexo (erstellt mit Node.js).
- Entscheiden Sie sich für ein Git-basiertes oder API-gesteuertes CMS.
- Wenn Sie dynamische Funktionen wie Benutzerkommentare, Formulare, Suche, Zahlungen, Medienverwaltung benötigen, können Sie Dienste von Drittanbietern wie Disqus (Kommentare), FormKeep (Formulare), Lunr (Suche), Stripe (Zahlungen) und Cloudinary (Medienverwaltung) nutzen.
Beispiele für Jamstack-Websites und -Anwendungen
Wenn Sie sich immer noch nicht sicher sind, ob JAMstack für ein kommerzielles Projekt geeignet ist, kann es hilfreich sein, sich einige aktuelle Use-Cases anzusehen. Beispiele für Jamstack-Websites und -Apps sind unter anderem:
Smashing Magazine ( Medium zur Webentwicklung)
The Covid Tracking Project (Pandemie-Datenprojekt, gesponsert von The Atlantic)
DevPodcasts.app (Podcasts-Plattform für Softwareentwickler)
Sequoia Capital (Unternehmenswebsite des Wagniskapitalriesen)
Victoria Beckham Beauty ( E-Commerce-Website)
Fazit – Jamstack eignet sich hervorragend für statische Anwendungen (im richtigen Projekt)
Jamstack ist ein großartiger Ansatz für statische Websites mit zahlreichen Vorteilen für Websites und Anwendungen, bei denen die Skalierbarkeit im Vordergrund steht. Auch für Websites, bei denen die Ladegeschwindigkeit und ein optimales Benutzererlebnis Priorität haben sowie für solche, die nur eine begrenzte Anzahl von genau definierten dynamischen Funktionen benötigen.
Jamstack ist jedoch nicht die ideale Lösung, wenn Sie nicht das nötige Budget haben oder es für Sie keine Rolle spielt, intensiv in die Erstellung und Wartung einer Website oder App zu investieren. Auch wenn Sie nicht die Ressourcen bzw. die Absicht haben, Content Manager/Redakteure auszubilden bzw. neu einzustellen, die mit Markup arbeiten können, oder einen größeren technischen Support bereitzustellen, ist dies nicht der richtige Weg.
Wir sind ein Webentwicklungsunternehmen und unsere B2B-Unternehmensseite ist auf WordPress aufgebaut. Zum jetzigen Zeitpunkt sind wir nicht der Ansicht, dass die Vorteile, die eine Migration zu Jamstack mit sich brächte, die zusätzlichen Ressourcen kompensieren würden, die dafür bereitgestellt werden müssten.
Wie bei den meisten Tech-Stack-Entscheidungen ist auch die Entscheidung für Jamstack sowohl eine strategische als auch eine geschäftliche bzw. technische Entscheidung.
Wenn Sie jedoch der Meinung sind, dass Jamstack die richtige technische und strategische Ausrichtung für Ihr Webentwicklungsprojekt sein könnte, oder wenn Sie bereits zu dem Schluss gekommen sind, dass Jamstack das Richtige für Sie ist, würden wir uns freuen, Ihnen mit unserer Erfahrung bei der Entscheidung zu helfen. Wir erstellen Ihnen innerhalb von 24 Stunden ein Angebot. Kontaktieren Sie uns einfach!
K&C - Wir schaffen innovative Tech-Lösungen seit über 20 Jahren.
Kontaktieren Sie uns, um Ihre individuellen Bedürfnisse oder Ihr nächstes Projekt zu diskutieren.
