Promoting Performance from the Ground Up

A presentation at Webconf.asia in June 2018 in Hong Kong by Phil Hawksworth

Slide 1

Slide 1

PHIL HAWKSWORTH PROMOTING PERFORMANCE FROM THE GROUND UP

Slide 2

Slide 2

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify HELLO

Slide 3

Slide 3

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify PHIL

HAWKSWORTH AFTER DINNER SPEAKER

@

Slide 4

Slide 4

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify REALTIME FINANCIAL DATA

Slide 5

Slide 5

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify REALTIME FINANCIAL DATA

Slide 6

Slide 6

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify REALTIME FINANCIAL DATA

Slide 7

Slide 7

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify SHIPPING INSURANCE

Slide 8

Slide 8

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify SHIPPING INSURANCE

Slide 9

Slide 9

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify

Slide 10

Slide 10

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify

Slide 11

Slide 11

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify

Slide 12

Slide 12

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify

Slide 13

Slide 13

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify CRUSHER DREAM the

Slide 14

Slide 14

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify AFTER DINNER SPEAKER

Slide 15

Slide 15

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify AFTER DINNER SPEAKER

Slide 16

Slide 16

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth

Slide 17

Slide 17

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify MAKING THINGS

Slide 18

Slide 18

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify MY TRACK RECORD

Slide 19

Slide 19

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify STATIC SITES

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

Slide 20

Slide 20

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth SO, FOR THIS TALK

Slide 21

Slide 21

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify TIME TO JAZZ IT UP

Slide 22

Slide 22

PHIL HAWKSWORTH PROMOTING PERFORMANCE FROM THE GROUND UP

Slide 23

Slide 23

PHIL HAWKSWORTH MAKING PLATFORMS &
PROCESSES PROMOTE PERFORMANCE

Slide 24

Slide 24

PHIL HAWKSWORTH MAKING PLATFORMS &
PROCESSES PROMOTE PERFORMANCE

Slide 25

Slide 25

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify EXOTIC OR NEW

Slide 26

Slide 26

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify FUNDAMENTALS

Slide 27

Slide 27

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify WE LEARN A LOT AT CONFERENCES 12 talks!

Slide 28

Slide 28

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify CONFINING THESE LEARNINGS TO THEORY IS A WASTE

Slide 29

Slide 29

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify CONFINING THESE LEARNINGS TO OUR LOCAL ENVIRONMENTS IS A WASTE

Slide 30

Slide 30

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify LET’S MAKE SURE THE GOOD STUFF REACHES YOUR USERS

Slide 31

Slide 31

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DESIGNING FOR PERFORMANCE — Lara Hogan

Slide 32

Slide 32

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DESIGNING INFRASTRUCTURE FOR PERFORMANCE

Slide 33

Slide 33

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DEPLOYMENTS DESIGNING INFRASTRUCTURE FOR PERFORMANCE

Slide 34

Slide 34

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DEPLOYMENTS DESIGNING INFRASTRUCTURE FOR PERFORMANCE PROCESSES

Slide 35

Slide 35

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DEPLOYMENTS DESIGNING INFRASTRUCTURE FOR PERFORMANCE PROCESSES MINDSET

Slide 36

Slide 36

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify MINDSET

Slide 37

Slide 37

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify PROCESS

Slide 38

Slide 38

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify OH GREAT… 
 40 MINUTES OF SLIDES
ABOUT PROCESS ALL OF YOU, RIGHT NOW

Slide 39

Slide 39

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify FOR THE NEXT 40 MINUTES OR SO / WHERE DOES IT HURT? / 3 STORIES / MINDSETS AND RESOURCES

Slide 40

Slide 40

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify FOR THE NEXT 40 MINUTES OR SO / WHERE DOES IT HURT? / 3 STORIES / MINDSETS AND RESOURCES

Slide 41

Slide 41

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth WHERE DOES IT HURT?

Slide 42

Slide 42

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify CLIENTS / DEADLINES / COMPLEXITY PROJECTS USUALLY INVOLVE

Slide 43

Slide 43

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify SLEEPLESS NIGHTS

Slide 44

Slide 44

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify THE PERFECT PROJECT TIMELINE BRIEF AWARDS LAUNCH START SCOPE 
 RE-SCOPE CLIENT 
 REVIEW FINAL 
 SIGN OFF FIXES “ ” !

Slide 45

Slide 45

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth LAUNCH DAY

Slide 46

Slide 46

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify PROJECTS CAN BE HARD NEWSFLASH

Slide 47

