JAMstack: Silly name. Serious stuff.

A presentation at International JavaScript Conference 2019 in May 2019 in London, UK by Phil Hawksworth

Slide 1

DO WE REALLY NEED THIS JAMSTACK THING? AND WHAT EVEN IS IT? PHIL HAWKSWORTH

Slide 2

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STACKS FOR DAYZ AN / LAMP / MAMP / XAMP / ROR / WISA / MEA WISA / MEAN / LAMP / MAMP / XAMP / ROR /

Slide 3

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth k c a t s m ja JAVASCRIPT / API / MARKUP

Slide 4

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth WHAT DOES THAT EVEN MEAN?

Slide 5

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DEFINITION / UNDERSTANDING IMPACT / OPPORTUNITIES TOOLS / SERVICES EXAMPLES / RESULTS

Slide 6

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth ISN’T THIS JUST A FANCY NEW NAME FOR STATIC SITES? REASONABLE VOICES

Slide 7

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth @ PHIL HAWKSWORTH DEVELOPER EXPERIENCE, NETLIFY

Slide 8

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth ISN’T THIS JUST A FANCY NEW NAME FOR STATIC SITES? REASONABLE VOICES

Slide 9

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SOME DEFINITIONS

Slide 10

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC

Slide 11

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC

Slide 12

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC

Slide 13

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC /ˈstatɪk/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.

Slide 14

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC EXPERIENCE ? or ARCHITECTURE ?

Slide 15

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC VIRTUE a as

Slide 16

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC DYNAMIC vs

Slide 17

netlify What even is the JAMstack? c i m a n y d c i t a st iJS, London, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS

Slide 18

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATICs n a e m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN

Slide 19

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATICs n a e m AN OPPORTUNITY TO REDUCE COMPLEXITY

Slide 20

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC VIRTUE a as

Slide 21

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SO…… REASONABLE VOICES

Slide 22

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth ISN’T THIS JUST A FANCY NEW NAME FOR STATIC SITES? REASONABLE VOICES

Slide 23

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth LET’S TALK STACKS

Slide 24

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth LAMP

Slide 25

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth APACHE PHP HTTP ROUTING AND SERVING PREPROCESSING MYSQL DATA ACCESS LINUX OPERATING SYSTEM WEB SERVER

Slide 26

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth JAM

Slide 27

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth APIs JAVASCRIPT MARKUP DATA ACCESS RUNTIME BROWSER STATICCDN SERVER HTTP ROUTING AND SERVING

Slide 28

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth k c a t s m ja PRE-RENDERED SERVED STATICALLY PROGRESSIVELY ENHANCED

Slide 29

netlify What even is the JAMstack? APACHE PHP MYSQL LINUX WEB SERVER iJS, London, 2019 @philhawksworth WITH JAMSTACK THE STACK HAS MOVED UP A LEVEL TO THE BROWSER APIs JAVASCRIPT MARKUP BROWSER

Slide 30

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth n a c s i h t SIMPLIFY DEPLOYMENTS

Slide 31

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PROJECT COMPLEXITY

Slide 32

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth THE PERFECT PROJECT TIMELINE FIXES ! BRIEF START SCOPE RE-SCOPE CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS

Slide 33

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth LAUNCH DAY

Slide 34

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth THE PERFECT PROJECT TIMELINE FIXES ” BRIEF START SCOPE RE-SCOPE CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS

Slide 35

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth THE PERFECT PROJECT TIMELINE ” :lemon: BRIEF START SCOPE RE-SCOPE FIXES CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS

Slide 36

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 37

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth THE PERFECT PROJECT TIMELINE FIXES

BRIEF

START SCOPE RE-SCOPE CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS

Slide 38

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 39

netlify What even is the JAMstack? c i m a n y d c i t a st iJS, London, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS

Slide 40

netlify What even is the JAMstack? GET TO THE CHOPPER CDN iJS, London, 2019 @philhawksworth

Slide 41

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth WELL ACTUALLY… THIS JAMSTACK STUFF IS NOTHING NEW THAT VOICE ON THE INTERNET

Slide 42

netlify What even is the JAMstack? iJS, London, 2019 BAKE, DON’T FRY – Aaron Swartz @philhawksworth

Slide 43

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ , 2002

Slide 44

netlify What even is the JAMstack? c i m a n y d c i t a st iJS, London, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS

Slide 45

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 46

netlify What even is the JAMstack? iJS, London, 2019 HOSTING LOCAL STATIC SERVER BUILD CONTENT TEMPLATES DATA @philhawksworth CDN

Slide 47

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth IMPACTS AND OPPORTUNITIES

Slide 48

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SECURITY

Slide 49

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth A GREATLY REDUCED SURFACE AREA

