Why JAMstack? Beyond static sites

A presentation at Certified Fresh Events - Modern Web Development with the JAMStack in May 2018 in by Phil Hawksworth

Slide 1

Slide 1

WHY JAMSTACK? BEYOND STATIC SITES PHIL HAWKSWORTH

Slide 2

Slide 2

Beyond static 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

WHY JAMSTACK? BEYOND STATIC SITES PHIL HAWKSWORTH

Slide 5

Slide 5

WHY JAMSTACK ? BEYOND STATIC SITES PHIL HAWKSWORTH

Slide 6

Slide 6

WHY JAMSTACK ? BEYOND STATIC SITES PHIL HAWKSWORTH

Slide 7

Slide 7

Beyond static May 2018 @philhawksworth netlify STATIC

Slide 8

Slide 8

Beyond static May 2018 @philhawksworth netlify STATIC

Slide 9

Slide 9

Beyond static May 2018 @philhawksworth netlify STATIC

Slide 10

Slide 10

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

Slide 11

Slide 11

Beyond static May 2018 @philhawksworth netlify

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

Slide 12

Slide 12

Beyond static May 2018 @philhawksworth netlify STATIC or ARCHITECTURE ? RESULT ?

Slide 13

Slide 13

Beyond static May 2018 @philhawksworth netlify STATIC or ARCHITECTURE ? EXPERIENCE ?

Slide 14

Slide 14

Beyond static May 2018 @philhawksworth netlify STATIC VIRTUE as a

Slide 15

Slide 15

Beyond static May 2018 @philhawksworth netlify STATIC beyond

Slide 16

Slide 16

Beyond static May 2018 @philhawksworth netlify jamstack JAVASCRIPT / API / MARKUP

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

Beyond static May 2018 @philhawksworth netlify DECOUPLING

Slide 20

Slide 20

netlify Beyond static May 2018 @philhawksworth

Slide 21

Slide 21

netlify Beyond static May 2018 @philhawksworth

Slide 22

Slide 22

netlify Beyond static May 2018 @philhawksworth

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

Beyond static May 2018 @philhawksworth netlify STATIC beyond

Slide 28

Slide 28

Beyond static May 2018 @philhawksworth netlify STATIC beyond EXPERIENCES

Slide 29

Slide 29

Beyond static May 2018 @philhawksworth netlify TOOLBELT

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

netlify Beyond static May 2018 @philhawksworth

Slide 33

Slide 33

Beyond static May 2018 @philhawksworth netlify

Slide 34

Slide 34

Beyond static May 2018 @philhawksworth netlify BUILD AUTOMATION TESTS CONTENT GATHERING SITE GENERATION OPTIMSATION DEPLOY / / / /

Slide 35

Slide 35

Beyond static May 2018 @philhawksworth netlify EXAMPLE

Slide 36

Slide 36

Beyond static May 2018 @philhawksworth netlify NETLIFY BUILD CDN LOCAL BUILD STATIC SERVER GIT CONTENT APIS BROWSER

Slide 37

Slide 37

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

Slide 38

Slide 38

Beyond static May 2018 @philhawksworth netlify NETLIFY BUILD CDN LOCAL BUILD STATIC SERVER GIT CONTENT APIS ⚡

Slide 39

Slide 39

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

Slide 40

Slide 40

Beyond static May 2018 @philhawksworth netlify WHAT EVENTS ?

Slide 41

Slide 41

Beyond static May 2018 @philhawksworth netlify EXTERNAL FORM SUBMISSIONS CONTENT UPDATES ACTIVITIY DETECTION SCHEDULED EVENTS GIT ACTIVITY NETLIFY FORM SUBMISSIONS BUILD/DEPLOY EVENTS SPLIT TEST EVENTS IDENTITY SERVICE EVENTS https://www.netlify.com/docs/functions/#event-triggered-functions

Slide 42

Slide 42

⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ Beyond static May 2018 @philhawksworth netlify NETLIFY BUILD CDN LOCAL BUILD STATIC SERVER GIT CONTENT APIS ⚡ ⚡ ⚡ ⚡

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

Beyond static May 2018 @philhawksworth netlify thepowerofserverless.info FAAS PROVIDERS HOSTING
FORM HANDLING PAYMENTS HEADLESS CMS MEDIA STORAGE NOTIFICATION SERVICES SEARCH PUSH NOTIFICATIONS AUTH

Slide 46

Slide 46

Beyond static May 2018 @philhawksworth netlify NETLIFY BUILD CDN LOCAL BUILD STATIC SERVER GIT APIS EVERYWHERE!!!

Slide 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

Beyond static May 2018 @philhawksworth netlify SERVERLESS TO THE RESCUE

Slide 50

Slide 50

Beyond static May 2018 @philhawksworth netlify SERVERLESS SECRETS PROXIED API CALLS DATA A LITTLE DYNAMISM

Slide 51

Slide 51

Beyond static May 2018 @philhawksworth netlify BRINGING IT ALL TOGETHER

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

Beyond static May 2018 @philhawksworth netlify jamstack-comments.netlify.com app.netlify.com

Slide 56

Slide 56

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

Slide 57

Slide 57

Beyond static May 2018 @philhawksworth netlify STATIC

Slide 58

Slide 58

Beyond static May 2018 @philhawksworth netlify STATIC ?

Slide 59

Slide 59

Beyond static May 2018 @philhawksworth netlify STATIC beyond

Slide 60

Slide 60

Beyond static May 2018 @philhawksworth netlify THANKS QUESTIONS @PHILHAWKSWORTH ?