Dynamic Static Site Strategies - DevConFu

A talk given at DevConFu in Latvia.

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.

Transcript

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