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

In defense of static sites

Liz
August 04, 2016

In defense of static sites

The most basic sites don't need servers, and they don't need fancy front end routing. And yet... how did we get here, and why are we so afraid to go back to the basics? Who are we actually building these sites for and who are we harming by front loading so many build tools, complex frameworks, and overblown architecture? Hint: it's not just us, it's our users, too.

Static sites serve a purpose, and they're really important pieces of the web's history and its future. Static doesn't mean forever unchanged and it doesn't mean you're stuck with a dead site that you can never update. Quite frankly, static sites have gotten a bad reputation and it's not their fault: we've all been so distracted by shiny new things to remember their virtues.

I'll revisit what it means to build a static site, what the use cases are, how you know its the right technical choice, what tools to use, and when to scale up to something more complex.

Liz

August 04, 2016
Tweet

More Decks by Liz

Other Decks in Programming

Transcript

  1. In defense of
    static sites
    A RANT BY LIZ ABINANTE AKA @FEMINISTY, SENIOR SOFTWARE ENGINEER AT NEW RELIC

    View Slide

  2. I LEFT FRONT END
    ... FOR JAVA

    View Slide

  3. THE NEXT QUESTION INEVITABLY BECOMES:
    SO WHY DO YOU EVEN CARE?

    View Slide

  4. FAMOUS LAST WORDS
    "RUN npm install THEN npm start"

    View Slide

  5. LOL

    View Slide

  6. JS TOOLS FATIGUE IS REAL

    View Slide

  7. How did we get
    here?

    View Slide

  8. I HAVE A THEORY

    View Slide

  9. SHIP IT
    BECAME
    SELL IT

    View Slide

  10. OUR TECHNICAL DECISIONS
    IMPACT USER EXPERIENCE

    View Slide

  11. “IF WE SWITCH TO THIS SHINY NEW THING, WE’LL BE ABLE TO
    SHIP FEATURES FASTER
    TO CUSTOMERS.”

    View Slide

  12. NO
    YOU WON'T.

    View Slide

  13. ALL ABOUT USERS

    View Slide

  14. USERS AS AN EXCUSE TO
    UPGRADE

    View Slide

  15. USERS AS AN EXCUSE TO
    REFACTOR

    View Slide

  16. USERS AS AN EXCUSE TO
    TRY SOMETHING NEW

    View Slide

  17. USERS AS AN EXCUSE TO
    DO WHAT WE WANT

    View Slide

  18. OUR COLLECTIVE TECHNICAL ENNUI
    HAS BECOME OUR USERS' PROBLEM

    View Slide

  19. WE HAVE USERS BECAUSE
    THEY WANT TO USE OUR PRODUCTS

    View Slide

  20. NOT BECAUSE THEY LIKE US
    AS PEOPLE

    View Slide

  21. USERS DON'T CARE
    WHAT TOOLS & LIBRARIES WE USE

    View Slide

  22. USERS CARE WHEN
    WE SHIP SOMETHING MEANINGFUL

    View Slide

  23. Ecosystem

    View Slide

  24. View Slide

  25. THRIVING ECOSYSTEM OF
    BUILD TOOLS AND LIBRARIES

    View Slide

  26. THE OPTIONS ARE OVERWHELMING

    View Slide

  27. WE ARE EASILY DISTRACTED

    View Slide

  28. WE ARE BASICALLY CHILDREN

    View Slide

  29. WE ARE GUILTY OF
    OVER ARCHITECTING

    View Slide

  30. WE HAVE TOO MANY TOOLS AND
    TOO FEW CARPENTERS

    View Slide

  31. Rethinking
    what we build

    View Slide

  32. STATIC SITES

    View Slide

  33. NO DATABASE.
    NO BACKEND.
    NO JS.

    View Slide

  34. WHAT DO YOU ACTUALLY
    NEED JS FOR?

    View Slide

  35. NOTHING

    View Slide

  36. ❤ CSS

    View Slide

  37. REMEMBER PROGRESSIVE
    ENHANCEMENT?

    View Slide

  38. Benefits of
    static sites

    View Slide

  39. LOW COST!
    !

    View Slide

  40. DEPLOYS ARE EASY
    !

    View Slide

  41. NO SCALING PROBLEMS

    View Slide

  42. SHARED RESPONSIBILITY

    View Slide

  43. MULTI-DISCIPLINARY EXPERT
    NOT REQUIRED

    View Slide

  44. FEWER SECURITY CONCERNS

    View Slide

  45. PERFORMANCE

    View Slide

  46. Downsides

    View Slide

  47. UPDATES REQUIRE MANUAL
    CHANGES

    View Slide

  48. AUTOMATION REQUIRES
    EXPERTISE

    View Slide

  49. LOTS OF DUPLICATED WORK
    WITHOUT TOOLS

    View Slide

  50. THERE ARE SO MANY
    GENERATORS

    View Slide

  51. NO ONE-SIZE-FITS-ALL
    SOLUTION

    View Slide

  52. How do you
    decide?

    View Slide

  53. ANSWER SEEMINGLY
    ENDLESS QUESTIONS

    View Slide

  54. HOW OFTEN DOES CONTENT NEED TO BE
    UPDATED?

    View Slide

  55. CAN CONTENT UPDATES BE MADE EASIER
    WITH AUTOMATION?

    View Slide

  56. DO I HAVE THE ABILITY TO AUTOMATE THE
    THINGS I WANT?

    View Slide

  57. DO I NEED USER STATES?

    View Slide

  58. DO I NEED THIRD PARTY DATA AT RUNTIME?

    View Slide

  59. CAN I SOURCE THIRD PARTY DATA AT BUILD
    TIME INSTEAD?

    View Slide

  60. IS THIS SITE INFORMATIONAL OR
    INTERACTIVE?

    View Slide

  61. AM I PROCESSING PAYMENTS OR HANDLING
    SECURE INFORMATION?

    View Slide

  62. static sites are...

    View Slide

  63. REALLY GOOD AT
    DISPLAYING INFORMATION

    View Slide

  64. REALLY BAD AT
    RECEIVING & MANIPULATING INFORMATION

    View Slide

  65. Use cases

    View Slide

  66. ▸ portfolios
    ▸ blogs
    ▸ resumes
    ▸ prototypes
    ▸ events and confs
    ▸ brick and mortar business
    ▸ informational marketing

    View Slide

  67. USE AN API TO GENERATE
    YOUR CONTENT!

    View Slide

  68. View Slide

  69. View Slide

  70. View Slide

  71. View Slide

  72. How do you
    build it?

    View Slide

  73. THE SAME WAY YOU
    BUILD AN APP

    View Slide

  74. WITH PLANNING, DESIGN,
    FORETHOUGHT...

    View Slide

  75. AND TOOLS !

    View Slide

  76. Tools &
    Generators

    View Slide

  77. View Slide

  78. 437

    View Slide

  79. ! " #

    View Slide

  80. FILTER BY LANGUAGE
    PREFERENCE!

    View Slide

  81. PYTHON 111
    JAVASCRIPT 91
    RUBY 48

    View Slide

  82. MOST OF THEM OFFER:
    ▸ templating
    ▸ live reloading
    ▸ Sass or Less compiling
    ▸ blog aware
    ▸ deploy hooks

    View Slide

  83. PICK ONE THAT WORKS FOR YOU

    View Slide

  84. LEVERAGE THE TOOLS WE
    HAVE

    View Slide

  85. FOCUS ON USERS

    View Slide

  86. Upgrading

    View Slide

  87. UPGRADING FOR YOU
    AND YOUR USERS

    View Slide

  88. ASK YOURSELF

    View Slide

  89. HOW HAVE MY USERS' NEEDS
    CHANGED?

    View Slide

  90. WHAT TECHNOLOGY DO I NEED TO SUPPORT
    THESE CHANGES?

    View Slide

  91. HOW DO I BUILD IT?

    View Slide

  92. ACTUALLY MIGRATING YOUR CONTENT IS STRAIGHTFORWARD,
    but please keep in mind...

    View Slide

  93. URLS ARE SACRED
    NEVER CHANGE A URL WITHOUT A REDIRECT!

    View Slide

  94. TEMPLATES ON A STATIC SITE ➡
    TEMPLATES IN AN APP

    View Slide

  95. Build simple
    first

    View Slide

  96. Build beautiful

    View Slide

  97. Build for people

    View Slide

  98. Thanks!
    LIZ ABINANTE AKA @FEMINISTY
    SLIDES: TINYLINX.BIZ/CASCADIA
    IMAGE CREDITS: TINYLINX.BIZ/CASCADIAIMAGES

    View Slide