JAMstackin’

A presentation at HalfStack Vienna in September 2019 in Vienna, Austria by Stefan Baumgartner

Slide 1

Slide 1

JAMstackin’ Cloud ready architecture for web sites

Slide 2

Slide 2

Story time: Guess the stack

Slide 3

Slide 3

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

Slide 4

Slide 4

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 5

Slide 5

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 6

Slide 6

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 7

Slide 7

The tools of our trade

Slide 8

Slide 8

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

Slide 9

Slide 9

Technology Lock-In

Slide 10

Slide 10

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

Slide 11

Slide 11

Front-End

Slide 12

Slide 12

Templating languages

Slide 13

Slide 13

Static site generators

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

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

Slide 17

Slide 17

Data storage Move all data, all possible content Renderer Render all HTML pages upfront in correct routes Request Client Routing “Push” Architecture of static sites Deliver Response

Slide 18

Slide 18

Hosting

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

Content

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

That’s nothing for non tech-savvy users!

Slide 31

Slide 31

Going headless

Slide 32

Slide 32

Slide 33

Slide 33

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

Slide 34

Slide 34

Git as a CMS -> Sounds good, doesn’t work Almost no good open source alternatives Big users pay big money What’s your content exit strategy

Slide 35

Slide 35

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

Slide 36

Slide 36

Applications

Slide 37

Slide 37

Serverless

Slide 38

Slide 38

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

Slide 39

Slide 39

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

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

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 44

Slide 44

Accept: application/json Accept: text/html

Slide 45

Slide 45

Accept: text/html Accept: /

Slide 46

Slide 46

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

Slide 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

JAMstack

Slide 50

Slide 50

J avascript A PIs M arkup

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

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 54

Slide 54

build deploy enhance

Slide 55

Slide 55

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 DevOps Azure Storage Azure CDN Azure Functions

Slide 56

Slide 56

No technology lock-in Incremental adoption

Slide 57

Slide 57

The most important thing about JAMstack is that you can start right away with a small piece of your current website.

Slide 58

Slide 58

Hosting Application Content Front-End

Slide 59

Slide 59

Hosting Application Content Front-End

Slide 60

Slide 60

Hosting Application Content Front-End

Slide 61

Slide 61

Slide 62

Slide 62

Slide 63

Slide 63

Sum it up

Slide 64

Slide 64

  • Every piece is independent Resilient, failsafe, sustainable Incremental adoption Full control of every part in your app

Slide 65

Slide 65

Lots of technologies: Fragmentation Very platform specific This is 3rd party land! Exit strategies!

Slide 66

Slide 66

Every web site and web app that can be done with JAMstack, should be done with JAMstack — Stefan Baumgartner

Slide 67

Slide 67

(every web site can be done with JAMstack) — Stefan Baumgartner

Slide 68

Slide 68

@ddprrt fettblog.eu · scriptconf.org · devone.at