© Overearth/Shutterstock.com
Eine Einführung für performantere und sicherere Frontends

Was ist der JAMstack?


Gerade bei contentlastigen Seiten und Anwendungen, bei denen Skalierung und Sicherheit eine große Rolle spielen, bietet der JAMstack einen Ansatz, der die Entwicklung einfacher und günstiger machen kann.

Wie schon 2020 können wir auch in diesem Jahr davon ausgehen, dass das Thema JAMstack [1] weiter Fahrt aufnimmt und für zahlreiche Firmen interessant wird. Auf den folgenden Seiten sehen wir uns an, worum es sich beim JAMstack handelt und wie er unsere Seiten performanter und sicherer macht und gleichzeitig die Entwicklungserfahrung im Frontend verbessert.

Hierzu betrachten wir zunächst, was JAMstack eigentlich bedeutet und wo die Unterschiede zu klassischen Ansätzen liegen. Im Anschluss geht es dann um mögliche Einsatzgebiete, in denen der JAMstack seine Stärken ausspielen kann.

Für alle, die auch gleich Hand anlegen wollen, stelle ich dann noch einige Frameworks vor, mit denen sich Anwendungen entwickeln lassen. Und keine Angst: Fans von Angular, React und Vue müssen nicht direkt ein neues Framework lernen.

Was bedeutet JAM?

JAM ist ein Akronym und steht für JavaScript, APIs und Markup. Die Architektur sieht vor, vorab gerenderte, statische Seiten über ein Content Delivery Network (CDN) auszuliefern. Die Anwendungen werden über die Integration von APIs und JavaScript dynamisch gemacht. Zu den Technologien, die hier ihre Stärken ausspielen können, zählen die gängigen JavaScript Frameworks, Static-Site-Generatoren und spezialisierte APIs von Drittanbietern (z. B. für Authentifizierung [2], Abwicklung von Zahlungsdienstleistungen [3] oder headless Contentmanagementsysteme (CMS) [4]). Damit bekommen wir eine sehr gute Performance, eine höhere Security, einfache und vor allem günstige Skalierung und eine sehr gute Entwicklungserfahrung.

Viel von dem, was der JAMstack einführt, ist nicht neu und wird sicher im einen oder anderen Projekt schon erfolgreich genutzt. Der JAMstack ist daher erst mal eine klare Definition einer modernen Architektur für Webseiten und Apps. Im Folgenden sehen wir uns an, wie der JAMstack sich hier von klassischen Anwendungen abhebt. Die hier gemachten Bewertungen werden natürlich nicht pauschal jeder Anwendung gerecht.

Server-side Rendering

Fangen wir mit einem klassischen Ansatz an: Unser Server erhält eine Anfrage und führt dazu passende Operationen auf der Datenbank aus. Das Ergebnis der Datenbankoperation wird verarbeitet und dann passend für den Client gerendert. Der Client zeigt diese Seite dem Nutzer dann im Browser an. Beim Thema Performance hängen wir hier zunächst stark von der Leistung des Servers und den Datenbankabfragen im Hintergrund ab. Dies lässt sich über Caching natürlich noch verbessern. Da die erzeugte Seite statisches HTML ist, sollte zumindest dieser Part für den Nutzer äußerst performant sein (Abb. 1).

mies_jamstack_1.tif_fmt1.jpgAbb. 1: Der Server interagiert mit einer Datenbank und rendert, passend zu den Anfragen, statische Webseiten aus

Skalierung bedeutet in diesem Fall oft, dass mehrere Server (und/oder Datenbanken) benötigt werden, um zu skalieren, was natürlich mit erhöhten Kosten verbunden ist. Gerade, wenn hier nur einzelne Teilsysteme unter Last sind, kann das unwirtschaftlich werden. Aufseiten des Backends könnte man nun zu einer Serverless- oder Microservice-Architektur greifen. Im Frontend passen diese Ansätze nicht immer.

Aus einer Securityperspektive müssen Server und Datenbank betrachtet werden, allerdings kann man hier natürlich auch auf eine der zahlreichen standardisierten Lösungen zurückgreifen. Aus Sicht der Entwickler kann dieser Ansatz zur Folge haben, dass Anwendungslogik und Darstellung miteinander vermischt werden. Bei anspruchsvollen Frontends ist die Entwicklungserfahrung oft besser, wenn das Frontend klar vom Backend getrennt ist.

Single Page Applications

Bei der Single Page Application verlagern wir mehr Logik in den Client. Dieser stellt die Seite dar und kommuniziert über REST APIs mit dem Server. Der Server verarbeitet die Anfragen, führt Operationen auf der Datenbank durch und liefert das Ergebnis in der Regel über JSON oder XML an den Client zurück, der die Seite entsprechend aktualisiert (Abb. 2).

mies_jamstack_2.tif_fmt1.jpgAbb. 2: Das Frontend ist eine Single Page Application und kommuniziert via REST mit dem Server

Aus Performancesicht wandert ein Teil der Verantwortung vom Server in den Client. Der Server muss hier „nur noch“ das ermittelte Ergebnis in Form von JSON oder XML an den Client zurückgeben. Caching ist auch hier ein etabliertes Mittel, um die Performance zu verbessern. Das geht allerdings zulasten des Clients, der die i...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang