ajax to the moon

Ajax to the Moon

Dave Johnson

CTO and Co-founderNitobiwww.nitobi.com

2007 CommunityOne 2

Agenda

1. Who I Am

2. Offline Ajax

3. Pushing Ajax

4. Ajax Performance

5. Summary

2007 CommunityOne 3

Who I Am

• Nitobi Enterprise Ajax Podcast• Enterprise Ajax book (Prentice Hall)• blogs.nitobi.com/dave

2007 CommunityOne 4

What Do I Do?

• Nitobi co-founder• Located in Vancouver, Canada• Ajax user-interface components

for the enterprise

2007 CommunityOne 5

2007 CommunityOne 6

Clients

2007 CommunityOne 7

Agenda

1. Who I Am

2. Offline Ajax

3. Pushing Ajax

4. Ajax Performance

5. Summary

2007 CommunityOne 8

Offline Ajax

http://www.flickr.com/photos/natearcher/378519540/

2007 CommunityOne 9

Know your users

2007 CommunityOne 10

Why Offline

• Hard at work• Get on a plane• Keep on working


http://www.flickr.com/photos/plakboek/339017053/


Why Offline

• Hard at work• Get on a plane• Keep on working• Get Internet connection and sync data

• More common than you may think!


But Seriously

• Internet connections do not grow on trees• Try going to Sun HQ and getting on their network!


How Does it Work?

• Work offline• Store data locally when browser is closed• Send data back to server when connected


Storage

• Cookies• Firefox / Internet Explorer only• Flash• Install software


Cookies

• 4Kb of storage per domain• Easily deleted – probably suspected as Spyware


Firefox 2.0 Offline Storage

• Cookies on steroids• Data not available across sessions• 5Mb of storage by default• A bit buggy at the moment but Firefox 3 should

have global storage across sessions


