Next wave infrastructure – and how to use it for an easier life

A presentation at WeAreDevelopers World Congress in May 2018 in Vienna, Austria by Phil Hawksworth

Slide 1

Slide 1

NEXT WAVE INFRASTRUCTURE FOR AN EASIER LIFE PHIL HAWKSWORTH

Slide 2

Slide 2

Next wave infrastructure We Are Developers. 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

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify REALTIME FINANCIAL DATA

Slide 5

Slide 5

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify SHIPPING INSUARANCE

Slide 6

Slide 6

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify

Slide 7

Slide 7

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify

Slide 8

Slide 8

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify AFTER DINNER SPEAKER CRUSHER DREAM the

Slide 9

Slide 9

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify AFTER DINNER SPEAKER

Slide 10

Slide 10

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify AFTER DINNER SPEAKER

Slide 11

Slide 11

netlify Serving for the win JS Heros, 2018 @philhawksworth

Slide 12

Slide 12

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify MAKING THINGS

Slide 13

Slide 13

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify MY TRACK RECORD

Slide 14

Slide 14

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify STATIC SITES

GO ALL HOLLYWOOD 7 7 @PHILHAWKSWORTH FRONTEERS, AMSTERDAM, 2015 ~ I C CAN SMELL YOUR M S

Slide 15

Slide 15

netlify Serving for the win JS Heros, 2018 @philhawksworth SO, FOR THIS TALK

Slide 16

Slide 16

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify TIME TO JAZZ IT UP

Slide 17

Slide 17

NEXT WAVE INFRASTRUCTURE FOR AN EASIER LIFE PHIL HAWKSWORTH

Slide 18

Slide 18

NEXT WAVE INFRASTRUCTURE FOR

AN

EASIER

LIFE PHIL HAWKSWORTH

Slide 19

Slide 19

NEXT WAVE INFRASTRUCTURE FOR AN EASIER LIFE PHIL HAWKSWORTH

Slide 20

Slide 20

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify EXOTIC OR NEW

Slide 21

Slide 21

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

Slide 22

Slide 22

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify WE LEARN A LOT AT CONFERENCES ~ 150 talks ?!

Slide 23

Slide 23

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify CONFINING THESE LEARNINGS TO THEORY IS A WASTE

Slide 24

Slide 24

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify CONFINING THESE LEARNINGS TO OUR LOCAL ENVIRONMENTS IS A WASTE

Slide 25

Slide 25

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify LET’S MAKE SURE THE GOOD STUFF REACHES YOUR USERS

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify OH GREAT… 
 40 MINUTES OF SLIDES
ABOUT PROCESS ALL OF YOU, RIGHT NOW

Slide 29

Slide 29

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify FOR THE NEXT 40 MINUTES OR SO / WHERE DOES IT HURT? / 3 STORIES / MINDSETS AND RESOURCES

Slide 30

Slide 30

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify FOR THE NEXT 40 MINUTES OR SO / WHERE DOES IT HURT? / 3 STORIES / MINDSETS AND RESOURCES

Slide 31

Slide 31

netlify Serving for the win JS Heros, 2018 @philhawksworth WHERE DOES IT HURT?

Slide 32

Slide 32

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify CLIENTS / DEADLINES / COMPLEXITY PROJECTS USUALLY INVOLVE

Slide 33

Slide 33

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify SLEEPLESS NIGHTS

Slide 34

Slide 34

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify THE PERFECT PROJECT TIMELINE BRIEF AWARDS LAUNCH START SCOPE 
 RE-SCOPE CLIENT 
 REVIEW FINAL 
 SIGN OFF FIXES “ ” !

:lemon:

Slide 35

Slide 35

netlify Serving for the win JS Heros, 2018 @philhawksworth LAUNCH DAY

Slide 36

Slide 36

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify PROJECTS CAN BE HARD NEWSFLASH

Slide 37

