><\ {}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

GOOGLE

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@