What, why and how to JAMstack

A presentation at Oxford Geek Night in February 2019 in Oxford, UK by Phil Hawksworth

Slide 1

WHAT, WHY AND HOW TO JAMSTACK PHIL HAWKSWORTH

Slide 2

netlify What, why, and how to JAMstack February 2019 @philhawksworth STACKS FOR DAYZ AN / LAMP / MAMP / XAMP / ROR / WISA / MEA WISA / MEAN / LAMP / MAMP / XAMP / ROR /

Slide 3

netlify What, why, and how to JAMstack February 2019 @philhawksworth k c a t s m ja JAVASCRIPT / API / MARKUP

Slide 4

netlify What, why, and how to JAMstack February 2019 @philhawksworth @ PHIL HAWKSWORTH HEAD OF DEVELOPER RELATIONS, NETLIFY

Slide 5

netlify What, why, and how to JAMstack February 2019 @philhawksworth TEN YEARS

Slide 6

netlify What, why, and how to JAMstack February 2019 @philhawksworth FINDTHAT.AT/THEPAST http://archive.upcoming.org/event/oxford-geek-night-12-2434146 MAP STACK

Slide 7

netlify What, why, and how to JAMstack February 2019 @philhawksworth FINDTHAT.AT/THEPAST http://archive.upcoming.org/event/oxford-geek-night-12-2434146 MAP STACK

Slide 8

netlify What, why, and how to JAMstack February 2019 @philhawksworth

Slide 9

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC / PRE-RENDERED / JAMSTACK

Slide 10

WHAT, WHY AND HOW TO JAMSTACK PHIL HAWKSWORTH

Slide 11

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC

Slide 12

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC

Slide 13

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC

Slide 14

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC /ˈstatɪk/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.

Slide 15

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC /ˈstatɪk/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.

Slide 16

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC ARCHITECTURE? or EXPERIENCE?

Slide 17

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC VIRTUE a as

Slide 18

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC DYNAMIC vs

Slide 19

netlify What, why, and how to JAMstack c i m a n y d c i t a st February 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS

Slide 20

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC s n ea m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN

Slide 21

netlify What, why, and how to JAMstack February 2019 @philhawksworth STATIC s n ea m NO WORK TO BE DONE AT REQUEST TIME

Slide 22

netlify What, why, and how to JAMstack February 2019 @philhawksworth k c a t s jam DON’T GET HUNG UP ON THE JAM

Slide 23

netlify What, why, and how to JAMstack February 2019 @philhawksworth k c a t s jam DON’T GET STUCK ON THE JAM

Slide 24

netlify What, why, and how to JAMstack February 2019 @philhawksworth JAMSTACK s n ea m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN CAPABLE OF BEING ENHANCED WITH JAVASCRIPT AND APIS

Slide 25

netlify What, why, and how to JAMstack February 2019 @philhawksworth ! h h h h h s I SOMETIMES BUILT LAMP STACK SITES ON A MAC, AND I DIDN’T ALWAYS USE MYSQL MAP STACK

Slide 26

netlify What, why, and how to JAMstack February 2019 @philhawksworth FINDTHAT.AT/NNNN https://www.hawksworx.com/blog/the-next-generation-stack-is-nodejs-ready-to-go-mainstream/ MAP STACK

Slide 27

netlify What, why, and how to JAMstack February 2019 @philhawksworth FINDTHAT.AT/NNNN https://www.hawksworx.com/blog/the-next-generation-stack-is-nodejs-ready-to-go-mainstream/ MAP STACK

Slide 28

netlify What, why, and how to JAMstack February 2019 @philhawksworth WELL ACTUALLY… THIS JAMSTACK STUFF IS NOTHING NEW THAT VOICE ON THE INTERNET

Slide 29

netlify What, why, and how to JAMstack February 2019 BAKE, DON’T FRY – Aaron Swartz @philhawksworth

Slide 30

netlify What, why, and how to JAMstack February 2019 @philhawksworth I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ , 2002

Slide 31

netlify What, why, and how to JAMstack February 2019 @philhawksworth k c a t s m ja s r e l b a en

Slide 32

WHAT, WHY AND HOW TO JAMSTACK PHIL HAWKSWORTH

Slide 33

netlify What, why, and how to JAMstack February 2019 @philhawksworth BROWSERS EVERGREEN / RICH APIS / OFFLINE / PERFORMANCE / STANDARDISATION

Slide 34

netlify What, why, and how to JAMstack February 2019 @philhawksworth ECOSYSTEM GENERATORS / CONTENT / ASSETS / AUTHENTICATION / E-COMMERCE / SEARCH

Slide 35

netlify What, why, and how to JAMstack February 2019 @philhawksworth INFRASTRUCTURE TOOLING / CDN / CI/CD / AUTOMATION / TRIGGERS / EVENTS

Slide 36

netlify What, why, and how to JAMstack c i m a n y d c i t a st February 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS

Slide 37

netlify What, why, and how to JAMstack February 2019 @philhawksworth LAUNCH DAY

Slide 38

netlify What, why, and how to JAMstack GET TO THE CHOPPER CDN February 2019 @philhawksworth

Slide 39

netlify What, why, and how to JAMstack February 2019 FINDTHAT.AT/SSGS https://www.staticgen.com/ @philhawksworth

Slide 40

netlify What, why, and how to JAMstack February 2019 HOSTING LOCAL STATIC SERVER BUILD CONTENT TEMPLATES DATA @philhawksworth CDN

Slide 41

netlify What, why, and how to JAMstack February 2019 FINDTHAT.AT/DROP https://app.netlify.com/drop @philhawksworth

Slide 42

