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

Dynamic Static Site Strategies - Coldfront Conference

Dynamic Static Site Strategies - Coldfront 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 Coldfront (http://coldfrontconf.com) in September 2014

#coldfront14

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

September 06, 2014
Tweet

Transcript

  1. > {} st DYNAMIC STATIC SITE STRATEGIES COLDFRONT, COPENHAGEN, SEPTEMBER

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

  3. > {} st SSGEEWIZZ SSGEEWIZZ

  4. > {} st SSGEEWIZZ

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

  6. < }\ stu {}\ PHILHAWKSWORTH @

  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. ><\ {} st @PHILHAWKSWORTH < F#@!!!

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

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

  13. ><\ {} st @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 DEPLOYMENT CONTENT 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 @PHILHAWKSWORTH COSTS

  66. >< {}\ stu @PHILHAWKSWORTH HOSTING

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

  68. >< {}\ stu @PHILHAWKSWORTH MAINTENANCE

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

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

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

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

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

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

    DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
  75. < }\ stu {}\ STATICGEN.COM

  76. < }\ stu {}\ STATICSITEGENERATORS.NET DOCPAD / AUTOMATED / 274

    SSGs
  77. >< {}\ stu @PHILHAWKSWORTH 274

  78. >< {}\ stu @PHILHAWKSWORTH 292

  79. ><\ {} st @PHILHAWKSWORTH < M HIPSTER TAX the

  80. >< {}\ stu @PHILHAWKSWORTH JEKYLL

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

    IS US
  82. > {} st }\ }\

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

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

  85. >< {}\ 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.
  86. >< {}\ 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
  87. < }\ stu {}\ wikipedia.org/wiki/Web_template_system

  88. >< {}\ stu @PHILHAWKSWORTH DEPENDENCIES

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

  90. >< {}\ stu @PHILHAWKSWORTH ANY APPLICATION THAT CAN BE WRITTEN

    IN JAVASCRIPT,
  91. >< {}\ stu @PHILHAWKSWORTH ANY APPLICATION THAT CAN BE WRITTEN

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

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

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

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

  96. >< {}\ stu @PHILHAWKSWORTH HARPJS

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

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

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

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

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

  102. >< {}\ stu @PHILHAWKSWORTH  \ \

  103. >< {}\ stu @PHILHAWKSWORTH d

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

  105. >< {}\ stu @PHILHAWKSWORTH FABRIC

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

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

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

    SNEEZE M M M
  109. >< {}\ stu @PHILHAWKSWORTH DEPLOYING MY SITE WITH GULPJS BUILD

    WITH JEKYLL OPTIMISE JS & CSS OPTIMISE IMAGES PUSH OUTPUT TO GH-PAGES
  110. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING

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

  112. >< {}\ stu @PHILHAWKSWORTH SITE44

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

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

  115. > {} st BITBALLOON

  116. > {} st BITBALLOON

  117. > {} st HOSTING & OPTIMISATION AS A SERVICE AUTOMATIC

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

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

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

  121. >< {}\ stu @PHILHAWKSWORTH HOSTING

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

  123. >< {}\ stu @PHILHAWKSWORTH DEPLOYMENT

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

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

  126. ><\ {} st @PHILHAWKSWORTH < {{ site.data.FILENAME }}

  127. ><\ {} st @PHILHAWKSWORTH < {{ site.data.drops }}

  128. >< {}\ stu @PHILHAWKSWORTH TOTALLY FORKED

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

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

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

    MATTERS
  132. GOOGLE

  133. Developers Relations

  134. > {} st developers.google.com/web/fundamentals

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

  136. ><\ {} st @PHILHAWKSWORTH < developers.google.com/web/fundamentals/resources/styleguide

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

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

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

  140. >< {}\ stu @PHILHAWKSWORTH SEARCH

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

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

  143. ><\ {} st @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
  144. ><\ {} st @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 grumbling about the reminds one reasons wanted join big agency like r/ga firs choice conveying perhaps when people encounter all kinds ! }, ... SITE/SEARCH.JSON
  145. < }\ stu {}\ INLINE JAVASCRIPT SEARCH

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

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

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

  149. < }\ stu {}\ PROGRESSIVE ENHANCEMENT

  150. ><\ {} st @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>
  151. < }\ stu {}\ JSBIN.COM/HELP

  152. ><\ {} st @PHILHAWKSWORTH < COMMENTS

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

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

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

  156. > {} st POOLE

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

  158. ><\ {} st @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>
  159. > {} st http://pooleapp.com/data/{API-SECRET}

  160. > {} st http://pooleapp.com/data/{API-SECRET}.json

  161. > {} st http://pooleapp.com/data/{API-SECRET}.yml

  162. > {} st

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

    the
  164. >< {}\ stu @PHILHAWKSWORTH

  165. > {} st FACTOR.IO

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

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

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

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

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

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

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