JAMstack and Netlify - Do we really need another buzzword?

A presentation at McrFRED in May 2018 in Manchester, UK by Phil Hawksworth

Slide 1

Slide 1

JAMSTACK 
 DO WE REALLY NEED ANOTHER BUZZWORD? PHIL HAWKSWORTH

Slide 2

Slide 2

JAMstack May 2018 @philhawksworth netlify HELLO

Slide 3

Slide 3

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify PHIL

HAWKSWORTH AFTER DINNER SPEAKER

@

Slide 4

Slide 4

JAMSTACK 
 DO WE REALLY NEED ANOTHER BUZZWORD? PHIL HAWKSWORTH

Slide 5

Slide 5

JAMstack May 2018 @philhawksworth netlify JAMSTACK

Slide 6

Slide 6

JAMstack May 2018 @philhawksworth netlify STATIC

Slide 7

Slide 7

JAMstack May 2018 @philhawksworth netlify STATIC

Slide 8

Slide 8

JAMstack May 2018 @philhawksworth netlify STATIC

Slide 9

Slide 9

JAMstack May 2018 @philhawksworth netlify STATIC / ˈ stat ɪ k/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.

Slide 10

Slide 10

JAMstack May 2018 @philhawksworth netlify

STATIC / ˈ stat ɪ k/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.

Slide 11

Slide 11

JAMstack May 2018 @philhawksworth netlify STATIC or ARCHITECTURE ? RESULT ?

Slide 12

Slide 12

JAMstack May 2018 @philhawksworth netlify STATIC or ARCHITECTURE ? EXPERIENCE ?

Slide 13

Slide 13

JAMstack May 2018 @philhawksworth netlify STATIC VIRTUE as a

Slide 14

Slide 14

JAMstack May 2018 @philhawksworth netlify STATIC beyond

Slide 15

Slide 15

JAMstack May 2018 @philhawksworth netlify jamstack JAVASCRIPT / API / MARKUP

Slide 16

Slide 16

JAMstack May 2018 @philhawksworth netlify APIs SITE (JAVASCRIPT) JAVASCRIPT MARKUP BUILD

Slide 17

Slide 17

JAMstack May 2018 @philhawksworth netlify APIs SITE (JAVASCRIPT) JAVASCRIPT MARKUP BUILD APIs APIs APIs APIs

Slide 18

Slide 18

JAMstack May 2018 @philhawksworth netlify DECOUPLING

Slide 19

Slide 19

netlify JAMstack May 2018 @philhawksworth

Slide 20

Slide 20

netlify JAMstack May 2018 @philhawksworth

Slide 21

Slide 21

netlify JAMstack May 2018 @philhawksworth

Slide 22

Slide 22

JAMstack May 2018 @philhawksworth netlify APIs SITE (JAVASCRIPT) JAVASCRIPT MARKUP BUILD

Slide 23

Slide 23

JAMstack May 2018 @philhawksworth netlify SITE (JAVASCRIPT) JAVASCRIPT MARKUP BUILD APIs

Slide 24

Slide 24

JAMstack May 2018 @philhawksworth netlify SITE (JAVASCRIPT) JAVASCRIPT MARKUP BUILD APIs

Slide 25

Slide 25

JAMstack May 2018 @philhawksworth netlify ECOSYSTEM CONTENT E-COMMERCE AUTHENTICATION EVENTS ASSETS / / / /

Slide 26

Slide 26

JAMstack May 2018 @philhawksworth netlify STATIC beyond

Slide 27

Slide 27

JAMstack May 2018 @philhawksworth netlify STATIC beyond EXPERIENCES

Slide 28

Slide 28

JAMstack May 2018 @philhawksworth netlify TOOLBELT

Slide 29

Slide 29

JAMstack May 2018 @philhawksworth netlify TOOLBELT BUILD AUTOMATION ACTION TRIGGERS EVENTS APIs SERVERLESS

Slide 30

Slide 30

JAMstack May 2018 @philhawksworth netlify

Slide 31

Slide 31

JAMstack May 2018 @philhawksworth netlify GET TO THE CDN

Slide 32

Slide 32

JAMstack May 2018 @philhawksworth netlify NETLIFY CDN LOCAL BUILD STATIC SERVER

Slide 33

Slide 33

JAMstack May 2018 @philhawksworth netlify

Slide 34

Slide 34

JAMstack May 2018 @philhawksworth netlify EVERYTHING VERSION CONTROL For

Slide 35

Slide 35

JAMstack May 2018 @philhawksworth netlify NETLIFY BUILD CDN LOCAL BUILD STATIC SERVER GIT

Slide 36