Slide 47

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify LEARNING PROJECTS USUALLY INVOLVE

Slide 48

Slide 48

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify CHANGE PROJECTS USUALLY INVOLVE

Slide 49

Slide 49

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify INFRASTRUCTURE

Slide 50

Slide 50

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify OUR EVOLVING APPROACH TO INFRASTRUCTURE ON SITE HARDWARE SOME
RACK SPACE VIRTUAL SERVER SOFTWARE 
 AAS FUNCTIONS 
 AAS

Slide 51

Slide 51

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify NEW DEPLOYMENT CONVENTIONS

Slide 52

Slide 52

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify APPROACH

Slide 53

Slide 53

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify MANAGING CHANGE / UNKNOWABLE THIS IS WHERE IT HURTS

Slide 54

Slide 54

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify AT CRUNCH TIME,
AS THE PRESSURE MOUNTS THIS IS WHERE IT HURTS

Slide 55

Slide 55

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify FOR THE NEXT 40 MINUTES OR SO / WHERE DOES IT HURT? / 3 STORIES / MINDSETS AND RESOURCES

Slide 56

Slide 56

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth DEPLOYING ON MY FIRST DAY Story one

Slide 57

Slide 57

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify A LARGE NATIONWIDE HEALTHCARE SITE

Slide 58

Slide 58

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify IT SHOULD HAVE
GONE LIVE ON FRIDAY MY NEW BOSS

Slide 59

Slide 59

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify "

Slide 60

Slide 60

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify CAN YOU HELP THE TEAM
FIGURE OUT
THE DEPLOYMENT? MY NEW BOSS

Slide 61

Slide 61

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify THE PERFECT PROJECT TIMELINE BRIEF AWARDS LAUNCH START SCOPE 
 RE-SCOPE CLIENT 
 REVIEW FINAL 
 SIGN OFF FIXES “ ”

“FIGURE OUT” DEPLOYMENT

Slide 62

Slide 62

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify THE DEPLOYMENT

Slide 63

Slide 63

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify STAGING BOB ALICE PROD

Slide 64

Slide 64

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify FFFF FFF F FTP

Slide 65

Slide 65

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify UNKNOWABLE STATE

Slide 66

Slide 66

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify UNREPEATABLE PROCESS

Slide 67

Slide 67

Performance from the ground up Webconf, Hong Kong, 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 FOR SURE

Slide 68

Slide 68

Performance from the ground up Webconf, Hong Kong, 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 69

Slide 69

Performance from the ground up Webconf, Hong Kong, 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 70

Slide 70

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth SEARCHING FOR SYRIA Story two

Slide 71

Slide 71

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth

Slide 72

Slide 72

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify LOTS OF CHANGE

Slide 73

Slide 73

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify SIGNIFICANT POLITICAL SENSITIVITY

Slide 74

Slide 74

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify GREATER STAKEHOLDER DIVERSITY

Slide 75

Slide 75

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify A GLOBAL LAUNCH

Slide 76

Slide 76

“FIGURE OUT” DEPLOYMENT Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify THE PERFECT PROJECT TIMELINE BRIEF AWARDS LAUNCH START SCOPE 
 RE-SCOPE CLIENT 
 REVIEW FINAL 
 SIGN OFF FIXES “ ” $

Slide 77

Slide 77

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify

Slide 78

Slide 78

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DELIVERIES

Slide 79

Slide 79

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DELIVER to QA

Slide 80

Slide 80

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DELIVER to PRODUCERS

Slide 81

Slide 81

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DELIVER to TRANSLATIONS TEAMS

Slide 82

Slide 82

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DELIVER to THE CLIENT

Slide 83

Slide 83

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DELIVER to THE CLIENT’S 
 BOSSES

Slide 84

Slide 84

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DELIVER to THE PUBLIC

Slide 85

Slide 85

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth LET’S DELIVER ANY VERSION AT ANY TIME OUR AMBITION

Slide 86

Slide 86

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify VERSION CONTROL

Slide 87

Slide 87

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify TAGS SHOULD CREATE RESOURCES AT URLS

Slide 88

Slide 88

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify URLS FTW

Slide 89

Slide 89

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth AITCH TEE TEE PEE 
 DOUBLE MEH ALEX SEXTON

Slide 90

Slide 90

http webconf.asia Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify ://

http webconf.asia

Slide 91

Slide 91

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify TAGS SHOULD CREATE RESOURCES AT URLS

Slide 92

Slide 92

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DEV PROD STAGE GIT CI

Slide 93

Slide 93

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth

