Introduction to Jamstack

INTRODUCTION TO JAMSTACK PHIL HAWKSWORTH

y n a m e r a e r the APPROACHES TO DELIVERING WEBSITES

ASK FOR STUFF

ASK FOR STUFF GET STUFF

ASK FOR STUFF DO STUFF GET STUFF

LOAD BALANCER WEB SERVERS DB SERVERS

CDN LOAD BALANCER WEB SERVERS DB SERVERS

IT GOT COMPLICATED

y l i k c u l but WE’VE BEEN LEARNING AND BUILDING NEW TOOLS

BROWSERS GOT MORE CAPABLE PROCESSES MATURED TOOLING IMPROVED

WHAT IS THE JAMSTACK?

s e o d t a h w k c a t s jam s e o d t a h w k c a t s jam STAND FOR? MEAN?

k c a t s m ja JAVASCRIPT / API / MARKUP

k c sta the layers of technology which deliver your web site or application

s e o d t a h w k c a t s jam s e o d t a h w k c a t s jam STAND FOR? MEAN?

k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

STACKS FOR DAYZ AN / LAMP / MAMP / XAMP / ROR / WISA / MEA WISA / MEAN / LAMP / MAMP / XAMP / ROR /

LAMPSTACK

APACHE PHP HTTP ROUTING AND SERVING PREPROCESSING MYSQL DATA ACCESS LINUX OPERATING SYSTEM WEB SERVER

JAMSTACK

APIs JAVASCRIPT DATA ACCESS RUNTIME MARKUP BROWSER STATIC SERVER / CDN HTTP ROUTING AND SERVING

k c a t s m ja PRE-RENDERED LEVERAGE THE BROWSER WITHOUT A WEBSERVER

APACHE PHP MYSQL LINUX WEB SERVER WITH JAMSTACK THE STACK HAS MOVED UP A LEVEL TO THE BROWSER APIs JAVASCRIPT MARKUP BROWSER

ASK FOR STUFF GET STUFF

BAKE, DON’T FRY – Aaron Swartz http://www.aaronsw.com/weblog/000404

r o f s e v i t o m PRE-RENDERING

DOING THE WORK NOW, SO YOUR SERVERS DON’T HAVE TO LATER

PUT DISTANCE BETWEEN THE COMPLEXITY AND THE USER

n a c s i th SIMPLIFY DEPLOYMENTS

l a n o i it d a r t CDN LOAD BALANCER WEB SERVERS DB SERVERS

k c a t s m ja CDN

r o F VERSION CONTROL EVERYTHING

JAMSTACK ADVANTAGES SECURITY PERFORMANCE SCALE

SECURITY

A GREATLY REDUCED SURFACE AREA

l a n o i it d a r t k c a t s m ja CDN LOAD BALANCER WEB SERVERS DB SERVERS

FAR FEWER MOVING PARTS TO ATTACK

PERFORMANCE

TRADITIONAL STACKS ADD STATIC LAYERS IN ORDER TO IMPROVE PERFORMANCE

CACHING

l a n o i it d a r t k c a t s m ja CDN LOAD BALANCER WEB SERVERS DB SERVERS

SCALE

TRADITIONAL STACKS ADD INFRASTRUCTURE IN ORDER TO SCALE

l a n o i it d a r t k c a t s m ja CDN LOAD BALANCER WEB SERVERS DB SERVERS

… t u b , k o

ASK FOR STUFF GET STUFF

y l i k c u l but WE’VE BEEN LEARNING AND BUILDING NEW TOOLS

s r e l b a en STATIC SITE GENERATORS TOOLING AN AUTOMATION BROWSER CAPABILITIES SERVICES AND THE API ECONOMY