Slide 37

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify LEARNING PROJECTS USUALLY INVOLVE

Slide 38

Slide 38

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify CHANGE PROJECTS USUALLY INVOLVE

Slide 39

Slide 39

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

Slide 40

Slide 40

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify OUR EVOLVING APPROACH TO INFRASTRUCTURE ON SITE HARDWARE SOME
RACK SPACE VIRTUAL SERVER SOFTWARE 
 AAS FUNCTIONS 
 AAS (not Rackspace) (perhaps Rackspace)

Slide 41

Slide 41

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify NEW DEPLOYMENT CONVENTIONS

Slide 42

Slide 42

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

Slide 43

Slide 43

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify MANAGING CHANGE MANAGING THE UNKNOWABLE THIS IS WHERE IT HURTS

Slide 44

Slide 44

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify AT CRUNCH TIME,
AS THE PRESSURE MOUNTS THIS IS WHERE IT HURTS

Slide 45

Slide 45

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify FOR THE NEXT 40 MINUTES OR SO / WHERE DOES IT HURT? / 3 STORIES / MINDSETS AND RESOURCES

Slide 46

Slide 46

netlify Serving for the win JS Heros, 2018 @philhawksworth DEPLOYING ON MY FIRST DAY Story one

Slide 47

Slide 47

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify A LARGE NATION-WIDE HEALTHCARE SITE

Slide 48

Slide 48

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify IT SHOULD HAVE
GONE LIVE
ON FRIDAY MY NEW BOSS

Slide 49

Slide 49

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

Slide 50

Slide 50

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify CAN YOU HELP THE TEAM
FIGURE OUT
THE DEPLOYMENT? MY NEW BOSS

Slide 51

Slide 51

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify THE PERFECT PROJECT TIMELINE BRIEF AWARDS LAUNCH START SCOPE 
 RE-SCOPE CLIENT 
 REVIEW FINAL 
 SIGN OFF FIXES “ ”

“FIGURE OUT” DEPLOYMENT

Slide 52

Slide 52

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify THE DEPLOYMENT

Slide 53

Slide 53

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify STAGING BOB ALICE PROD

Slide 54

Slide 54

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify FFFF FFF F FTP

Slide 55

Slide 55

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify UNKNOWABLE STATE

Slide 56

Slide 56

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify UNREPEATABLE PROCESS

Slide 57

Slide 57

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DID IT GO LIVE? YES, IT DID WAS IT CORRECT? YES. PROBABLY. HONESTLY, I DON’T THINK WE CAN EVERY REALLY KNOW

Slide 58

Slide 58

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify HOW DID THE NEXT DEPLOYMENT GO? I’M NOT READY TO TALK ABOUT THAT DO YOU NEED A HUG? YES. YES I DO

Slide 59

Slide 59

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify VERSION CONTROL SHOULD
EXTEND TO YOUR DEPLOYMENTS Lessons HUMAN INTERVENTION IN DEPLOYMENTS IS UNDESIRABLE HOLISTIC DEPLOYS ARE PREFERABLE TO PIECEMEAL DEPLOYS

Slide 60

Slide 60

netlify Serving for the win JS Heros, 2018 @philhawksworth SEARCHING FOR SYRIA Story two

Slide 61

Slide 61

netlify Serving for the win JS Heros, 2018 @philhawksworth

Slide 62

Slide 62

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify LOTS OF CHANGE

Slide 63

Slide 63

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify SIGNIFICANT POLITICAL SENSITIVITY

Slide 64

Slide 64

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify GREATER STAKEHOLDER DIVERSITY

Slide 65

Slide 65

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify A GLOBAL LAUNCH

Slide 66

Slide 66

“FIGURE OUT” DEPLOYMENT Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify THE PERFECT PROJECT TIMELINE BRIEF AWARDS LAUNCH START SCOPE 
 RE-SCOPE CLIENT 
 REVIEW FINAL 
 SIGN OFF FIXES “ ” $

