Jamstack: Die statische Website revolutioniert die Webentwicklung

Jamstack ist eine zunehmend beliebte Webentwicklungsphilosophie, die darauf abzielt, sowohl den Webentwicklungsprozess als auch die Downloadzeiten für Webseiten zu beschleunigen. Jamstack basiert auf der Devops-Bewegung und den CI / CD-Techniken (Continuous Integration / Continuous Delivery), die in vielen Unternehmen zur Norm werden für In-Browser-JavaScript und externe Dienste, auf die über Anwendungsprogrammierschnittstellen (APIs) zugegriffen wird.

Was ist Jamstack? Jamstack, definiert

Jamstack ist ein Webanwendungsmodell, das auf drei Säulen basiert und die Initialen in seinem Namen enthält: JavaScript, APIs und Markup. Webseiten für eine Jamstack-Site bestehen aus einer Standard-Markup-Sprache, sodass sie überall erstellt und getestet werden können, ohne von App-Servern oder serverseitigen Technologien wie Node.js abhängig zu sein. Alle interaktiven Funktionen werden durch Standard-JavaScript-Code bereitgestellt, der im Browser ausgeführt wird. Dadurch werden wiederverwendbare APIs über HTTPS aufgerufen, um Zugriff auf externe Daten oder andere Funktionen zu erhalten, die nicht in die Webseite selbst integriert werden können.

Um zu verstehen, warum die Jamstack-Philosophie revolutionär ist, betrachten Sie den LAMP-Stack, der beispielhaft zeigt, wie die meisten Entwickler in den letzten 15 Jahren über Webentwicklung nachgedacht haben. LAMP steht für Linux (das Betriebssystem, das die meisten Webserver unterstützt), Apache (die Serversoftware, die auf diesen Linux-Computern ausgeführt wird), MySQL (die Datenbank, in der die von der Webanwendung benötigten Informationen gespeichert sind) und PHP / Perl / Python (die Sprache, in der sie gespeichert sind) serverseitiger Code ist geschrieben in). Wenn Sie Ihren Browser auf eine LAMP-basierte Website verweisen, führt der Webserver den serverseitigen Code aus, der die Webseite im laufenden Betrieb generiert, und zeichnet Daten nach Bedarf aus der MySQL-Datenbank.

Die LAMP-Architektur ermöglicht die Erstellung dynamischer und interaktiver Websites, erfordert jedoch auch einen leistungsstarken Webserver. Je mehr Verkehr eine Site erhält, desto mehr Rechenleistung wird auf der Serverseite benötigt. Selbst mit einem Server mit vollem Funktionsumfang kann das Erstellen und Laden dynamischer Webseiten lange dauern. In einer Welt von Menschen mit kurzen Aufmerksamkeitsspannen beim Surfen im Internet auf ihren Handys ist diese Verzögerung zunehmend inakzeptabel geworden.

Jamstack wurde als Teil der „statischen Web“ -Bewegung geboren, die Mitte der 2010er Jahre als Reaktion auf dieses traditionelle Modell der Funktionsweise einer Website entstand. Um Jamstack zu verstehen, müssen Sie die heutige Technologie hinter statischen Websites verstehen  .

Statische Sites, statische Site-Generatoren und Jamstack

Wenn Sie einem Neuling erklären müssten, wie das Web funktioniert, könnte dies ungefähr so ​​aussehen: Irgendwo im Dateisystem eines Webservers befinden sich HTML-Dateien, auf die über HTTP-Adressen zugegriffen werden kann, die ein Webbrowser herunterlädt und dann interpretiert, um eine Webseite zu erstellen . Dies ist jedoch eine Beschreibung einer statischen Site:  Es wird davon ausgegangen, dass die HTML-Dateien bereits vorhanden sind, wenn der Webbrowser nach ihnen sucht. Wie wir bereits gesehen haben, wurde ein Großteil des Webs in den letzten zehn Jahren von dynamischen Websites dominiert, die stattdessen spontan HTML-Dateien als Reaktion auf Webanfragen generieren, häufig basierend auf Parametern, die über Formulare oder im Internet an den Webserver übergeben werden URL selbst.

