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!

Seit heute ist der nachfolgende Satz, der wohl wichtigste Satz in meinem Kopf, wenn "JavaScript" und "Sortierung" zusammenfallen.

[...]die Sortierung erfolgt lexikographsich, das bedeutet, dass Zahlen wie Zeichenketten behandelt werden.

• merlyn.demon.co.uk
• javascriptkit.com
• w3schools.com

Three different pages in two languages pushed an entry on top of there page so i have to investigate the linked content. The entries are about "opa", an self designated "enterpriese framework for javascript". Opa can handle server and client side javascript, and writes the javascript for you. That means while creating your web application, you write all the code in the opa programming language and the framework does the rest for you. Opa uses jQuery on the client side and node.js on the server side. After a few hours investigating, i love the fact "strong static typing" as much as "available for linux, freeBsd and other systems". I recommend the tour and walk through some examples/use cases.

By surfing through the web for opa, i stumbled upon HaXe and this looks quite promising.

After browsing trough the sourceforge.net, my tab group with "software" to look at counts 15 tabs. Hopefully i can/will check this software. Otherwise, if you checked it, write a comment.

• webmail program like roundcube

  IlohaMail is a PHP based lightweight full featured multilingual webmail program with IMAP and POP3 support. IlohaMail also includes a full-featured contacts manager, bookmarks manager, and scheduler.

  Ilohamail
• web file management

  AjaXplorer is a PHP rich-client browser for managing files on a web server without FTP. Implements usual file actions, online zip browsing, text files edition and images preview. Users management system and multi-languages.

  ajax filemanager
• web instant messenger

  AJAX Chat is a fully customizable web chat implemented in JavaScript, PHP and MySQL which integrates nicely with common forum systems like phpBB, MyBB, PunBB, SMF and vBulletin. A Flash and Ruby based socket connection can be used to boost performance.

  ajax-chat

• phpFreeChat is a free, simple to install, fast and customizable chat that uses by default files for message and nickname storage. It uses AJAX to smoothly refresh and display the chat zone and the nickname zone.

  phpfreechat
• web proxy

  Lightweight, PHP-based Web Proxy that can utilize whatever remote connecting ablities your server has to offer. It should work out of the box. No configuration needed.

  KnProxy
• web desktop/os

  eyeos is an open source web desktop following the cloud computing concept, written in mainly PHP and XML. It acts as a platform for web applications written using the eyeOS Toolkit. It includes a Desktop environment with 67 applications and sys utils.

  eyeos
• website heatmap

  ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones. Requires Javascript on the client to track clicks, PHP and GD on the server to log clicks and generate the heatmap

  clickheat
• web human resource management

  OrangeHRM is an Open Source Human Resource Management System that covers Personnel Information Management, Employee Self Service, Leave, Time & Attendance, Benefits, and Recruitment. Tags: HRM, HRMS, HCM, HRIS, EHRMS, Human Capital Management

  orangehrm
• open source nas system

  Openfiler is a browser-based network storage management utility. Linux-powered, Openfiler delivers file-based Network Attached Storage (NAS) and block-based SAN in a single framework. It supports CIFS, NFS, HTTP/DAV, FTP, and iSCSI.

  openfiler
• application security

  The Open Web Application Security Project (OWASP) software and documentation repository.

  OWASP
• running native linux code on windows with andLinux

  andLinux is a complete Ubuntu Linux system running seamlessly in Windows 2000 based systems (2000, XP, 2003, Vista, 7; 32-bit versions only). This project was started for Dynamism for the GP2X community, but its userbase far exceeds its original design. andLinux is free and will remain so, but donations are greatly needed.

  andLinux