Was ist JAMstack?

Was ist JAMstack?

JAMstack ist ein Ansatz für die Frontend-Webentwicklung (die Erstellung von Inhalten und Oberflächen, mit denen Nutzer interagieren). Er ermöglicht es Entwicklern, statische Websites schnell zu erstellen und effizient für Nutzer bereitzustellen.

In einer JAMstack-Webanwendung wird so viel HTML wie möglich vordefiniert und in einem Content Delivery Network (CDN) gespeichert. Anstatt eine monolithische Backend-Anwendung auf der Serverseite auszuführen, um dynamische Inhalte zu generieren, basieren die dynamischen Komponenten der Anwendung auf APIs. Im Idealfall führt dies zu einer viel schnelleren Nutzererfahrung und einer viel unkomplizierteren Entwicklererfahrung.

Was verbirgt sich hinter dem Begriff „JAMstack“?

JAM steht für JavaScript, APIs, Markup.

• JavaScript ist die Programmiersprache, die von Webanwendungen verwendet wird
• Eine API (Application Programming Interface) ist eine Möglichkeit, Daten von einem anderen Programm oder einer anderen Anwendung anzufordern
• Markup ist Code (HTML und CSS), der den Browsern Formatierungsanweisungen gibt

Stack bezeichnet die Kombination all dieser Dinge in einer Weise, die es Entwicklern ermöglicht, Anwendungen und Websites zu erstellen.

Eine JAMstack-Website oder -Anwendung wird allein mit diesen drei Elementen erstellt. Die statische Website, die der Nutzer sieht, wird aus HTML- und CSS-Markup-Code erstellt. JavaScript wird für alle notwendigen dynamischen Funktionen und für den Aufruf von APIs verwendet. Die APIs bilden das Backend der Anwendung.

Nehmen wir an, Bob erstellt eine Webanwendung, die aktuelle Fußballergebnisse liefert. Bob erstellt eine Backend-Anwendung, die auf einem von ihm betriebenen Server läuft und ständig die Spielstände der letzten Partien überprüft. Wenn ein Nutzer die Webanwendung öffnet, generiert Bobs Server HTML-Seiten, die diese Spielstände anzeigen, und sendet diese Seiten dann an den Nutzer. Bobs Webanwendung ist jedoch etwas langsam: bevor ein Nutzer diese Seiten ansehen kann, muss er warten, bis die Backend-Anwendung läuft, bis die HTML-Seiten generiert werden und bis die HTML-Seiten sein Gerät erreichen.

Nehmen wir nun an, Bob baut seine Webanwendung mit einem JAMstack-Ansatz neu auf. Anstatt eine komplette Backend-Anwendung zu schreiben, erstellt er eine Reihe von leichtgewichtigen HTML-Seiten, die er in einem CDN speichert. Wenn ein Nutzer die Anwendung öffnet, liefert das CDN dem Nutzer sofort die entsprechenden HTML-Seiten, da sich das CDN viel näher am Nutzer befindet als Bobs Server. Die Anwendung führt auch einen API-Aufruf durch, um die Live-Ergebnisse des Fußballspiels auf der Seite auszufüllen. Der Nutzer kann Bobs Webanwendung nun sehr schnell laden, und Bob muss viel weniger Code für die serverseitige Aktualisierung der Spielstände schreiben.

Was ist eine statische Website?

Eine statische Website besteht aus einer oder mehreren statischen Webseiten. Dabei handelt es sich um HTML-Dateien, die in einem Browser immer auf die gleiche Weise geladen werden, egal wer die Datei lädt. Da statische Webseiten nur aus HTML bestehen, ohne zusätzlichen Code, der im Browser ausgeführt werden muss, können sie extrem schnell geladen werden. (Um zu sehen, wie der HTML-Code aussieht, klicken Sie im Chrome-Browser mit der rechten Maustaste auf eine Webseite und dann auf „Untersuchen“).

Im Gegensatz dazu ändern sich dynamische Webseiten bei jedem Ladevorgang. Um eine interaktivere, personalisierte Nutzererfahrung zu bieten, passen sich dynamische Webseiten an den Nutzer an, der die Seite öffnet, an den Ort, an dem die Seite geladen wird, an die Tageszeit und an eine beliebige Anzahl anderer sich ändernder Dateneingaben. Wenn eine dynamische Webseite geladen wird, muss der Code entweder auf dem Webserver, der die Webseite hostet, oder im Browser des Nutzers ausgeführt werden. Diese Abhängigkeit von der Codeausführung kann die Nutzererfahrung verlangsamen.

