JAMstack And Netlify - Getting Started. And Levelling Up.

Slide 1

JAMSTACK AND NETLIFY WORKSHOP PHIL HAWKSWORTH

Slide 2

HELLO

Slide 3

@ PHIL HAWKSWORTH

Slide 4

Slide 5

Slide 6

STATIC / PRE-RENDERED / JAMSTACK

Slide 7

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

Slide 8

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

Slide 9

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

Slide 10

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

Slide 11

! h h h h h s I SOMETIMES BUILT LAMP STACK SITES ON A MAC, AND I DIDN’T ALWAYS USE MYSQL

Slide 12

STATIC

Slide 13

STATIC

Slide 14

STATIC

Slide 15

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

Slide 16

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

Slide 17

STATIC ARCHITECTURE? or RESULT?

Slide 18

STATIC ARCHITECTURE? or EXPERIENCE?

Slide 19

STATIC VIRTUE a as

Slide 20

STATIC / DYNAMIC STATIC

Slide 21

c i m a n y d c i t a st CDN LOAD BALANCER WEB SERVERS DB SERVERS

Slide 22

STATIC s n ea m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN

Slide 23

STATIC s n ea m NO WORK TO BE DONE AT REQUEST TIME

Slide 24

STATIC s n ea m A FAR SMALLER ATTACK SURFACE TO SECURE AND PROTECT

Slide 25

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

Slide 26

GET TO THE CHOPPER CDN

Slide 27

NETLIFY LOCAL STATIC SERVER BUILD CDN

Slide 28

Slide 29

BUILD AUTOMATION TESTS / CONTENT GATHERING / SITE GENERATION / OPTIMSATION / DEPLOY

Slide 30

NETLIFY LOCAL CDN STATIC SERVER BUILD GIT BUILD

Slide 31

DATA / CONTENT SOURCES

Slide 32

CONTENT APIS NETLIFY LOCAL CDN STATIC SERVER BUILD GIT BUILD

Slide 33

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

Slide 34

A BIT OF A TOUR THE NETLIFY ADMIN CONTINUOUS INTEGRATION ENVIRONMENT VARIABLES DEPLOY HOOKS NOTIFICATIONS DEPLOYS AND ROLLBACKS PROVISION UNLIMITED ENVIRONMENTS PREVIEW BUILDS FORM HANDLING A/B TESTING

Slide 35

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

Slide 36

LOW FRICTION

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

SETYOURWATCHBY.NETLIFY.COM

Slide 42

SETYOURWATCHBY.NETLIFY.COM

Slide 43

SETYOURWATCHBY.NETLIFY.COM

Slide 44

SETYOURWATCHBY.NETLIFY.COM

Slide 45

SETYOURWATCHBY.NETLIFY.COM

Slide 46

WEBSTASK.IO

Slide 47

WEBSTASK.IO

Slide 48

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

Slide 49

COMMENTS ENGINE DEMO or NETLIFY DEV?

Slide 50

FINDTHAT.AT / DEV

Slide 51

POSSIBILITIES

Slide 52

REACTJS.ORG STATIC

Slide 53

VUEJS.ORG STATIC

Slide 54

YARNPKG.COM STATIC

Slide 55

BUT ALSO

Slide 56

SMASHINGMAGAZINE.COM STATIC

Slide 57

STATIC SITE GENERATORS staticgen.com NETLIFY www.netlify.com NETLIFY DEV www.netlify.com/products/dev SET YOUR WATCH - FRICTION FREE DEPLOYMENTS https://www.netlify.com/blog/2018/08/02/exploring-the-potential-of-friction-free-deployments/ ONE-CLICK TEMPLATES templates.netlify.com

Slide 58

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

Slide 59

THANKS QUESTIONS? @PHILHAWKSWORTH