In defense of static sites

3d65a0bc911de24fde5e58d84b0276af?s=47 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.

3d65a0bc911de24fde5e58d84b0276af?s=128

Liz

August 04, 2016
Tweet

Transcript

  1. In defense of static sites A RANT BY LIZ ABINANTE

    AKA @FEMINISTY, SENIOR SOFTWARE ENGINEER AT NEW RELIC
  2. I LEFT FRONT END ... FOR JAVA

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

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

  5. LOL

  6. JS TOOLS FATIGUE IS REAL

  7. How did we get here?

  8. I HAVE A THEORY

  9. SHIP IT BECAME SELL IT

  10. OUR TECHNICAL DECISIONS IMPACT USER EXPERIENCE

  11. “IF WE SWITCH TO THIS SHINY NEW THING, WE’LL BE

    ABLE TO SHIP FEATURES FASTER TO CUSTOMERS.”
  12. NO YOU WON'T.

  13. ALL ABOUT USERS

  14. USERS AS AN EXCUSE TO UPGRADE

  15. USERS AS AN EXCUSE TO REFACTOR

  16. USERS AS AN EXCUSE TO TRY SOMETHING NEW

  17. USERS AS AN EXCUSE TO DO WHAT WE WANT

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

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

  20. NOT BECAUSE THEY LIKE US AS PEOPLE

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

  22. USERS CARE WHEN WE SHIP SOMETHING MEANINGFUL

  23. Ecosystem

  24. None
  25. THRIVING ECOSYSTEM OF BUILD TOOLS AND LIBRARIES

  26. THE OPTIONS ARE OVERWHELMING

  27. WE ARE EASILY DISTRACTED

  28. WE ARE BASICALLY CHILDREN

  29. WE ARE GUILTY OF OVER ARCHITECTING

  30. WE HAVE TOO MANY TOOLS AND TOO FEW CARPENTERS

  31. Rethinking what we build

  32. STATIC SITES

  33. NO DATABASE. NO BACKEND. NO JS.

  34. WHAT DO YOU ACTUALLY NEED JS FOR?

  35. NOTHING

  36. ❤ CSS

  37. REMEMBER PROGRESSIVE ENHANCEMENT?

  38. Benefits of static sites

  39. LOW COST! !

  40. DEPLOYS ARE EASY !

  41. NO SCALING PROBLEMS

  42. SHARED RESPONSIBILITY

  43. MULTI-DISCIPLINARY EXPERT NOT REQUIRED

  44. FEWER SECURITY CONCERNS

  45. PERFORMANCE

  46. Downsides

  47. UPDATES REQUIRE MANUAL CHANGES

  48. AUTOMATION REQUIRES EXPERTISE

  49. LOTS OF DUPLICATED WORK WITHOUT TOOLS

  50. THERE ARE SO MANY GENERATORS

  51. NO ONE-SIZE-FITS-ALL SOLUTION

  52. How do you decide?

  53. ANSWER SEEMINGLY ENDLESS QUESTIONS

  54. HOW OFTEN DOES CONTENT NEED TO BE UPDATED?

  55. CAN CONTENT UPDATES BE MADE EASIER WITH AUTOMATION?

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

    WANT?
  57. DO I NEED USER STATES?

  58. DO I NEED THIRD PARTY DATA AT RUNTIME?

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

  60. IS THIS SITE INFORMATIONAL OR INTERACTIVE?

  61. AM I PROCESSING PAYMENTS OR HANDLING SECURE INFORMATION?

  62. static sites are...

  63. REALLY GOOD AT DISPLAYING INFORMATION

  64. REALLY BAD AT RECEIVING & MANIPULATING INFORMATION

  65. Use cases

  66. ▸ portfolios ▸ blogs ▸ resumes ▸ prototypes ▸ events

    and confs ▸ brick and mortar business ▸ informational marketing
  67. USE AN API TO GENERATE YOUR CONTENT!

  68. None
  69. None
  70. None
  71. None
  72. How do you build it?

  73. THE SAME WAY YOU BUILD AN APP

  74. WITH PLANNING, DESIGN, FORETHOUGHT...

  75. AND TOOLS !

  76. Tools & Generators

  77. None
  78. 437

  79. ! " #

  80. FILTER BY LANGUAGE PREFERENCE!

  81. PYTHON 111 JAVASCRIPT 91 RUBY 48

  82. MOST OF THEM OFFER: ▸ templating ▸ live reloading ▸

    Sass or Less compiling ▸ blog aware ▸ deploy hooks
  83. PICK ONE THAT WORKS FOR YOU

  84. LEVERAGE THE TOOLS WE HAVE

  85. FOCUS ON USERS

  86. Upgrading

  87. UPGRADING FOR YOU AND YOUR USERS

  88. ASK YOURSELF

  89. HOW HAVE MY USERS' NEEDS CHANGED?

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

  91. HOW DO I BUILD IT?

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

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

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

  95. Build simple first

  96. Build beautiful

  97. Build for people

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