wh 1. 2. 3. 4. 5. 6. 7. ? e k a m e w l l i w at SIMPLY A STATIC SITE (32:14) JAVASCRIPT TO RENDER CONTENT (40:40) TEMPLATING AND ABSTRACTION WITH A STATIC SITE GENERATOR (52:21) CONTENT SOURCED FROM AN API AT BUILD TIME (1:24:09) LOCALISED CONTENT RENDERED AT BUILD TIME, ROUTED AT THE CDN (2:02:17 CLIENT-SIDE RENDER OF TARGETED CONTENT WITH BROWSER AND CONTENT APIS (2:28:08) BONUS: HOW TO GRADUALLY INTRODUCE THE JAMSTACK TO YOUR EXISTING INFRA (3:19:50)

EXAMPLE NUMBER 1 - ALL STATIC FINDTHAT.AT / JAMSTACK / EX1

k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

k c a t s m ja JAVASCRIPT / API / MARKUP

BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD

WAS THAT JAMSTACK? A QUICK SENSE CHECK

k c a t s m ja JAVASCRIPT / API / MARKUP

k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

WAS THAT JAMSTACK? A QUICK SENSE CHECK ! p ye

EXAMPLE NUMBER 2 - ADDING JAVASCRIPT FINDTHAT.AT / JAMSTACK / EX2

k c a t s m ja JAVASCRIPT / API / MARKUP

RENDERING

CLIENT-SIDE RENDERING SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME)

CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME)

CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT SERVER-SIDE RENDERING (BUILD TIME)

BROWSER WEBSERVER DATABASE MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE

CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT SERVER-SIDE RENDERING (BUILD TIME)

CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT GENERATE MARKUP AT BUILD TIME SO THAT IT IS READY TO TRANSMIT TO THE CLIENT WHEN NEEDED

BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD

CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT GENERATE MARKUP AT BUILD TIME SO THAT IT IS READY TO TRANSMIT TO THE CLIENT WHEN NEEDED

WAS THAT JAMSTACK? A QUICK SENSE CHECK

k c a t s m ja JAVASCRIPT / API / MARKUP

k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

WAS THAT JAMSTACK? A QUICK SENSE CHECK ! p ye

EXAMPLE NUMBER 3 - BUILDING WITH AN SSG FINDTHAT.AT / JAMSTACK / EX3

PREREQUISITES GIT INSTALLED (FREE) GITHUB ACCOUNT (FREE) NODEJS INSTALLED (FREE) NETLIFY ACCOUNT (FREE) NODEJS.ORG NETLIFY.COM GIT-SCM.COM GITHUB.COM

BROWSER WEBSERVER DATABASE MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE

BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD

CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT GENERATE MARKUP AT BUILD TIME SO THAT IT IS READY TO TRANSMIT TO THE CLIENT WHEN NEEDED

BUILD AUTOMATION a g n usi STATIC SITE GENERATOR

HOW TO CHOOSE? t h g i r e h t SSG

STATICGEN.COM

LANGUAGE WORKFLOW PERFORMANCE ARCHITECTURE OUTPUT CONTROL ADOPTION

OUR SSG FOR TODAY ELEVENTY 👋

WHY ELEVENTY? LOGICAL ARCHITECTURE FLEXIBLE TEMPLATING NOTHING YOU DON’T ASK FOR JAVASCRIPT ALL THE WAY DOWN

WAS THAT JAMSTACK? A QUICK SENSE CHECK

k c a t s m ja JAVASCRIPT / API / MARKUP

k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD

WAS THAT JAMSTACK? A QUICK SENSE CHECK ! p ye

EXAMPLE NUMBER 4 - BUILDING WITH DATA FROM AN API FINDTHAT.AT / JAMSTACK / EX4

BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD

DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD

DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD

USE DATA IN OUR SSG 2. REQUEST DATA FROM AND API 3. GET DATA IN DEV AND IN OUR DEPLOYMENTS

DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD

k c a t s m ja JAVASCRIPT / API / MARKUP

PERSONALIZATION

BROWSER WEBSERVER DATABASE MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE

s c i t sta s r o t a r e n e g ite APPLY STRUCTURED DATA TO TEMPLATES IN ORDER TO CREATE VIEWS AND ASSETS

BROWSER WEBSERVER DATABASE MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE

DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD

UNIVERSAL PERSONALIZED

UNIVERSAL LOCALIZED TARGETED PERSONALIZED

