A presentation at NodeConf EU in in Kilkenny, Ireland by Stefan Baumgartner
JAMstackin’ Cloud ready architecture for web sites
Story time: Guess the stack
10 pages of intranet information. Campus overview, organisational charts and most important telephone numbers. Updated 2-3x per year
10 pages of intranet information. Campus overview, organisational charts and most important telephone numbers. Updated 2-3x per year Liferay Portal
Foodie-Facebook! 1000s of members put recipes online, like and share. They can put recipes on their weekly food plan. Coaches can comment and help adjusting.
Foodie-Facebook! 1000s of members put recipes online, like and share. They can put recipes on their weekly food plan. Coaches can comment and help adjusting. Wordpress
An event page, where people can select seats and tickets to a multitude of events in real-time. They can reserve seats for friends who can buy within a couple of hours.
An event page, where people can select seats and tickets to a multitude of events in real-time. They can reserve seats for friends who can buy within a couple of hours. A Java enterprise application
An event page, where people can select seats and tickets to a multitude of events in real-time. They can reserve seats for friends who can buy within a couple of hours. A Java Enterprise application, publishing 20 JSON files and 7 PHP scripts every other hour.
The tools of our trade
Front-End: Markup, CSS, JS
CMS: Data, structures, editors Front-End: Markup, CSS, JS
Application: Process, state CMS: Data, structures, editors Front-End: Markup, CSS, JS
Hosting: Availability, stability, security Application: Process, state CMS: Data, structures, editors Front-End: Markup, CSS, JS
Hosting: Availability, stability, security Application: Process, state CMS: Data, structures, editors Front-End: Markup, CSS, JS
Technology Lock-In
Hosting: Availability, stability, security Application: Process, state CMS: Data, structures, editors Front-End: Markup, CSS, JS
Front-End: Markup, CSS, JS
Front-End
Templating languages
Templating languages
Static site generators
Static site generators
Data storage Fetch data Call renderer Renderer Deliver data Request Client Routing Render HTML Traditional “Pull” Architecture Deliver Response
CI Data storage Move all data, all possible content Server Renderer Render all HTML pages upfront in correct routes Request Client Routing “Push” Architecture of static sites Deliver Response
Hosting
Needs a build process Which increases as site grows bigger Not so good with binary data Some SSGs are more flexible than others
Applikation: Prozesse, Zustände CMS: Daten, Strukturen, Editoren Front-End: Markup, CSS, JS
Hosting: Availability, stability, security Applikation: Prozesse, Zustände CMS: Daten, Strukturen, Editoren Front-End: Markup, CSS, JS
Content
That’s nothing for non tech-savvy users!
Going headless
Git as a CMS -> Very specific audience Almost no good open source alternatives Big users pay big money What’s your content exit strategy
Hosting: Availability, stability, security Applikation: Prozesse, Zustände Front-End: Markup, CSS, JS
Hosting: Availability, stability, security Applikation: Prozesse, Zustände CMS: Data, structures, editors Front-End: Markup, CSS, JS
Applications
Serverless
Serverless is not about having no servers, it’s about not caring about servers “Functions as a Service”
It’s like developing for the browser, but on the server
const qs = require(‘querystring’) module.exports = async function(context, req) { const params = qs.parse(req.body) context.log(req, params) const message = { “personalizations”: [ { “to”: [ { “email”: “sbaumg@gmail.com” } ] } ], from: { email: params.mail }, subject: “Feedback from Website”, content: [{ type: ‘text/plain’, value: ${params.name} says: ${params.text} }] } return { httpResponse: { body: { msg: “Message sent!” }, status: 302 }, sendgrid: message } }
Accept: application/json Accept: text/html
Accept: text/html Accept: /
Serverless architectures are hard What about platform independence What if we like state More interfaces, more contracts
Hosting: Availability, stability, security CMS: Data, structures, editors Front-End: Markup, CSS, JS
Hosting: Availability, stability, security Application: Process state CMS: Data, structures, editors Front-End: Markup, CSS, JS
JAMstack
J avascript A PIs M arkup
J avascript A PIs M arkup Templated markup prebuilt at deploy time. Using a static site generator. Deployable anyhwere
J avascript A PIs M arkup Server side processes and DB actions are abstracted into reusable APIs over HTTPS and JavaScript
J avascript A PIs M arkup Dynamic processes are done on the client. Via JavaScript. Deployed markup is extended with functionality from APIs client-side.
build deploy enhance
Focus on builds and deployment Prepared functions for common use cases Ready for most web sites All-in Serverless: Every language, every technology Builds through builders or commands Static tags along Enterprise level Cloud: Azure Pipelines Azure Storage Azure CDN Azure Functions
No technology lock-in Incremental adoption
The most important thing about JAMstack is that you can start right away with a small piece of your current website.
Hosting Application Content Front-End
Hosting Application Content Front-End
Hosting Application Content Front-End
Hosting Application Content Front-End
Sum it up
Lots of technologies: Fragmentation Very platform specific This is 3rd party land! Exit strategies!
Every web site and web app that can be done with JAMstack, should be done with JAMstack — Stefan Baumgartner
(every web site can be done with JAMstack) — Stefan Baumgartner
@ddprrt organising 👉 scriptconf.org 👉 devone.at 👉 tsconf.eu podcasting 👉 workingdraft.de writing 👉 fettblog.eu
@ddprrt organising 👉 scriptconf.org 👉 devone.at 👉 tsconf.eu 🆕 podcasting 👉 workingdraft.de writing 👉 fettblog.eu
script’19 the feelgood javascript conference in linz october 25th, 2019 scriptconf.org
April 23rd, 2020
JAMStack is probably one of the most unsung, yet one of the most important trends in recent years. JAM stands for JavaScript, APIs, and Markup and describes an architecture tailored for the cloud. Markup to serve content fast, JavaScript to enhance experiences, APIs to get dynamic data. But there’s a lot more to that. JAMStack is a commitment to serverless architectures, DevOps best practices, CI/CD and progressive enhancement.
This talk gives a different introduction to JAMStack, coming from stories from the field where bad technology choices created chaos and havoc amongst projects. We split web applications into four layers and see how the hosting layer, the application layer, and content management evolve once we put the front-end into focus.
The audience will learn:
The following resources were mentioned during the presentation or are useful additional information.
A headless CMS
A good Node-based static site generator
A good resource to get started on the JAMstack
for free. You
can too.