Dynamic Static Site Strategies - Wuthering Bytes

Dynamic Static Site Strategies - Wuthering Bytes

Are we over-engineering? What is the real effort in developing, hosting and maintaining sites which have many moving parts? The cost of serving static sites has never been lower. And front-end development practices have never been richer. Couldn't we harness this better and make life simpler without dumbing down?

In this talk we'll explore some unexpected capabilities and characteristics of "static" sites. We'll look at ways to use emerging tools and services to create robust, high performance websites which can be more dynamic than some of their heavier and more costly brothers and sisters.

This version was given at Wuthering Bytes in August 2014 (http://wutheringbytes.co.uk)

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

August 16, 2014
Tweet

Transcript

  1. > {} t DYNAMIC STATIC SITE STRATEGIES WUTHERING BYTES, HEBDEN

    BRIDGE, AUGUST 2014
  2. < }\ stu {}\ STATIC SITE GENERATORS

  3. > {} t SSGEEWIZZ

  4. >< {}\ stu @PHILHAWKSWORTH A QUICK INTRO

  5. < }\ stu {}\ PHILHAWKSWORTH @

  6. >< {}\ stu @PHILHAWKSWORTH CLIENTS

  7. >< {}\ stu @PHILHAWKSWORTH FRONT END

  8. >< {}\ stu @PHILHAWKSWORTH I’M A SOFTWARE ENGINEER WHAT LANGUAGE?

    JAVASCRIPT HA HA HA HA...!
  9. ><\ {} t @PHILHAWKSWORTH >< F#@!!!

  10. >< {}\ stu @PHILHAWKSWORTH TOOLS ENGINEERING o

  11. ><\ {} t @PHILHAWKSWORTH >< M HIPSTER TAX the

  12. ><\ {} t @PHILHAWKSWORTH >< THE GOOD OL’ DAYS

  13. >< {}\ stu @PHILHAWKSWORTH ~/htdocs

  14. >< {}\ stu @PHILHAWKSWORTH http://aston.ac.uk/~hawkswpn 404

  15. >< {}\ stu @PHILHAWKSWORTH cgi-bin

  16. >< {}\ stu @PHILHAWKSWORTH PERL

  17. >< {}\ stu @PHILHAWKSWORTH Q PLUMBING & INFRASTRUCTURE

  18. >< {}\ stu @PHILHAWKSWORTH A RETURN TO SIMPLICITY

  19. >< {}\ stu @PHILHAWKSWORTH THE CHALLENGE

  20. >< {}\ stu @PHILHAWKSWORTH THE {CLIENT} NEEDS A BEAUTIFUL SITE

    CLEAR CONTENT GOOD BROWSER SUPPORT SPEEDY LOADING EASY TO UPDATE PROBABLY A CMS DYNAMIC CONTENT SENSIBLE URLS
  21. >< {}\ stu @PHILHAWKSWORTH A MOBILE FIRST RESPONSIVE WEB APP

    BUZZWORD ALERT k k
  22. >< {}\ stu @PHILHAWKSWORTH AMOBILEFIRSTRESPONSIVEWEBAPP #

  23. >< {}\ stu @PHILHAWKSWORTH A WEB SITE

  24. >< {}\ stu @PHILHAWKSWORTH THE {CLIENT} NEEDS A BEAUTIFUL SITE

    CLEAR CONTENT GOOD BROWSER SUPPORT SPEEDY LOADING EASY TO UPDATE PROBABLY A CMS DYNAMIC CONTENT SENSIBLE URLS
  25. >< {}\ stu @PHILHAWKSWORTH IS THIS ONLY POSSIBLE WITH A

    DYNAMIC SERVER ARCHITECTURE?
  26. < }\ stu {}\ NO

  27. >< {}\ stu @PHILHAWKSWORTH STATIC ARCHITECTURE DYNAMIC FEATURES for

  28. >< {}\ stu @PHILHAWKSWORTH WHAT DOES DYNAMIC MEAN?

  29. >< {}\ stu @PHILHAWKSWORTH PERSONALISED CONTENT

  30. >< {}\ stu @PHILHAWKSWORTH USER GENERATED CONTENT

  31. >< {}\ stu @PHILHAWKSWORTH TIME TO REFRESH

  32. >< {}\ stu @PHILHAWKSWORTH { PUBLISH to TIME

  33. >< {}\ stu @PHILHAWKSWORTH KEEP IT FRESH

  34. >< {}\ stu @PHILHAWKSWORTH CODE DEPLOYMENT CONTENT DEPLOYMENT

  35. >< {}\ stu @PHILHAWKSWORTH THE OPPORTUNITY

  36. >< {}\ stu @PHILHAWKSWORTH CONSIDER HONEST USE CASES

  37. >< {}\ stu @PHILHAWKSWORTH MANY TYPES OF SITES

  38. >< {}\ stu @PHILHAWKSWORTH TARGETED CONTENT

  39. >< {}\ stu @PHILHAWKSWORTH READ ONLY

  40. >< {}\ stu @PHILHAWKSWORTH READ OFTEN

  41. >< {}\ stu @PHILHAWKSWORTH WE CAN MAKE EVERYTHING FASTER

  42. >< {}\ stu @PHILHAWKSWORTH GROUND BREAKING NEW APPROACH 6 2002

  43. >< {}\ stu @PHILHAWKSWORTH BAKE, DON’T FRY

  44. >< {}\ stu @PHILHAWKSWORTH

  45. >< {}\ stu @PHILHAWKSWORTH BAKE, DON’T FRY AARON SWARTZ

  46. >< {}\ stu @PHILHAWKSWORTH WEBMAKE A PERL CMS

  47. >< {}\ stu @PHILHAWKSWORTH

  48. >< {}\ stu @PHILHAWKSWORTH I CARE ABOUT NOT HAVING TO

    MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002
  49. >< {}\ stu @PHILHAWKSWORTH REDUCE COMPLEXITY

  50. >< {}\ stu @PHILHAWKSWORTH EASE OF DEVELOPEMENT

  51. >< {}\ stu @PHILHAWKSWORTH INCREASED PORTABILITY

  52. >< {}\ stu @PHILHAWKSWORTH

  53. >< {}\ stu @PHILHAWKSWORTH

  54. >< {}\ stu @PHILHAWKSWORTH CONFIDENCE

  55. >< {}\ stu @PHILHAWKSWORTH ENTERPRISE COMPLIANCE

  56. >< {}\ stu @PHILHAWKSWORTH SECURITY AUDIT PENETRATION TESTING LOAD TESTING

  57. >< {}\ stu @PHILHAWKSWORTH NOT ABOUT PERFORMANCE

  58. >< {}\ stu @PHILHAWKSWORTH SOME CHEAP PERFORMANCE GAINS EXIST but

  59. >< {}\ stu @PHILHAWKSWORTH FILE BASED ARCHITECTURE

  60. >< {}\ stu @PHILHAWKSWORTH RAPID REQUEST RESPONSE

  61. >< {}\ stu @PHILHAWKSWORTH COSTS

  62. >< {}\ stu @PHILHAWKSWORTH HOSTING

  63. >< {}\ stu @PHILHAWKSWORTH AT SCALE, THIS CAN BE BIG

  64. >< {}\ stu @PHILHAWKSWORTH MAINTENANCE

  65. >< {}\ stu @PHILHAWKSWORTH LESS INFRASTRUCTURE FEWER SERVERS LESS PRODUCTION

    CODE
  66. >< {}\ stu @PHILHAWKSWORTH TOOLS & ENABLERS

  67. >< {}\ stu @PHILHAWKSWORTH EASIER ITERATION DYNAMIC through

  68. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING

  69. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING

  70. >< {}\ stu @PHILHAWKSWORTH JEKYLL RUBY HYDE PYTHON MIDDLEMAN RUBY

    DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
  71. >< {}\ stu @PHILHAWKSWORTH STATICSITEGENERATORS.NET DOCPAD / AUTOMATED / 274

    SSGs
  72. >< {}\ stu @PHILHAWKSWORTH 290

  73. ><\ {} t @PHILHAWKSWORTH >< M HIPSTER TAX the

  74. >< {}\ stu @PHILHAWKSWORTH JEKYLL

  75. > {} t }\ }\

  76. >< {}\ stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK

  77. >< {}\ stu @PHILHAWKSWORTH The one problem with the “bake”

    philosophy is dependencies. It’s difficult to keep track of which pages depend on which others and regenerate them correctly when they change.
  78. >< {}\ stu @PHILHAWKSWORTH The one problem with the “bake”

    philosophy is dependencies. It’s difficult to keep track of which pages depend on which others and regenerate them correctly when they change. SOLVED
  79. >< {}\ stu @PHILHAWKSWORTH RICH TEMPLATING ENGINES PARTIALS INHERITANCE LOGIC

  80. < }\ stu {}\ wikipedia.org/wiki/Web_template_system

  81. < }\ stu {}\ wikipedia.org/wiki/Web_template_system

  82. >< {}\ stu @PHILHAWKSWORTH DEPENDENCIES

  83. >< {}\ stu @PHILHAWKSWORTH ATWOOD’S LAW

  84. >< {}\ stu @PHILHAWKSWORTH ATTWOOD’S LAW ANY APPLICATION THAT CAN

    BE WRITTEN IN JAVASCRIPT, WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT JEFF ATWOOD, 2007
  85. >< {}\ stu @PHILHAWKSWORTH $ npm i tall ns

  86. >< {}\ stu @PHILHAWKSWORTH $ npm i tall n s

  87. >< {}\ stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK

  88. >< {}\ stu @PHILHAWKSWORTH HARPJS

  89. >< {}\ stu @PHILHAWKSWORTH HARPJS PREPROCESSING EJS, SWIG SASS, LESS

    COFFEESCRIPT
  90. >< {}\ stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION

  91. >< {}\ stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION SOLVED

  92. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING

  93. >< {}\ stu @PHILHAWKSWORTH  3 3 3 \ \

  94. >< {}\ stu @PHILHAWKSWORTH d

  95. >< {}\ stu @PHILHAWKSWORTH AUTOMATION REPEATABLE PREDICTABLE LOW FRICTION

  96. >< {}\ stu @PHILHAWKSWORTH FABRIC

  97. >< {}\ stu @PHILHAWKSWORTH GRUNT GULP BRUNCH

  98. >< {}\ stu @PHILHAWKSWORTH GRUNT GULP BRUNCH BELCH BURP COUGH

    SNEEZE M M M
  99. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING

  100. >< {}\ stu @PHILHAWKSWORTH SITE44

  101. >< {}\ stu @PHILHAWKSWORTH  3 3 3 \ \

  102. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES

  103. > {} t BITBALLOON

  104. > {} t BITBALLOON

  105. > {} t HOSTING & OPTIMISATION AS A SERVICE AUTOMATIC

    CDN MANAGEMENT AUTOMATED DEPLOYMENTS OTHER FUNKY SHIZZLE BITBALLOON
  106. >< {}\ stu @PHILHAWKSWORTH EXAMPLES

  107. < }\ stu {}\ BEERCLUB SIMPLEST EXAMPLE SIMPLEST WORKFLOW POWERED

    BY NERDS
  108. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES

  109. >< {}\ stu @PHILHAWKSWORTH HOSTING

  110. >< {}\ stu @PHILHAWKSWORTH VERSION CONTROL

  111. >< {}\ stu @PHILHAWKSWORTH DEPLOYMENT

  112. >< {}\ stu @PHILHAWKSWORTH SITE GENERATION

  113. >< {}\ stu @PHILHAWKSWORTH $ git push origin gh-pages

  114. ><\ {} t @PHILHAWKSWORTH >< {{ site.data.FILENAME }}

  115. ><\ {} t @PHILHAWKSWORTH >< {{ site.data.drops }}

  116. < }\ stu {}\

  117. >< {}\ stu @PHILHAWKSWORTH TOTALLY FORKED SIMPLEST EXAMPLE SIMPLEST WORKFLOW

    NOT POWERED BY NERDS
  118. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING DUMBING DOWN is not

  119. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us

    MATTERS
  120. GOOGLE

  121. Developers Relations

  122. ><\ {} t @PHILHAWKSWORTH >< developers.google.com/web/fundamentals

  123. < }\ stu {}\ github.com/Google/WebFundamentals

  124. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us

    MATTERS
  125. >< {}\ stu @PHILHAWKSWORTH LIMITATIONS & WORKAROUNDS

  126. >< {}\ stu @PHILHAWKSWORTH SEARCH & COMMENTS

  127. >< {}\ stu @PHILHAWKSWORTH SEARCH

  128. >< {}\ stu @PHILHAWKSWORTH SIMPLE INDEX JAVASCRIPT PROGRESSIVE ENHANCEMENT A

    JEKYLL EXAMPLE
  129. < }\ stu {}\ A SIMPLE BLOG SITE

  130. ><\ {} t @PHILHAWKSWORTH >< { "posts" : [ {%

    for item in site.posts %} { "title" : "{{ item.title }}", "url" : "{{ item.url }}", "date" : "{{ item.date | date_to_long_string }}", "words" : "{{ item.content | strip_html | wordmap }}" } {% if forloop.last != true %},{% endif %} {% endfor %} ]} SRC/SEARCH.JSON
  131. ><\ {} t @PHILHAWKSWORTH >< { ! "posts" : [

    ! { ! ! "title" : "TF;DR - Too funky; Didn't read.", ! ! "url" : "/blog/too-funky-didnt-read", ! ! "date" : "06 January 2014", !"words" : "observations web excess trend for 'parallax' 'scrolljacking' sites has long had me grumbl site) rest quote hits home though: agencies require loading screens gobble your mobile d hear regardless implementation performance h ! }, ... SITE/SEARCH.JSON
  132. < }\ stu {}\ INLINE JAVASCRIPT SEARCH

  133. >< {}\ stu @PHILHAWKSWORTH LOAD ASYNCHRONOUSLY AFTER PAGE CACHED AND

    STATIC CONTEXTUAL LOAD PAGE WEIGHT?
  134. < }\ stu {}\ CONTEXTUAL LOADING

  135. >< {}\ stu @PHILHAWKSWORTH JAVASCRIPT ONLY?

  136. < }\ stu {}\ PROGRESSIVE ENHANCEMENT

  137. ><\ {} t @PHILHAWKSWORTH >< SRC/SEARCH/INDEX.HTML <form action="https://www.google.co.uk/search” method="get" class="search">

    <input type="hidden" name="q" value="site:http://hawksworx.com/blog"> <input type="text" name="q"> <input type="submit" class="submit" value="Search with Google"> </form>
  138. < }\ stu {}\ JSBIN.COM/HELP

  139. ><\ {} t @PHILHAWKSWORTH >< COMMENTS

  140. >< {}\ stu @PHILHAWKSWORTH WHAT ABOUT COMMENTS? FIRST! DAMMIT I

    THOUGHT I WAS FIRST BUT U BEAT ME LOL ROFL OMG WTF HA HA!!!!!!!!!
  141. >< {}\ stu @PHILHAWKSWORTH HOW TIMELY SHOULD COMMENTS BE? REAL

    TIME OR MODERATED?
  142. >< {}\ stu @PHILHAWKSWORTH COMMENT APPROVAL WORKFLOW

  143. > {} t POOLE

  144. > {} t API KEY API SECRET d90ecd8b-f791-4fc6-806f-4a4fbc84a2cc dfccc722-152c-4557-9a28-713e0e43c040

  145. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE

  146. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”

  147. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”

    method="post">
  148. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”

    method="post"> <input type="text" name="{YOUR-DATA-FIELD}">
  149. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”

    method="post"> <input type="text" name="{YOUR-DATA-FIELD}"> <input type="text" name="{YOUR-DATA-FIELD}">
  150. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”

    method="post"> <input type="text" name="{YOUR-DATA-FIELD}"> <input type="text" name="{YOUR-DATA-FIELD}"> ...
  151. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”

    method="post"> <input type="text" name="{YOUR-DATA-FIELD}"> <input type="text" name="{YOUR-DATA-FIELD}"> ... <input type="hidden" name="redirect_to"
  152. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”

    method="post"> <input type="text" name="{YOUR-DATA-FIELD}"> <input type="text" name="{YOUR-DATA-FIELD}"> ... <input type="hidden" name="redirect_to" value="{YOUR-THANKS-PAGE}">
  153. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”

    method="post"> <input type="text" name="{YOUR-DATA-FIELD}"> <input type="text" name="{YOUR-DATA-FIELD}"> ... <input type="hidden" name="redirect_to" value="{YOUR-THANKS-PAGE}"> <input type="submit" class="submit">
  154. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”

    method="post"> <input type="text" name="{YOUR-DATA-FIELD}"> <input type="text" name="{YOUR-DATA-FIELD}"> ... <input type="hidden" name="redirect_to" value="{YOUR-THANKS-PAGE}"> <input type="submit" class="submit"> </form>
  155. > {} t

  156. > {} t http://pooleapp.com/data/{API-SECRET}

  157. > {} t http://pooleapp.com/data/{API-SECRET}.json

  158. > {} t http://pooleapp.com/data/{API-SECRET}.yml

  159. > {} t

  160. >< {}\ stu @PHILHAWKSWORTH GET DATA BUILD as part of

    the
  161. >< {}\ stu @PHILHAWKSWORTH

  162. >< {}\ stu @PHILHAWKSWORTH CONTACT FORM

  163. >< {}\ stu @PHILHAWKSWORTH CALL TO ARMS

  164. >< {}\ stu @PHILHAWKSWORTH SEEK OUT CHANCES TO SIMPLIFY

  165. >< {}\ stu @PHILHAWKSWORTH CHALLENGE THE NEED FOR COMPLEXITY

  166. >< {}\ stu @PHILHAWKSWORTH MAKE STUFF FASTER

  167. >< {}\ stu @PHILHAWKSWORTH MAKE STUFF GO FASTER

  168. < }\ stu {}\ THANKS FONTS LINKS BATTLESHIP - www.flickr.com/photos/swfphotos/8075999488

    COMPLIANCE - www.flickr.com/photos/aorr/1229272894 SALTNPEPPER - www.flickr.com/photos/camknows/4595655917 FRESH PRINCE - flic.kr/p/fJcbnC AMBITIOUS - flic.kr/p/6Uvc2S CAKES - flic.kr/p/63had7 MINI ELVIS - flic.kr/p/ew7P3 SWARTZ - en.wikipedia.org/wiki/Aaron_Swartz JEKYLL - jekyllrb.com HARP - harpjs.com, harp.io SSGS - staticsitegenerators.net HEXO - zespia.tw/hexo BAKE, DON’T FRY - www.aaronsw.com/weblog/000404 BITBALLOON - www.bitballoon.com BITBALLOON API - github.com/BitBalloon/bitballoon-api GOOGLE WEB FUNDAMENTALS - developers.google.com/web/fundamentals POOLE - pooleapp.com PLACARD CONDENSED VENEER EXTRAS WC RHESUS BETA MAC ICON STANDARD
  169. < }\ stu {}\ A! PHILHAWKSWORTH @ T