netlify What, why, and how to JAMstack February 2019 @philhawksworth

Slide 43

netlify What, why, and how to JAMstack February 2019 @philhawksworth AUTOMATION REPEATABILITY / PREDICTABILITY / ACCOUNTABILITY / AGILITY

Slide 44

netlify What, why, and how to JAMstack February 2019 @philhawksworth REPLICATION REPEATABILITY / PREDICTABILITY / COMNFIDENCE / VERSION CONTROL

Slide 45

netlify What, why, and how to JAMstack February 2019 HOSTING LOCAL STATIC SERVER BUILD CONTENT TEMPLATES DATA @philhawksworth CDN

Slide 46

netlify What, why, and how to JAMstack February 2019 @philhawksworth GIT-BASED DEPLOYMENTS

Slide 47

netlify What, why, and how to JAMstack February 2019 @philhawksworth NETLIFY LOCAL CDN STATIC SERVER BUILD GIT BUILD

Slide 48

netlify What, why, and how to JAMstack February 2019 @philhawksworth DATA SOURCES

Slide 49

netlify What, why, and how to JAMstack February 2019 @philhawksworth CONTENT APIS NETLIFY LOCAL CDN STATIC SERVER BUILD GIT BUILD

Slide 50

netlify What, why, and how to JAMstack February 2019 @philhawksworth PROVE IT, PHIL

Slide 51

netlify What, why, and how to JAMstack February 2019 @philhawksworth e y b d e l b na AUTOMATION AND REPLICATION

Slide 52

netlify What, why, and how to JAMstack February 2019 @philhawksworth PROVE IT, PHIL

Slide 53

netlify What, why, and how to JAMstack February 2019 @philhawksworth e y b d e l b na HAVING A KNOWABLE STATE

Slide 54

netlify What, why, and how to JAMstack February 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 55

netlify What, why, and how to JAMstack February 2019 @philhawksworth FINDTHAT.AT/AB https://www.youtube.com/watch?v=5VgpJJUOng4 JAMSTACK-COMMENTS.NETLIFY.COM ZERO JAVASCRIPT DEPENDENCIES VARIANTS ALL DEPLOYED AS PRODUCTION ZERO PERFORMANCE OVERHEADS

Slide 56

netlify What, why, and how to JAMstack February 2019 @philhawksworth VERY LOW FRICTION

Slide 57

netlify What, why, and how to JAMstack February 2019 @philhawksworth

Slide 58

netlify What, why, and how to JAMstack February 2019 @philhawksworth

Slide 59

netlify What, why, and how to JAMstack February 2019 @philhawksworth

Slide 60

netlify What, why, and how to JAMstack February 2019 @philhawksworth

Slide 61

netlify What, why, and how to JAMstack February 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth

Slide 62

netlify What, why, and how to JAMstack February 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth

Slide 63

netlify What, why, and how to JAMstack February 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth

Slide 64

netlify What, why, and how to JAMstack February 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth

Slide 65

netlify What, why, and how to JAMstack February 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth

Slide 66

netlify What, why, and how to JAMstack WEBSTASK.IO February 2019 @philhawksworth

Slide 67

netlify What, why, and how to JAMstack WEBSTASK.IO February 2019 @philhawksworth

Slide 68

WHAT, WHY AND HOW TO JAMSTACK PHIL HAWKSWORTH

Slide 69

netlify What, why, and how to JAMstack c i m a n y d c i t a st February 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS

Slide 70

netlify What, why, and how to JAMstack February 2019 @philhawksworth n a c k c a t s m a j REDUCE DEPLOYMENT FRICTION

Slide 71

netlify What, why, and how to JAMstack February 2019 @philhawksworth n a c k c a t s m a j RAISE DEPLOYMENT CONFIDENCE

Slide 72

netlify What, why, and how to JAMstack February 2019 @philhawksworth n a c k c a t s m a j SIMPLIFY PERFORMANCE SECURITY AND SCALE

Slide 73

netlify What, why, and how to JAMstack February 2019 @philhawksworth n a c k c a t s m a j LET YOU DO MORE WITH LESS

Slide 74

O H W D N A WHAT, WHY AND HOW TO JAMSTACK PHIL HAWKSWORTH

Slide 75

netlify What, why, and how to JAMstack February 2019 @philhawksworth REACTJS.ORG REACTJS.ORG STATIC

Slide 76

netlify What, why, and how to JAMstack February 2019 VUEJS.ORG REACTJS.ORG @philhawksworth

Slide 77

netlify What, why, and how to JAMstack February 2019 @philhawksworth YARNPKG.COM REACTJS.ORG STATIC

Slide 78

netlify What, why, and how to JAMstack February 2019 SMASHINGMAGAZINE.COM SMASHINGMAGAZINE.COM @philhawksworth

Slide 79

netlify What, why, and how to JAMstack February 2019 APP.NETLIFY.COM SMASHINGMAGAZINE.COM @philhawksworth

Slide 80

netlify What, why, and how to JAMstack February 2019 NETLIFY.COM IS A JAMSTACK SITE HOSTED ON NETLIFY USING NETLIFY TO NETLIFY NETLIFY @philhawksworth

Slide 81

netlify What, why, and how to JAMstack February 2019 FINDTHAT.AT/CONF https://jamstackconf.com @philhawksworth

Slide 82

netlify What, why, and how to JAMstack February 2019 @philhawksworth N O D N O L Y L U J 0 1 9 FINDTHAT.AT/CONF https://jamstackconf.com

Slide 83

netlify What, why, and how to JAMstack February 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 84

netlify What, why, and how to JAMstack February 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 85

THANKS FINDTHAT.AT/OGNJAM @PHILHAWKSWORTH