NEXT WAVE INFRASTRUCTURE
FOR AN EASIER LIFE
PHIL HAWKSWORTH
Slide 2
Slide 2 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
HELLO
Slide 3
Slide 3 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
PHIL HAWKSWORTH
@
Slide 4
Slide 4 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
REALTIME FINANCIAL DATA
Slide 5
Slide 5 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
SHIPPING INSUARANCE
Slide 6
Slide 6 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
Slide 7
Slide 7 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
Slide 8
Slide 8 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
CRUSHER
DREAM
the
Slide 9
Slide 9 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
Slide 10
Slide 10 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
Slide 11
Slide 11 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
Slide 12
Slide 12 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
MAKING THINGS
Slide 13
Slide 13 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
MY TRACK RECORD
Slide 14
Slide 14 text
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
MS
Slide 15
Slide 15 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
SO, FOR THIS TALK
Slide 16
Slide 16 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
TIME TO JAZZ IT UP
Slide 17
Slide 17 text
NEXT WAVE INFRASTRUCTURE
FOR AN EASIER LIFE
PHIL HAWKSWORTH
Slide 18
Slide 18 text
NEXT WAVE INFRASTRUCTURE
FOR AN EASIER LIFE
PHIL HAWKSWORTH
Slide 19
Slide 19 text
NEXT WAVE INFRASTRUCTURE
FOR AN EASIER LIFE
PHIL HAWKSWORTH
Slide 20
Slide 20 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
EXOTIC OR NEW
Slide 21
Slide 21 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
FUNDAMENTALS
Slide 22
Slide 22 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
WE LEARN A LOT
AT CONFERENCES
~150 talks ?!
Slide 23
Slide 23 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
CONFINING THESE LEARNINGS
TO THEORY IS A WASTE
Slide 24
Slide 24 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
CONFINING THESE LEARNINGS
TO OUR LOCAL ENVIRONMENTS
IS A WASTE
Slide 25
Slide 25 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
LET’S MAKE SURE
THE GOOD STUFF
REACHES YOUR USERS
Slide 26
Slide 26 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
MINDSET
Slide 27
Slide 27 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
PROCESS
Slide 28
Slide 28 text
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 text
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 text
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 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
WHERE DOES IT HURT?
Slide 32
Slide 32 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
CLIENTS / DEADLINES / COMPLEXITY
PROJECTS USUALLY INVOLVE
Slide 33
Slide 33 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
SLEEPLESS NIGHTS
Slide 34
Slide 34 text
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 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
LAUNCH DAY
Slide 36
Slide 36 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
PROJECTS CAN BE HARD
NEWSFLASH
Slide 37
Slide 37 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
LEARNING
PROJECTS USUALLY INVOLVE
Slide 38
Slide 38 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
CHANGE
PROJECTS USUALLY INVOLVE
Slide 39
Slide 39 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
INFRASTRUCTURE
Slide 40
Slide 40 text
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 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
NEW DEPLOYMENT
CONVENTIONS
Slide 42
Slide 42 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
APPROACH
Slide 43
Slide 43 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
MANAGING CHANGE
MANAGING THE UNKNOWABLE
THIS IS WHERE IT HURTS
Slide 44
Slide 44 text
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 text
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 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
DEPLOYING ON MY FIRST DAY
Story one
Slide 47
Slide 47 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
A LARGE NATION-WIDE
HEALTHCARE SITE
Slide 48
Slide 48 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
IT SHOULD HAVE
GONE LIVE
ON FRIDAY
MY NEW BOSS
Slide 49
Slide 49 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
"
Slide 50
Slide 50 text
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 text
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 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
THE DEPLOYMENT
Slide 53
Slide 53 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
STAGING
BOB
ALICE
PROD
Slide 54
Slide 54 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
FFFFFFFFFTP
Slide 55
Slide 55 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
UNKNOWABLE STATE
Slide 56
Slide 56 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
UNREPEATABLE PROCESS
Slide 57
Slide 57 text
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 text
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 text
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 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
SEARCHING FOR SYRIA
Story two
Slide 61
Slide 61 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
Slide 62
Slide 62 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
LOTS OF CHANGE
Slide 63
Slide 63 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
SIGNIFICANT POLITICAL SENSITIVITY
Slide 64
Slide 64 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
GREATER STAKEHOLDER DIVERSITY
Slide 65
Slide 65 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
A GLOBAL LAUNCH
Slide 66
Slide 66 text
“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 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
Slide 68
Slide 68 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DELIVERIES
Slide 69
Slide 69 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DELIVER to QA
Slide 70
Slide 70 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DELIVER to PRODUCERS
Slide 71
Slide 71 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DELIVER to TRANSLATIONS
TEAMS
Slide 72
Slide 72 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DELIVER to THE CLIENT
Slide 73
Slide 73 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DELIVER to THE CLIENT’S
BOSSES
Slide 74
Slide 74 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DELIVER to THE PUBLIC
Slide 75
Slide 75 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
LET’S DELIVER ANY
VERSION AT ANY TIME
OUR AMBITION
Slide 76
Slide 76 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
VERSION CONTROL
Slide 77
Slide 77 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
TAGS SHOULD CREATE
RESOURCES AT URLS
Slide 78
Slide 78 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
URLS FTW
Slide 79
Slide 79 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
AITCH TEE TEE PEE
DOUBLE MEH
ALEX SEXTON
Slide 80
Slide 80 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
http foobar.com
http foobar.com
://
Slide 81
Slide 81 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
TAGS SHOULD CREATE
RESOURCES AT URLS
Slide 82
Slide 82 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DEV
PROD
STAGE
GIT CI
Slide 83
Slide 83 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
Slide 84
Slide 84 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DEV
PROD
STAGE
GIT CI
Slide 85
Slide 85 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DEV
PROD
LIVE
GIT CI
STAGE
STAGE
STAGE
STAGE
STAGE
STAGE
Slide 86
Slide 86 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DEV
PROD
LIVE
GIT CI
STAGE
STAGE
STAGE
STAGE
STAGE
STAGE
Slide 87
Slide 87 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DEMOS / DISCUSSIONS
TESTS / ISSUES / SIGNOFF
ALL HAPPENED AGAINST KNOWN VERSIONS
Slide 88
Slide 88 text
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 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
NETLIFY BUILDING NETLIFY
Story three
Slide 90
Slide 90 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
Slide 91
Slide 91 text
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 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DEV
PROD
LIVE
GIT CI
STAGE
STAGE
STAGE
STAGE
STAGE
STAGE
Slide 93
Slide 93 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
DEV
NETLIFY
LIVE
GIT
CI
STAGE
STAGE
STAGE
CDN
Slide 94
Slide 94 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
A GIT-BASED WORKFLOW
ALL THE WAY TO PRODUCTION
Slide 95
Slide 95 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
jamstack
JAVASCRIPT / API / MARKUP
Slide 96
Slide 96 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
APIs SITE
(JAVASCRIPT)
JAVASCRIPT
MARKUP
Slide 97
Slide 97 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
APIs SITE
(JAVASCRIPT)
JAVASCRIPT
MARKUP
Slide 98
Slide 98 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
BUILDS ARE BASED ON
GIT COMMITS,
SO WE HAVE HISTORY
Slide 99
Slide 99 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
Slide 100
Slide 100 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
APIs SITE
(JAVASCRIPT)
JAVASCRIPT
MARKUP
Slide 101
Slide 101 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
Slide 102
Slide 102 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
Slide 103
Slide 103 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
Slide 104
Slide 104 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
APIs SITE
(JAVASCRIPT)
JAVASCRIPT
MARKUP
Slide 105
Slide 105 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
AUTOMATION BASED
ON GIT ACTIVITY
Slide 106
Slide 106 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
GENERATING PREVIEWS
FROM PULL REQUESTS
Slide 107
Slide 107 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
Slide 108
Slide 108 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
CONFIDENCE IN THE
FUTURE STATE
Slide 109
Slide 109 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
VERSION CONTROL SHOULD
EXTEND TO YOUR DEPLOYMENTS
PHIL, 20 MINUTES AGO
Slide 110
Slide 110 text
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 text
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 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
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 text
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 text
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 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
RESOURCES
CIRCLE CI JENKINS
Slide 118
Slide 118 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
THEPOWEROFSERVERLESS.INFO
Slide 119
Slide 119 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
THENEWDYNAMIC.ORG JAMSTACK.ORG
Slide 120
Slide 120 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
MINDSETS
Slide 121
Slide 121 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
EVERYTHING
VERSION CONTROLFor
Slide 122
Slide 122 text
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 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
EXPECT TIMES
OF CHAOS
Slide 124
Slide 124 text
netlify Serving for the win JS Heros, 2018 @philhawksworth
DON’T LET
A POOR PROCESS BE
WHAT CREATES IT
Slide 125
Slide 125 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
IT’S AN AWFULLY FULL STACK
A NOTE ON EXPERTISE
Slide 126
Slide 126 text
Next wave infrastructure We Are Developers. 2018 @philhawksworth
netlify
USE THE SKILLS OF OTHERS
A NOTE ON EXPERTISE
Slide 127
Slide 127 text
THANK YOU
PHIL HAWKSWORTH
HAWKSWORX.COM / TALKS / WAD