JAMstackin’

A presentation at NodeConf EU in November 2019 in Kilkenny, Ireland by Stefan Baumgartner

Slide 1

JAMstackin’ Cloud ready architecture for web sites

Slide 2

Story time: Guess the stack

Slide 3

10 pages of intranet information. Campus overview, organisational charts and most important telephone numbers. Updated 2-3x per year

Slide 4

10 pages of intranet information. Campus overview, organisational charts and most important telephone numbers. Updated 2-3x per year Liferay Portal

Slide 5

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.

Slide 6

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

Slide 7

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.

Slide 8

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

Slide 9

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.

Slide 10

The tools of our trade

Slide 11

Front-End: Markup, CSS, JS

Slide 12

CMS: Data, structures, editors Front-End: Markup, CSS, JS

Slide 13

Application: Process, state CMS: Data, structures, editors Front-End: Markup, CSS, JS

Slide 14

Hosting: Availability, stability, security Application: Process, state CMS: Data, structures, editors Front-End: Markup, CSS, JS

Slide 15

Hosting: Availability, stability, security Application: Process, state CMS: Data, structures, editors Front-End: Markup, CSS, JS

Slide 16

Technology Lock-In

Slide 17

Hosting: Availability, stability, security Application: Process, state CMS: Data, structures, editors Front-End: Markup, CSS, JS

Slide 18

Front-End: Markup, CSS, JS

Slide 19

Front-End

Slide 20

Templating languages

Slide 21

Templating languages

Slide 22

Static site generators

Slide 23

Static site generators

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Data storage Fetch data Call renderer Renderer Deliver data Request Client Routing Render HTML Traditional “Pull” Architecture Deliver Response

Slide 34

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

Slide 35

Hosting

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Sources: Markdown, JSON, APIs It’s just HTML Deploy it: Storage, Dropbox Scaleable, blazingly fast, secure

Slide 41

Needs a build process Which increases as site grows bigger Not so good with binary data Some SSGs are more flexible than others

Slide 42

Applikation: Prozesse, Zustände CMS: Daten, Strukturen, Editoren Front-End: Markup, CSS, JS

Slide 43

Hosting: Availability, stability, security Applikation: Prozesse, Zustände CMS: Daten, Strukturen, Editoren Front-End: Markup, CSS, JS

Slide 44

Content

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

That’s nothing for non tech-savvy users!

Slide 51

Going headless

Slide 52

Slide 53

Slide 54

CMS, not Content Design System 100% output independent For regular size projects free/cheap plans CMS status independent of site status

Slide 55

Git as a CMS -> Very specific audience Almost no good open source alternatives Big users pay big money What’s your content exit strategy

Slide 56

Hosting: Availability, stability, security Applikation: Prozesse, Zustände Front-End: Markup, CSS, JS

Slide 57

Hosting: Availability, stability, security Applikation: Prozesse, Zustände CMS: Data, structures, editors Front-End: Markup, CSS, JS

Slide 58

Applications

Slide 59

Serverless

Slide 60

Serverless is not about having no servers, it’s about not caring about servers “Functions as a Service”

Slide 61

It’s like developing for the browser, but on the server

Slide 62

Slide 63

Slide 64

Slide 65

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 } }

Slide 66

Accept: application/json Accept: text/html

Slide 67

Accept: text/html Accept: /

Slide 68

Pay what you need Manageable attack surface Defined Input and Output Integration with 3rd party services is easy

Slide 69

Serverless architectures are hard What about platform independence What if we like state More interfaces, more contracts

Slide 70

Hosting: Availability, stability, security CMS: Data, structures, editors Front-End: Markup, CSS, JS

Slide 71

Hosting: Availability, stability, security Application: Process state CMS: Data, structures, editors Front-End: Markup, CSS, JS

Slide 72

JAMstack

Slide 73

J avascript A PIs M arkup

Slide 74

J avascript A PIs M arkup Templated markup prebuilt at deploy time. Using a static site generator. Deployable anyhwere

Slide 75

J avascript A PIs M arkup Server side processes and DB actions are abstracted into reusable APIs over HTTPS and JavaScript

Slide 76

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.

Slide 77

build deploy enhance

Slide 78

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