In den frühen Tagen des Webs, als Webseiten immer statisch waren, haben viele Webentwickler den HTML-Code von Hand geschrieben. Als die Webseiten immer komplexer wurden, kamen Tools wie Dreamweaver von Macromedia hinzu, mit denen diese statischen HTML-Seiten programmgesteuert generiert werden konnten. Als die statische Webbewegung Mitte der 2010er Jahre begann, begann eine neue Welle sogenannter statischer Site-Generatoren , darunter Gatsby, Hugo und Jeckyll. Im Gegensatz zu WYSIWYG-Tools wie Dreamweaver sind statische Site-Generatoren befehlszeilengesteuert und für die Integration in CI / CD-Prozesse ausgelegt. HTML-Dateien werden von den Tools generiert, häufig basierend auf in Markdown geschriebenen Inhalten, und automatisch in ein Versionskontroll-Repository wie GitHub hochgeladen. Da diese Dateien als produktionsbereit markiert sind, werden statische Seiten auf der Live-Website automatisch aktualisiert.

Es ist wichtig zu beachten, dass statisch in diesem Zusammenhang nicht bedeutet, dass es sich um einfache Web 1.0-Seiten handelt, die nicht interaktiv sind. Denken Sie daran, dass diese Seiten erweitertes JavaScript enthalten können, das im Browser ausgeführt wird und API-Aufrufe an Datenbanken, serverseitige Funktionen oder gehostete Funktionen ohne Server ausführt. Da diese Ausführung jedoch nicht auf dem Webserver selbst erfolgt, benötigt eine statische Site keinen industriell betriebenen Webhost mit einer Datenbank. Viele statische Websites werden in Content Delivery Networks ( CDNs) bereitgestellt, in denen Inhalte auf mehreren Servern auf der ganzen Welt gespiegelt werden, um Benutzern überall schnell bereitgestellt zu werden.

Mathieu Dionne, Marketingleiter bei Snipcart, beschreibt die Anfänge dieser neuen Welt statischer Websites in einem Blogbeitrag und erwähnt, dass „die Netlify-Gründer ... sich um 2015 herum den Begriff„ Jamstack “ausgedacht haben, um das Problem zu umgehen die negative Konnotation von 'statischem Web'. Mit anderen Worten, wir haben den Jamstack-Prozess in diesem Abschnitt beschrieben. Aber jetzt müssen wir Netlify und ihre Rolle im Ökosystem kurz diskutieren.

Was ist Netlify?

Netlify ist ein Cloud-Computing- und Webhosting-Unternehmen. Netlify-Mitbegründer Mathias Biilmann hat den Begriff Jamstack geprägt, und die Dienstleistungen von Netlify sind auf Kunden zugeschnitten, die Websites auf der Grundlage der Jamstack-Philosophie erstellen möchten.

Netlify behauptet, ein bestimmtes Problem behoben zu haben, das statische Sites zurückgehalten hat, nämlich die Ungültigmachung des Caches. Datenbankgesteuerte dynamische Websites verbrauchen möglicherweise viele Serverressourcen, aber Sie können sicher sein, dass sie jedem Besucher, der vorbeischaut, die neueste Version Ihrer Website bereitstellen. Da Jamstack-Websites häufig auf mehreren verteilten Servern eines CDN gehostet werden, sind Aktualisierungen weniger einfach. Es kann einige Minuten bis Stunden dauern, bis jeder CDN-Server feststellt, dass seine zwischengespeicherte Version der Site nicht mehr gültig ist. Das CDN von Netfliy bietet eine sofortige Cache-Ungültigmachung für HTML-Dateien, um dieses Problem zu umgehen.

Netlify ist jedoch nicht der einzige Hosting-Anbieter im Jamstack-Bereich und hat keinerlei Marken- oder Eigentumskontrolle über den Begriff. Es gibt eine Reihe von Jamstack-Hosting- und Bereitstellungslösungen, und die meisten großen Cloud-Anbieter, darunter AWS, Google Firebase und Microsoft Azure, beteiligen sich an der Aktion.

Jamstack CMS

