Attraktor e.v. mexikoring 21, hamburg

Soundcloud - Arbo Von Monkiewitsch

html5 audio playback widget - measuring for velocity

measure first

how to?

• synthetic user monitoring (by phantom.js)
  • repeaable
  • doesn't show real user experience
  • good for benchmarking
• real user monitoring (google analytics)
  • shows real user experience
  • change of user behavior impacts repeateability (e.g. side slow in asia but fast in euro)
  • impact of embedding site

what?

• http ping
• fully page load
• include all transactions
• follow K.I.S.S., just render the page

define your goals

• what is fast
• don't define random goals on yourself
• public benchmarks are good as orientation (for e.g. set up a benchmark for youtube or similar)
• response time
• don't simple trust your metrics

best practices

• httparchive, pagespeed, yslow (100 - 200 ms as full page loading speed is good enough)
• compress each connection (use varnishs or something similar for uncompressable content)
• availability fallback -> dc
• performance - put api in cdn (also for http or https handshake)
• consitency - load balanced cdns

rap it up

• measure first
• keep it simple
• team autonomy

phantomJs - Raj Dudi

http://rajdudi.com

what it is - created by ariya hidayat

• can be integrated into jenkins
• automation and headless testing
• can be used for metrics measurement
• render and dump client side html
• current version is 1.8
• headless (Qt)Webkit/Browser
• javascript driven
• ideal for
  • headless website testing -> but it is not a test framework
  • screen capture
  • page automation
  • network monitoring
• projects
  • casperjs
  • ghostbusters
  • poltergeist

code evaluation

• evaluate(function, arg1, arg2, ...) {object}
• returns simple objects but no functions and closures
• execution is sandboxed
• dom scripting and css selector works
• use onConsoleMessage callback to receive the console messages

get it from

• phantomjs.org
• github.com/ariya/phantomjs
• https://aur.archlinux.org/packages/phantomjs/

examples

https://github.com/ariya/phantomjs/tree/master/examples

hello world

console.log("Hello world"); phantom.exit();

screen capture

• Page.render to render a screenshot
• supports ong, jpeg, gif and pdf
• options
  • page.clipRect = { top: 14, left: 3, width: 400, height: 300 };
  • page.paperSize = { width: '200px', height: '300px' } //for pdf output e.g., also supports borders and much more
  • page.zoomFactor = 0.25 // 1 is default
• projects based on phantomjs
  • screenr
  • mediaqueri
  • chromanope
• webpage api
  • var page = require('webpage').create();
  • page.open(url, callback) {void}
  • page.close() {void}
  • goBack(), goForward(), title, url
  • settings{object} //enable javascript, load images, username or password, websecurity
  • page.includeJs(url, callback) {void}
  • page.injectJs(filename) {boolean}
• webpage callbacks
  • onLoadStarted
  • onLoadFinished
  • onAlert
  • onCallback //experimental
  • onClosing
  • onConfirm
  • onConsoleMessage
  • onError
• system API
  • var system = require('system');
  • ...
• filesstem api
  • var fs = require('fs);
  • separator {string}
  • workingDirectory
  • ...

troubleshooting

• allows network sniffing
  • onResourceRequested
  • onResoureceReceived
  • TLS and SSL required for encrypted data - are they enabled?
• error handling

cons

• uses qtWebKit (not used by chrome, safari and so one)
• asynchronous api - difficult to handle for many
• not supported
  • plugins
  • webGL
  • video and audio
  • css 3-D
  • xpath

What could i add? Thanks to the talks, yes very much. Also thanks to the attraktor, you are doing it right!