phil hawksworth - dynamic static site strategies
DESCRIPTION
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
><\ {}st
DYNAMIC STATIC SITE STRATEGIESDEVCONFU, MAY 2014
><\ {}st
DYNAMIC STATIC SITE STRATEGIESDEVCONFU, MAY 2014
DYNAMIC STATIC SITE STRATEGIES
><{}\ stu{}\
STATIC SITEGENERATION
><{}\ stu{}\
SSGEEWIZZ
><\ {}st
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...!
><\ {}st
@PHILHAWKSWORTH><F#@!!!
><{}\ stu
@PHILHAWKSWORTH
TOOLSENGINEERING
o
><\ {}st
@PHILHAWKSWORTH><M
><\ {}st
@PHILHAWKSWORTH>< M
HIPSTER
TAXthe
><\ {}st
@PHILHAWKSWORTH><STATIC SITEGENERATION
><\ {}st
@PHILHAWKSWORTH><THE GOOD OL’ DAYS
><{}\ stu
@PHILHAWKSWORTH
~/htdocs
><{}\ stu
@PHILHAWKSWORTH
http://aston.ac.uk/~hawkswpn404
><{}\ stu
@PHILHAWKSWORTH
WRITE TEXTSAVE
REFRESHREPEATREJOICE
><{}\ 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} NEEDSA BEAUTIFUL SITECLEAR CONTENT
GOOD BROWSER SUPPORTSPEEDY LOADING
EASY TO UPDATEPROBABLY A CMSDYNAMIC CONTENT
SENSIBLE URLS
><{}\ stu
@PHILHAWKSWORTH
A MOBILE FIRSTRESPONSIVE
WEB APP
BUZZWORD ALERT
k
k
><{}\ stu
@PHILHAWKSWORTH
AMOBILEFIRSTRESPONSIVEWEBAPP#
><{}\ stu
@PHILHAWKSWORTH
A WEB SITE
><{}\ stu
@PHILHAWKSWORTH
THE {CLIENT} NEEDSA BEAUTIFUL SITECLEAR CONTENT
GOOD BROWSER SUPPORTSPEEDY LOADING
EASY TO UPDATEPROBABLY A CMSDYNAMIC CONTENT
SENSIBLE URLS
><{}\ stu
@PHILHAWKSWORTH
IS THIS ONLY POSSIBLE WITH A DYNAMIC
SERVER ARCHITECTURE?
><{}\ stu{}\
NO
><{}\ stu
@PHILHAWKSWORTH
STATIC ARCHITECTURE
DYNAMICFEATURES
for
><{}\ stu
@PHILHAWKSWORTH
WHAT DOESDYNAMIC MEAN?
><{}\ stu
@PHILHAWKSWORTH
PERSONALISED CONTENT
><{}\ stu
@PHILHAWKSWORTH
USER GENERATED CONTENT
><{}\ stu
@PHILHAWKSWORTH
TIME TO REFRESH
><{}\ stu
@PHILHAWKSWORTH
{PUBLISHto
TIME
><{}\ stu
@PHILHAWKSWORTH
KEEP IT FRESH
><{}\ stu
@PHILHAWKSWORTH
CODE
DEPLOYMENTCONTENT
DEPLOYMENT
><{}\ stu
@PHILHAWKSWORTH
THE OPPORTUNITY
><{}\ stu
@PHILHAWKSWORTH
CONSIDERHONEST
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 BREAKINGNEW APPROACH
62002
><\ {}st
BAKE, DON’T FRY
><{}\ stu
@PHILHAWKSWORTH
BAKE, DON’T FRYAARON SWARTZ
><{}\ stu
@PHILHAWKSWORTH
WEBMAKEA PERL CMS
><{}\ stu
@PHILHAWKSWORTH
><{}\ stu
@PHILHAWKSWORTH
I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER,
POSTGRES AND ORACLE INSTALLSAARON 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 AUDITPENETRATION TESTINGLOAD 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 INFRASTRUCTUREFEWER SERVERSLESS 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
WIDERTALENT POOL
><{}\ stu
@PHILHAWKSWORTH
DEVELOPMENT COSTS
><{}\ stu
@PHILHAWKSWORTH
CONFIDENCE
><{}\ stu
@PHILHAWKSWORTH
TOOLS & ENABLERS
><{}\ stu
@PHILHAWKSWORTH
EASIERITERATION
DYNAMICthrough
><{}\ stu
@PHILHAWKSWORTH
GENERATORSAUTOMATION HOSTING
><{}\ stu
@PHILHAWKSWORTH
JEKYLL RUBY
HYDE PYTHON
MIDDLEMAN RUBY
DOCPAD JAVASCRIPT
ASSEMBLE JAVASCRIPT
HARP JAVASCRIPT
><{}\ stu
@PHILHAWKSWORTH
STATICSITEGENERATORS.NETDOCPAD / AUTOMATED / 274 SSGs
><{}\ stu
@PHILHAWKSWORTH
274
><\ {}st
@PHILHAWKSWORTH>< M
HIPSTER
TAXthe
><{}\ stu
@PHILHAWKSWORTH
JEKYLL
><\ {}st
{}\
{}\
><{}\ stu
@PHILHAWKSWORTH
BIG STACK
TINYSTACK
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 ENGINESPARTIALSINHERITANCELOGIC
><{}\ 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 LAWANY 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
TINYSTACK
SMALL STACK
><{}\ stu
@PHILHAWKSWORTH
BIG STACK
TINYSTACK
SMALL STACK
><{}\ stu
@PHILHAWKSWORTH
HARPJS
><{}\ stu
@PHILHAWKSWORTH
HARPJS PREPROCESSINGEJS, SWIGSASS, LESSCOFFEESCRIPT
><{}\ stu
@PHILHAWKSWORTH
LESSBLOGGY
MOARDATA
OBJECTS
><{}\ stu
@PHILHAWKSWORTH
RAPID & POWERFULSITE GENERATION
><{}\ stu
@PHILHAWKSWORTH
RAPID & POWERFULSITE GENERATIONSOLVED
><{}\ stu
@PHILHAWKSWORTH
GENERATORSAUTOMATION HOSTING
><{}\ stu
@PHILHAWKSWORTH
333
\\
><{}\ stu
@PHILHAWKSWORTH
d
><{}\ stu
@PHILHAWKSWORTH
AUTOMATIONREPEATABLE
PREDICATABLELOW FRICTION
><{}\ stu
@PHILHAWKSWORTH
FABRIC
><{}\ stu
@PHILHAWKSWORTH
GRUNTGULP
BRUNCHBELCHBURP
COUGHHICCUP
MMM
><{}\ stu
@PHILHAWKSWORTH
GENERATORSAUTOMATION HOSTING
><{}\ stu
@PHILHAWKSWORTH
SITE44
><{}\ stu
@PHILHAWKSWORTH
333
\\
><{}\ stu
@PHILHAWKSWORTH
GITHUB PAGES
><\ {}st
BITBALLOON
><\ {}st
BITBALLOON
><\ {}st
HOSTING & OPTIMISATION AS A SERVICEAUTOMATIC CDN MANAGEMENTAUTOMATED DEPLOYMENTSOTHER FUNKY SHIZZLE
BITBALLOON
><{}\ stu
@PHILHAWKSWORTH
AMAZON S3GITHUB PAGES
DROPBOXSTATIC HOSTING AAS
ANY WEBSERVER
><{}\ stu
@PHILHAWKSWORTH
PUSH IT
><{}\ stu
@PHILHAWKSWORTH
EXAMPLES
><{}\ stu{}\
BEERCLUBSIMPLEST EXAMPLESIMPLEST WORKFLOWPOWERED BY NERDS
><{}\ stu
@PHILHAWKSWORTH
OUTSOURCED HOSTING
><{}\ stu
@PHILHAWKSWORTH
GITHUB PAGES
><{}\ stu
@PHILHAWKSWORTH
$ git push origin gh-pages
><{}\ stu
@PHILHAWKSWORTH
OUTSOURCED VERSION CONTROL
><{}\ stu
@PHILHAWKSWORTH
OUTSOURCEDSITE GENERATION
><{}\ stu
@PHILHAWKSWORTH
OUTSOURCED DEPLOYMENT
><\ {}st
@PHILHAWKSWORTH><{{ site.data.FILENAME }}
><\ {}st
@PHILHAWKSWORTH><{{ site.data.drops }}
><{}\ stu{}\
><{}\ stu
@PHILHAWKSWORTH
TOTALLYFORKEDSIMPLEST EXAMPLESIMPLEST WORKFLOWNOT POWERED BY NERDS
><{}\ stu
@PHILHAWKSWORTH
SIMPLIFYINGDUMBING DOWN
is not
><{}\ stu
@PHILHAWKSWORTH
SIMPLIFYINGFOCUS ON WHAT
lets us
MATTERS
Developers Relations
><\ {}st
@PHILHAWKSWORTH><developers.google.com/web/fundamentals
><{}\ stu{}\
github.com/Google/WebFundamentals
><{}\ stu
@PHILHAWKSWORTH
SIMPLIFYINGFOCUS ON WHAT
lets us
MATTERS
><{}\ stu
@PHILHAWKSWORTH
LIMITATIONS & WORKAROUNDS
><{}\ stu
@PHILHAWKSWORTH
SEARCH & COMMENTS
><{}\ stu
@PHILHAWKSWORTH
SEARCH
><{}\ stu
@PHILHAWKSWORTH
SIMPLE INDEXJAVASCRIPTPROGRESSIVE ENHANCEMENT
A JEKYLL EXAMPLE
><{}\ stu{}\
A SIMPLE BLOG SITE
><\ {}st
@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
><\ {}st
@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 grumbling about their large page weight slow rendering times general accessibility black spots but some are better than others that got thinking do they ever good job? today saw an article from creative bloq heralding recent example these kind as quirky masterpiece start by commenting: parallax scrolling may be way to becoming design cliche er yep somewhat! actually looks at technical approaches shoorder keep down just 77mb (big low typical single site) rest quote hits home though: agencies putting imaginative aesthetically pleasing uses there's surely life old dog yet this reminds one reasons wanted join big agency like r/ga first place - add voice those fighting responsible executions which often have audiences sometimes (or least propagate) development trends we need mindful type build best solution? most responsible? was see were making efforts bring you sound broken record phil not going embark my usual rants bloated pages require loading screens gobble your mobile data allowance because i've done so many before went look site referring noticed something: didn't read really even notice any content might squinting through judgmental eyes purist don't think reality style rarely choice conveying perhaps when people encounter all kinds whizzy interaction baubles play with ahead reading apparently cadillac know said otherwise afraid detail passed question out there: did what you've seen recently said? curious hear regardless implementation performance how examples getting message across observations? reply tweet twitter photo credit: david san"
! }, ...
SITE/SEARCH.JSON
><{}\ stu{}\
INLINE JAVASCRIPT SEARCH
><{}\ stu
@PHILHAWKSWORTH
LOAD ASYNCHRONOUSLY AFTER PAGECACHED AND STATICCONTEXTUAL LOAD
PAGE WEIGHT?
><{}\ stu{}\
CONTEXTUAL LOADING
><{}\ stu
@PHILHAWKSWORTH
JAVASCRIPTONLY?
><{}\ stu{}\
PROGRESSIVE ENHANCEMENT
><\ {}st
@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
><\ {}st
@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 TIMEOR
MODERATED?
><{}\ stu
@PHILHAWKSWORTH
COMMENTAPPROVALWORKFLOW
><\ {}st
BITBALLOON
><\ {}st
BITBALLOON
><\ {}st
OTHERFUNKYSHIZZLE
BITBALLOON
><\ {}st
BITBALLOON API
><{}\ stu
@PHILHAWKSWORTH
AUTOMATICFORM HANDLING
><\ {}st
@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 HANDLINGAPI ENDPOINTEMAIL NOTIFICATIONSINTEGRATIONS WITH OTHER SERVICES
><{}\ stu
@PHILHAWKSWORTH
><{}\ stu
@PHILHAWKSWORTH
GET DATA
BUILDas 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 STUFFGO FASTER
><{}\ stu
@PHILHAWKSWORTH
SPEND LESS
><{}\ stu{}\
THANKS
FONTS
LINKS
BATTLESHIP - www.flickr.com/photos/swfphotos/8075999488COMPLIANCE - www.flickr.com/photos/aorr/1229272894SALTNPEPPER - www.flickr.com/photos/camknows/4595655917FRESH PRINCE - flic.kr/p/fJcbnCAMBITIOUS - flic.kr/p/6Uvc2S
JEKYLL - jekyllrb.comHARP - harpjs.com, harp.ioSSGS - staticsitegenerators.netHEXO - zespia.tw/hexoBAKE, DON’T FRY - www.aaronsw.com/weblog/000404BITBALLOON - www.bitballoon.comBITBALLOON API - github.com/BitBalloon/bitballoon-apiGOOGLE WEB FUNDAMENTALS - developers.google.com/web/fundamentals
PLACARD CONDENSEDVENEER EXTRASWC RHESUS BETAMAC ICON STANDARD
><{}\ stu{}\
THANKS!PHILHAWKSWORTH@