<html> <head> <script type=”text/javascript”>function saveSession(myparam,myvalue) { // will save the attribute myparam with value myvalue sessionStorage[myparam] = myvalue;}function loadSession(myparam) { // will retrieve myparam from sessionStorage var myresult = sessionStorage[myparam]; return myresult;} </script> </head> <body> <form id="myform" name="myform"> <input type="text" id="myvalue" name="myvalue"> <input type="button" value="Save" onclick="saveSession('myattribute',myform.myvalue.value)"> <input type="button" value="Load" onclick="alert(loadSession('myattribute'))"> </form> </body></html>


Internet Explorer userData Behavior

• Access data across sessions• 128Kb limit for Internet (512Kb for Intranet)• Relies on Internet Explorer Behaviors• What about HTML Applications?


<html> <head> <script type=”text/javascript”>function save(myparam,myvalue) { $(“storageInput”).setAttribute(myparam, myvalue).save("mydata");}function load(myparam) { return $(“storageInput”).load("mydata").getAttribute(myparam);} </script> <style>.storage { behavior:url(#default#userData); display:none;} </style> </head> <body> <form id="myform" name="myform"> <input type="text" id="myvalue" name="myvalue"> <input type="button" value="Save"

onclick="save('myattr',myform.myvalue.value)"> <input type="button" value="Load" onclick="alert(load('myattribute'))"> <div id=”storageInput” class=”storage”></div> </form> </body></html>


Flash SharedObject Storage

• Access data across sessions• User definable storage limit (default of 100Kb)• Back to Flash 6 (98% adoption)


Flash Movie

import flash.external.ExternalInterface;

function saveAttribute(datastore, paramname, paramvalue) { mySharedObject = SharedObject.getLocal(datastore); mySharedObject.data[paramname] = paramvalue; mySharedObject.flush();}

function loadAttribute(datastore,paramname) { return SharedObject.getLocal(datastore).data[paramname]; }

ExternalInterface.addCallback("saveAttribute", this, saveAttribute); ExternalInterface.addCallback("loadAttribute", this, loadAttribute);


<html> <head> <script>function thisMovie(movieName) { if (navigator.appName.indexOf("Microsoft") != -1) return window[movieName]; else return document[movieName];}function saveData(store, param, pvalue) { thisMovie(‘myStorage’).saveAttribute(store,param,pvalue);}function loadData(store, param) { return(thisMovie(‘myStorage’).loadAttribute(store,param));} </script> </head> <body> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000“ codebase="…" width="1" height="1" id="myStorage" align="middle"> <param name="movie" value="localstore.swf" /> <param nam="allowScriptAccess" value="always"> <embed src="localstore.swf" allowScriptAccess="always" width="1" height="1"

name="myStorage“ type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </body></html>


Apollo

• Adobe’s new runtime – currently Alpha• Offline capable, runs from your computer• A lot more than just offline!

• Flex + WebKit (i.e. Safari) in one


Web Proxy

• Proxy auto-config – browser proxy settings• JavaScript file with FindProxyForURL• Forward requests to a local proxy for interested

domains• Used by the Dojo Toolkit


Salesforce.com

Local Proxy


Whole Hog

• Web server• Database• Run locally• Zimbra uses this approach


Issues

• Performance• Concurrency

• Your own data or shared?

• End user requirements• Are they a captive user?

• Penetration


End user reqs / Penetration Performance Concurrency

Cookies

Browser Specific

Flash

Proxy

Whole Hog



Cookies

Browser Specific

Flash

Proxy

Whole Hog


Agenda

1. Who I Am

2. Offline Ajax

3. Pushing Ajax

4. Ajax Performance

5. Summary


Pushing Ajax

http://www.flickr.com/photos/vidiot/69075298/


Watch out for your thumb


Why Push?

• Keep client up to date• Collaboration

• Documents• Communication

• Time sensitive data


How Does it Work?

Big scary InternetInnocent MySpace user MySpace Evil EmpireTM


Polling

• Means to the same end• Easy to build

• Request update from server every N seconds• Support thousands of concurrent users?

users / pollTime = requests per second

2007 CommunityOne 44http://www.flickr.com/photos/roadhunter/68017710/


How Does it Work?

Big scary InternetInnocent MySpace user MySpace Evil EmpireTM

thumb twiddling …


Push

• Keep connection to server open• Server writes to stream when ready• Support thousands of concurrent users?

numConnections ≡ numServerThreads


http://www.flickr.com/photos/rev_bri/112249215/


Asynchronous Servlets

• Sun – Grizzly HTTP Connector• BEA – AbstractAsyncServlet• Tomcat 6.x – CometServlet• Jetty – Continuations

• No standards here


Cometd / Bayeux

• Cometd reference implementation• Bayeux pub/sub on top of Comet

• Think JMS for JavaScript


DEMO

• http://localhost:8080/examples/magnets/


Piggyback

• The middle of the road• Send data to client with any other responses


Other Approaches to Push

• LiveCycle Data Services• LightStreamer


Issues

• Server load• Internet Explorer


Agenda

1. Who I Am

2. Offline Ajax

3. Pushing Ajax

4. Ajax Performance

5. Summary


Ajax Performance

http://www.flickr.com/photos/edfladung/451378444/

Ajax Performance


Ask questions first, optimize second


What is the Bottleneck?

• Situation dependent• How much data?• What type of data?• How many server hits?• What are the common workflows?• What browsers are you targeting?• What is the existing infrastructure?


Lifecycle


Data Formats

• XML• <xml>You know this</xml>

• JSON• {“json”:[“maybe”,”you”,don’t”],”know”:”this”}

• HTML• <html>Looks familiar</html>

• Text• Images


Server

• HTML• Whatever you use today

• XML• Standard support for object serialization• Similar to HTML

• JSON• Easy to add on


Bandwidth

• HTML• <div style=“color: red;”>Napoleon</div>

• XML• <customer><name>Napoleon</name></customer>• <c n=“Napoleon”/>

• JSON• {“customer”:[{“Name”:”Napoleon”}]}• {“c”:[{“n”:”Napoleon”}]}

• Polling, code size etc


JavaScript

• HTML• Nothing to do

• XML• Transform with XSLT (browser dependent)• Iterate over XML DOM nodes and string build• Iterate over XML DOM nodes and create HTML DOM nodes

• JSON• eval() the block of JSON to a JavaScript object• Transform with JSON Templates• Iterate through JavaScript arrays and string build• Iterate through JavaScript arrays and create HTML DOM nodes


Internet Explorer


Firefox


http://www.jamesward.org/census/

Firefox

Internet Explorer


XSLT Cross Browser Performance

0

5

10

15

20

25

30

35

40

45

0 100 200 300 400 500

Table Cells

Tim

e (m

s)

Firefox 1.5

IE 6


Don’t Lose your Keys

<xsl:key name=“sales-by-customer” match=“customer” use=“@name” />

<xsl:value-of select="key(‘sales-by-customer', $CustomerName)">


XSLT Performance

0

5

10

15

20

25

30

35

40

45

0 100 200 300 400 500

Table Cells

Tim

e (m

s)

IE 6 (with key)

IE 6 (w/o key)


JSON with Padding (JSONP)

• Most apps use XHR• Using XHR for JSON necessitates eval()• eval() is slow

• Instead dynamically insert a <script> tag and have the returned JavaScript call a function …

• http://localhost/javaone/


The Fast, Server Dependent Wayfunction getPostsSi() { var elem = document.createElement("script"); elem.src = "http://del.icio.us/feeds/json/davyjones?

callback=buildHtml"; document.body.appendChild(elem);}

function buildHtml(obj) { var s = []; for (var i=0; i<obj.length; i++) { s.push("<div><a href='"+obj[i].u+"'>" + obj[i].d +

"</a></div>"); } $("container").innerHTML = s.join("");}


The Slow, Server Agnostic Way

function getPostsXhr() { var xhr = new nitobi.ajax.HttpRequest(); xhr.handler =

"http://localhost/feeds/json/davyjones"; xhr.onComplete.subscribe(xhrDataReady); xhr.send();}

function xhrDataReady(evtArgs) { var obj = eval("("+evtArgs+")"); buildHtml(obj);}


HTML DOM

• HTML• $(“myNode”).innerHTML = “<div>Napoleon</div>”;

• XML• innerHTML• DOM manipulations

• createElement(“div”), appendChild(node), etc

• JSON• innerHTML• DOM manipulations

• Interactivity


General DOM Function


Most Wanted

• innerHTML – consider HTML tags, floats, events• offsetTop / Left• getBoundingClientRect / getBoxObjectFor• Stylesheets


Watch Out for Memory Leaks

• Circular loops between the DOM and JavaScript

• Use Drip to find them

<script type=“text/javascript”>var domNode = $(“myDomNode”);domNode.foo = domNode;</script>

expando


JavaScript Compression

• Removing comments• Removing whitespace• Removing new-line characters• Replacing variables with shorter names


Simple Example

var _a = function(a){var b=0;var c=a.length;for(var d=0;d<c;d++){b+=a[d];}return b/c;}var calcAverage=_a;

/** * @private */var _calcAverage = function(aNumber) { var nTotal = 0; var iLength = aNumber.length; for (var iIndex = 0; i<iLength; i++) { nTotal += aNumber[iIndex]; } return nTotal/iLength;}/** * Calculates the average of an array of numbers. * @param {Array} Array of numbers to average. */var calcAverage = _calcAverage;


Rhino Minification / Obfuscation

<target name="obfuscateJS" description="compress and obfuscate code">

<java classname="org.mozilla.javascript.tools.shell.Main“dir="${basedir}\build\rhino\bin\"fork="true"output="${basedir}\output\src_obfuscated.js">

<arg line="-c ${basedir}\input\src.js" /> <classpath> <pathelement path="${basedir}\build\rhino\bin\js.jar"/> </classpath> </java></target>


Compression

• Request• Accept-Encoding: gzip,deflate

• Response• Content-Encoding: gzip || deflate

• IIS and Apache dynamically GZip / Deflate content and cache it

• All modern browsers support compressed content• Internet Explorer 6 SP1 had some problems

• IE, Firefox, Opera accept compressed content _without_ Content-Encoding header


Apache Compression

# Compress everything unless excluded below.

SetOutputFilter DEFLATE

SetInputFilter DEFLATE

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|rar)$ no-gzip dont-vary

SetEnvIfNoCase Request_URI \.(?:pdf|avi|mov|mp3|rm)$ no-gzip dont-vary

# Explicity compress certain file types

AddOutputFilterByType DEFLATE text/html text/plain text/xml


Size (Kb)

Original 9.3

Minify 3.9

GZip / Deflate 2.8

Minify + GZip / Deflate 1.3

Size Reduction 86%

How Small is It?Expected Results for JavaScript Compression


Content Merging

• Reduce download overhead by merging resources• JavaScript• Cascading Stylesheets• Images

• Careful with caching though!


Image Merging


Image Merging

<html> <head> <style type="text/css" media="screen"> .colour {clip: rect(0px 135px 125px 0px);} .grayscale { left:-135px; clip: rect(0px 270px 125px 135px); } .grayscale, .colour { position:absolute; width: 270px;height: 125px; background: url(images/nitobi.jpg); } .container { height:125px;width:135px; position:relative; } </style> </head> <body> <div class="container"><div class="colour"></div></div> <div class="container"><div class="grayscale"></div></div> </body></html>

clip: rect(0px 135px 125px 0px);

clip: rect(0px 270px 125px 135px);

background: url(images/nitobi.jpg);


Agenda

1. Who I Am

2. Offline Ajax

3. Pushing Ajax

4. Ajax Performance

5. Summary


Summary

• “Work Offline” – know your users• Browser specific, Flash or Install• Usability

• Push – watch out for your thumb• Real-time collaboration• Usability

• Performance – ask questions first, optimize later• Be careful but not too careful• Usability

87

Q&ADave Johnson

www.nitobi.com

[email protected]

http://blogs.nitobi.com/dave

ajax to the moon

Technology

value onclick