Slide 50

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth FAR FEWER MOVING PARTS TO ATTACK

Slide 51

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth YOUR-DOMAIN.COM/WP-ADMIN

Slide 52

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PERFORMANCE & SCALE

Slide 53

netlify What even is the JAMstack? c i m a n y d c i t a st iJS, London, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS

Slide 54

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DEVELOPER EXPERIENCE

Slide 55

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DEPLOYMENT CONFIDENCE

Slide 56

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth A JAMSTACK SITE CAN MORE EASILY HAVE IMMUTABLE, ATOMIC DEPLOYS

Slide 57

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 58

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth BEYOND STATIC

Slide 59

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth AUTOMATION REPEATABILITY / PREDICTABILITY / ACCOUNTABILITY / AGILITY

Slide 60

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth REPLICATION REPEATABILITY / PREDICTABILITY / CONFIDENCE / VERSION CONTROL

Slide 61

netlify What even is the JAMstack? iJS, London, 2019 HOSTING LOCAL STATIC SERVER BUILD CONTENT TEMPLATES DATA @philhawksworth CDN

Slide 62

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth GIT-BASED DEPLOYMENTS

Slide 63

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth CI/CD + HOSTING LOCAL CDN STATIC SERVER BUILD GIT BUILD

Slide 64

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DATA SOURCES

Slide 65

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth CONTENT APIS CI/CD + HOSTING LOCAL CDN STATIC SERVER BUILD GIT BUILD

Slide 66

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DEPLOYING WITH LOW FRICTION n i s lt u s e r HIGH CONFIDENCE

Slide 67

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth A RIDICULOUS AUTOMATION EXAMPLE

Slide 68

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 69

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 70

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 71

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 72

netlify What even is the JAMstack? iJS, London, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth

Slide 73

netlify What even is the JAMstack? iJS, London, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth

Slide 74

netlify What even is the JAMstack? iJS, London, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth

Slide 75

netlify What even is the JAMstack? iJS, London, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth

Slide 76

netlify What even is the JAMstack? WEBSTASK.IO iJS, London, 2019 @philhawksworth

Slide 77

netlify What even is the JAMstack? WEBSTASK.IO iJS, London, 2019 @philhawksworth

Slide 78

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth ( DON’T DO THIS )

Slide 79

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth EXAMPLES AND RESULTS

Slide 80

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth REACTJS.ORG REACTJS.ORG STATIC

Slide 81

netlify What even is the JAMstack? iJS, London, 2019 VUEJS.ORG REACTJS.ORG @philhawksworth

Slide 82

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth YARNPKG.COM REACTJS.ORG STATIC

Slide 83

netlify What even is the JAMstack? iJS, London, 2019 SMASHINGMAGAZINE.COM SMASHINGMAGAZINE.COM @philhawksworth

Slide 84

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth WE HAD SOME CACHING ISSUES… WITH PROBABLY EVERY SINGLE WORDPRESS CACHING PLUGIN OUT THERE VITALY FRIEDMAN

Slide 85

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PLATFORMS from 5 to 1 https://www.netlify.com/case-studies/smashing/

Slide 86

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SMASHINGMAGAZINE.COM TIME TO FIRST LOAD m o r f to 800MS 80MS https://www.netlify.com/case-studies/smashing/

Slide 87

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth proxx

Slide 88

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PROXX.APP PAYLOAD TO INTERACTIVE 25KB https://web.dev/proxx-announce/

Slide 89

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PROXX.APP TIME TO INTERACTIVE r e d un 5 SECONDS https://web.dev/proxx-announce/

Slide 90

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth JAVASCRIPT

Slide 91

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth JAMSTACK SITES DON’T HAVE TO DEPEND ON JAVASCRIPT A COMMON MISCONCEPTION

Slide 92

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 93

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SHIP LESS JAVASCRIPT ALEX RUSSELL

Slide 94

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SOMETHING, SOMETHING POWER, SOMETHING, SOMETHING RESPONSIBILITY VARIOUS MARVEL CHARACTERS

Slide 95

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PRERENDING TO REMOVE THE NEED FOR AN ORIGIN SERVER PROGRESSIVE ENHANCEMENT TO ENRICH THE EXPERIENCE WITH JAVASCRIPT AND SERVICES VIA APIS

Slide 96

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth AUGMENTING JAMSTACK SITES

Slide 97

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth I ABSOLUTELY POSITIVELY NEED A LITTLE LOGIC ON A SERVER MANY OF US, SOMETIMES

Slide 98

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SERVERLESS TO THE RESCUE

Slide 99

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth FUNCTIONS AS A SERVICE

Slide 100

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth FUNCTIONS AS A SERVICE ENABLE A MICROSERVICES ARCHITECTURE

