Ajax to the Moon

Ajax to the Moon Dave Johnson CTO and Co-founder Nitobi www.nitobi.com

Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object]

Who I Am ,[object Object],[object Object],[object Object]

What Do I Do? ,[object Object],[object Object],[object Object]

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

Why Offline ,[object Object],[object Object],[object Object]

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

Why Offline ,[object Object],[object Object],[object Object],[object Object],[object Object]

But Seriously ,[object Object],[object Object]

How Does it Work? ,[object Object],[object Object],[object Object]

Storage ,[object Object],[object Object],[object Object],[object Object]

Cookies ,[object Object],[object Object]

Firefox 2.0 Offline Storage ,[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Internet Explorer userData Behavior ,[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Flash SharedObject Storage ,[object Object],[object Object],[object Object]

Flash Movie ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Apollo ,[object Object],[object Object],[object Object],[object Object]

Web Proxy ,[object Object],[object Object],[object Object],[object Object]

Whole Hog ,[object Object],[object Object],[object Object],[object Object]

Issues ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Proxy Whole Hog Flash Browser Specific Cookies Concurrency Performance End user reqs / Penetration

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

Why Push? ,[object Object],[object Object],[object Object],[object Object],[object Object]

How Does it Work? Big scary Internet Innocent MySpace user MySpace Evil Empire TM

Polling ,[object Object],[object Object],[object Object],[object Object],[object Object]

http://www.flickr.com/photos/roadhunter/68017710/

How Does it Work? Big scary Internet Innocent MySpace user MySpace Evil Empire TM thumb twiddling …

Push ,[object Object],[object Object],[object Object],[object Object]

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

Asynchronous Servlets ,[object Object],[object Object],[object Object],[object Object],[object Object]

Cometd / Bayeux ,[object Object],[object Object],[object Object]

Piggyback ,[object Object],[object Object]

Other Approaches to Push ,[object Object],[object Object]

Issues ,[object Object],[object Object]

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

Ask questions first, optimize second

What is the Bottleneck? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Data Formats ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Server ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Bandwidth ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

http://www.jamesward.org/census/ Firefox Internet Explorer

XSLT Cross Browser Performance

Don’t Lose your Keys ,[object Object],[object Object]

JSON with Padding (JSONP) ,[object Object],[object Object],[object Object],[object Object],[object Object]

The Fast, Server Dependent Way ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Slow, Server Agnostic Way ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML DOM ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Most Wanted ,[object Object],[object Object],[object Object],[object Object]

Watch Out for Memory Leaks ,[object Object],[object Object],<script type=“text/javascript”> var domNode = $(“myDomNode”); domNode .foo = domNode ; </script> expando

JavaScript Compression ,[object Object],[object Object],[object Object],[object Object]

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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Compression ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Apache Compression ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

How Small is It? Size (Kb) Original 9.3 Minify 3.9 GZip / Deflate 2.8 Minify + GZip / Deflate 1.3 Size Reduction 86% Expected Results for JavaScript Compression

Content Merging ,[object Object],[object Object],[object Object],[object Object],[object Object]

Image Merging ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],clip: rect(0px 135px 125px 0px); clip: rect(0px 270px 125px 135px); background: url(images/nitobi.jpg);

Summary ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Q&A ,[object Object],[object Object],[object Object],[object Object]

Ajax to the Moon

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Ajax to the Moon

Similaire à Ajax to the Moon (20)

Dernier

Dernier (20)

Ajax to the Moon

Notes de l'éditeur