Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Recent years have seen a shift in technical architectures. Building complex services for the web used to be just that – complex. Projects might have demanded a broad range of specialist skills which could stretch even the fullest of full-stack developers. These days we have a growing number of options for how we design, build and maintain the systems which keep our web sites and applications alive.

This talk will look at ways to make use of emerging tools and services which can deliver surprisingly rich features and capabilities without maintaining expensive and complex infrastructure. We’ll talk about the benefits in keeping your stack simple, in using the expertise of others, and we'll examine the performance and security benefits of JAMstack and microservices.

Presented at https://wearedevelopers.com, 2018

Phil Hawksworth

May 17, 2018
Tweet

More Decks by Phil Hawksworth

Other Decks in Technology

Transcript

  1. NEXT WAVE INFRASTRUCTURE
    FOR AN EASIER LIFE
    PHIL HAWKSWORTH

    View Slide

  2. Next wave infrastructure We Are Developers. 2018 @philhawksworth
    netlify
    HELLO

    View Slide

  3. Next wave infrastructure We Are Developers. 2018 @philhawksworth
    netlify
    PHIL HAWKSWORTH
    @

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Next wave infrastructure We Are Developers. 2018 @philhawksworth
    netlify
    CRUSHER
    DREAM
    the

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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
    MS

    View Slide

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

    View Slide

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

    View Slide

  17. NEXT WAVE INFRASTRUCTURE
    FOR AN EASIER LIFE
    PHIL HAWKSWORTH

    View Slide

  18. NEXT WAVE INFRASTRUCTURE
    FOR AN EASIER LIFE
    PHIL HAWKSWORTH

    View Slide

  19. NEXT WAVE INFRASTRUCTURE
    FOR AN EASIER LIFE
    PHIL HAWKSWORTH

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. Next wave infrastructure We Are Developers. 2018 @philhawksworth
    netlify
    OH GREAT…

    40 MINUTES OF SLIDES
    ABOUT PROCESS
    ALL OF YOU, RIGHT NOW

    View 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

    View 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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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:

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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

    View Slide

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

    View Slide

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

    View Slide

  54. Next wave infrastructure We Are Developers. 2018 @philhawksworth
    netlify
    FFFFFFFFFTP

    View Slide

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

    View Slide

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

    View 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

    View 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

    View 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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
    “ ”
    $

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    BOSSES

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  79. netlify Serving for the win JS Heros, 2018 @philhawksworth
    AITCH TEE TEE PEE

    DOUBLE MEH
    ALEX SEXTON

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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

    View Slide

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

    View Slide

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

    View 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  98. Next wave infrastructure We Are Developers. 2018 @philhawksworth
    netlify
    BUILDS ARE BASED ON
    GIT COMMITS,

    SO WE HAVE HISTORY

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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)

    View 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)

    View Slide

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

    View Slide

  113. View 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

    View 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

    View 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  121. Next wave infrastructure We Are Developers. 2018 @philhawksworth
    netlify
    EVERYTHING
    VERSION CONTROLFor

    View 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  127. THANK YOU
    PHIL HAWKSWORTH
    HAWKSWORX.COM / TALKS / WAD

    View Slide