Slide 67

Slide 67

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify

Slide 68

Slide 68

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

Slide 69

Slide 69

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DELIVER to QA

Slide 70

Slide 70

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DELIVER to PRODUCERS

Slide 71

Slide 71

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DELIVER to TRANSLATIONS TEAMS

Slide 72

Slide 72

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DELIVER to THE CLIENT

Slide 73

Slide 73

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DELIVER to THE CLIENT’S 
 BOSSES

Slide 74

Slide 74

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DELIVER to THE PUBLIC

Slide 75

Slide 75

netlify Serving for the win JS Heros, 2018 @philhawksworth LET’S DELIVER ANY VERSION AT ANY TIME OUR AMBITION

Slide 76

Slide 76

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify VERSION CONTROL

Slide 77

Slide 77

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify TAGS SHOULD CREATE RESOURCES AT URLS

Slide 78

Slide 78

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify URLS FTW

Slide 79

Slide 79

netlify Serving for the win JS Heros, 2018 @philhawksworth AITCH TEE TEE PEE 
 DOUBLE MEH ALEX SEXTON

Slide 80

Slide 80

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify http foobar.com ://

http foobar.com

Slide 81

Slide 81

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify TAGS SHOULD CREATE RESOURCES AT URLS

Slide 82

Slide 82

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DEV PROD STAGE GIT CI

Slide 83

Slide 83

netlify Serving for the win JS Heros, 2018 @philhawksworth

Slide 84

Slide 84

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DEV PROD STAGE GIT CI

Slide 85

Slide 85

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DEV PROD LIVE GIT CI STAGE STAGE STAGE STAGE STAGE STAGE

Slide 86

Slide 86

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DEV PROD LIVE GIT CI STAGE STAGE STAGE STAGE STAGE STAGE

Slide 87

Slide 87

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DEMOS / DISCUSSIONS
TESTS / ISSUES / SIGNOFF ALL HAPPENED AGAINST KNOWN VERSIONS

Slide 88

Slide 88

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify ADDRESSABLE AND ACCESSIBLE
BUILD VERSIONS ARE A HUGE WIN Lessons DECIDING WHEN AND WHAT TO TAG REQUIRES COORDINATION IMMUTABLE DEPLOYS TO PROD REMOVE UNCERTAINTY FROM LAUNCH DAY

Slide 89

Slide 89

netlify Serving for the win JS Heros, 2018 @philhawksworth NETLIFY BUILDING NETLIFY Story three

Slide 90

Slide 90

netlify Serving for the win JS Heros, 2018 @philhawksworth

Slide 91

Slide 91

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify NETLIFY.COM IS A JAMSTACK SITE HOSTED ON NETLIFY USING NETLIFY TO NETLIFY NETLIFY

Slide 92

Slide 92

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DEV PROD LIVE GIT CI STAGE STAGE STAGE STAGE STAGE STAGE

Slide 93

Slide 93

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify DEV NETLIFY LIVE GIT CI STAGE STAGE STAGE CDN

Slide 94

Slide 94

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify A GIT-BASED WORKFLOW ALL THE WAY TO PRODUCTION

Slide 95

Slide 95

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify jamstack JAVASCRIPT / API / MARKUP

Slide 96

Slide 96

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify APIs SITE (JAVASCRIPT) JAVASCRIPT MARKUP

Slide 97

Slide 97

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify APIs SITE (JAVASCRIPT) JAVASCRIPT MARKUP

Slide 98

Slide 98

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify BUILDS ARE BASED ON
GIT COMMITS, 
 SO WE HAVE HISTORY

Slide 99

Slide 99

netlify Serving for the win JS Heros, 2018 @philhawksworth

Slide 100

Slide 100

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify APIs SITE (JAVASCRIPT) JAVASCRIPT MARKUP

Slide 101

Slide 101

netlify Serving for the win JS Heros, 2018 @philhawksworth

Slide 102

Slide 102