Slide 94

Slide 94

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DEV PROD STAGE GIT CI

Slide 95

Slide 95

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DEV PROD GIT CI STAGE STAGE STAGE STAGE STAGE LIVE

Slide 96

Slide 96

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DEV PROD GIT CI STAGE STAGE STAGE STAGE LIVE STAGE

Slide 97

Slide 97

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DEMOS / DISCUSSIONS
TESTS / ISSUES / SIGN OFF ALL HAPPENED AGAINST KNOWN VERSIONS

Slide 98

Slide 98

Performance from the ground up Webconf, Hong Kong, 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 99

Slide 99

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth NETLIFY BUILDING NETLIFY Story three

Slide 100

Slide 100

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth

Slide 101

Slide 101

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify NETLIFY.COM IS A JAMSTACK SITE HOSTED
ON NETLIFY USING NETLIFY TO NETLIFY NETLIFY

Slide 102

Slide 102

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DEV PROD GIT CI STAGE STAGE STAGE STAGE STAGE LIVE

Slide 103

Slide 103

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify DEV NETLIFY GIT CI STAGE STAGE STAGE LIVE CDN

Slide 104

Slide 104

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify A GIT-BASED WORKFLOW ALL THE WAY TO PRODUCTION

Slide 105

Slide 105

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify jamstack JAVASCRIPT / API / MARKUP

Slide 106

Slide 106

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify APIs (JAVASCRIPT) SITE JAVASCRIPT MARKUP

Slide 107

Slide 107

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify APIs (JAVASCRIPT) SITE JAVASCRIPT MARKUP

Slide 108

Slide 108

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify BUILDS ARE BASED ON GIT COMMITS, 
 SO WE HAVE HISTORY

Slide 109

Slide 109

Slide 110

Slide 110

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify APIs (JAVASCRIPT) SITE JAVASCRIPT MARKUP

Slide 111

Slide 111

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth

Slide 112

Slide 112

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth

Slide 113

Slide 113

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth

Slide 114

Slide 114

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify APIs (JAVASCRIPT) SITE JAVASCRIPT MARKUP

Slide 115

Slide 115

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify AUTOMATION BASED ON GIT ACTIVITY

Slide 116

Slide 116

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify GENERATING PREVIEWS FROM PULL REQUESTS

Slide 117

Slide 117

Slide 118

Slide 118

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify CONFIDENCE IN THE FUTURE STATE

Slide 119

Slide 119

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify VERSION CONTROL SHOULD
EXTEND TO YOUR DEPLOYMENTS PHIL, 20 MINUTES AGO

Slide 120

Slide 120

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify OUR EVOLVING APPROACH TO INFRASTRUCTURE ON SITE HARDWARE SOME
RACK SPACE VIRTUAL SERVER SOFTWARE 
 AAS FUNCTIONS 
 AAS

Slide 121

Slide 121

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify

Slide 122

Slide 122

Slide 123

Slide 123

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify A SERVERLESS WORKFLOW / POWERED BY VERSION CONTROL ACTIONS / AUTOMATICALLY GENERATING VERSIONED LAMBDAS / INSTANT PROVISIONING OF STAGING ENVIRONMENTS / IMMUTABLE DEPLOYMENTS

Slide 124

Slide 124

Performance from the ground up Webconf, Hong Kong, 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 125

Slide 125

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify FOR THE NEXT 40 MINUTES OR SO / WHERE DOES IT HURT? / 3 STORIES / MINDSETS AND RESOURCES

Slide 126

Slide 126

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth CIRCLE CI JENKINS

Slide 127

Slide 127

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth THEPOWEROFSERVERLESS.INFO

Slide 128

Slide 128

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth THENEWDYNAMIC.ORG JAMSTACK.ORG

Slide 129

Slide 129

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth MINDSETS

Slide 130

Slide 130

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify EVERYTHING VERSION CONTROL For

Slide 131

Slide 131

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify

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

Slide 132

Slide 132

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth EXPECT TIMES OF CHAOS

Slide 133

Slide 133

netlify Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth DON’T LET
A OUR PROCESS BE WHAT CREATES IT

Slide 134

Slide 134

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify IT’S AN AWFULLY FULL STACK A NOTE ON EXPERTISE

Slide 135

Slide 135

Performance from the ground up Webconf, Hong Kong, 2018 @philhawksworth netlify USE THE SKILLS OF OTHERS A NOTE ON EXPERTISE

Slide 136

Slide 136

THANK YOU PHIL HAWKSWORTH HAWKSWORX.COM / TALKS / HK $ !

%