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

Dynamic Static Site Strategies - Smashing Conference

465724d73fe3a92c0879fdfb43a3a6f3?s=47 Phil Hawksworth
September 15, 2014

Dynamic Static Site Strategies - Smashing Conference

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 Smashing Conference, Freiburg (http://2014.smashingconf.com/) in September 2014

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

September 15, 2014
Tweet

Transcript

  1. > {} t DYNAMIC STATIC SITE STRATEGIES SMASHING CONFERENCE, FREIBURG,

    2014
  2. < }\ stu {}\ STATIC SITE GENERATORS

  3. > {} t SSGEEWIZZ

  4. > {} t SSGEEWIZZ

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

  6. < }\ stu {}\ PHILHAWKSWORTH @ #SMASHINGCONF

  7. >< {}\ stu @PHILHAWKSWORTH CLIENTS

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

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

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

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

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

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

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

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

  16. >< {}\ stu @PHILHAWKSWORTH WRITE TEXT SAVE REFRESH REPEAT REJOICE

  17. >< {}\ stu @PHILHAWKSWORTH MORE AMBITIOUS

  18. >< {}\ stu @PHILHAWKSWORTH YOU NEED A SIEGEY BIN MY

    BUDDY AT UNI
  19. >< {}\ stu @PHILHAWKSWORTH cgi-bin

  20. >< {}\ stu @PHILHAWKSWORTH PERL

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

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

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

  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 A MOBILE FIRST RESPONSIVE WEB APP

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

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

  28. >< {}\ 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
  29. >< {}\ stu @PHILHAWKSWORTH IS THIS ONLY POSSIBLE WITH A

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  48. >< {}\ stu @PHILHAWKSWORTH

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

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

  51. >< {}\ stu @PHILHAWKSWORTH

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

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

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

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

  56. >< {}\ stu @PHILHAWKSWORTH

  57. >< {}\ stu @PHILHAWKSWORTH

  58. >< {}\ stu @PHILHAWKSWORTH CONFIDENCE

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

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

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

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

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

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

  65. < }\ stu {}\ KYLERUSH.NET

  66. >< {}\ stu @PHILHAWKSWORTH COSTS

  67. >< {}\ stu @PHILHAWKSWORTH HOSTING

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

  69. >< {}\ stu @PHILHAWKSWORTH MAINTENANCE

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

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

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

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

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

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

    DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
  76. < }\ stu {}\ gist.github.com/davatron5000/2254924

  77. < }\ stu {}\ STATICGEN.COM

  78. >< {}\ stu @PHILHAWKSWORTH STATICSITEGENERATORS.NET DOCPAD / AUTOMATED / 274

    SSGs
  79. >< {}\ stu @PHILHAWKSWORTH 295

  80. < }\ stu {}\ MASHABLE.COM

  81. < }\ stu {}\ MASHABLE.COM

  82. >< {}\ stu @PHILHAWKSWORTH staticsitegeneratorlistingsites.net

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

  84. >< {}\ stu @PHILHAWKSWORTH JEKYLL

  85. >< {}\ stu @PHILHAWKSWORTH THE NEXT CHALLENGE OF THE WEB

    IS US
  86. > {} t }\ }\

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

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

  89. >< {}\ stu @PHILHAWKSWORTH SMOOTH THE WRINKLES

  90. >< {}\ 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.
  91. >< {}\ 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
  92. >< {}\ stu @PHILHAWKSWORTH RICH TEMPLATING ENGINES PARTIALS INHERITANCE LOGIC

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

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

  95. >< {}\ stu @PHILHAWKSWORTH DEPENDENCIES

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

  97. >< {}\ stu @PHILHAWKSWORTH JEFF ATWOOD, 2007 ANY APPLICATION THAT

    CAN BE WRITTEN IN JAVASCRIPT, WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT
  98. >< {}\ stu @PHILHAWKSWORTH $ npm i tall ns

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

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

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

  102. >< {}\ stu @PHILHAWKSWORTH HARPJS

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

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

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

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

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

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

  109. >< {}\ stu @PHILHAWKSWORTH d

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

  111. >< {}\ stu @PHILHAWKSWORTH FABRIC

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

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

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

  115. >< {}\ stu @PHILHAWKSWORTH SITE44

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

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

  118. > {} t BITBALLOON

  119. > {} t BITBALLOON

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

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

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

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

  124. >< {}\ stu @PHILHAWKSWORTH HOSTING

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

  126. >< {}\ stu @PHILHAWKSWORTH DEPLOYMENT

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

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

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

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

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

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

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

    MATTERS
  134. GOOGLE

  135. Developers Relations

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

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

  138. > {} t developers.google.com /web/fundamentals /resources/styleguide

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

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

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

  142. >< {}\ stu @PHILHAWKSWORTH SEARCH

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

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

  145. ><\ {} 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
  146. ><\ {} 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
  147. < }\ stu {}\ INLINE JAVASCRIPT SEARCH

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

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

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

  151. < }\ stu {}\ PROGRESSIVE ENHANCEMENT

  152. ><\ {} 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>
  153. < }\ stu {}\ JSBIN.COM/HELP

  154. >< {}\ stu @PHILHAWKSWORTH THE PARTS FINDING SIMPLIFY to

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

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

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

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

  159. > {} t POOLE

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

  161. ><\ {} 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>
  162. > {} t http://pooleapp.com/data/{API-SECRET}

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

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

  165. > {} t

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

    the
  167. > {} t FACTOR.IO

  168. >< {}\ stu @PHILHAWKSWORTH EVERY SITE SHOULD BE STATIC

  169. >< {}\ stu @PHILHAWKSWORTH ONE SIZE DOES NOT FIT ALL

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

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

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

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

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

    - www.flickr.com/photos/aorr/1229272894 SALTNPEPPER - www.flickr.com/photos/camknows/4595655917 PIPES - www.flickr.com/photos/rockandrollfreak/9206311061 FRESH PRINCE - flic.kr/p/fJcbnC AMBITIOUS - flic.kr/p/6Uvc2S KITTEN - www.flickr.com/photos/_madolan_/4912591001 ZAMBONI - www.flickr.com/photos/metrix_feet/4178276797 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 MASHABLE - mashable.com/2014/08/28/static-website-generators FACTOR - factor.io KYLE RUSH - kylerush.net/blog/meet-the-obama-campaigns-250-million- fundraising-platform FONTS PLACARD CONDENSED VENEER EXTRAS WC RHESUS BETA MAC ICON STANDARD
  175. < }\ stu {}\ PHILHAWKSWORTH @ DANKE