Phil Hawksworth - Dynamic Static Site Strategies
Upcoming SlideShare
Loading in...5
×
 

Phil Hawksworth - Dynamic Static Site Strategies

on

  • 177 views

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 ...

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.

Statistics

Views

Total Views
177
Views on SlideShare
175
Embed Views
2

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 2

http://www.slideee.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Phil Hawksworth - Dynamic Static Site Strategies Phil Hawksworth - Dynamic Static Site Strategies Presentation Transcript

  • > {} t DYNAMIC STATIC SITE STRATEGIESDEVCONFU, MAY 2014
  • > {} t DYNAMIC STATIC SITE STRATEGIESDEVCONFU, MAY 2014 DYNAMIC STATIC SITE STRATEGIES
  • < } stu {} STATIC SITE GENERATION
  • < } stu {} SSGEEWIZZ
  • > {} t SSGEEWIZZ
  • >< {} stu @PHILHAWKSWORTH A QUICK INTRO
  • < } stu {} PHILHAWKSWORTH@ #DEVCONFU
  • >< {} stu @PHILHAWKSWORTH CLIENTS
  • >< {} stu @PHILHAWKSWORTH FRONT END
  • >< {} stu @PHILHAWKSWORTH I’M A SOFTWARE ENGINEER WHAT LANGUAGE? JAVASCRIPT HA HA HA HA...!
  • >< {} t @PHILHAWKSWORTH >< F#@!!!
  • >< {} stu @PHILHAWKSWORTH TOOLS ENGINEERING o
  • >< {} t @PHILHAWKSWORTH >< M
  • >< {} t @PHILHAWKSWORTH >< M HIPSTER TAX the
  • >< {} t @PHILHAWKSWORTH >< STATIC SITE GENERATION
  • >< {} t @PHILHAWKSWORTH >< THE GOOD OL’ DAYS
  • >< {} stu @PHILHAWKSWORTH ~/htdocs
  • >< {} stu @PHILHAWKSWORTH http://aston.ac.uk/~hawkswpn 404
  • >< {} stu @PHILHAWKSWORTH WRITE TEXT SAVE REFRESH REPEAT REJOICE
  • >< {} stu @PHILHAWKSWORTH MORE AMBITIOUS
  • >< {} stu @PHILHAWKSWORTH YOU NEED A SIEGEY BIN MY BUDDY AT UNI
  • >< {} stu @PHILHAWKSWORTH cgi-bin
  • >< {} stu @PHILHAWKSWORTH PERL
  • >< {} stu @PHILHAWKSWORTH QPLUMBING & INFRASTRUCTURE
  • >< {} stu @PHILHAWKSWORTH A RETURN TO SIMPLICITY
  • >< {} stu @PHILHAWKSWORTH THE CHALLENGE
  • >< {} 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
  • >< {} stu @PHILHAWKSWORTH A MOBILE FIRST RESPONSIVE WEB APP BUZZWORDALERT k k
  • >< {} stu @PHILHAWKSWORTH AMOBILEFIRSTRESPONSIVEWEBAPP#
  • >< {} stu @PHILHAWKSWORTH A WEB SITE
  • >< {} 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
  • >< {} stu @PHILHAWKSWORTH IS THIS ONLY POSSIBLE WITH A DYNAMIC SERVER ARCHITECTURE?
  • < } stu {} NO
  • >< {} stu @PHILHAWKSWORTH STATIC ARCHITECTURE DYNAMIC FEATURES for
  • >< {} stu @PHILHAWKSWORTH WHAT DOES DYNAMIC MEAN?
  • >< {} stu @PHILHAWKSWORTH PERSONALISED CONTENT
  • >< {} stu @PHILHAWKSWORTH USER GENERATED CONTENT
  • >< {} stu @PHILHAWKSWORTH TIME TO REFRESH
  • >< {} stu @PHILHAWKSWORTH {PUBLISH to TIME
  • >< {} stu @PHILHAWKSWORTH KEEP IT FRESH
  • >< {} stu @PHILHAWKSWORTH CODE DEPLOYMENT CONTENT DEPLOYMENT
  • >< {} stu @PHILHAWKSWORTH THE OPPORTUNITY
  • >< {} stu @PHILHAWKSWORTH CONSIDER HONEST USE CASES
  • >< {} stu @PHILHAWKSWORTH MANY TYPES OF SITES
  • >< {} stu @PHILHAWKSWORTH TARGETED CONTENT
  • >< {} stu @PHILHAWKSWORTH READ ONLY
  • >< {} stu @PHILHAWKSWORTH READ OFTEN
  • >< {} stu @PHILHAWKSWORTH WE CAN MAKE EVERYTHING FASTER
  • >< {} stu @PHILHAWKSWORTH GROUND BREAKING NEW APPROACH 62002
  • > {} t BAKE, DON’T FRY
  • >< {} stu @PHILHAWKSWORTH BAKE, DON’T FRY AARON SWARTZ
  • >< {} stu @PHILHAWKSWORTH WEBMAKE A PERL CMS
  • >< {} stu @PHILHAWKSWORTH
  • >< {} stu @PHILHAWKSWORTH I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002
  • >< {} stu @PHILHAWKSWORTH REDUCE COMPLEXITY
  • >< {} stu @PHILHAWKSWORTH EASE OF DEVELOPEMENT
  • >< {} stu @PHILHAWKSWORTH INCREASED PORTABILITY
  • >< {} stu @PHILHAWKSWORTH
  • >< {} stu @PHILHAWKSWORTH
  • >< {} stu @PHILHAWKSWORTH CONFIDENCE
  • >< {} stu @PHILHAWKSWORTH ENTERPRISE COMPLIANCE
  • >< {} stu @PHILHAWKSWORTH SECURITY AUDIT PENETRATION TESTING LOAD TESTING
  • >< {} stu @PHILHAWKSWORTH NOT ABOUT PERFORMANCE
  • >< {} stu @PHILHAWKSWORTH SOME CHEAP PERFORMANCE GAINS EXIST but
  • >< {} stu @PHILHAWKSWORTH FILE BASED ARCHITECTURE
  • >< {} stu @PHILHAWKSWORTH RAPID REQUEST RESPONSE
  • >< {} stu @PHILHAWKSWORTH COSTS
  • >< {} stu @PHILHAWKSWORTH HOSTING
  • >< {} stu @PHILHAWKSWORTH “JUST A FEW PERSONAL SITES”
  • >< {} stu @PHILHAWKSWORTH NOW I’M SAVING $40 A MONTH
  • >< {} stu @PHILHAWKSWORTH AT SCALE, THIS CAN BE BIG
  • >< {} stu @PHILHAWKSWORTH MAINTENANCE
  • >< {} stu @PHILHAWKSWORTH LESS INFRASTRUCTURE FEWER SERVERS LESS PRODUCTION CODE
  • >< {} stu @PHILHAWKSWORTH PORTABILITY
  • >< {} stu @PHILHAWKSWORTH FILES CAN GO ANYWHERE
  • >< {} stu @PHILHAWKSWORTH AVAILABILITY OF SKILLS
  • >< {} stu @PHILHAWKSWORTH FOCUS
  • >< {} stu @PHILHAWKSWORTH ARCHITECTURAL COMPLEXITY
  • >< {} stu @PHILHAWKSWORTH WIDER TALENT POOL
  • >< {} stu @PHILHAWKSWORTH DEVELOPMENT COSTS
  • >< {} stu @PHILHAWKSWORTH CONFIDENCE
  • >< {} stu @PHILHAWKSWORTH TOOLS & ENABLERS
  • >< {} stu @PHILHAWKSWORTH EASIER ITERATION DYNAMICthrough
  • >< {} stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
  • >< {} stu @PHILHAWKSWORTH JEKYLL RUBY HYDE PYTHON MIDDLEMAN RUBY DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
  • >< {} stu @PHILHAWKSWORTH STATICSITEGENERATORS.NET DOCPAD / AUTOMATED / 274 SSGs
  • >< {} stu @PHILHAWKSWORTH 274
  • >< {} t @PHILHAWKSWORTH >< M HIPSTER TAX the
  • >< {} stu @PHILHAWKSWORTH JEKYLL
  • > {} t } }
  • >< {} stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
  • >< {} 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.
  • >< {} 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
  • >< {} stu @PHILHAWKSWORTH RICH TEMPLATING ENGINES PARTIALS INHERITANCE LOGIC
  • < } stu {} wikipedia.org/wiki/Web_template_system
  • < } stu {} wikipedia.org/wiki/Web_template_system
  • < } stu {} wikipedia.org/wiki/Web_template_system
  • >< {} stu @PHILHAWKSWORTH DEPENDENCIES
  • >< {} stu @PHILHAWKSWORTH ATWOOD’S LAW
  • >< {} stu @PHILHAWKSWORTH ATTWOOD’S LAW ANY APPLICATION THAT CAN BE WRITTEN IN JAVASCRIPT, WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT JEFF ATWOOD, 2007
  • >< {} stu @PHILHAWKSWORTH $ npm install
  • >< {} stu @PHILHAWKSWORTH $ npm isntall
  • >< {} stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
  • >< {} stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK
  • >< {} stu @PHILHAWKSWORTH HARPJS
  • >< {} stu @PHILHAWKSWORTH HARPJS PREPROCESSING EJS, SWIG SASS, LESS COFFEESCRIPT
  • >< {} stu @PHILHAWKSWORTH LESS BLOGGY MOAR DATA OBJECTS
  • >< {} stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION
  • >< {} stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION SOLVED
  • >< {} stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
  • >< {} stu @PHILHAWKSWORTH  3 3 3
  • >< {} stu @PHILHAWKSWORTH d
  • >< {} stu @PHILHAWKSWORTH AUTOMATION REPEATABLE PREDICATABLE LOW FRICTION
  • >< {} stu @PHILHAWKSWORTH FABRIC
  • >< {} stu @PHILHAWKSWORTH GRUNT GULP BRUNCH BELCH BURP COUGH HICCUP MMM
  • >< {} stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING
  • >< {} stu @PHILHAWKSWORTH SITE44
  • >< {} stu @PHILHAWKSWORTH  3 3 3
  • >< {} stu @PHILHAWKSWORTH GITHUB PAGES
  • > {} t BITBALLOON
  • > {} t BITBALLOON
  • > {} t HOSTING & OPTIMISATION AS A SERVICE AUTOMATIC CDN MANAGEMENT AUTOMATED DEPLOYMENTS OTHER FUNKY SHIZZLE BITBALLOON
  • >< {} stu @PHILHAWKSWORTH AMAZON S3 GITHUB PAGES DROPBOX STATIC HOSTING AAS ANY WEBSERVER
  • >< {} stu @PHILHAWKSWORTH PUSH IT
  • >< {} stu @PHILHAWKSWORTH EXAMPLES
  • < } stu {} BEERCLUB SIMPLEST EXAMPLE SIMPLEST WORKFLOW POWERED BY NERDS
  • >< {} stu @PHILHAWKSWORTH OUTSOURCED HOSTING
  • >< {} stu @PHILHAWKSWORTH GITHUB PAGES
  • >< {} stu @PHILHAWKSWORTH $ git push origin gh-pages
  • >< {} stu @PHILHAWKSWORTH OUTSOURCED VERSION CONTROL
  • >< {} stu @PHILHAWKSWORTH OUTSOURCED SITE GENERATION
  • >< {} stu @PHILHAWKSWORTH OUTSOURCED DEPLOYMENT
  • >< {} t @PHILHAWKSWORTH >< {{ site.data.FILENAME }}
  • >< {} t @PHILHAWKSWORTH >< {{ site.data.drops }}
  • < } stu {}
  • >< {} stu @PHILHAWKSWORTH TOTALLY FORKED SIMPLEST EXAMPLE SIMPLEST WORKFLOW NOT POWERED BY NERDS
  • >< {} stu @PHILHAWKSWORTH SIMPLIFYING DUMBING DOWN is not
  • >< {} stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
  • GOOGLE
  • Developers Relations
  • >< {} t @PHILHAWKSWORTH >< developers.google.com/web/fundamentals
  • < } stu {} github.com/Google/WebFundamentals
  • >< {} stu @PHILHAWKSWORTH SIMPLIFYING FOCUS ON WHAT lets us MATTERS
  • >< {} stu @PHILHAWKSWORTH LIMITATIONS & WORKAROUNDS
  • >< {} stu @PHILHAWKSWORTH SEARCH & COMMENTS
  • >< {} stu @PHILHAWKSWORTH SEARCH
  • >< {} stu @PHILHAWKSWORTH SIMPLE INDEX JAVASCRIPT PROGRESSIVE ENHANCEMENT A JEKYLL EXAMPLE
  • < } stu {} A SIMPLE BLOG SITE
  • >< {} 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
  • >< {} 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
  • < } stu {} INLINE JAVASCRIPT SEARCH
  • >< {} stu @PHILHAWKSWORTH LOAD ASYNCHRONOUSLY AFTER PAGE CACHED AND STATIC CONTEXTUAL LOAD PAGE WEIGHT?
  • < } stu {} CONTEXTUAL LOADING
  • >< {} stu @PHILHAWKSWORTH JAVASCRIPT ONLY?
  • < } stu {} PROGRESSIVE ENHANCEMENT
  • >< {} 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>
  • < } stu {} JSBIN.COM/HELP
  • >< {} t @PHILHAWKSWORTH >< COMMENTS
  • >< {} stu @PHILHAWKSWORTH WHAT ABOUT COMMENTS? FIRST! DAMMIT I THOUGHT I WAS FIRST BUT U BEAT ME LOL ROFL OMG WTF HA HA!!!!!!!!!
  • >< {} stu @PHILHAWKSWORTH HOW TIMELY SHOULD COMMENTS BE? REAL TIME OR MODERATED?
  • >< {} stu @PHILHAWKSWORTH COMMENT APPROVAL WORKFLOW
  • > {} t BITBALLOON
  • > {} t BITBALLOON
  • > {} t OTHER FUNKY SHIZZLE BITBALLOON
  • > {} t BITBALLOON API
  • >< {} stu @PHILHAWKSWORTH AUTOMATIC FORM HANDLING
  • >< {} 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>
  • >< {} stu @PHILHAWKSWORTH DATA HANDLING API ENDPOINT EMAIL NOTIFICATIONS INTEGRATIONS WITH OTHER SERVICES
  • >< {} stu @PHILHAWKSWORTH
  • >< {} stu @PHILHAWKSWORTH GET DATA BUILD as part of the
  • >< {} stu @PHILHAWKSWORTH CALL TO ARMS
  • >< {} stu @PHILHAWKSWORTH SEEK OUT CHANCES TO SIMPLIFY
  • >< {} stu @PHILHAWKSWORTH CHALLENGE THE NEED FOR COMPLEXITY
  • >< {} stu @PHILHAWKSWORTH MAKE STUFF FASTER
  • >< {} stu @PHILHAWKSWORTH MAKE STUFF GO FASTER
  • >< {} stu @PHILHAWKSWORTH SPEND LESS
  • < } 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
  • < } stu {} THANKS!PHILHAWKSWORTH@