Was ist der JAMstack und wie fange ich an?

JAMstack-Sites sind derzeit in der Welt der Webentwickler der letzte Schrei. Und das zu Recht! Aber was genau ist das und wie können wir alle seine Vorteile nutzen?

  • Was ist das für ein JAMstack?
  • Das ist nicht mit serverlos zu verwechseln
  • Was macht den JAMstack aus?
  • Was macht eine JAMstack-App so großartig?
  • Wird meine Website als auf dem JAMstack befindlich angesehen?
  • Was sind einige Beispiele für JAMstack?
  • Mit welchen Tools kann ich JAMstack-Sites oder -Apps erstellen?

Was ist das für ein JAMstack?

Zu Beginn ist JAMstack eine Softwarearchitektur und -philosophie, die den folgenden Komponenten entspricht: Javascript, APIs und Markup.

Wenn Ihnen das bekannt vorkommt, liegt es daran, dass es so ist! Diese React-App, die Sie mit Webpack kompilieren und letztendlich von S3 aus bedienen? Ja, das ist eine JAMstack-App. Diese einfache HTML-Datei, die kein JavaScript hat und buchstäblich nichts Dynamisches tut? Ja, das ist auch eine JAMstack-App.

Das ist nicht mit serverlos zu verwechseln

Wenn Sie mehr von der Cloud-Seite kommen (denken Sie an AWS, GCP, Azure), neigen Sie möglicherweise dazu, Serverless und JAMstack als dasselbe zu betrachten. Zugegeben, sie haben Ähnlichkeiten in der Philosophie, wie Ressourcen verwaltet werden, z. B. das Hosten einer Site in S3. Eine JAMstack-App wird jedoch nicht immer eine serverlose App sein.

Stellen Sie sich eine App vor, die im statischen Speicher des Cloud-Anbieters Ihrer Wahl gehostet wird. Ja, Sie stellen die App möglicherweise ohne Server bereit, aber Sie haben es möglicherweise mit einer API zu tun, die Wordpress oder Rails verwendet, die beide sicherlich nicht ohne Server sind.

Die Kombination dieser Philosophien kann einen langen Weg gehen, sollte aber nicht als dasselbe verwechselt werden.

Was macht den JAMstack aus?

Zurück zum JAMstack: Er besteht normalerweise aus drei Komponenten: Javascript, APIs und Markup. Seine Geschichte beruht darauf, den Begriff "statische Site" zu etwas Bedeutenderem (und Marktfähigerem) zu machen. Während letztendlich eine statische Site das Endergebnis ist, wird sie in die Luft gesprengt, um erstklassige Werkzeuge für jeden Schritt des Weges einzuschließen.

Es gibt zwar keine spezifischen Tools, die Sie verwenden müssen, oder überhaupt keine Tools, die über einfaches HTML hinausgehen, aber es gibt großartige Beispiele dafür, was jeden Teil des Stapels ausmachen kann. Lassen Sie uns ein wenig auf jede Komponente eingehen.

Javascript

Die Komponente, die wahrscheinlich die meiste Arbeit zur Popularisierung des JAMstacks geleistet hat, ist Javascript. Unsere bevorzugte Browsersprache ermöglicht es uns, alle dynamischen und interaktiven Bits bereitzustellen, die wir möglicherweise nicht haben, wenn wir einfaches HTML ohne sie bereitstellen.

Hier kommen häufig UI-Frameworks wie React, Vue und Newcomer wie Svelte ins Spiel.

Sie vereinfachen und organisieren das Erstellen von Apps, indem sie Komponenten-APIs und Tools bereitstellen, die sich zu einer einfachen HTML-Datei (oder einer Reihe von ihnen) zusammensetzen lassen.

Diese HTML-Dateien enthalten eine Gruppe von Assets wie Bilder, CSS und das eigentliche JS, die letztendlich über Ihr bevorzugtes CDN (Content Delivery Network) an einen Browser gesendet werden.

APIs

Die Nutzung der Stärken von APIs ist entscheidend für die Dynamik einer JAMstack-App. Unabhängig davon, ob es sich um eine Authentifizierung oder eine Suche handelt, verwendet Ihre Anwendung Javascript, um eine HTTP-Anfrage an einen anderen Anbieter zu senden, wodurch letztendlich die Erfahrung in der einen oder anderen Form verbessert wird.

