Eine Zusammenfassung der JAMstack Conf London 2019

JAMstack ist ein Ansatz für die Webentwicklung, der darauf abzielt, die Infrastruktur auf ein Minimum zu reduzieren und Projekte hauptsächlich mit Frontend-ähnlichem Code und Build-Tools zu realisieren. In der Praxis, basierend auf meiner Erfahrung auf dieser Konferenz, drückt sich das als Headless CMS, vorgerendertes HTML, CDNs und Functions-as-a-Service aus. Es überrascht nicht, dass Netlify ein Verfechter des Konzepts und der Organisator der Konferenz ist - denn ihr Produkt ist eine nützliche Infrastruktur unter einem JAMstack-Projekt.

Das Konzept ist halb archaisch / halb futuristisch. Es hat viel für sich, aber auch ein paar nervige Aspekte. Mir gefällt die Technologie, und ich habe die Konferenz genossen: Ich habe das Gefühl, dass es sich um eine dieser Grenzbereiche handelt, in denen die Leute den Status quo mit vielen neuen Ideen in Frage stellen, was immer Spaß macht. Man kann sich fragen, ob dies das nächste große Ding ist oder Quacksalberei.

Was ich von diesem Tag mitgenommen habe - einschließlich der Vorträge und des "Flurbereichs":

Insgesamt eine gut organisierte Veranstaltung, gute Stimmung, cooler Veranstaltungsort, unterhaltsame Moderation von MC Phil Hawksworth. Hier ist das Video, in dem wir alle Chris Coyier gute Besserung wünschen, nachdem ein Unfall ihn daran gehindert hat, an der Konferenz teilzunehmen:

Überzeugende End-to-End-Demo, wie schnell und einfach man ein JAMstack-Projekt dank VUE, Nuxt, serverlosen Funktionen und Netlify umsetzen kann. Demonstrierte eine "statische Website", die dynamisch ist.

Beispiel einer E-Commerce-Site auf JAMstack - dank einer Frontend-SPA zur Verwaltung des Warenkorbs und der Verwendung serverloser Funktionen zum sicheren Aufruf eines Zahlungssystems (Stripe).
https://github.com/sdras/ecommerce-netlify

https://www.sanity.io/blog/we-re-open-sourcing-groq-a-query-language-for-json-documents

https://www.sanity.io/docs/how-queries-work

Ein wirklich interessantes Projekt - eine Art Kopfzerbrechen - ich versuche immer noch, es wirklich zu verstehen. Auf der Verpackung heißt es: "Erstellen Sie moderne JAMstack-Websites in wenigen Minuten. Kombinieren Sie jedes Theme, jeden Site Generator und jedes CMS ohne komplizierte Integrationen"

Der Kern scheint zu sein, dass ein Theme für Stackbit für jedes (unterstützte) CMS verwendbar ist. Wie das? Das Theme enthält nicht nur die üblichen Rendering-Templates, sondern auch ein komplettes Content Model und Hinweise, welche UI-Widgets das CMS verwenden soll, in einer 'stackbit.yaml'-Datei. Diese Stackbit-Konfiguration ist eine Art Lingua Franca, ein Esperonto-Ding, das dann von einem Adapter für ein unterstütztes CMS in die eigene Content-Model-Konfiguration des CMS verarbeitet wird. Der Adapter deckt auch die REST-APIs für das CMS ab. Ähnlich verhält es sich mit den Static Site Generators.

Wie er CodeSandbox aufgebaut hat

Ad-Blocker haben ihr Geschäftsmodell gestört. Man entschied sich für ein neues Modell der bezahlten Mitgliedschaft. Da dies ohnehin eine große Umstrukturierung erforderte, beschlossen sie, ihre Plattform zu überarbeiten. Die Umstellung auf JAMstack war nicht einfach. Viele Dinge, die bisher im Backend erledigt wurden, mussten nun mit Service-APIs von Drittanbietern oder im Frontend implementiert werden. Um die Funktionalität auch dann zu gewährleisten, wenn kein Javascript im Browser aktiviert ist, wurden außerdem Fallbacks für alles implementiert.

Große Leistungsverbesserungen als Ergebnis von JAMstack. Die Seite lädt unter 1 Sekunde bei 3G. Sie verwenden Netlify CMS, und alle Inhalte sind in Markdown-Dateien in Github.

Original Blog Post zur Ankündigung des Umzugs zu JAMstack

Effiziente Steuerung von CSS mit Code, es gibt CSS-Objektmodell eine tatsächliche API. Sie können sehr dynamische Effekte erzeugen.

Einführung einer Bibliothek von Houdini-basierten Effekten: https://extra-css.netlify.com/

Die Entwicklung vom Server zum Serverless: Zuerst hatten wir unsere eigenen Server zu Hause, dann verwaltete Server in einem Rack bei jemandem, dann VPS, dann spezielle Funktionen, und jetzt müssen Sie nichts mehr selbst machen. Schreiben Sie einfach Ihre Funktion, der Dienst kümmert sich um den Rest.

Compute ist jetzt super billig: Nur als Beispiel: Der Squarespace-Typ brauchte vor ein paar Jahren 20.000 Euro für redundante Server, um loszulegen. Das ist eine Einstiegshürde, jetzt kann man umsonst loslegen. 1 Million Anfragen für umsonst. 2 Millionen Anfragen für 5$ pro Monat. Ermächtigung: Was können die Menschen jetzt schaffen, wenn Geld und Technik keine Hindernisse sind?

Einige wichtige Anwendungsfälle für serverlose Funktionen: Einfacher Proxy, um vom Frontend aus eine Verbindung zu entfernten APIs herzustellen, ohne Anmeldeinformationen an den Browser weiterzugeben. Chatbots. Ereignisbasierte Dateiverarbeitung.

Die beiden hielten einen sehr unterhaltsamen und gut präsentierten Vortrag über die Optimierung einer Webanwendung im Hinblick auf Ladezeit und "Zeit bis zur Interaktivität". Das Szenario war ein "Mine Sweeper"-Spiel, das mit 2G- und 3G-Geschwindigkeit geladen wird. Sie wollten ein Bündelungssystem verwenden, um die Auslieferung zu optimieren, fanden aber schnell heraus, dass die Arbeit mit Webpack config sehr verwirrend ist. Sie zogen es vor, mit Rollup zu arbeiten, auch wenn sie ihre eigenen Plugins erstellen mussten, da sie zumindest verstanden, was sie taten, und der Meinung waren, dass sie aus diesem Grund besser wartbar waren.

Optimization techniques (wish I had taken better notes):

https://github.com/GoogleChromeLabs/proxx

My thanks to everyone at the event, for the good talks, nice chats, and fun. And now I’m buckling down to dig into my page-long list of new technologies and ideas to check out.