Phil Hawksworth - Dynamic Static Site Strategies

774 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
774
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Phil Hawksworth - Dynamic Static Site Strategies

  1. 1. > {} t DYNAMIC STATIC SITE STRATEGIESDEVCONFU, MAY 2014
  2. 2. > {} t DYNAMIC STATIC SITE STRATEGIESDEVCONFU, MAY 2014 DYNAMIC STATIC SITE STRATEGIES
  3. 3. < } stu {} STATIC SITE GENERATION
  4. 4. < } stu {} SSGEEWIZZ
  5. 5. > {} t SSGEEWIZZ
  6. 6. >< {} stu @PHILHAWKSWORTH A QUICK INTRO
  7. 7. < } stu {} PHILHAWKSWORTH@ #DEVCONFU
  8. 8. >< {} stu @PHILHAWKSWORTH CLIENTS
  9. 9. >< {} stu @PHILHAWKSWORTH FRONT END
  10. 10. >< {} stu @PHILHAWKSWORTH I’M A SOFTWARE ENGINEER WHAT LANGUAGE? JAVASCRIPT HA HA HA HA...!
  11. 11. >< {} t @PHILHAWKSWORTH >< F#@!!!
  12. 12. >< {} stu @PHILHAWKSWORTH TOOLS ENGINEERING o
  13. 13. >< {} t @PHILHAWKSWORTH >< M
  14. 14. >< {} t @PHILHAWKSWORTH >< M HIPSTER TAX the
  15. 15. >< {} t @PHILHAWKSWORTH >< STATIC SITE GENERATION
  16. 16. >< {} t @PHILHAWKSWORTH >< THE GOOD OL’ DAYS
  17. 17. >< {} stu @PHILHAWKSWORTH ~/htdocs
  18. 18. >< {} stu @PHILHAWKSWORTH http://aston.ac.uk/~hawkswpn 404
  19. 19. >< {} stu @PHILHAWKSWORTH WRITE TEXT SAVE REFRESH REPEAT REJOICE
  20. 20. >< {} stu @PHILHAWKSWORTH MORE AMBITIOUS
  21. 21. >< {} stu @PHILHAWKSWORTH YOU NEED A SIEGEY BIN MY BUDDY AT UNI
  22. 22. >< {} stu @PHILHAWKSWORTH cgi-bin
  23. 23. >< {} stu @PHILHAWKSWORTH PERL
  24. 24. >< {} stu @PHILHAWKSWORTH QPLUMBING & INFRASTRUCTURE
  25. 25. >< {} stu @PHILHAWKSWORTH A RETURN TO SIMPLICITY
  26. 26. >< {} stu @PHILHAWKSWORTH THE CHALLENGE
  27. 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. 28. >< {} stu @PHILHAWKSWORTH A MOBILE FIRST RESPONSIVE WEB APP BUZZWORDALERT k k
  29. 29. >< {} stu @PHILHAWKSWORTH AMOBILEFIRSTRESPONSIVEWEBAPP#
  30. 30. >< {} stu @PHILHAWKSWORTH A WEB SITE
  31. 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. 32. >< {} stu @PHILHAWKSWORTH IS THIS ONLY POSSIBLE WITH A DYNAMIC SERVER ARCHITECTURE?
  33. 33. < } stu {} NO
  34. 34. >< {} stu @PHILHAWKSWORTH STATIC ARCHITECTURE DYNAMIC FEATURES for
  35. 35. >< {} stu @PHILHAWKSWORTH WHAT DOES DYNAMIC MEAN?
  36. 36. >< {} stu @PHILHAWKSWORTH PERSONALISED CONTENT
  37. 37. >< {} stu @PHILHAWKSWORTH USER GENERATED CONTENT
  38. 38. >< {} stu @PHILHAWKSWORTH TIME TO REFRESH
  39. 39. >< {} stu @PHILHAWKSWORTH {PUBLISH to TIME
  40. 40. >< {} stu @PHILHAWKSWORTH KEEP IT FRESH
  41. 41. >< {} stu @PHILHAWKSWORTH CODE DEPLOYMENT CONTENT DEPLOYMENT
  42. 42. >< {} stu @PHILHAWKSWORTH THE OPPORTUNITY
  43. 43. >< {} stu @PHILHAWKSWORTH CONSIDER HONEST USE CASES
  44. 44. >< {} stu @PHILHAWKSWORTH MANY TYPES OF SITES
  45. 45. >< {} stu @PHILHAWKSWORTH TARGETED CONTENT
  46. 46. >< {} stu @PHILHAWKSWORTH READ ONLY
  47. 47. >< {} stu @PHILHAWKSWORTH READ OFTEN
  48. 48. >< {} stu @PHILHAWKSWORTH WE CAN MAKE EVERYTHING FASTER
  49. 49. >< {} stu @PHILHAWKSWORTH GROUND BREAKING NEW APPROACH 62002
  50. 50. > {} t BAKE, DON’T FRY
  51. 51. >< {} stu @PHILHAWKSWORTH BAKE, DON’T FRY AARON SWARTZ
  52. 52. >< {} stu @PHILHAWKSWORTH WEBMAKE A PERL CMS
  53. 53. >< {} stu @PHILHAWKSWORTH
  54. 54. >< {} stu @PHILHAWKSWORTH I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002
  55. 55. >< {} stu @PHILHAWKSWORTH REDUCE COMPLEXITY
  56. 56. >< {} stu @PHILHAWKSWORTH EASE OF DEVELOPEMENT
  57. 57. >< {} stu @PHILHAWKSWORTH INCREASED PORTABILITY
  58. 58. >< {} stu @PHILHAWKSWORTH
  59. 59. >< {} stu @PHILHAWKSWORTH
  60. 60. >< {} stu @PHILHAWKSWORTH CONFIDENCE
  61. 61. >< {} stu @PHILHAWKSWORTH ENTERPRISE COMPLIANCE
  62. 62. >< {} stu @PHILHAWKSWORTH SECURITY AUDIT PENETRATION TESTING LOAD TESTING
  63. 63. >< {} stu @PHILHAWKSWORTH NOT ABOUT PERFORMANCE
  64. 64. >< {} stu @PHILHAWKSWORTH SOME CHEAP PERFORMANCE GAINS EXIST but
  65. 65. >< {} stu @PHILHAWKSWORTH FILE BASED ARCHITECTURE
  66. 66. >< {} stu @PHILHAWKSWORTH RAPID REQUEST RESPONSE
  67. 67. >< {} stu @PHILHAWKSWORTH COSTS
  68. 68. >< {} stu @PHILHAWKSWORTH HOSTING
  69. 69. >< {} stu @PHILHAWKSWORTH “JUST A FEW PERSONAL SITES”
  70. 70. >< {} stu @PHILHAWKSWORTH NOW I’M SAVING $40 A MONTH
  71. 71. >< {} stu @PHILHAWKSWORTH AT SCALE, THIS CAN BE BIG
  72. 72. >< {} stu @PHILHAWKSWORTH MAINTENANCE
  73. 73. >< {} stu @PHILHAWKSWORTH LESS INFRASTRUCTURE FEWER SERVERS LESS PRODUCTION CODE
  74. 74. >< {} stu @PHILHAWKSWORTH PORTABILITY
  75. 75. >< {} stu @PHILHAWKSWORTH FILES CAN GO ANYWHERE
  76. 76. >< {} stu @PHILHAWKSWORTH AVAILABILITY OF SKILLS
  77. 77. >< {} stu @PHILHAWKSWORTH FOCUS
  78. 78. >< {} stu @PHILHAWKSWORTH ARCHITECTURAL COMPLEXITY
  79. 79. >< {} stu @PHILHAWKSWORTH WIDER TALENT POOL
  80. 80. >< {} stu @PHILHAWKSWORTH DEVELOPMENT COSTS
  81. 81. >< {} stu @PHILHAWKSWORTH CONFIDENCE
  82. 82. >< {} stu @PHILHAWKSWORTH TOOLS & ENABLERS
  83. 83. >< {} stu @PHILHAWKSWORTH EASIER ITERATION DYNAMICthrough
  84. 84. >< {} stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
  85. 85. >< {} stu @PHILHAWKSWORTH JEKYLL RUBY HYDE PYTHON MIDDLEMAN RUBY DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
  86. 86. >< {} stu @PHILHAWKSWORTH STATICSITEGENERATORS.NET DOCPAD / AUTOMATED / 274 SSGs
  87. 87. >< {} stu @PHILHAWKSWORTH 274
  88. 88. >< {} t @PHILHAWKSWORTH >< M HIPSTER TAX the
  89. 89. >< {} stu @PHILHAWKSWORTH JEKYLL
  90. 90. > {} t } }
  91. 91. >< {} stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
  92. 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. 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. 94. >< {} stu @PHILHAWKSWORTH RICH TEMPLATING ENGINES PARTIALS INHERITANCE LOGIC
  95. 95. < } stu {} wikipedia.org/wiki/Web_template_system
  96. 96. < } stu {} wikipedia.org/wiki/Web_template_system
  97. 97. < } stu {} wikipedia.org/wiki/Web_template_system
  98. 98. >< {} stu @PHILHAWKSWORTH DEPENDENCIES
  99. 99. >< {} stu @PHILHAWKSWORTH ATWOOD’S LAW
  100. 100. >< {} stu @PHILHAWKSWORTH ATTWOOD’S LAW ANY APPLICATION THAT CAN BE WRITTEN IN JAVASCRIPT, WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT JEFF ATWOOD, 2007
  101. 101. >< {} stu @PHILHAWKSWORTH $ npm install
  102. 102. >< {} stu @PHILHAWKSWORTH $ npm isntall
  103. 103. >< {} stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
  104. 104. >< {} stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
  105. 105. >< {} stu @PHILHAWKSWORTH HARPJS
  106. 106. >< {} stu @PHILHAWKSWORTH HARPJS PREPROCESSING EJS, SWIG SASS, LESS COFFEESCRIPT
  107. 107. >< {} stu @PHILHAWKSWORTH LESS BLOGGY MOAR DATA OBJECTS
  108. 108. >< {} stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION
  109. 109. >< {} stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION SOLVED
  110. 110. >< {} stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
  111. 111. >< {} stu @PHILHAWKSWORTH  3 3 3
  112. 112. >< {} stu @PHILHAWKSWORTH d
  113. 113. >< {} stu @PHILHAWKSWORTH AUTOMATION REPEATABLE PREDICATABLE LOW FRICTION
  114. 114. >< {} stu @PHILHAWKSWORTH FABRIC
  115. 115. >< {} stu @PHILHAWKSWORTH GRUNT GULP BRUNCH BELCH BURP COUGH HICCUP MMM
  116. 116. >< {} stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
  117. 117. >< {} stu @PHILHAWKSWORTH SITE44
  118. 118. >< {} stu @PHILHAWKSWORTH  3 3 3
  119. 119. >< {} stu @PHILHAWKSWORTH GITHUB PAGES
  120. 120. > {} t BITBALLOON
  121. 121. > {} t BITBALLOON
  122. 122. > {} t HOSTING & OPTIMISATION AS A SERVICE AUTOMATIC CDN MANAGEMENT AUTOMATED DEPLOYMENTS OTHER FUNKY SHIZZLE BITBALLOON
  123. 123. >< {} stu @PHILHAWKSWORTH AMAZON S3 GITHUB PAGES DROPBOX STATIC HOSTING AAS ANY WEBSERVER
  124. 124. >< {} stu @PHILHAWKSWORTH PUSH IT
  125. 125. >< {} stu @PHILHAWKSWORTH EXAMPLES
  126. 126. < } stu {} BEERCLUB SIMPLEST EXAMPLE SIMPLEST WORKFLOW POWERED BY NERDS
  127. 127. >< {} stu @PHILHAWKSWORTH OUTSOURCED HOSTING
  128. 128. >< {} stu @PHILHAWKSWORTH GITHUB PAGES
  129. 129. >< {} stu @PHILHAWKSWORTH $ git push origin gh-pages
  130. 130. >< {} stu @PHILHAWKSWORTH OUTSOURCED VERSION CONTROL
  131. 131. >< {} stu @PHILHAWKSWORTH OUTSOURCED SITE GENERATION
  132. 132. >< {} stu @PHILHAWKSWORTH OUTSOURCED DEPLOYMENT
  133. 133. >< {} t @PHILHAWKSWORTH >< {{ site.data.FILENAME }}
  134. 134. >< {} t @PHILHAWKSWORTH >< {{ site.data.drops }}
  135. 135. < } stu {}
  136. 136. >< {} stu @PHILHAWKSWORTH TOTALLY FORKED SIMPLEST EXAMPLE SIMPLEST WORKFLOW NOT POWERED BY NERDS
  137. 137. >< {} stu @PHILHAWKSWORTH SIMPLIFYING DUMBING DOWN is not
  138. 138. >< {} stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
  139. 139. GOOGLE
  140. 140. Developers Relations
  141. 141. >< {} t @PHILHAWKSWORTH >< developers.google.com/web/fundamentals
  142. 142. < } stu {} github.com/Google/WebFundamentals
  143. 143. >< {} stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
  144. 144. >< {} stu @PHILHAWKSWORTH LIMITATIONS & WORKAROUNDS
  145. 145. >< {} stu @PHILHAWKSWORTH SEARCH & COMMENTS
  146. 146. >< {} stu @PHILHAWKSWORTH SEARCH
  147. 147. >< {} stu @PHILHAWKSWORTH SIMPLE INDEX JAVASCRIPT PROGRESSIVE ENHANCEMENT A JEKYLL EXAMPLE
  148. 148. < } stu {} A SIMPLE BLOG SITE
  149. 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. 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. 151. < } stu {} INLINE JAVASCRIPT SEARCH
  152. 152. >< {} stu @PHILHAWKSWORTH LOAD ASYNCHRONOUSLY AFTER PAGE CACHED AND STATIC CONTEXTUAL LOAD PAGE WEIGHT?
  153. 153. < } stu {} CONTEXTUAL LOADING
  154. 154. >< {} stu @PHILHAWKSWORTH JAVASCRIPT ONLY?
  155. 155. < } stu {} PROGRESSIVE ENHANCEMENT
  156. 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. 157. < } stu {} JSBIN.COM/HELP
  158. 158. >< {} t @PHILHAWKSWORTH >< COMMENTS
  159. 159. >< {} stu @PHILHAWKSWORTH WHAT ABOUT COMMENTS? FIRST! DAMMIT I THOUGHT I WAS FIRST BUT U BEAT ME LOL ROFL OMG WTF HA HA!!!!!!!!!
  160. 160. >< {} stu @PHILHAWKSWORTH HOW TIMELY SHOULD COMMENTS BE? REAL TIME OR MODERATED?
  161. 161. >< {} stu @PHILHAWKSWORTH COMMENT APPROVAL WORKFLOW
  162. 162. > {} t BITBALLOON
  163. 163. > {} t BITBALLOON
  164. 164. > {} t OTHER FUNKY SHIZZLE BITBALLOON
  165. 165. > {} t BITBALLOON API
  166. 166. >< {} stu @PHILHAWKSWORTH AUTOMATIC FORM HANDLING
  167. 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. 168. >< {} stu @PHILHAWKSWORTH DATA HANDLING API ENDPOINT EMAIL NOTIFICATIONS INTEGRATIONS WITH OTHER SERVICES
  169. 169. >< {} stu @PHILHAWKSWORTH
  170. 170. >< {} stu @PHILHAWKSWORTH GET DATA BUILD as part of the
  171. 171. >< {} stu @PHILHAWKSWORTH CALL TO ARMS
  172. 172. >< {} stu @PHILHAWKSWORTH SEEK OUT CHANCES TO SIMPLIFY
  173. 173. >< {} stu @PHILHAWKSWORTH CHALLENGE THE NEED FOR COMPLEXITY
  174. 174. >< {} stu @PHILHAWKSWORTH MAKE STUFF FASTER
  175. 175. >< {} stu @PHILHAWKSWORTH MAKE STUFF GO FASTER
  176. 176. >< {} stu @PHILHAWKSWORTH SPEND LESS
  177. 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. 178. < } stu {} THANKS!PHILHAWKSWORTH@

×