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

Dynamic Static Site Strategies - jscampro

Dynamic Static Site Strategies - jscampro

A talk given at http://www.jscamp.ro 2014

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 these 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

June 03, 2014
Tweet

More Decks by Phil Hawksworth

Other Decks in Programming

Transcript

  1. > {} t DYNAMIC STATIC SITE STRATEGIES JSCAMP, BUCHAREST, JUNE

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

  3. > {} t SSGEEWIZZ

  4. > {} t SSGEEWIZZ

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

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

  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 THE {CLIENT} NEEDS A BEAUTIFUL SITE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  47. >< {}\ stu @PHILHAWKSWORTH GROUND BREAKING NEW APPROACH

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

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

  50. > {} t

  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 ENTERPRISE COMPLIANCE

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

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

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

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

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

  66. >< {}\ stu @PHILHAWKSWORTH COSTS

  67. >< {}\ stu @PHILHAWKSWORTH HOSTING

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

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

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

  71. >< {}\ stu @PHILHAWKSWORTH MAINTENANCE

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

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

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

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

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

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

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

  79. >< {}\ stu @PHILHAWKSWORTH CONFIDENCE

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

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

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

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

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

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

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

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

  88. >< {}\ stu @PHILHAWKSWORTH JEKYLL

  89. > {} t }\ }\

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

  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.
  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. SOLVED
  93. < }\ stu {}\ wikipedia.org/wiki/Web_template_system

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

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

  96. >< {}\ stu @PHILHAWKSWORTH DEPENDENCIES

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

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

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

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

  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 SOLVED

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

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

  107. >< {}\ stu @PHILHAWKSWORTH d

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

  109. >< {}\ stu @PHILHAWKSWORTH FABRIC

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

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

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

  113. >< {}\ stu @PHILHAWKSWORTH SITE44

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

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

  116. > {} t BITBALLOON

  117. > {} t BITBALLOON

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

    CDN MANAGEMENT AUTOMATED DEPLOYMENTS OTHER FUNKY SHIZZLE BITBALLOON
  119. >< {}\ stu @PHILHAWKSWORTH PUSH IT

  120. >< {}\ stu @PHILHAWKSWORTH EXAMPLES

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

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

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

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

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

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

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

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

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

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

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

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

    MATTERS
  133. GOOGLE

  134. Developers Relations

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

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

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

  152. ><\ {} t @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. > {} t BITBALLOON

  157. > {} t OTHER FUNKY SHIZZLE BITBALLOON

  158. > {} t BITBALLOON API

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

  160. ><\ {} 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>
  161. >< {}\ stu @PHILHAWKSWORTH DATA HANDLING API ENDPOINT EMAIL NOTIFICATIONS

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

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

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

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

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

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

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

  169. < }\ 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 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
  170. < }\ stu {}\ THANKS! PHILHAWKSWORTH @