Dynamische Websites sind nicht die einzige Möglichkeit, eine modernisierte Nutzererfahrung zu schaffen. Auch eine größtenteils statische JAMstack-Webseite kann den Nutzern eine dynamische, personalisierte Erfahrung bieten, indem sie gelegentlich neue statische Inhalte generiert oder APIs aufruft, um aktualisierte Inhalte auszufüllen.

Wie gehen JAMstack-Anwendungen mit Backend-Funktionen um?

Bei der Anwendungsentwicklung ist das Backend der Code, der hinter den Kulissen auf einem Server läuft. Normalerweise weiß ein Nutzer nicht, was im Backend passiert, während er eine Website oder Anwendung nutzt. Während JavaScript und Markup das Erscheinungsbild einer JAMstack-Anwendung für den Nutzer bestimmen, benötigt sie zum Funktionieren dennoch Backend-Funktionen. JAMstack erledigt dies durch den Aufruf von APIs über JavaScript.

Die Verwendung von APIs bedeutet, dass JAMstack-Entwickler keine eigenen Backend-Anwendungen erstellen müssen. Sie können Ihre Websites und Apps auf der Grundlage bereits vorhandener APIs erstellen.

Wenn Entwickler eigene Funktionen für eine Anwendung entwickeln möchten, können sie eine neue API erstellen. APIs können in einer Vielzahl von Kontexten wiederverwendet werden. Wenn Entwickler also ihre eigenen APIs für das Backend erstellen, müssen sie diese Funktionalität nur einmal konstruieren, um sie in zukünftigen Anwendungen zu verwenden.

Wie verhält sich JAMstack zu Microservices?

Mit APIs können JAMstack-Entwickler einen Microservices-Ansatz für das Backend wählen. In einer Microservices-Architektur wird das Backend einer Anwendung in kleinere Teile zerlegt, die auf Befehl ausgeführt werden – so wie eine JAMstack-Anwendung bei Bedarf verschiedene APIs aufruft, aber ansonsten keine Backend-Unterstützung benötigt.

Es ist auch möglich, eine JAMstack-Anwendung zu erstellen, die ein teilweise oder vollständig serverloses Backend verwendet. Serverlose Funktionen sind kleine, wiederverwendbare Codeschnipsel, die bei Bedarf ausgeführt werden. Bei einer serverlosen Architektur muss der Entwickler jedoch oft selbst an der Entwicklung des Backends arbeiten, da er die Backend-Anwendung im Wesentlichen selbst erstellt, anstatt APIs aufzurufen (obwohl er sich nicht um die Bereitstellung von Servern kümmern muss).

Was sind die Vorteile der Verwendung von JAMstack?

• Performance: Fast alle Inhalte in einer JAMstack-Anwendung bestehen aus statischen HTML-Dateien, die von einem CDN bereitgestellt werden. Dadurch lassen sich Webinhalte am schnellsten für die Nutzer bereitstellen.
• Skalierbarkeit: Wenn eine Anwendung“skalierbar“ist, bedeutet dies, dass sie gut auf einen starken Nutzungsanstieg reagiert. Da das JAMstack-Frontend schnell und das Backend leichtgewichtig ist, sind JAMstack-Anwendungen oft extrem skalierbar.
• Bessere Entwicklererfahrung: Mit JAMstack können sich Entwickler auf die Erstellung einer überzeugenden Nutzererfahrung im Frontend konzentrieren, ohne sich um das Backend oder Performance-Probleme kümmern zu müssen.

Mit Cloudflare erstellen Entwickler Anwendungen, die direkt auf dem globalen CDN von Cloudflare gehostet werden. Erfahren Sie mehr über Cloudflare Pages, unsere JAMstack-Plattform für die Erstellung statischer Websites. Sie können auch mehr über die Bereitstellung einer Gatsby-Site, einer Hugo-Site, einer React-Anwendung und mehr mit Cloudflare Pages erfahren und sich einen Videoüberblick über Cloudflare Pages von dem Analyseunternehmen Redmonk ansehen.