Erfahren Sie hier, wie Jamstack moderne Entwicklungspraktiken mit statischen Webseiten der alten Schule kombiniert, damit Entwickler schnelle Websites schneller erstellen können. [...]
Jamstack ist eine angesagte Webentwicklungsphilosophie, die darauf abzielt, sowohl die Webentwicklung als auch die Zeit für das Herunterladen einer Webseite zu beschleunigen. Auf der Grundlage von Devops und CI/CD stellt Jamstack altbewährte Techniken für die Erstellung interaktiver Webseiten auf den Kopf und verlagert die Codeausführung während der Ladezeit weg von Webservern und hin zu JavaScript im Browser und externen Diensten, auf die über APIs zugegriffen wird. Das Endergebnis ist ein entwicklerfreundlicher Ansatz für die Erstellung statischer Webseiten, die sehr schnell gerendert werden und leicht für verschiedene Plattformen angepasst werden können.
Die Architektur von Jamstack
Jamstack ist eine Webanwendungsarchitektur, die auf drei Säulen basiert, die die Initialen in ihrem Namen bilden: JavaScript, APIs und Markup. Die Webseiten auf einer Jamstack-Website bestehen aus einer Standard-Markup-Sprache, sodass sie überall erstellt und getestet werden können, ohne dass Abhängigkeiten von Anwendungsservern oder serverseitigen Technologien wie Node.js bestehen. Alle interaktiven Funktionen werden durch Standard-JavaScript-Code bereitgestellt, der im Browser ausgeführt wird und über HTTPS Anfragen an wiederverwendbare APIs stellt. Diese Anfragen werden für den Zugriff auf externe Daten oder andere Funktionen verwendet, die nicht in die Webseite selbst integriert werden können.
Um zu verstehen, warum Jamstack revolutionär ist, betrachten Sie den LAMP-Stack, der beispielhaft für die Art und Weise ist, wie die meisten Entwickler in den letzten 15 Jahren über Webentwicklung gedacht haben. LAMP steht für Linux (das Betriebssystem, auf dem die meisten Webserver laufen), Apache (die Serversoftware, die auf diesen Linux-Rechnern läuft), MySQL (die Datenbank, in der die Daten der Webanwendung gespeichert werden) und PHP/Perl/Python (die Sprache, mit der der serverseitige Code geschrieben wird). Wenn Sie Ihren Browser auf eine LAMP-basierte Website richten, führt der Webserver den serverseitigen Code aus, der die Webseite im laufenden Betrieb generiert und die Daten nach Bedarf aus der MySQL-Datenbank abruft.
Die LAMP-Architektur ermöglicht es Entwicklern, dynamische und interaktive Websites zu erstellen, erfordert aber auch einen leistungsstarken Webserver – und je mehr Datenverkehr eine Website hat, desto mehr serverseitige Rechenleistung wird benötigt. Selbst mit einem leistungsstarken Server kann es lange dauern, bis dynamische Webseiten erstellt und geladen sind. In einer Welt von Menschen mit kurzer Aufmerksamkeitsspanne, die oft über ihr Handy im Internet surfen, ist diese Verzögerung zu einem großen Problem geworden.
Jamstack entstand als Teil der Bewegung für statische Websites, die Mitte der 2010er Jahre als Reaktion auf dieses traditionelle Modell der Funktionsweise einer Website entstand. Um Jamstack zu verstehen, müssen Sie die Technologie hinter statischen Websites verstehen.
Statische Websites und Jamstack
Wenn Sie einem völligen Neuling erklären müssten, wie das Web funktioniert, könnte das in etwa so aussehen: Irgendwo im Dateisystem eines Webservers befinden sich HTML-Dateien, die über HTTP-Adressen zugänglich sind, die ein Webbrowser herunterlädt und dann interpretiert, um eine Webseite zu erstellen. Aber das ist eine Beschreibung einer statischen Website: Sie geht davon aus, dass die HTML-Dateien bereits vorhanden sind, wenn der Webbrowser nach ihnen sucht. In den letzten zehn Jahren wurde das Web jedoch weitgehend von dynamischen Websites beherrscht, die HTML-Dateien als Reaktion auf Webanfragen spontan generieren, oft auf der Grundlage von Parametern, die dem Webserver über Formulare oder in der URL selbst übergeben werden.
Statische Website Generatoren
In den Anfängen des Internets, als Webseiten ausschließlich statisch waren, schrieben viele Webentwickler den HTML-Code von Hand. Als die Webseiten immer komplexer wurden, kamen Tools wie Dreamweaver von Macromedia auf und begannen, statische HTML-Seiten zu generieren. Als die Bewegung für statische Websites an Fahrt aufnahm, entstand eine neue Welle von Generatoren für statische Websites, darunter Gatsby, Hugo und Jeckyll. Im Gegensatz zu WYSIWYG-Tools wie Dreamweaver sind die Generatoren für statische Websites kommandozeilengesteuert und so konzipiert, dass sie sich gut in CI/CD-Prozesse integrieren lassen. Diese Tools generieren HTML-Dateien, die oft auf in Markdown geschriebenen Inhalten basieren, und laden sie automatisch in ein Versionskontroll-Repository wie GitHub hoch. Sobald diese Dateien als produktionsreif markiert sind, werden die statischen Seiten auf der Live-Website automatisch aktualisiert.
Content-Delivery-Netzwerke
Wichtig ist, dass statisch in diesem Zusammenhang nicht bedeutet, dass es sich um einfache Web-1.0-Seiten handelt, die nicht interaktiv sind. Diese Seiten können erweitertes JavaScript enthalten, das im Browser ausgeführt wird und API-Aufrufe an Datenbanken, serverseitige Funktionen oder gehostete serverlose Funktionen vornimmt. Da jedoch nichts davon auf dem Webserver ausgeführt wird, benötigt eine statische Website keinen leistungsstarken Webhost mit einer Datenbank. Viele statische Websites werden in Content-Delivery-Networks (CDNs) bereitgestellt, wo die Inhalte auf mehreren Servern weltweit gespiegelt werden, um den Benutzern überall schnell zur Verfügung zu stehen.
Mathieu Dionne, Marketingleiter bei Snipcart, beschreibt in einem Blogbeitrag [engl.] die Anfänge dieser neuen Welt der statischen Websites und erwähnt, dass um 2015 „die Netlify-Gründer … gerade den Begriff ‚Jamstack‘ erfunden hatten, um die negative Konnotation von ’statischem Web‘ zu umgehen.“
Wir haben den Jamstack-Prozess in diesem Abschnitt beschrieben. Lassen Sie uns nun kurz auf Netlify und seine Rolle im Jamstack-Ökosystem eingehen.
Netlify und Jamstack
Netlify ist ein Unternehmen für Cloud Computing und Webhosting, dessen Mitbegründer Mathias Biilmann den Begriff Jamstack geprägt hat. Die Dienste von Netlify sind auf Kunden zugeschnitten, die Websites auf der Grundlage der Jamstack-Philosophie erstellen möchten.
Netlify behauptet, ein spezifisches Problem geknackt zu haben, das statische Websites behindert, nämlich die Invalidierung des Cache. Datenbankgestützte dynamische Websites verbrauchen zwar viele Serverressourcen, aber Sie können sicher sein, dass sie jedem Besucher die neueste Version Ihrer Website anzeigen. Da Jamstack-Websites oft auf mehreren verteilten Servern eines CDN gehostet werden, sind Aktualisierungen weniger einfach. Es kann zwischen einigen Minuten und Stunden dauern, bis jeder CDN-Server herausgefunden hat, dass seine im Cache gespeicherte Version der Website nicht mehr gültig ist. Um dieses Problem zu umgehen, bietet das CDN von Netlify eine sofortige Invalidierung des Cache für HTML-Dateien.
In den Jahren, seit Netlify die Jamstack-Fahne hochgehalten hat, hat das Unternehmen die Technologie als Rückgrat seines PaaS-Angebots genutzt und eine Content-Plattform für große Unternehmen wie Nike und Peleton bereitgestellt.
Jamstack mit Gatsby
Netlify ist nicht der einzige Anbieter von Jamstack-Hosting-Lösungen und verfügt über keinerlei Markenzeichen oder Eigentumsrechte an dem Begriff. Es gibt eine Vielzahl von Jamstack-Hosting- und Bereitstellungslösungen, und die meisten der großen Cloud-Anbieter sind mit von der Partie, darunter Amazon Web Services, Google Firebase und Microsoft Azure. Auch andere, spezialisiertere Unternehmen sind in diesen Bereich eingestiegen, darunter Gatsby, Inc. mit dem gleichnamigen Generator für statische Websites.
Gatsby (das Unternehmen) hat auf der Grundlage des Gatsby-Site-Generators ein vielversprechendes Dienstleistungsangebot aufgebaut. Aufgrund seiner Open Source-Wurzeln wird der Gatsby-Site-Generator auch von anderen Dienstleistern angeboten, zu denen auch Netlify gehört.
Das CMS ohne Kopf
Eine Website zu erstellen und zu hosten ist natürlich nur der Anfang, wie Sie wissen, wenn Sie jemals eine Website verwalten mussten. Sie brauchen auch eine Möglichkeit, neue Inhalte zu erstellen und sie Ihrer Website hinzuzufügen. Da die Personen, die diese Aufgabe übernehmen, in der Regel keine Programmierer sind, benötigen sie ein benutzerfreundliches Tool, nämlich ein Content-Management-System (CMS). Herkömmliche CMS wie WordPress bieten eine Back-End-Benutzeroberfläche (UI), über die Sie Website-Inhalte eingeben, eine Datenbank verwalten, in der diese Inhalte gespeichert werden, und dynamische Webseiten erstellen können, die diese Inhalte als Reaktion auf Browseranfragen präsentieren.
CMS für Jamstack-Websites funktionieren anders und werden im Allgemeinen als „headless“ bezeichnet. Ein Headless-CMS bietet eine Benutzeroberfläche für die Eingabe und Verwaltung von Inhalten und eine Datenbank oder ein anderes Speichermedium, generiert aber selbst keinen HTML-Code, den ein Browser auswerten kann. Stattdessen verwenden die statischen HTML-Seiten der Website JavaScript, um die APIs des CMS aufzurufen, und das CMS gibt die Inhalte in einem Format zurück, das JavaScript in eine Webseite umwandeln kann.
Dieses System trennt Inhalte und Darstellung vollständig voneinander, was natürlich ein altes Ideal der Programmierung ist. Da das CMS über eine zugängliche API verfügt, können mehrere Webseiten es problemlos nutzen. Wenn Sie beispielsweise separate Versionen Ihrer Website für Handys, Desktops und Smartwatches erstellt haben, können alle diese Versionen auf dieselben im CMS gespeicherten Inhalte zugreifen.
Netlify hat, wie zu erwarten, sein eigenes Angebot in diesem Bereich, NetlifyCMS genannt, aber es gibt auch andere Angebote; der Entwickler Nebojsa Radakovic stellt sie in seiner Einführung in Headless CMSes vor [engl.]. Auf dieser Liste stehen viele aufstrebende Unternehmen, aber auch ein sehr bekannter Name. Während wir WordPress als Beispiel für ein traditionelles CMS verwendet haben, kann es auch als Headless CMS betrieben werden, um eine Jamstack-Site zu betreiben.
Warum Jamstack?
Wir haben viele der Vorteile von Jamstack bereits erwähnt, aber es lohnt sich, sie noch einmal zusammenzufassen, damit Sie einen vollständigen Überblick haben:
- Geschwindigkeit: Statische Websites laden schneller – und das ist nicht nur eine Frage der Bequemlichkeit. Google straft langsame Websites ab, indem es ihren Suchrang herabsetzt, und Kunden, die an schnelle Antworten gewöhnt sind, brechen E-Commerce-Transaktionen oft ab, wenn die Schritte langsam geladen werden.
- Komfort für Entwickler: Entwickler können statische Websites mit den Devops-Techniken erstellen, die die Praktiken und die Produktivität der Branche verändert haben. Und die Jamstack-Philosophie führt zu Site-Stacks, die eine saubere Trennung der Bereiche ermöglichen, so dass sich die Entwickler auf ihre Spezialgebiete konzentrieren können: Front-End-Designer und -Entwickler können Sites erstellen, ohne eine serverseitige Sprache beherrschen zu müssen, während Back-End-Entwickler sich auf APIs konzentrieren können. Inhaltliche Fragen werden vollständig im Bereich des CMS behandelt.
- Flexibilität: Statische Websites können von herkömmlichen Webservern, CDNs, spezialisierten Diensten oder einer Kombination aus diesen drei Möglichkeiten gehostet werden. Und da Headless CMS mit Front-Ends über APIs interagieren, können Sie problemlos Websites für mehrere Plattformen erstellen, die denselben Inhalt nutzen.
Wann Sie Jamstack nicht verwenden sollten
Bei all diesen Vorteilen muss jedoch gesagt werden, dass Jamstack nicht für jeden geeignet ist. Die Kehrseite der Tatsache, dass Jamstack auf die Bedürfnisse von Entwicklern zugeschnitten ist, ist, dass Sie, wenn Sie eine Jamstack-basierte Website betreiben wollen, mehr auf Entwickler angewiesen sind, als Sie vielleicht wollen. Für Unternehmen, die bereits über ein engagiertes Web-Entwicklungsteam mit den für Jamstack erforderlichen Fähigkeiten verfügen oder bereit sind, ein solches einzustellen, ist das nicht so schlimm.
Viele kleinere Unternehmen sind jedoch daran gewöhnt, kommerzielle Standard- oder Open Source-Software zu verwenden, mit der sie ihre Websites betreiben können, ohne dass sie sich täglich um die Entwicklung kümmern müssen. Insbesondere E-Commerce-Websites neigen dazu, sich auf eine Vielzahl von Plugins und Bibliotheken zu verlassen, die im Laufe der Jahre für herkömmliche Webhosting-Lösungen entwickelt wurden; ihre Jamstack-Äquivalente sind nicht so weit verbreitet oder ausgereift, was bedeutet, dass Jamstack nicht immer für E-Commerce geeignet ist.
Ist Jamstack beliebt?
Trotz des Hypes, der um Jamstack gemacht wird, ist der Anteil der Websites, die mit Jamstack erstellt werden, derzeit relativ gering. Der Web Almanac schätzt, dass im Jahr 2021 Websites, die mit statischen Website-Generatoren erstellt wurden (von denen fast alle nach der Jamstack-Philosophie erstellt wurden), nur etwa 1 % aller Websites ausmachen werden. Dennoch befindet sich Jamstack in einer Phase raschen Wachstums, wobei sein Marktanteil in den letzten drei Jahren jedes Jahr um mehr als das Doppelte gestiegen ist. Ein deutliches Zeichen für das wachsende Interesse der Entwickler an der Technologie: Etwa ein Drittel der Jamstack-Entwickler sind ganz neu in der Szene und haben weniger als zwei Jahre Erfahrung.
*Josh Fruhlinger ist Schriftsteller und Redakteur aus Los Angeles.
Be the first to comment