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

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