Gatsby hat den Ausdruck "Content Mesh" geprägt, der die Möglichkeiten hier ziemlich gut beschreibt.

Sie müssen nicht unbedingt nur einen Host für eine API erreichen, aber Sie können so viele erreichen, wie Sie benötigen (aber versuchen Sie nicht, über Bord zu gehen).

Wenn Sie beispielsweise über eine kopflose Wordpress-API verfügen, in der Sie Ihre Blog-Posts hosten, ein Cloudinary-Konto, in dem Sie Ihre speziellen Medien speichern, und eine Elasticsearch-Instanz, die Ihre Suchfunktionen bereitstellt, arbeiten alle zusammen, um den Benutzern eine einheitliche Erfahrung zu bieten deine Seite.

Markup

Dies ist das kritische Stück. Egal, ob es sich um handgeschriebenes HTML handelt oder um den Code, der bis zum HTML kompiliert wird, es ist der erste Teil, den Sie dem Client bereitstellen. Dies ist eine Art De-facto-Stück jeder Website, aber wie Sie es bedienen, ist das wichtigste Stück.

Um als JAMstack-App zu gelten, muss der HTML-Code statisch bereitgestellt werden. Dies bedeutet im Grunde, dass er nicht dynamisch von einem Server gerendert wird.

Wenn Sie eine Seite zusammensetzen und mit PHP bereitstellen, handelt es sich wahrscheinlich nicht um eine JAMstack-App. Wenn Sie eine einzelne HTML-Datei aus dem Speicher hochladen und bereitstellen, die eine App mit Javascript erstellt, klingt dies wie eine JAMstack-App.

Das heißt aber nicht, dass wir immer 100% der App im Browser erstellen müssen. Mit Tools wie Gatsby und anderen statischen Site-Generatoren können wir einige oder alle unserer API-Quellen beim Erstellen abrufen und die Seiten als HTML-Dateien rendern.

Wenn Sie ein Wordpress-Blog haben, können wir alle Beiträge abrufen und letztendlich für jeden Beitrag eine neue HTML-Datei erstellen. Das bedeutet, dass wir eine vorkompilierte Version der Seite direkt an den Browser senden können, was normalerweise einem schnelleren ersten Malvorgang und einer schnelleren Erfahrung für Ihren Besucher entspricht.

Ein Hinweis zu "Hosting"

Die Verwendung des Begriffs Hosting kann irreführend sein, wenn Sie mit dem Konzept noch nicht vertraut sind. Ja, Ihre Website wird technisch irgendwo gehostet, aber es ist nicht im traditionellen Sinne. Sie haben keinen Server, auf dem Sie Ihre Dateien mit einem FTP-Client wie Cyberduck hochladen.

Unabhängig davon, ob Sie es selbst mit S3 tun oder in Netlify (das eigentlich Multi-Cloud ist) weiterleiten, werden Ihre HTML- und statischen Assets aus dem Objektspeicher bereitgestellt. Am Ende haben Sie normalerweise ein CDN wie Cloudflare, das diese Dateien an Orten auf der ganzen Welt zwischenspeichert, sodass Ihre Seiten für die Besucher Ihrer Website schneller geladen werden.

Was macht eine JAMstack-App so großartig?

JAMstack-Apps erfüllen von Natur aus die meisten, wenn nicht alle 5 Säulen des AWS Well-Architected Framework. Dies sind Kernkonzepte, die AWS für eine schnelle, sichere, leistungsstarke, belastbare und effiziente Infrastruktur hält.

Mal sehen wie ...

Geschwindigkeit

Die Tatsache, dass Sie JAMstack-Apps (normalerweise) als statische Dateien direkt von einem CDN bereitstellen, macht es wahrscheinlich, dass Ihre App sehr schnell geladen wird. Vorbei sind die Zeiten, in denen der Server Zeit damit verbringen muss, die Seite zu erstellen, bevor er antwortet. Jetzt dienen Sie der Seite als einfaches HTML "wie sie ist" oder mit einer Art clientseitiger Flüssigkeitszufuhr, wie Sie sie bei React sehen würden.

Kosten

In den meisten Fällen werden JAMstack-Sites billiger ausgeführt als ihre serverseitigen Gegenstücke. Das Hosten statischer Assets ist billig und jetzt wird Ihre Seite mit der gleichen Rate bereitgestellt.

