title: Developing a Community Website on JAMstack with GIT Managed Content and a Isomorphic Rendering Approach version: 1 layout: presentation.11ty.js revealOptions: transition: 'slide' backgroundTransition: 'fade' center: false

Fabian Pfortmüller

Content is king.

Bill Gates

• Content ist da und kann publiziert werden
• Content liegt in den Strukturen des CMS
• Content kann schlecht weiter verarbeitet werden
• Content ist segmentiert
• Semantik geht verloren
• Merging von Content bei vielen parallelen Pflegeprozessen ist schwer

Organizing

Wie wird strukturiert?

• im CMS Backend
• mit Kategorien
• mit weiteren Taxonomien, z.B. Tags

Publishing

Wie wird ausgeliefert?

• Content Pflege ist mühsam
• Content zerfällt/ wird segmentiert
• Organisation ist umständlich
• Merge von Datenständen ist sau kompliziert
• Content lässt sich schlecht weiter verarbeiten
• Content ist in den Strukturen des Systems „gefangen“
• Content Migration in ein anderen System ist sehr komplex
• Publishing ist langsam
• Bedienung von verschiedenen Ausgabekanälen ist mühsam
• Publishing skaliert schlecht
• System bietet viele Angriffsvektoren
• monolithisches System

• WISA stack: Windows, IIS, SQL Server, ASP.NET
• LAMP: Linux, Apache, MySQL, Python || Perl || PHP
• MEAN: MongoDB, express.js, angular.js, node.js
• MERN: MongoDB, Express.js, React.js, Node.js

JAM

Javascript, APIs and Markup

Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript.

All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTP with JavaScript. These can be custom-built or leverage third-party services.

Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps.

#microservices #decoupling #antimonolithic

Bausteine des Stacks

#1 Creating Content

• übersichtlich
• in sich geschlossen
• flat
• leicht zu editieren
• leicht weiter zu verarbeiten

#2 Organizing Content

• bekanntes mentales Modell
• übersichtlich
• leicht und schnell zu editieren

• Versionierung
• Merging
• Branching
• zusätzliche Tools, z.B. Issues

#3 Publishing Content

• rendered at buildtime via static site generator
• deployed to simple webserver or cdn
• additional data via javascript and APIs

• superschnell und skalierbar
• sehr sicher
• minimale Anforderungen an den Server

• Smashing Magazine
• Reakkreditierung der Medieninformatik Repo // Web // PDF

Die Medieninformatik Website ist der Schweizer Taschenmesser für die Kommunikation nach außen und innen. Sie richtet sich an alle Zielgruppen und stellt Informationen und Einblicke in das Forschungs- und Lehrgebiet Medieninformatik für die verschiedenen Zielgruppen bereit. Hier landet im Grunde alles, was in den anderen Kanälen nicht passt, oder was für längere Zeit vorgehalten werden soll. Schwerpunkt des Inhalts sind Artefakte, die im Rahmen von Projekten oder Abschlussarbeiten entstanden sind. Inhalte werden folgenden Hauptrubriken zugeordnet:

• mission: alles rund im die Mission des Fachgebiets
• people: alles rund im die Leute in der MI
• projects: Berichte und Ergebnisse aus Projekten
• pulse: alles, was gerade so passiert
• research: Berichte und Ergebnisse aus Forschungsvorhaben und Kooperationen
• study: alles rund ums Studium
• toolbox: Helferlein für den Alltag von Medieninformatikern

Thanks to Phil Hawksworth

• meaningful URL for every Page (or Piece) of Content
• alle URLs sind Crawable, Curlaable und indizierbar
• jede URL liefert wirklichen Content
• URLs sind möglichst stabil
• schnelles Rendering und gute, wahrgenommene Performance
• hohe Ausfallsicherheit
• geringen Payload
• Möglichkeit für Übergänge and visuelle Effekte
• minimale Hosting Komplexität

• Fokus auf Content/ Dokumente
• Offenheit des Systems
• in sich geschlossene Dokumente
• Zweitverwertung von Dokumenten ist leicht möglich
• unterschiedliche Autoren
• einfache Struktur
• Layout und Content entkoppelt
• …

Hugo

Ein sehr flexiber und schneller Static Site Generator.

Hugos inhaltliches Basiskonzept

• Markdown ist wirklich hübsch
• die Kombination aus Markdown und Git ist topp!
• Entwurf eines Systems um den Content herum ist interessant aber gar nicht so leicht
• konsequente Trennung von Content und Layout ist gar nicht so leicht
• Hugo's Lookup Order ist recht komplex
• Hugo's Lists & Pages Konzept ist cool, aber herausforderend