PHIL HAWKSWORTH
PROMOTING PERFORMANCE
FROM THE GROUND UP
Slide 2
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
HELLO
Slide 3
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
PHIL
HAWKSWORTH
AFTER DINNER SPEAKER
@
Slide 4
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
REALTIME
FINANCIAL
DATA
Slide 5
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
REALTIME
FINANCIAL
DATA
Slide 6
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
REALTIME
FINANCIAL
DATA
Slide 7
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
SHIPPING INSURANCE
Slide 8
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
SHIPPING INSURANCE
Slide 9
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
Slide 10
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
Slide 11
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
Slide 12
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
Slide 13
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
CRUSHER
DREAM
the
Slide 14
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
AFTER DINNER SPEAKER
Slide 15
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
AFTER DINNER SPEAKER
Slide 16
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
Slide 17
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
MAKING THINGS
Slide 18
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
MY TRACK RECORD
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
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
SO, FOR THIS TALK
Slide 21
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
TIME TO JAZZ IT UP
Slide 22
PHIL HAWKSWORTH
PROMOTING PERFORMANCE
FROM THE GROUND UP
Slide 23
PHIL HAWKSWORTH
MAKING
PLATFORMS &
PROCESSES
PROMOTE
PERFORMANCE
Slide 24
PHIL HAWKSWORTH
MAKING
PLATFORMS &
PROCESSES
PROMOTE
PERFORMANCE
Slide 25
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
EXOTIC OR NEW
Slide 26
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
FUNDAMENTALS
Slide 27
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
WE LEARN A LOT
AT CONFERENCES
12 talks!
Slide 28
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
CONFINING THESE LEARNINGS
TO THEORY IS A WASTE
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
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
LET’S MAKE SURE
THE GOOD STUFF
REACHES YOUR USERS
Slide 31
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DESIGNING
FOR PERFORMANCE
— Lara Hogan
Slide 32
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DESIGNING
INFRASTRUCTURE
FOR PERFORMANCE
Slide 33
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DEPLOYMENTS
DESIGNING
INFRASTRUCTURE
FOR PERFORMANCE
Slide 34
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DEPLOYMENTS
DESIGNING
INFRASTRUCTURE
FOR PERFORMANCE
PROCESSES
Slide 35
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DEPLOYMENTS
DESIGNING
INFRASTRUCTURE
FOR PERFORMANCE
PROCESSES
MINDSET
Slide 36
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
MINDSET
Slide 37
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
PROCESS
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
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
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
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
WHERE DOES IT HURT?
Slide 42
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
CLIENTS
/
DEADLINES
/
COMPLEXITY
PROJECTS USUALLY INVOLVE
Slide 43
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
SLEEPLESS NIGHTS
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
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
LAUNCH
DAY
Slide 46
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
PROJECTS CAN BE HARD
NEWSFLASH
Slide 47
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
LEARNING
PROJECTS USUALLY INVOLVE
Slide 48
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
CHANGE
PROJECTS USUALLY INVOLVE
Slide 49
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
INFRASTRUCTURE
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
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
NEW DEPLOYMENT
CONVENTIONS
Slide 52
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
APPROACH
Slide 53
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
MANAGING CHANGE / UNKNOWABLE
THIS IS WHERE IT HURTS
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
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
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
DEPLOYING ON MY FIRST DAY
Story one
Slide 57
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
A LARGE NATIONWIDE
HEALTHCARE SITE
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
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
"
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
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
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
THE DEPLOYMENT
Slide 63
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
STAGING
BOB
ALICE
PROD
Slide 64
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
FFFF
FFF
F
FTP
Slide 65
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
UNKNOWABLE STATE
Slide 66
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
UNREPEATABLE PROCESS
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
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
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
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
SEARCHING FOR SYRIA
Story two
Slide 71
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
Slide 72
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
LOTS OF CHANGE
Slide 73
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
SIGNIFICANT POLITICAL SENSITIVITY
Slide 74
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
GREATER STAKEHOLDER DIVERSITY
Slide 75
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
A GLOBAL LAUNCH
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
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
Slide 78
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DELIVERIES
Slide 79
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DELIVER
to
QA
Slide 80
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DELIVER
to
PRODUCERS
Slide 81
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DELIVER
to
TRANSLATIONS
TEAMS
Slide 82
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DELIVER
to
THE CLIENT
Slide 83
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DELIVER
to
THE CLIENT’S
BOSSES
Slide 84
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DELIVER
to
THE PUBLIC
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
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
VERSION CONTROL
Slide 87
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
TAGS SHOULD CREATE
RESOURCES AT URLS
Slide 88
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
URLS FTW
Slide 89
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
AITCH TEE TEE PEE
DOUBLE MEH
ALEX SEXTON
Slide 90
http webconf.asia
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
://
http webconf.asia
Slide 91
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
TAGS SHOULD CREATE
RESOURCES AT URLS
Slide 92
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DEV
PROD
STAGE
GIT
CI
Slide 93
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
Slide 94
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DEV
PROD
STAGE
GIT
CI
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
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DEV
PROD
GIT
CI
STAGE
STAGE
STAGE
STAGE
LIVE
STAGE
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
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
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
NETLIFY BUILDING NETLIFY
Story three
Slide 100
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
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
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DEV
PROD
GIT
CI
STAGE
STAGE
STAGE
STAGE
STAGE
LIVE
Slide 103
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
DEV
NETLIFY
GIT
CI
STAGE
STAGE
STAGE
LIVE
CDN
Slide 104
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
A GIT-BASED WORKFLOW
ALL THE WAY TO PRODUCTION
Slide 105
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
jamstack
JAVASCRIPT
/
API
/
MARKUP
Slide 106
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
APIs
(JAVASCRIPT)
SITE
JAVASCRIPT
MARKUP
Slide 107
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
APIs
(JAVASCRIPT)
SITE
JAVASCRIPT
MARKUP
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 110
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
APIs
(JAVASCRIPT)
SITE
JAVASCRIPT
MARKUP
Slide 111
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
Slide 112
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
Slide 113
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
Slide 114
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
APIs
(JAVASCRIPT)
SITE
JAVASCRIPT
MARKUP
Slide 115
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
AUTOMATION BASED
ON GIT ACTIVITY
Slide 116
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
GENERATING PREVIEWS
FROM PULL REQUESTS
Slide 117
Slide 118
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
CONFIDENCE
IN THE FUTURE STATE
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
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
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
Slide 122
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
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
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
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
CIRCLE CI
JENKINS
Slide 127
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
THEPOWEROFSERVERLESS.INFO
Slide 128
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
THENEWDYNAMIC.ORG
JAMSTACK.ORG
Slide 129
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
MINDSETS
Slide 130
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
EVERYTHING
VERSION CONTROL
For
Slide 131
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
MAKE IT SCRIPTED
MAKE IT AUTOMATED
MAKE IT REAL
MAKE IT FIRST
A NOTE ON DEPLOYMENT
Slide 132
netlify
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
EXPECT TIMES
OF CHAOS
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
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
IT’S AN AWFULLY
FULL STACK
A NOTE ON EXPERTISE
Slide 135
Performance from the ground up
Webconf, Hong Kong, 2018
@philhawksworth
netlify
USE THE SKILLS
OF OTHERS
A NOTE ON EXPERTISE
Slide 136
THANK YOU
PHIL HAWKSWORTH
HAWKSWORX.COM / TALKS / HK
$
!