Skalierbarkeit

Da Sie Ihre Dateien über statisches Hosting, wahrscheinlich ein CDN, bereitstellen, erhalten Sie so ziemlich automatisch eine unendliche Skalierbarkeit. Die meisten Anbieter werden diese Behauptung aufstellen, was bedeutet, dass Sie keine Probleme haben werden, den Zustrom von Personen, die Ihre Website betreten, durch die Eingangstür hereinzulassen.

Instandhaltung

Die Grundlage Ihrer statischen Site ist kein Server, dh Sie müssen ihn nicht warten. Unabhängig davon, ob es sich um Netlify, S3 oder einen anderen Anbieter handelt, werden Ihr statisches HTML, CSS und JS für Sie ohne Kopfschmerzen beibehalten.

Sicherheit

Wenn Sie den fehlenden Server, den Sie persönlich warten müssen, verdoppeln, müssen Sie sich nicht so viele Gedanken darüber machen, wie Sie verhindern können, dass Personen eingreifen.

Stattdessen müssen Sie sich hauptsächlich auf Berechtigungen konzentrieren, um private Inhalte zu sperren und Ihren Benutzern zu versichern, dass ihre persönlichen Informationen nicht öffentlich verfügbar sind.

Dies hängt aber auch von Ihren APIs ab

So sehr diese Punkte für die statischen Aspekte Ihrer Website zutreffen, denken Sie daran, dass Sie für Ihre clientseitige Erfahrung möglicherweise immer noch auf eine Art API angewiesen sind.

Versuchen Sie, diese Anforderungen zur Kompilierungszeit zu nutzen, wenn Sie können, z. B. mit einem statischen Site-Generator. Andernfalls müssen Sie die Anzahl der Treffer, die Sie auf einen dynamischen Endpunkt erzielen, und die Auswirkungen auf alle oben genannten Punkte für Ihr Gesamterlebnis abwägen.

Wird meine Website als auf dem JAMstack befindlich angesehen?

Wir haben bereits über die drei Komponenten (Javascript, APIs, Markup) gesprochen, aber wir haben nicht darüber gesprochen, dass Sie nicht unbedingt alle drei Komponenten verwenden müssen, um Ihre Site als JAM-würdig zu betrachten .

Wirklich, alles läuft auf das Markup hinaus und darauf, wie Sie es servieren. Anstatt dass Ihre Rails-App Ihren HTML-Code für Sie rendert, können Sie eine vorkompilierte React-App in S3 hosten, die Rails über eine Reihe von APIs erreicht.

Sie benötigen jedoch nicht einmal APIs. Sie brauchen nicht einmal Javascript! Solange Sie eine HTML-Datei bereitstellen, ohne dass sie zur Anforderungszeit auf einem Server kompiliert werden muss (auch bekannt als Pre-Rendering), haben Sie selbst eine JAMstack-Site.

Was sind einige Beispiele für JAMstack?

freecodecamp.org

Ja! freecodecamp.org und sein Lernportal sind eine JAMstack-Site, die auf Gatsby basiert. Trotz der Komplexität der Bereitstellung einer App für Codekurse kann freeCodeCamp die Leistung eines statischen Site-Generators und leistungsstarker APIs zusammenführen, um Menschen auf der ganzen Welt die Möglichkeit zu geben, Code zu lernen.

Sie können sehen, wie Quincy von freeCodeCamp auf der JAMstack_conf 2018 mehr darüber spricht:

//www.youtube.com/watch?v=e5H7CI3yqPY

Hinweis: Die News- und Forum-Portale sind derzeit keine JAMstack-Sites.

Unmögliche Lebensmittel

Die Hauptwebsite für Impossible Foods ist keine andere als eine Gatsby-Website! Alles von ihren Rezepten bis zu ihrem Standortfinder wird mit unserem bevorzugten "blitzschnellen" statischen Site-Generator zusammengestellt.

web.dev

Das web.dev-Ressourcenzentrum von Google wurde mit den wachsenden 11ty aufgebaut. Sie finden den Open Source-Code sogar unter: //github.com/GoogleChrome/web.dev

Mit welchen Tools kann ich JAMstack-Sites oder -Apps erstellen?