s r e l b a n e AUTOMATION TOOLS & SERVICES THE API ECONOMY

DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD

BROWSER WEBSERVER DATABASE MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE

BROWSER CDN WEBSERVER MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE DATABASE

DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD

EXAMPLE NUMBER 5 - GENERATING LOCALIZED CONTENT FINDTHAT.AT / JAMSTACK / EX5

GENERATE VIEWS FOR MANY LOCALES 2. ROUTE TRAFFIC AT THE CDN 3. GENERATE OUR CDN CONFIG

UNIVERSAL LOCALIZED TARGETED PERSONALIZED

WAS THAT JAMSTACK? A QUICK SENSE CHECK

k c a t s m ja JAVASCRIPT / API / MARKUP

k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

WAS THAT JAMSTACK? A QUICK SENSE CHECK ! p ye

CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT GENERATE MARKUP AT BUILD TIME SO THAT IT IS READY TO TRANSMIT TO THE CLIENT WHEN NEEDED

DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD

DATA SOURCES BROWSER API CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD

CLIENT-SIDE RENDERING 2. CLIENT-SIDE API CALLS 3. BROWSER APIS 4. SERVERLESS APIS …USING PROGRESSIVE ENHANCEMENT

PROGRESSIVE ENHANCEMENT 1. DECIDE ON WHAT IS CRITICAL TO THE EXPERIENCE 2. DELIVER AS MUCH AS POSSIBLE USING A LITTLE AS POSSIBLE 3. DETECT SUPPORTED FEATURES AND ENHANCE WHERE POSSIBLE

EXAMPLE NUMBER 6 - CLIENT-SIDE API CALLS FINDTHAT.AT / JAMSTACK / EX6

DATA SOURCES BROWSER API CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD

CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT GENERATE MARKUP AT BUILD TIME SO THAT IT IS READY TO TRANSMIT TO THE CLIENT WHEN NEEDED

k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

WAS THAT JAMSTACK? A QUICK SENSE CHECK ! p ye

TIME a r o f RECAP

? e k a m e w d i d t a wh 1. 2. 3. 4. 5. 6. SIMPLY A STATIC SITE JAVASCRIPT TO RENDER CONTENT TEMPLATING AND ABSTRACTION WITH A STATIC SITE GENERATOR CONTENT SOURCED FROM AN API AT BUILD TIME LOCALISED CONTENT RENDERED AT BUILD TIME, ROUTED AT THE CDN CLIENT-SIDE RENDER OF TARGETED CONTENT WITH BROWSER AND CONTENT APIS

k c a t s m ja JAVASCRIPT / API / MARKUP

k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

EASIER TO REASON ABOUT

DATA SOURCES BROWSER API CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD

s r e l b a n e AUTOMATION TOOLS & SERVICES THE API ECONOMY

THE GROWING ECOSYSTEM OF TOOLS AND SERVICES MOVES US BEYOND STATIC

https://medium.com/memory-leak/the-jamstack-its-pretty-sweet-e0834e4e6bb7

… t bu HOW DO WE GET THERE?

LET’S NOT TRY TO BOIL THE OCEAN https://unsplash.com/photos/0_UvKStn3iQ

THE FIRST STEP NEED NOT BE A GIANT LEAP https://unsplash.com/photos/wKlqqfNTLsI

DATA SOURCES BROWSER API CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD

RESOURCES FINDTHAT.AT / JAMSTACK / EX1 FINDTHAT.AT / JAMSTACK / EX2 FINDTHAT.AT / JAMSTACK / EX3 FINDTHAT.AT / JAMSTACK / EX4 FINDTHAT.AT / JAMSTACK / EX5 FINDTHAT.AT / JAMSTACK / EX6 FINDTHAT.AT / JAMSTACK / FCC FINDTHAT.AT / JAMSTACK / BOOK FINDTHAT.AT / JAMSTACK / SLACK

FINDTHAT.AT / JAMSTACK / FCC THANKS @PHILHAWKSWORTH

Introduction to Jamstack

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75