Slide 36

JAMstack May 2018 @philhawksworth netlify A QUICK TOUR 
 OVERVIEW & SETTINGS https://app.netlify.com https://github.com/philhawksworth/eleventyone

Slide 37

Slide 37

JAMstack May 2018 @philhawksworth netlify A QUICK TOUR 
 OVERVIEW & SETTINGS https://app.netlify.com SITE SETTINGS DEPLOY SETTINGS DEPLOY FROM GIT DEPLOYMENTS / ROLLBACKS ENVIRONMENT VARIABLES DEPLOY HOOKS 
 NOTIFICATIONS https://github.com/philhawksworth/eleventyone

Slide 38

Slide 38

JAMstack May 2018 @philhawksworth netlify BONUS BOOTSTRAP 
 THE DEPLOY TO NETLIFY BUTTON https://templates.netlify.com https://github.com/bdougie/casper-cms-template

Slide 39

Slide 39

JAMstack May 2018 @philhawksworth netlify ENVIRONMENTS
ON DEMAND 
 BRANCH DEPLOYS

https://app.netlify.com/sites/hawksworx/

Slide 40

Slide 40

JAMstack May 2018 @philhawksworth netlify ENVIRONMENTS
ON DEMAND 
 BRANCH DEPLOYS

https://app.netlify.com/sites/hawksworx/ BRANCH DEPLOY OPTIONS BRANCH URLS DEPLOY URLS

Slide 41

Slide 41

JAMstack May 2018 @philhawksworth netlify SPLIT TESTING 
 A BRANCHY BONUS

https://app.netlify.com/sites/hawksworx/ https://www.hawksworx.com/gimme-gimme

Slide 42

Slide 42

JAMstack May 2018 @philhawksworth netlify SPLIT TESTING 
 A BRANCHY BONUS

https://app.netlify.com/sites/hawksworx/ NOMINATING BRANCHES TRAFFIC SHAPING BRANCH AFFINITY COOKIE TRICK https://www.hawksworx.com/gimme-gimme

Slide 43

Slide 43

JAMstack May 2018 @philhawksworth netlify FORMS 
 A COMMON CEILING

https://app.netlify.com/sites/hawksworx/ https://www.hawksworx.com/ask-me/anything

Slide 44

Slide 44

JAMstack May 2018 @philhawksworth netlify I ABSOLUTELY POSITIVELY NEED A LITTLE LOGIC
ON A SERVER

Slide 45

Slide 45

JAMstack May 2018 @philhawksworth netlify SERVERLESS TO THE RESCUE

Slide 46

Slide 46

JAMstack May 2018 @philhawksworth netlify FUNCTIONS 
 AS A SERVICE

https://github.com/netlify/create-react-app-lambda

Slide 47

Slide 47

JAMstack May 2018 @philhawksworth netlify FUNCTIONS 
 AS A SERVICE

https://github.com/netlify/create-react-app-lambda NO AWS CONFIGURATION INSTANT PROVISIONING API GATWEAY & URLS IMMUTABLE VERSIONS SITE SYNCHRONICITY

Slide 48

Slide 48

JAMstack May 2018 @philhawksworth netlify TOOLBELT BUILD AUTOMATION ACTION TRIGGERS EVENTS APIs SERVERLESS

Slide 49

Slide 49

JAMstack May 2018 @philhawksworth netlify TOOLBELT BUILD AUTOMATION ACTION TRIGGERS EVENTS APIs SERVERLESS

Slide 50

Slide 50

JAMstack May 2018 @philhawksworth netlify ONLY AN IDIOT WOULD DO A LIVE DEMO OF ALL OF THESE MOVING PARTS AT ONCE

Slide 51

Slide 51

JAMstack May 2018 @philhawksworth netlify ONLY AN IDIOT WOULD DO A LIVE DEMO OF ALL OF THESE MOVING PARTS AT ONCE

Slide 52

Slide 52

JAMstack May 2018 @philhawksworth netlify jamstack-comments.netlify.com app.netlify.com

Slide 53

Slide 53

JAMstack May 2018 @philhawksworth netlify TOOLBELT BUILD AUTOMATION ACTION TRIGGERS EVENTS APIs SERVERLESS

Slide 54

Slide 54

JAMstack May 2018 @philhawksworth netlify STATIC

Slide 55

Slide 55

JAMstack May 2018 @philhawksworth netlify STATIC ?

Slide 56

Slide 56

JAMstack May 2018 @philhawksworth netlify STATIC beyond

Slide 57

Slide 57

JAMstack May 2018 @philhawksworth netlify THANKS QUESTIONS @PHILHAWKSWORTH ?