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

Dynamic Static Site Strategies - DevConFu

Dynamic Static Site Strategies - DevConFu

A talk given at DevConFu in Latvia.

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 sites which can be more dynamic than some of their heavier and more costly brothers and sisters.

You'll find that you can build faster, smarter, and more dynamic sites than you expected, without the need for complex back-ends.

Phil Hawksworth

May 29, 2014
Tweet

More Decks by Phil Hawksworth

Other Decks in Programming

Transcript

  1. > {} t DYNAMIC STATIC SITE STRATEGIES DEVCONFU, MAY 2014

  2. > {} t DYNAMIC STATIC SITE STRATEGIES DEVCONFU, MAY 2014

    DYNAMIC STATIC SITE STRATEGIES
  3. < }\ stu {}\ STATIC SITE GENERATION

  4. < }\ stu {}\ SSGEEWIZZ

  5. > {} t SSGEEWIZZ

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

  7. < }\ stu {}\ PHILHAWKSWORTH @ #DEVCONFU

  8. >< {}\ stu @PHILHAWKSWORTH CLIENTS

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

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

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

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

  13. ><\ {} t @PHILHAWKSWORTH >< M

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

  15. ><\ {} t @PHILHAWKSWORTH >< STATIC SITE GENERATION

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

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

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

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

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

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

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

  23. >< {}\ stu @PHILHAWKSWORTH PERL

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

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

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

  27. >< {}\ 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
  28. >< {}\ stu @PHILHAWKSWORTH A MOBILE FIRST RESPONSIVE WEB APP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  50. > {} t BAKE, DON’T FRY

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

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

  53. >< {}\ stu @PHILHAWKSWORTH

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

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

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

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

  58. >< {}\ stu @PHILHAWKSWORTH

  59. >< {}\ stu @PHILHAWKSWORTH

  60. >< {}\ stu @PHILHAWKSWORTH CONFIDENCE

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

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

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

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

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

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

  67. >< {}\ stu @PHILHAWKSWORTH COSTS

  68. >< {}\ stu @PHILHAWKSWORTH HOSTING

  69. >< {}\ stu @PHILHAWKSWORTH “JUST A FEW PERSONAL SITES”

  70. >< {}\ stu @PHILHAWKSWORTH NOW I’M SAVING $40 A MONTH

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

  72. >< {}\ stu @PHILHAWKSWORTH MAINTENANCE

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

    CODE
  74. >< {}\ stu @PHILHAWKSWORTH PORTABILITY

  75. >< {}\ stu @PHILHAWKSWORTH FILES CAN GO ANYWHERE

  76. >< {}\ stu @PHILHAWKSWORTH AVAILABILITY OF SKILLS

  77. >< {}\ stu @PHILHAWKSWORTH FOCUS

  78. >< {}\ stu @PHILHAWKSWORTH ARCHITECTURAL COMPLEXITY

  79. >< {}\ stu @PHILHAWKSWORTH WIDER TALENT POOL

  80. >< {}\ stu @PHILHAWKSWORTH DEVELOPMENT COSTS

  81. >< {}\ stu @PHILHAWKSWORTH CONFIDENCE

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

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

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

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

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

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

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

  89. >< {}\ stu @PHILHAWKSWORTH JEKYLL

  90. > {} t }\ }\

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

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

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

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

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

  98. >< {}\ stu @PHILHAWKSWORTH DEPENDENCIES

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

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

    BE WRITTEN IN JAVASCRIPT, WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT JEFF ATWOOD, 2007
  101. >< {}\ stu @PHILHAWKSWORTH $ npm install

  102. >< {}\ stu @PHILHAWKSWORTH $ npm isntall

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

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

  105. >< {}\ stu @PHILHAWKSWORTH HARPJS

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

    COFFEESCRIPT
  107. >< {}\ stu @PHILHAWKSWORTH LESS BLOGGY MOAR DATA OBJECTS

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

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

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

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

  112. >< {}\ stu @PHILHAWKSWORTH d

  113. >< {}\ stu @PHILHAWKSWORTH AUTOMATION REPEATABLE PREDICATABLE LOW FRICTION

  114. >< {}\ stu @PHILHAWKSWORTH FABRIC

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

    HICCUP M M M
  116. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING

  117. >< {}\ stu @PHILHAWKSWORTH SITE44

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

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

  120. > {} t BITBALLOON

  121. > {} t BITBALLOON

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

    CDN MANAGEMENT AUTOMATED DEPLOYMENTS OTHER FUNKY SHIZZLE BITBALLOON
  123. >< {}\ stu @PHILHAWKSWORTH AMAZON S3 GITHUB PAGES DROPBOX STATIC

    HOSTING AAS ANY WEBSERVER
  124. >< {}\ stu @PHILHAWKSWORTH PUSH IT

  125. >< {}\ stu @PHILHAWKSWORTH EXAMPLES

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

    BY NERDS
  127. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED HOSTING

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

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

  130. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED VERSION CONTROL

  131. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED SITE GENERATION

  132. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED DEPLOYMENT

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

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

  135. < }\ stu {}\

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

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

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

    MATTERS
  139. GOOGLE

  140. Developers Relations

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

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

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

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

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

  146. >< {}\ stu @PHILHAWKSWORTH SEARCH

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

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

  149. ><\ {} 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
  150. ><\ {} 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
  151. < }\ stu {}\ INLINE JAVASCRIPT SEARCH

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

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

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

  155. < }\ stu {}\ PROGRESSIVE ENHANCEMENT

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

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

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

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

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

  162. > {} t BITBALLOON

  163. > {} t BITBALLOON

  164. > {} t OTHER FUNKY SHIZZLE BITBALLOON

  165. > {} t BITBALLOON API

  166. >< {}\ stu @PHILHAWKSWORTH AUTOMATIC FORM HANDLING

  167. ><\ {} t @PHILHAWKSWORTH >< <form name="signup" action="thank-you.html"> First Name:

    <input type="text" name="first_name"> Email: <input type="email" name="email"> <button>Sign me up</button> </form>
  168. >< {}\ stu @PHILHAWKSWORTH DATA HANDLING API ENDPOINT EMAIL NOTIFICATIONS

    INTEGRATIONS WITH OTHER SERVICES
  169. >< {}\ stu @PHILHAWKSWORTH

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

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

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

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

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

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

  176. >< {}\ stu @PHILHAWKSWORTH SPEND LESS

  177. < }\ 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 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 PLACARD CONDENSED VENEER EXTRAS WC RHESUS BETA MAC ICON STANDARD
  178. < }\ stu {}\ THANKS! PHILHAWKSWORTH @