Dynamic Static Site Strategies - Smashing 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 Smashing Conference, Freiburg (http://2014.smashingconf.com/) in September 2014

Transcript

1. > {} t DYNAMIC STATIC SITE STRATEGIES SMASHING CONFERENCE, FREIBURG, 2014
2. < }\ stu {}\ STATIC SITE GENERATORS
3. > {} t SSGEEWIZZ
4. > {} t SSGEEWIZZ
5. >< {}\ stu @PHILHAWKSWORTH A QUICK INTRO
6. < }\ stu {}\ PHILHAWKSWORTH @ #SMASHINGCONF
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 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 CONTENT DEPLOYMENT 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 {}\ KYLERUSH.NET
66. >< {}\ stu @PHILHAWKSWORTH COSTS
67. >< {}\ stu @PHILHAWKSWORTH HOSTING
68. >< {}\ stu @PHILHAWKSWORTH AT SCALE, THIS CAN BE BIG
69. >< {}\ stu @PHILHAWKSWORTH MAINTENANCE
70. >< {}\ stu @PHILHAWKSWORTH LESS INFRASTRUCTURE FEWER SERVERS LESS PRODUCTION CODE
71. >< {}\ stu @PHILHAWKSWORTH TOOLS & ENABLERS
72. >< {}\ stu @PHILHAWKSWORTH EASIER ITERATION DYNAMIC through
73. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
74. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
75. >< {}\ stu @PHILHAWKSWORTH JEKYLL RUBY HYDE PYTHON MIDDLEMAN RUBY DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
76. < }\ stu {}\ gist.github.com/davatron5000/2254924
77. < }\ stu {}\ STATICGEN.COM
78. >< {}\ stu @PHILHAWKSWORTH STATICSITEGENERATORS.NET DOCPAD / AUTOMATED / 274 SSGs
79. >< {}\ stu @PHILHAWKSWORTH 295
80. < }\ stu {}\ MASHABLE.COM
81. < }\ stu {}\ MASHABLE.COM
82. >< {}\ stu @PHILHAWKSWORTH staticsitegeneratorlistingsites.net
83. ><\ {} t @PHILHAWKSWORTH >< M HIPSTER TAX the
84. >< {}\ stu @PHILHAWKSWORTH JEKYLL
85. >< {}\ stu @PHILHAWKSWORTH THE NEXT CHALLENGE OF THE WEB IS US
86. > {} t }\ }\
87. >< {}\ stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
88. >< {}\ stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
89. >< {}\ stu @PHILHAWKSWORTH SMOOTH THE WRINKLES
90. >< {}\ 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.
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. SOLVED
92. >< {}\ stu @PHILHAWKSWORTH RICH TEMPLATING ENGINES PARTIALS INHERITANCE LOGIC
93. < }\ stu {}\ wikipedia.org/wiki/Web_template_system
94. < }\ stu {}\ wikipedia.org/wiki/Web_template_system
95. >< {}\ stu @PHILHAWKSWORTH DEPENDENCIES
96. >< {}\ stu @PHILHAWKSWORTH ATWOOD’S LAW
97. >< {}\ stu @PHILHAWKSWORTH JEFF ATWOOD, 2007 ANY APPLICATION THAT CAN BE WRITTEN IN JAVASCRIPT, WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT
98. >< {}\ stu @PHILHAWKSWORTH $ npm i tall ns
99. >< {}\ stu @PHILHAWKSWORTH $ npm i tall n s
100. >< {}\ stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
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
105. >< {}\ stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION SOLVED
106. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
107. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
108. >< {}\ stu @PHILHAWKSWORTH  3 3 3 \ \
109. >< {}\ stu @PHILHAWKSWORTH d
110. >< {}\ stu @PHILHAWKSWORTH AUTOMATION REPEATABLE PREDICTABLE LOW FRICTION
111. >< {}\ stu @PHILHAWKSWORTH FABRIC
112. >< {}\ stu @PHILHAWKSWORTH GRUNT GULP BRUNCH BELCH BURP COUGH SNEEZE M M M
113. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
114. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
115. >< {}\ stu @PHILHAWKSWORTH SITE44
116. >< {}\ stu @PHILHAWKSWORTH  3 3 3 \ \
117. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES
118. > {} t BITBALLOON
119. > {} t BITBALLOON
120. > {} t HOSTING & OPTIMISATION AS A SERVICE AUTOMATIC CDN MANAGEMENT AUTOMATED DEPLOYMENTS OTHER FUNKY SHIZZLE BITBALLOON
121. >< {}\ stu @PHILHAWKSWORTH EXAMPLES
122. < }\ stu {}\ BEERCLUB SIMPLEST EXAMPLE SIMPLEST WORKFLOW POWERED BY NERDS
123. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES
124. >< {}\ stu @PHILHAWKSWORTH HOSTING
125. >< {}\ stu @PHILHAWKSWORTH VERSION CONTROL
126. >< {}\ stu @PHILHAWKSWORTH DEPLOYMENT
127. >< {}\ stu @PHILHAWKSWORTH SITE GENERATION
128. >< {}\ stu @PHILHAWKSWORTH $ git push origin gh-pages
129. ><\ {} t @PHILHAWKSWORTH >< {{ site.data.FILENAME }}
130. ><\ {} t @PHILHAWKSWORTH >< {{ site.data.drops }}
131. >< {}\ stu @PHILHAWKSWORTH TOTALLY FORKED SIMPLEST EXAMPLE SIMPLEST WORKFLOW NOT POWERED BY NERDS
132. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING DUMBING DOWN is not
133. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
134. GOOGLE
135. Developers Relations
136. ><\ {} t @PHILHAWKSWORTH >< developers.google.com/web/fundamentals
137. < }\ stu {}\ github.com/Google/WebFundamentals
138. > {} t developers.google.com /web/fundamentals /resources/styleguide
139. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
140. >< {}\ stu @PHILHAWKSWORTH LIMITATIONS & WORKAROUNDS
141. >< {}\ stu @PHILHAWKSWORTH SEARCH & COMMENTS
142. >< {}\ stu @PHILHAWKSWORTH SEARCH
143. >< {}\ stu @PHILHAWKSWORTH SIMPLE INDEX JAVASCRIPT PROGRESSIVE ENHANCEMENT A JEKYLL EXAMPLE
144. < }\ stu {}\ A SIMPLE BLOG SITE
145. ><\ {} 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
146. ><\ {} 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
147. < }\ stu {}\ INLINE JAVASCRIPT SEARCH
148. >< {}\ stu @PHILHAWKSWORTH LOAD ASYNCHRONOUSLY AFTER PAGE CACHED AND STATIC CONTEXTUAL LOAD PAGE WEIGHT?
149. < }\ stu {}\ CONTEXTUAL LOADING
150. >< {}\ stu @PHILHAWKSWORTH JAVASCRIPT ONLY?
151. < }\ stu {}\ PROGRESSIVE ENHANCEMENT
152. ><\ {} 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>
153. < }\ stu {}\ JSBIN.COM/HELP
154. >< {}\ stu @PHILHAWKSWORTH THE PARTS FINDING SIMPLIFY to
155. ><\ {} t @PHILHAWKSWORTH >< COMMENTS
156. >< {}\ stu @PHILHAWKSWORTH WHAT ABOUT COMMENTS? FIRST! DAMMIT I THOUGHT I WAS FIRST BUT U BEAT ME LOL ROFL OMG WTF HA HA!!!!!!!!!
157. >< {}\ stu @PHILHAWKSWORTH HOW TIMELY SHOULD COMMENTS BE? REAL TIME OR MODERATED?
158. >< {}\ stu @PHILHAWKSWORTH COMMENT APPROVAL WORKFLOW
159. > {} t POOLE
160. > {} t API KEY API SECRET d90ecd8b-f791-4fc6-806f-4a4fbc84a2cc dfccc722-152c-4557-9a28-713e0e43c040
161. ><\ {} 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>
162. > {} t http://pooleapp.com/data/{API-SECRET}
163. > {} t http://pooleapp.com/data/{API-SECRET}.json
164. > {} t http://pooleapp.com/data/{API-SECRET}.yml
165. > {} t
166. >< {}\ stu @PHILHAWKSWORTH GET DATA BUILD as part of the
167. > {} t FACTOR.IO
168. >< {}\ stu @PHILHAWKSWORTH EVERY SITE SHOULD BE STATIC
169. >< {}\ stu @PHILHAWKSWORTH ONE SIZE DOES NOT FIT ALL
170. >< {}\ stu @PHILHAWKSWORTH SEEK OUT CHANCES TO SIMPLIFY
171. >< {}\ stu @PHILHAWKSWORTH CHALLENGE THE NEED FOR COMPLEXITY
172. >< {}\ stu @PHILHAWKSWORTH MAKE STUFF FASTER
173. >< {}\ stu @PHILHAWKSWORTH MAKE STUFF GO FASTER
174. < }\ stu {}\ THANKS LINKS BATTLESHIP - www.flickr.com/photos/swfphotos/8075999488 COMPLIANCE - www.flickr.com/photos/aorr/1229272894 SALTNPEPPER - www.flickr.com/photos/camknows/4595655917 PIPES - www.flickr.com/photos/rockandrollfreak/9206311061 FRESH PRINCE - flic.kr/p/fJcbnC AMBITIOUS - flic.kr/p/6Uvc2S KITTEN - www.flickr.com/photos/_madolan_/4912591001 ZAMBONI - www.flickr.com/photos/metrix_feet/4178276797 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 MASHABLE - mashable.com/2014/08/28/static-website-generators FACTOR - factor.io KYLE RUSH - kylerush.net/blog/meet-the-obama-campaigns-250-million- fundraising-platform FONTS PLACARD CONDENSED VENEER EXTRAS WC RHESUS BETA MAC ICON STANDARD
175. < }\ stu {}\ PHILHAWKSWORTH @ DANKE