Slide 101

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth LOWERING THE OVERHEAD OF DEPLOYING / MAINTAINING / MANAGING / SECURING OUR CODE

Slide 102

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth exports.handler = (event, context, callback) !=> { callback(null, { statusCode: 200, body: ‘Hello UpFront!’ }) }

Slide 103

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SHIFT THE BURDEN SOFTWARE AND PATCHES OPERATING SYSTEM NETWORK PHYSICAL / VIRTUAL SCALING

Slide 104

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 105

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 106

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth BY BREAKING THE MONOLITH APART, WE CAN ENJOY BOUGHT OR BUILT SPECIALIST SERVICES

Slide 107

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth ONE JOB

Slide 108

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth YOU HAD ONE JOB

Slide 109

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth EVENTS, WEBHOOKS, MICROSERVICES, AND APIS PROVIDE GLUE

Slide 110

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SERVICES

Slide 111

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth BOUGHT SERVICES

Slide 112

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth CMS ASSETS COMMERCE IDENTITY CONTENTFUL SANITY GRAPHCMS CLOUDINARY STRIPE SNIPCART AUTH0 OAUTH

Slide 113

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth BUT WHAT OF THE RISK?

Slide 114

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth the DREAM CRUSHER

Slide 115

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 116

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 117

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 118

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth

Slide 119

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth VENDORS PROVIDING A SINGLE SERVICE DEPEND ON ITS SUCCESS MORE THAN YOU DO

Slide 120

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth TECHNICAL AND SERVICE LEVEL CONTRACTS

Slide 121

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth BOUGHT BUILT SERVICES

Slide 122

netlify What even is the JAMstack? CMS iJS, London, 2019 DAMS @philhawksworth COMMERCE IDENTITY

Slide 123

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SMALLER SURFACES ARE EASIER TO REASON ABOUT, AND CREATE GREATER AGILITY

Slide 124

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth GREATER FOCUS PROVIDES A MORE OBVIOUS PATH TO MVP

Slide 125

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth A NOTE ABOUT MVP

Slide 126

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth I WOULDN’T USE A MINIMUM VIABLE PARACHUTE A SPEAKER AT A CONFERENCE ONCE

Slide 127

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth I FUCKING WOULD ME, IMAGINING A SITUATION WHEN I’D NEED A PARACHUTE

Slide 128

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth MVP IS NOT CHOOSING A WEAK PRODUCT OVER GOOD PRODUCT

Slide 129

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth MVP IS CHOOSING TO HAVE SOMETHING NOW AND SOMETHING BETTER LATER

Slide 130

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth WEBHOOKS AND SERVERLESS AND AUTOMATION (OH MY!)

Slide 131

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth FINDTHAT.AT/COMMENTS https://jamstack-comments.netlify.com JAMSTACK-COMMENTS.NETLIFY.COM ZERO JAVASCRIPT DEPENDENCIES COMMENTS AS PAGE CONTENT NOTIFICATIONS AND MODERATION VIA SLACK

Slide 132

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth WHAT IS THE JAMSTACK? THE QUESTION WE STARTED WITH

Slide 133

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth e r a s e it s k c sta jam RENDERED IN ADVANCE NOT DEPENDENT ON AN ORIGIN PROGRESSIVELY ENHANCED IN THE BROWSER WITH JAVASCRIPT

Slide 134

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DO WE NEED IT? THE QUESTION WE STARTED WITH

Slide 135

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth s g n i r b k c a t s m ja REDUCED INFRASTRUCTURE COSTS IMPROVED SECURITY, PERFORMANCE, SCALABILITY PROJECT LIFECYCLE CONFIDENCE

Slide 136

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC SITE GENERATORS staticgen.com NETLIFY STATIC SET YOUR WATCH - FRICTION FREE DEPLOYMENTS www.netlify.com https://www.netlify.com/blog/2018/08/02/exploring-the-potential-of-friction-free-deployments/ ONE-CLICK TEMPLATES templates.netlify.com

Slide 137

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PHIL’S OWN JAMSTACK SITE hawksworx.com HEADLESS / DECOUPLED CMS STATIC ABOUT THE JAMSTACK / COMMUNITY headlesscms.org jamstack.org THE NEW DYNAMIC www.thenewdynamic.org/

Slide 138

netlify What even is the JAMstack? iJS, London, 2019 FINDTHAT.AT/CONF https://jamstackconf.com @philhawksworth

Slide 139

netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth N O D N O L Y L U J 0 1 9 FINDTHAT.AT/CONF https://jamstackconf.com

Slide 140

THANKS FINDTHAT.AT/JAMSTACK @PHILHAWKSWORTH