Phil Hawksworth - Dynamic Static Site Strategies
•
0 gostou•947 visualizações
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.
Recomendados
Mais conteúdo relacionado
Mais de DevConFu
Mais de DevConFu (20)
Último
Último (20)
Phil Hawksworth - Dynamic Static Site Strategies
- 1. > {} t DYNAMIC STATIC SITE STRATEGIESDEVCONFU, MAY 2014
- 2. > {} t DYNAMIC STATIC SITE STRATEGIESDEVCONFU, MAY 2014 DYNAMIC STATIC SITE STRATEGIES
- 10. >< {} stu @PHILHAWKSWORTH I’M A SOFTWARE ENGINEER WHAT LANGUAGE? JAVASCRIPT HA HA HA HA...!
- 16. >< {} t @PHILHAWKSWORTH >< THE GOOD OL’ DAYS
- 21. >< {} stu @PHILHAWKSWORTH YOU NEED A SIEGEY BIN MY BUDDY AT UNI
- 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 BUZZWORDALERT k k
- 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
- 54. >< {} stu @PHILHAWKSWORTH I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002
- 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
- 73. >< {} stu @PHILHAWKSWORTH LESS INFRASTRUCTURE FEWER SERVERS LESS PRODUCTION CODE
- 85. >< {} stu @PHILHAWKSWORTH JEKYLL RUBY HYDE PYTHON MIDDLEMAN RUBY DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
- 90. > {} t } }
- 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
- 100. >< {} stu @PHILHAWKSWORTH ATTWOOD’S LAW ANY APPLICATION THAT CAN BE WRITTEN IN JAVASCRIPT, WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT JEFF ATWOOD, 2007
- 106. >< {} stu @PHILHAWKSWORTH HARPJS PREPROCESSING EJS, SWIG SASS, LESS COFFEESCRIPT
- 108. >< {} stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION
- 109. >< {} stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION SOLVED
- 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
- 129. >< {} stu @PHILHAWKSWORTH $ git push origin gh-pages
- 135. < } stu {}
- 136. >< {} stu @PHILHAWKSWORTH TOTALLY FORKED SIMPLEST EXAMPLE SIMPLEST WORKFLOW NOT POWERED BY NERDS
- 138. >< {} stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
- 139. GOOGLE
- 140. Developers Relations
- 143. >< {} stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
- 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
- 152. >< {} stu @PHILHAWKSWORTH LOAD ASYNCHRONOUSLY AFTER PAGE CACHED AND STATIC CONTEXTUAL LOAD PAGE WEIGHT?
- 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>
- 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?
- 162. > {} t BITBALLOON
- 163. > {} t BITBALLOON
- 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
- 170. >< {} stu @PHILHAWKSWORTH GET DATA BUILD as part of the
- 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