GUARDIAN
Andy Hume
M.GUARDIAN.CO.UK
Front-end London, January 2013
RESPONSIVE
Friday, 18 January 13
Slide 2
Slide 2 text
Improve mobile web site
Responsive future
New www via the back door?
WHAT ARE WE DOING?
Friday, 18 January 13
Slide 3
Slide 3 text
Builds on Guardian APIs
- http://www.guardian.co.uk/open-platform
Amazon hosted
- EC2, S3, Cloudformation
Code in public Github repo
- http://github.com/guardian/frontend
HOW ARE WE DOING IT?
Friday, 18 January 13
Slide 4
Slide 4 text
Metrics and monitoring
- Omniture, Ganglia, Graphite, custom tools
Automation
- Tests, build, sprites, cloudformation
Continous deployment
- merge to master, Team City, test, deploy
AGILE? (or something)
Friday, 18 January 13
Slide 5
Slide 5 text
LESS
STUFF
requirejs
nodejs
web fonts
AMD
bower
style guide
PhantomJS
Jasmine
Selenium
localStorage
responsive images
curljs
jshint
grunt
Friday, 18 January 13
Slide 6
Slide 6 text
JAVASCRIPT
Friday, 18 January 13
Slide 7
Slide 7 text
‘CUTTING THE
MUSTARD’ (thanks Tom Maslen)
var guardian = {
isModernBrowser: (
‘querySelector’ in document &&
‘addEventListener’ in window &&
‘localStorage’ in window
)
};
Friday, 18 January 13
JS BOOTSTRAPS
var r = new Router();
// Init all common modules first
Common.init(config);
r.get(‘/sport’, function(req) {
SportFront.init(req, config);
});
r.get(‘/football/:action/:day’, function(req)
{
Football.init(req, config);
});
Friday, 18 January 13
Slide 10
Slide 10 text
REQUIREJS OPTIMIZER
Uglify
One app file
Splitting up app file
Bower
Friday, 18 January 13
Slide 11
Slide 11 text
AMD
define(['common', 'modules/detect', 'bonzo'],
function (common, detect, bonzo) {
var theModule = {
method: function() {
if (detect.touch) {
common.doSomething();
}
}
};
};
return theModule;
});
Friday, 18 January 13
Slide 12
Slide 12 text
CURLJS
Asynchronous AMD loader
2.5Kb compressed
Supports non AMD via plugin
(Less jQuery compatible)
Friday, 18 January 13
STYLE GUIDE
Ensures you’ve built a system
Modules decoupled
Type decoupled
Friday, 18 January 13
Slide 19
Slide 19 text
LESS
CSS pre-processor
Mainly use variables and mixins
No nesting (except @media)
Friday, 18 January 13
Slide 20
Slide 20 text
NODEJS
Friday, 18 January 13
Slide 21
Slide 21 text
BUILD PROCESS
sbt calls out to nodejs
JavaScript: requirejs, jshint
CSS: Less (CSS lint?)
Spriting: SVG PNG
Fonts: base64 encoded WOFF
Friday, 18 January 13
Slide 22
Slide 22 text
ICON SPRITES
Receive SVGs from design team
We decide on format
grunticon from Filament group
Ouputs CSS with SVG data URIs
Outputs CSS / sprited PNG file
Friday, 18 January 13
Slide 23
Slide 23 text
WEB FONTS
Only support WOFF (nearly)
5(!) fonts totalling 97Kb
Base64 encoded
Cached in localStorage
Friday, 18 January 13
Slide 24
Slide 24 text
PERFORMANCE
Friday, 18 January 13
Slide 25
Slide 25 text
THE USUAL STUFF
Everything compressed
Static assets with 10 year expiry
One CSS file (so far?)
One JS file (so far?)
Friday, 18 January 13
Slide 26
Slide 26 text
CUTTING THE MUSTARD
No JavaScript
All low res images
No web fonts
Friday, 18 January 13
Slide 27
Slide 27 text
CRITICAL PATH
Friday, 18 January 13
Slide 28
Slide 28 text
CRITICAL PATH
Friday, 18 January 13
Slide 29
Slide 29 text
IMAGES
More to do
Remove from html
Demand load more
Optimise better
Friday, 18 January 13
Slide 30
Slide 30 text
RESPONSIVE IMAGES?
Not responding to viewport
Responding to size of image
Responding to network speed
(sort of)
Friday, 18 January 13
Slide 31
Slide 31 text
var endTime,
startTime,
perf = window.performance;
if (perf && perf.timing) {
startTime = perf.timing.requestStart;
endTime = perf.timing.responseStart;
}
return endTime - startTime;
DETECT.JS
var loadTime = getPageSpeed();
var speed = ‘low’;
if (loadTime < 1000) {
speed = 'high';
}
return speed;
Friday, 18 January 13
Slide 32
Slide 32 text
MONITORING SPEED
Friday, 18 January 13
Slide 33
Slide 33 text
OTHER TOOLS
WebPagetest
Google Critical Path Explorer
PhantomJS
Friday, 18 January 13
Slide 34
Slide 34 text
THIRD PARTIES?
Removing SPOFs
document.write()
Ads
Friday, 18 January 13
Slide 35
Slide 35 text
Thank-you!
http://lanyrd.com/ckwqy
@andyhume
Creative Commons Licensed
Attribution, Non-Commercial, Share Alike
cc
Friday, 18 January 13