Dynamic Static Site Strategies - jscampro

A talk given at http://www.jscamp.ro 2014

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 these 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 JSCAMP, BUCHAREST, JUNE 2014
2. < }\ stu {}\ STATIC SITE GENERATION
3. > {} t SSGEEWIZZ
4. > {} t SSGEEWIZZ
5. >< {}\ stu @PHILHAWKSWORTH A QUICK INTRO
6. < }\ stu {}\ PHILHAWKSWORTH @ #JSCAMPRO
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 THE {CLIENT} NEEDS A BEAUTIFUL SITE CLEAR CONTENT GOOD BROWSER SUPPORT SPEEDY LOADING EASY TO UPDATE PROBABLY A CMS DYNAMIC CONTENT SENSIBLE URLS
30. >< {}\ stu @PHILHAWKSWORTH IS THIS ONLY POSSIBLE WITH A DYNAMIC SERVER ARCHITECTURE?
31. < }\ stu {}\ NO
32. >< {}\ stu @PHILHAWKSWORTH STATIC ARCHITECTURE DYNAMIC FEATURES for
33. >< {}\ stu @PHILHAWKSWORTH WHAT DOES DYNAMIC MEAN?
34. >< {}\ stu @PHILHAWKSWORTH PERSONALISED CONTENT
35. >< {}\ stu @PHILHAWKSWORTH USER GENERATED CONTENT
36. >< {}\ stu @PHILHAWKSWORTH TIME TO REFRESH
37. >< {}\ stu @PHILHAWKSWORTH { PUBLISH to TIME
38. >< {}\ stu @PHILHAWKSWORTH KEEP IT FRESH
39. >< {}\ stu @PHILHAWKSWORTH CODE DEPLOYMENT CONTENT DEPLOYMENT
40. >< {}\ stu @PHILHAWKSWORTH THE OPPORTUNITY
41. >< {}\ stu @PHILHAWKSWORTH CONSIDER HONEST USE CASES
42. >< {}\ stu @PHILHAWKSWORTH MANY TYPES OF SITES
43. >< {}\ stu @PHILHAWKSWORTH TARGETED CONTENT
44. >< {}\ stu @PHILHAWKSWORTH READ ONLY
45. >< {}\ stu @PHILHAWKSWORTH READ OFTEN
46. >< {}\ stu @PHILHAWKSWORTH WE CAN MAKE EVERYTHING FASTER
47. >< {}\ stu @PHILHAWKSWORTH GROUND BREAKING NEW APPROACH
48. >< {}\ stu @PHILHAWKSWORTH GROUND BREAKING NEW APPROACH 6 2002
49. > {} t BAKE, DON’T FRY
50. > {} t
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 ENTERPRISE COMPLIANCE
61. >< {}\ stu @PHILHAWKSWORTH SECURITY AUDIT PENETRATION TESTING LOAD TESTING
62. >< {}\ stu @PHILHAWKSWORTH NOT ABOUT PERFORMANCE
63. >< {}\ stu @PHILHAWKSWORTH SOME CHEAP PERFORMANCE GAINS EXIST but
64. >< {}\ stu @PHILHAWKSWORTH FILE BASED ARCHITECTURE
65. >< {}\ stu @PHILHAWKSWORTH RAPID REQUEST RESPONSE
66. >< {}\ stu @PHILHAWKSWORTH COSTS
67. >< {}\ stu @PHILHAWKSWORTH HOSTING
68. >< {}\ stu @PHILHAWKSWORTH “JUST A FEW PERSONAL SITES”
69. >< {}\ stu @PHILHAWKSWORTH NOW I’M SAVING $40 A MONTH
70. >< {}\ stu @PHILHAWKSWORTH AT SCALE, THIS CAN BE BIG
71. >< {}\ stu @PHILHAWKSWORTH MAINTENANCE
72. >< {}\ stu @PHILHAWKSWORTH LESS INFRASTRUCTURE FEWER SERVERS LESS PRODUCTION CODE
73. >< {}\ stu @PHILHAWKSWORTH PORTABILITY
74. >< {}\ stu @PHILHAWKSWORTH FILES CAN GO ANYWHERE
75. >< {}\ stu @PHILHAWKSWORTH AVAILABILITY OF SKILLS
76. >< {}\ stu @PHILHAWKSWORTH ARCHITECTURAL COMPLEXITY
77. >< {}\ stu @PHILHAWKSWORTH WIDER TALENT POOL
78. >< {}\ stu @PHILHAWKSWORTH DEVELOPMENT COSTS
79. >< {}\ stu @PHILHAWKSWORTH CONFIDENCE
80. >< {}\ stu @PHILHAWKSWORTH TOOLS & ENABLERS
81. >< {}\ stu @PHILHAWKSWORTH EASIER ITERATION DYNAMIC through
82. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
83. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
84. >< {}\ stu @PHILHAWKSWORTH JEKYLL RUBY HYDE PYTHON MIDDLEMAN RUBY DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
85. >< {}\ stu @PHILHAWKSWORTH STATICSITEGENERATORS.NET DOCPAD / AUTOMATED / 274 SSGs
86. >< {}\ stu @PHILHAWKSWORTH 274
87. ><\ {} t @PHILHAWKSWORTH >< M HIPSTER TAX the
88. >< {}\ stu @PHILHAWKSWORTH JEKYLL
89. > {} t }\ }\
90. >< {}\ stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
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.
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. SOLVED
93. < }\ stu {}\ wikipedia.org/wiki/Web_template_system
94. < }\ stu {}\ wikipedia.org/wiki/Web_template_system
95. < }\ stu {}\ wikipedia.org/wiki/Web_template_system
96. >< {}\ stu @PHILHAWKSWORTH DEPENDENCIES
97. >< {}\ stu @PHILHAWKSWORTH ATWOOD’S LAW
98. >< {}\ stu @PHILHAWKSWORTH ATTWOOD’S LAW ANY APPLICATION THAT CAN BE WRITTEN IN JAVASCRIPT, WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT JEFF ATWOOD, 2007
99. >< {}\ stu @PHILHAWKSWORTH $ npm install
100. >< {}\ stu @PHILHAWKSWORTH $ npm isntall
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 SOLVED
105. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
106. >< {}\ stu @PHILHAWKSWORTH  3 3 3 \ \
107. >< {}\ stu @PHILHAWKSWORTH d
108. >< {}\ stu @PHILHAWKSWORTH AUTOMATION REPEATABLE PREDICATABLE LOW FRICTION
109. >< {}\ stu @PHILHAWKSWORTH FABRIC
110. >< {}\ stu @PHILHAWKSWORTH GRUNT GULP BRUNCH
111. >< {}\ stu @PHILHAWKSWORTH GRUNT GULP BRUNCH BELCH BURP COUGH SNEEZE M M M
112. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
113. >< {}\ stu @PHILHAWKSWORTH SITE44
114. >< {}\ stu @PHILHAWKSWORTH  3 3 3 \ \
115. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES
116. > {} t BITBALLOON
117. > {} t BITBALLOON
118. > {} t HOSTING & OPTIMISATION AS A SERVICE AUTOMATIC CDN MANAGEMENT AUTOMATED DEPLOYMENTS OTHER FUNKY SHIZZLE BITBALLOON
119. >< {}\ stu @PHILHAWKSWORTH PUSH IT
120. >< {}\ stu @PHILHAWKSWORTH EXAMPLES
121. < }\ stu {}\ BEERCLUB SIMPLEST EXAMPLE SIMPLEST WORKFLOW POWERED BY NERDS
122. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED HOSTING
123. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES
124. >< {}\ stu @PHILHAWKSWORTH $ git push origin gh-pages
125. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED VERSION CONTROL
126. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED SITE GENERATION
127. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED DEPLOYMENT
128. ><\ {} t @PHILHAWKSWORTH >< {{ site.data.FILENAME }}
129. ><\ {} t @PHILHAWKSWORTH >< {{ site.data.drops }}
130. >< {}\ stu @PHILHAWKSWORTH TOTALLY FORKED SIMPLEST EXAMPLE SIMPLEST WORKFLOW NOT POWERED BY NERDS
131. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING DUMBING DOWN is not
132. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
133. GOOGLE
134. Developers Relations
135. ><\ {} t @PHILHAWKSWORTH >< developers.google.com/web/fundamentals
136. < }\ stu {}\ github.com/Google/WebFundamentals
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. ><\ {} 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
144. ><\ {} 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
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. ><\ {} 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>
151. < }\ stu {}\ JSBIN.COM/HELP
152. ><\ {} t @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. > {} t BITBALLOON
157. > {} t OTHER FUNKY SHIZZLE BITBALLOON
158. > {} t BITBALLOON API
159. >< {}\ stu @PHILHAWKSWORTH AUTOMATIC FORM HANDLING
160. ><\ {} 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>
161. >< {}\ stu @PHILHAWKSWORTH DATA HANDLING API ENDPOINT EMAIL NOTIFICATIONS INTEGRATIONS WITH OTHER SERVICES
162. >< {}\ stu @PHILHAWKSWORTH
163. >< {}\ stu @PHILHAWKSWORTH GET DATA BUILD as part of the
164. >< {}\ stu @PHILHAWKSWORTH CALL TO ARMS
165. >< {}\ stu @PHILHAWKSWORTH SEEK OUT CHANCES TO SIMPLIFY
166. >< {}\ stu @PHILHAWKSWORTH CHALLENGE THE NEED FOR COMPLEXITY
167. >< {}\ stu @PHILHAWKSWORTH MAKE STUFF FASTER
168. >< {}\ stu @PHILHAWKSWORTH MAKE STUFF GO FASTER
169. < }\ 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 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
170. < }\ stu {}\ THANKS! PHILHAWKSWORTH @