netlify Serving for the win JS Heros, 2018 @philhawksworth

Slide 103

Slide 103

netlify Serving for the win JS Heros, 2018 @philhawksworth

Slide 104

Slide 104

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify APIs SITE (JAVASCRIPT) JAVASCRIPT MARKUP

Slide 105

Slide 105

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify AUTOMATION BASED ON GIT ACTIVITY

Slide 106

Slide 106

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify GENERATING PREVIEWS FROM PULL REQUESTS

Slide 107

Slide 107

netlify Serving for the win JS Heros, 2018 @philhawksworth

Slide 108

Slide 108

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify CONFIDENCE IN THE FUTURE STATE

Slide 109

Slide 109

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify VERSION CONTROL SHOULD
EXTEND TO YOUR DEPLOYMENTS PHIL, 20 MINUTES AGO

Slide 110

Slide 110

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify OUR EVOLVING APPROACH TO INFRASTRUCTURE ON SITE HARDWARE SOME
RACK SPACE VIRTUAL SERVER SOFTWARE 
 AAS FUNCTIONS 
 AAS (not Rackspace) (perhaps Rackspace)

Slide 111

Slide 111

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify OUR EVOLVING APPROACH TO INFRASTRUCTURE ON SITE HARDWARE SOME
RACK SPACE VIRTUAL SERVER SOFTWARE 
 AAS FUNCTIONS 
 AAS (not Rackspace) (perhaps Rackspace)

Slide 112

Slide 112

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify

Slide 113

Slide 113

Slide 114

Slide 114

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify A SERVERLESS WORKFLOW % POWERED BY VERSION CONTROL ACTIONS % AUTOMATICALLY GENERATING VERSIONED LAMBDAS % INSTANT PROVISIONING OF UNLIMITED STAGING ENVIRONMENTS % IMMUTABLE DEPLOYMENTS which works

Slide 115

Slide 115

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify Lessons EMBRACING VERSION CONTROL CONVENTIONS REMOVES NEED TO REINVENT THEM REDUCED FRICTION BRINGS AGILITY AND CONFIDENCE JAMSTACK GOES BEYOND
STATIC SITES

Slide 116

Slide 116

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify FOR THE NEXT 40 MINUTES OR SO / WHERE DOES IT HURT? / 3 STORIES / MINDSETS AND RESOURCES

Slide 117

Slide 117

netlify Serving for the win JS Heros, 2018 @philhawksworth RESOURCES CIRCLE CI JENKINS

Slide 118

Slide 118

netlify Serving for the win JS Heros, 2018 @philhawksworth THEPOWEROFSERVERLESS.INFO

Slide 119

Slide 119

netlify Serving for the win JS Heros, 2018 @philhawksworth THENEWDYNAMIC.ORG JAMSTACK.ORG

Slide 120

Slide 120

netlify Serving for the win JS Heros, 2018 @philhawksworth MINDSETS

Slide 121

Slide 121

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify EVERYTHING VERSION CONTROL For

Slide 122

Slide 122

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify

  1. MAKE IT SCRIPTED
  2. MAKE IT AUTOMATED
  3. MAKE IT REAL
  4. MAKE IT FIRST A NOTE ON DEPLOYMENT

Slide 123

Slide 123

netlify Serving for the win JS Heros, 2018 @philhawksworth EXPECT TIMES OF CHAOS

Slide 124

Slide 124

netlify Serving for the win JS Heros, 2018 @philhawksworth DON’T LET
A POOR PROCESS BE WHAT CREATES IT

Slide 125

Slide 125

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify IT’S AN AWFULLY FULL STACK A NOTE ON EXPERTISE

Slide 126

Slide 126

Next wave infrastructure We Are Developers. 2018 @philhawksworth netlify USE THE SKILLS OF OTHERS A NOTE ON EXPERTISE

Slide 127

Slide 127

THANK YOU PHIL HAWKSWORTH HAWKSWORX.COM / TALKS / WAD