Wenn Sie jemand sind, der sich täglich mit einer Website befassen muss, wissen Sie, dass das Erstellen und Hosten der Website nur der Anfang ist. Sie benötigen auch eine Möglichkeit, neue Inhalte zu erstellen und Ihrer Website hinzuzufügen. Da die Leute, die das tun, normalerweise keine Programmierer sind, benötigen sie ein benutzerfreundliches Tool - nämlich ein Content-Management-System oder CMS. Herkömmliche CMS wie WordPress bieten eine Back-End-Benutzeroberfläche, über die Sie Website-Inhalte eingeben, eine Datenbank verwalten, in der diese Inhalte gespeichert sind, und dynamische Webseiten erstellen können, auf denen diese Inhalte als Antwort auf Browseranforderungen angezeigt werden.

CMS für Jamstack-Sites funktionieren anders und werden im Allgemeinen als kopflos bezeichnet. Ein kopfloses CMS bietet eine Benutzeroberfläche zum Eingeben und Verwalten von Inhalten sowie eine Datenbank oder andere Mittel zum Speichern von Inhalten, generiert jedoch selbst keinen HTML-Code, den ein Browser analysieren kann. Stattdessen verwenden die statischen HTML-Seiten der Website JavaScript, um die APIs des CMS aufzurufen, und das CMS gibt den Inhalt in einem Format zurück, das JavaScript in eine Webseite verwandeln kann.

Dieses System trennt Inhalte gründlich von Präsentationen, was natürlich ein langjähriges Programmierideal ist. Da das CMS über eine zugängliche API verfügt, können mehrere Webseiten problemlos darauf zugreifen. Wenn Sie beispielsweise separate Mobil-, Desktop- und Smartwatch-Versionen Ihrer Website erstellt haben, können alle diese Versionen auf denselben Inhalt zugreifen, der im CMS gespeichert ist.

Wie zu erwarten, verfügt Netlify in diesem Bereich über ein eigenes Angebot namens NetlifyCMS. Es stehen jedoch auch eine Reihe anderer Angebote zur Verfügung. Entwickler Nebojsa Radakovic bricht sie in einem Blog-Beitrag für Sie auf. Es gibt viele Nachwuchskräfte auf dieser Liste sowie einen sehr bekannten Namen. Während wir WordPress als Beispiel für ein traditionelles CMS verwendet haben, kann WordPress auch als kopfloses CMS ausgeführt werden, um eine Jamstack-Site zu betreiben.

Jamstack-Konferenz

Netlify arbeitet auch daran, eine Jamstack-Community zu erstellen, und sponsert Jamstack-Konferenzen. Das Unternehmen veranstaltete 2019 Veranstaltungen in New York, London und San Francisco und veranstaltete im Mai 2020 eine virtuelle Veranstaltung. Zum jetzigen Zeitpunkt können Sie sich jedoch für die Veranstaltung in San Francisco anmelden, die für den 6. bis 7. Oktober 2020 geplant ist Die Coronavirus-Pandemie hat noch Herbstkonferenzpläne in der Luft. 

Wenn Sie Updates wünschen, können Sie die Konferenz auf Twitter verfolgen. Sie können auch frühere Vorträge auf dem YouTube-Kanal von Jamstack Conf nachlesen.

[Ebenfalls am: Die 6 besten JavaScript-IDEs | Die 10 besten JavaScript-Editoren]

Jamstack-Tutorials

Möchten Sie tiefer gehen? Schauen Sie sich diese Jamstack-Tutorials an, die Ihnen praktische Erfahrungen beim Erstellen einer Jamstack-Site vermitteln:

  • Entwickler David Neal hat ein gutes Einführungs-Tutorial zum Erstellen einer Jamstack-Site, das sehr einfach beginnt und dann immer komplexer wird. 
  • Drüben im LogRocket-Blog bietet der Softwareentwickler Ogundipe Samuel einen detaillierten, schrittweisen Einblick in die Erstellung einer E-Commerce-Website nach Jamstack-Prinzipien. 
  • Netlify bietet ein mehr als dreistündiges Video-Tutorial, das viele Grundlagen von den Grundlagen bis hin zu fortgeschritteneren Themen abdeckt. 

Sobald Sie die hier beschriebenen Grundkonzepte beherrschen, können Sie in Ihrem Berufsleben mit der Entwicklung von Jamstack beginnen. Viel Spaß beim Lernen!