Dynamic Static Site Strategies - Wuthering Bytes

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 Wuthering Bytes in August 2014 (http://wutheringbytes.co.uk)

Transcript

1. > {} t DYNAMIC STATIC SITE STRATEGIES WUTHERING BYTES, HEBDEN BRIDGE, AUGUST 2014
2. < }\ stu {}\ STATIC SITE GENERATORS
3. > {} t SSGEEWIZZ
4. >< {}\ stu @PHILHAWKSWORTH A QUICK INTRO
5. < }\ stu {}\ PHILHAWKSWORTH @
6. >< {}\ stu @PHILHAWKSWORTH CLIENTS
7. >< {}\ stu @PHILHAWKSWORTH FRONT END
8. >< {}\ stu @PHILHAWKSWORTH I’M A SOFTWARE ENGINEER WHAT LANGUAGE? JAVASCRIPT HA HA HA HA...!
9. ><\ {} t @PHILHAWKSWORTH >< F#@!!!
10. >< {}\ stu @PHILHAWKSWORTH TOOLS ENGINEERING o
11. ><\ {} t @PHILHAWKSWORTH >< M HIPSTER TAX the
12. ><\ {} t @PHILHAWKSWORTH >< THE GOOD OL’ DAYS
13. >< {}\ stu @PHILHAWKSWORTH ~/htdocs
14. >< {}\ stu @PHILHAWKSWORTH http://aston.ac.uk/~hawkswpn 404
15. >< {}\ stu @PHILHAWKSWORTH cgi-bin
16. >< {}\ stu @PHILHAWKSWORTH PERL
17. >< {}\ stu @PHILHAWKSWORTH Q PLUMBING & INFRASTRUCTURE
18. >< {}\ stu @PHILHAWKSWORTH A RETURN TO SIMPLICITY
19. >< {}\ stu @PHILHAWKSWORTH THE CHALLENGE
20. >< {}\ 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
21. >< {}\ stu @PHILHAWKSWORTH A MOBILE FIRST RESPONSIVE WEB APP BUZZWORD ALERT k k
22. >< {}\ stu @PHILHAWKSWORTH AMOBILEFIRSTRESPONSIVEWEBAPP #
23. >< {}\ stu @PHILHAWKSWORTH A WEB SITE
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 IS THIS ONLY POSSIBLE WITH A DYNAMIC SERVER ARCHITECTURE?
26. < }\ stu {}\ NO
27. >< {}\ stu @PHILHAWKSWORTH STATIC ARCHITECTURE DYNAMIC FEATURES for
28. >< {}\ stu @PHILHAWKSWORTH WHAT DOES DYNAMIC MEAN?
29. >< {}\ stu @PHILHAWKSWORTH PERSONALISED CONTENT
30. >< {}\ stu @PHILHAWKSWORTH USER GENERATED CONTENT
31. >< {}\ stu @PHILHAWKSWORTH TIME TO REFRESH
32. >< {}\ stu @PHILHAWKSWORTH { PUBLISH to TIME
33. >< {}\ stu @PHILHAWKSWORTH KEEP IT FRESH
34. >< {}\ stu @PHILHAWKSWORTH CODE DEPLOYMENT CONTENT DEPLOYMENT
35. >< {}\ stu @PHILHAWKSWORTH THE OPPORTUNITY
36. >< {}\ stu @PHILHAWKSWORTH CONSIDER HONEST USE CASES
37. >< {}\ stu @PHILHAWKSWORTH MANY TYPES OF SITES
38. >< {}\ stu @PHILHAWKSWORTH TARGETED CONTENT
39. >< {}\ stu @PHILHAWKSWORTH READ ONLY
40. >< {}\ stu @PHILHAWKSWORTH READ OFTEN
41. >< {}\ stu @PHILHAWKSWORTH WE CAN MAKE EVERYTHING FASTER
42. >< {}\ stu @PHILHAWKSWORTH GROUND BREAKING NEW APPROACH 6 2002
43. >< {}\ stu @PHILHAWKSWORTH BAKE, DON’T FRY
44. >< {}\ stu @PHILHAWKSWORTH
45. >< {}\ stu @PHILHAWKSWORTH BAKE, DON’T FRY AARON SWARTZ
46. >< {}\ stu @PHILHAWKSWORTH WEBMAKE A PERL CMS
47. >< {}\ stu @PHILHAWKSWORTH
48. >< {}\ stu @PHILHAWKSWORTH I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002
49. >< {}\ stu @PHILHAWKSWORTH REDUCE COMPLEXITY
50. >< {}\ stu @PHILHAWKSWORTH EASE OF DEVELOPEMENT
51. >< {}\ stu @PHILHAWKSWORTH INCREASED PORTABILITY
52. >< {}\ stu @PHILHAWKSWORTH
53. >< {}\ stu @PHILHAWKSWORTH
54. >< {}\ stu @PHILHAWKSWORTH CONFIDENCE
55. >< {}\ stu @PHILHAWKSWORTH ENTERPRISE COMPLIANCE
56. >< {}\ stu @PHILHAWKSWORTH SECURITY AUDIT PENETRATION TESTING LOAD TESTING
57. >< {}\ stu @PHILHAWKSWORTH NOT ABOUT PERFORMANCE
58. >< {}\ stu @PHILHAWKSWORTH SOME CHEAP PERFORMANCE GAINS EXIST but
59. >< {}\ stu @PHILHAWKSWORTH FILE BASED ARCHITECTURE
60. >< {}\ stu @PHILHAWKSWORTH RAPID REQUEST RESPONSE
61. >< {}\ stu @PHILHAWKSWORTH COSTS
62. >< {}\ stu @PHILHAWKSWORTH HOSTING
63. >< {}\ stu @PHILHAWKSWORTH AT SCALE, THIS CAN BE BIG
64. >< {}\ stu @PHILHAWKSWORTH MAINTENANCE
65. >< {}\ stu @PHILHAWKSWORTH LESS INFRASTRUCTURE FEWER SERVERS LESS PRODUCTION CODE
66. >< {}\ stu @PHILHAWKSWORTH TOOLS & ENABLERS
67. >< {}\ stu @PHILHAWKSWORTH EASIER ITERATION DYNAMIC through
68. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
69. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
70. >< {}\ stu @PHILHAWKSWORTH JEKYLL RUBY HYDE PYTHON MIDDLEMAN RUBY DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
71. >< {}\ stu @PHILHAWKSWORTH STATICSITEGENERATORS.NET DOCPAD / AUTOMATED / 274 SSGs
72. >< {}\ stu @PHILHAWKSWORTH 290
73. ><\ {} t @PHILHAWKSWORTH >< M HIPSTER TAX the
74. >< {}\ stu @PHILHAWKSWORTH JEKYLL
75. > {} t }\ }\
76. >< {}\ stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
77. >< {}\ 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.
78. >< {}\ 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
79. >< {}\ stu @PHILHAWKSWORTH RICH TEMPLATING ENGINES PARTIALS INHERITANCE LOGIC
80. < }\ stu {}\ wikipedia.org/wiki/Web_template_system
81. < }\ stu {}\ wikipedia.org/wiki/Web_template_system
82. >< {}\ stu @PHILHAWKSWORTH DEPENDENCIES
83. >< {}\ stu @PHILHAWKSWORTH ATWOOD’S LAW
84. >< {}\ stu @PHILHAWKSWORTH ATTWOOD’S LAW ANY APPLICATION THAT CAN BE WRITTEN IN JAVASCRIPT, WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT JEFF ATWOOD, 2007
85. >< {}\ stu @PHILHAWKSWORTH $ npm i tall ns
86. >< {}\ stu @PHILHAWKSWORTH $ npm i tall n s
87. >< {}\ stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
88. >< {}\ stu @PHILHAWKSWORTH HARPJS
89. >< {}\ stu @PHILHAWKSWORTH HARPJS PREPROCESSING EJS, SWIG SASS, LESS COFFEESCRIPT
90. >< {}\ stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION
91. >< {}\ stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION SOLVED
92. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
93. >< {}\ stu @PHILHAWKSWORTH  3 3 3 \ \
94. >< {}\ stu @PHILHAWKSWORTH d
95. >< {}\ stu @PHILHAWKSWORTH AUTOMATION REPEATABLE PREDICTABLE LOW FRICTION
96. >< {}\ stu @PHILHAWKSWORTH FABRIC
97. >< {}\ stu @PHILHAWKSWORTH GRUNT GULP BRUNCH
98. >< {}\ stu @PHILHAWKSWORTH GRUNT GULP BRUNCH BELCH BURP COUGH SNEEZE M M M
99. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
100. >< {}\ stu @PHILHAWKSWORTH SITE44
101. >< {}\ stu @PHILHAWKSWORTH  3 3 3 \ \
102. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES
103. > {} t BITBALLOON
104. > {} t BITBALLOON
105. > {} t HOSTING & OPTIMISATION AS A SERVICE AUTOMATIC CDN MANAGEMENT AUTOMATED DEPLOYMENTS OTHER FUNKY SHIZZLE BITBALLOON
106. >< {}\ stu @PHILHAWKSWORTH EXAMPLES
107. < }\ stu {}\ BEERCLUB SIMPLEST EXAMPLE SIMPLEST WORKFLOW POWERED BY NERDS
108. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES
109. >< {}\ stu @PHILHAWKSWORTH HOSTING
110. >< {}\ stu @PHILHAWKSWORTH VERSION CONTROL
111. >< {}\ stu @PHILHAWKSWORTH DEPLOYMENT
112. >< {}\ stu @PHILHAWKSWORTH SITE GENERATION
113. >< {}\ stu @PHILHAWKSWORTH $ git push origin gh-pages
114. ><\ {} t @PHILHAWKSWORTH >< {{ site.data.FILENAME }}
115. ><\ {} t @PHILHAWKSWORTH >< {{ site.data.drops }}
116. < }\ stu {}\
117. >< {}\ stu @PHILHAWKSWORTH TOTALLY FORKED SIMPLEST EXAMPLE SIMPLEST WORKFLOW NOT POWERED BY NERDS
118. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING DUMBING DOWN is not
119. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
120. GOOGLE
121. Developers Relations
122. ><\ {} t @PHILHAWKSWORTH >< developers.google.com/web/fundamentals
123. < }\ stu {}\ github.com/Google/WebFundamentals
124. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
125. >< {}\ stu @PHILHAWKSWORTH LIMITATIONS & WORKAROUNDS
126. >< {}\ stu @PHILHAWKSWORTH SEARCH & COMMENTS
127. >< {}\ stu @PHILHAWKSWORTH SEARCH
128. >< {}\ stu @PHILHAWKSWORTH SIMPLE INDEX JAVASCRIPT PROGRESSIVE ENHANCEMENT A JEKYLL EXAMPLE
129. < }\ stu {}\ A SIMPLE BLOG SITE
130. ><\ {} 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
131. ><\ {} 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
132. < }\ stu {}\ INLINE JAVASCRIPT SEARCH
133. >< {}\ stu @PHILHAWKSWORTH LOAD ASYNCHRONOUSLY AFTER PAGE CACHED AND STATIC CONTEXTUAL LOAD PAGE WEIGHT?
134. < }\ stu {}\ CONTEXTUAL LOADING
135. >< {}\ stu @PHILHAWKSWORTH JAVASCRIPT ONLY?
136. < }\ stu {}\ PROGRESSIVE ENHANCEMENT
137. ><\ {} 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>
138. < }\ stu {}\ JSBIN.COM/HELP
139. ><\ {} t @PHILHAWKSWORTH >< COMMENTS
140. >< {}\ stu @PHILHAWKSWORTH WHAT ABOUT COMMENTS? FIRST! DAMMIT I THOUGHT I WAS FIRST BUT U BEAT ME LOL ROFL OMG WTF HA HA!!!!!!!!!
141. >< {}\ stu @PHILHAWKSWORTH HOW TIMELY SHOULD COMMENTS BE? REAL TIME OR MODERATED?
142. >< {}\ stu @PHILHAWKSWORTH COMMENT APPROVAL WORKFLOW
143. > {} t POOLE
144. > {} t API KEY API SECRET d90ecd8b-f791-4fc6-806f-4a4fbc84a2cc dfccc722-152c-4557-9a28-713e0e43c040
145. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE
146. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”
147. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/” method="post">
148. ><\ {} t @PHILHAWKSWORTH >< ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/” method="post"> <input type="text" name="{YOUR-DATA-FIELD}">
149. ><\ {} 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}">
150. ><\ {} 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}"> ...
151. ><\ {} 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"
152. ><\ {} 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}">
153. ><\ {} 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">
154. ><\ {} 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>
155. > {} t
156. > {} t http://pooleapp.com/data/{API-SECRET}
157. > {} t http://pooleapp.com/data/{API-SECRET}.json
158. > {} t http://pooleapp.com/data/{API-SECRET}.yml
159. > {} t
160. >< {}\ stu @PHILHAWKSWORTH GET DATA BUILD as part of the
161. >< {}\ stu @PHILHAWKSWORTH
162. >< {}\ stu @PHILHAWKSWORTH CONTACT FORM
163. >< {}\ stu @PHILHAWKSWORTH CALL TO ARMS
164. >< {}\ stu @PHILHAWKSWORTH SEEK OUT CHANCES TO SIMPLIFY
165. >< {}\ stu @PHILHAWKSWORTH CHALLENGE THE NEED FOR COMPLEXITY
166. >< {}\ stu @PHILHAWKSWORTH MAKE STUFF FASTER
167. >< {}\ stu @PHILHAWKSWORTH MAKE STUFF GO FASTER
168. < }\ 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 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 PLACARD CONDENSED VENEER EXTRAS WC RHESUS BETA MAC ICON STANDARD
169. < }\ stu {}\ A! PHILHAWKSWORTH @ T