Die gute Nachricht bei all dem Aufsehen ist, dass derzeit eine Menge Tools verfügbar sind und eine Tonne mehr unterwegs sind. Sie mögen an den Rändern immer noch etwas rau sein, aber das liegt daran, dass dies eine schöne neue Welt der Werkzeuge ist und dass einige Glättungen erforderlich sind, um genau das Richtige zu finden.

Erstellen Sie Ihre App

Das ist der lustige Teil. Wie werden Sie Ihre App erstellen? Mit Scully im Bild können Sie so ziemlich Ihre Lieblingsvariante des UI-Frameworks auswählen und loslegen. Hier sind einige beliebte, um loszulegen, aber es ist keineswegs erschöpfend.

  • 11ty
  • Gatsby
  • Hugo
  • Nift
  • Scully (für euch Angular Fans)
  • Und viele mehr…

Muss ich einen auswählen? Beginnen Sie mit Gatsby und booten Sie mit einem einfachen Starter.

Serving Ihrer App

Ich stelle mir das gerne als einfachen Teil vor, abhängig von Ihrem Setup. Tools wie Netlify und Zeit machen das Konfigurieren zum Kinderspiel, indem Sie sich in Ihr Github-Repo einbinden und jedes Mal erstellen, wenn ein neues Commit gesendet wird. Natürlich haben Sie Optionen wie AWS, wenn Sie mehr Kontrolle wünschen.

  • AWS
  • Azurblau
  • GCP
  • Github-Seiten
  • Netlify
  • Anstieg
  • Zeit

Muss ich einen auswählen? Beginnen Sie mit Netlify und nehmen Sie sich 5 Minuten Zeit, um diese Gatsby-Site bereitzustellen.

Machen Sie Ihre App dynamisch

Dies kann wirklich alles sein, was als API verwendet werden kann, um Anforderungen vom Browser zu stellen. Ich werde nicht einige Beispiele pro Typ auflisten, aber hier sind einige Tools und Orte, an denen Sie einige Ressourcen finden können.

  • Auth0 - Authentifizierung
  • Cloudinary - Medienverwaltung
  • Google Analytics - Analyse des Webverkehrs
  • headlesscms.org - Endlose Liste kopfloser CMS
  • Vernunft - CMS
  • Serverless Framework - DIY, einfach zu implementierende serverlose Ressourcen
  • Snipcart - E-Commerce
  • Stripe - Zahlungsmanagement
  • Und eine Menge anderer Ressourcen…
  • Und eine Reihe anderer CMS-Optionen…
  • Und einige allgemeine Informationen und Tools ...

Und wie wäre es mit allgemeinen Ressourcen zum Lernen?

In der JAMstack-Welt finden Sie viele Ressourcen, um schnell einsatzbereit zu sein.

  • So hosten und implementieren Sie eine statische Website oder JAMstack-App von mir auf freeCodeCamp für AWS S3 und CloudFront
  • Eine Schritt-für-Schritt-Anleitung: Gatsby on Netlify von Netlify
  • Erstellen Sie Ihr eigenes Blog von Grund auf neu mit Eleventy from Filament Group
  • So hosten Sie Ihre statische Website mit AWS - Ein Leitfaden für Anfänger von freeCodeCamp
  • Hugo Tutorial: Erstellen und Hosten einer (sehr schnellen) statischen E-Commerce-Site von SnipCart
  • So erstellen Sie authentifizierte serverlose JAMstack-Apps mit Gatsby und Netlify aus freeCodeCamp

Erwarten Sie mehr zu sehen

Ähnlich wie bei seinem serverlosen Gegenstück sind die Tage von JAMstack jung. Mit der Zeit werden die Tools ausgereift und erweitert, was uns neue aufregende Möglichkeiten bietet, schnell schnelle Websites zu erstellen, die jeder nutzen kann.

Nehmen Sie an der Unterhaltung auf Twitter teil und teilen Sie mir mit, was Ihr Lieblingsteil beim Aufbau einer JAMstack-Site ist!

Etwas vermissen?

Vermissen Sie Ihr Lieblings-JAMstack-Tool oder ein großartiges Beispiel? Ping mich auf Twitter!

Folgen Sie mir für mehr Javascript, UX und andere interessante Dinge!

  • ? Folge mir auf Twitter
  • ? ️ Abonniere mein Youtube
  • ✉️ Melden Sie sich für meinen Newsletter an