gears and html 5 @media ajax london 2008
DESCRIPTION
I had the pleasure of talking at @media Ajax London in Westminster on Sept 15th 2008. I talked about the history of Gears and how it is converging with HTML 5 to give developers options.TRANSCRIPT
![Page 1: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/1.jpg)
Gears and HTML 5Empowering your Web applications
![Page 2: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/2.jpg)
![Page 3: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/3.jpg)
![Page 4: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/4.jpg)
Great to be home
![Page 5: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/5.jpg)
![Page 6: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/6.jpg)
Interesting, passionate, times
![Page 7: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/7.jpg)
![Page 8: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/8.jpg)
The Web is the platform of today, and of the future
WeBelieve...
![Page 9: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/9.jpg)
![Page 10: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/10.jpg)
The Past
![Page 11: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/11.jpg)
The Past Not actually that long ago
![Page 12: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/12.jpg)
What does offline mean?
![Page 13: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/13.jpg)
Why?“How often are you on a plane?”
• Reliability• 1% of downtime can hurt at the wrong time
• Performance• Local acceleration
• Convenience• Not having to find a connection
• You are offline more than you think!
![Page 14: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/14.jpg)
It takes too long to update the Web
We believe...
![Page 15: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/15.jpg)
Offline Web via Open Web
• Why just solve this problem for Google?• Why not solve it for others?
• Solution: Make it open source with a liberal license• New BSD
![Page 16: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/16.jpg)
Platforms
![Page 17: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/17.jpg)
The Gears Philosophy
One application, one URL
Transition
![Page 18: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/18.jpg)
Useful when connected
![Page 19: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/19.jpg)
What is the philosophy?
Open Web
XMLHttpRequest
Ajax LibrariesDojo, jQuery, Prototype, GWT
Open Web
Gears
Gears LibrariesDojo Offline, GWT
![Page 20: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/20.jpg)
![Page 21: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/21.jpg)
Database
var db = google.gears.factory.create('beta.database', '1.0');
db.open('database-demo');
db.execute('create table if not exists Demo (Phrase varchar(255),
Timestamp int)');
db.execute('insert into Demo values (?, ?)', [phrase, currTime]);
var rs = db.execute('select * from Demo order by Timestamp desc');
while (rs.isValidRow()) {
var name = rs.field(1);
console.log(“Your name is: “ + name);
rs.next();
}
rs.close();
![Page 22: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/22.jpg)
GearsDB
var bob = {id: 3, name: 'Bob', url: 'http://bob.com', description: 'whee'};
db.insertRow('person', bob);
db.insertRow('person', bob, 'name = ?', ['Bob']);
db.selectAll('select * from person', null, function(person) {
document.getElementById('selectAll').innerHTML += ' ' + person.name;
});
var person = db.selectRow('person', 'id = 1');
// update
person.name = 'Harry';
db.updateRow('person', person);
// force
person.name = 'Sally';
db.forceRow('person', person);
db.deleteRow('person', bob);
Abstract over the API
![Page 23: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/23.jpg)
GearsORM
var Person = new GearsOrm.Model("Person", {
firstName: GearsOrm.Fields.String({maxLength:25}),
lastName: GearsOrm.Fields.String({maxLength:25})
});
GearsORM.Transaction(function() {
new Person({name:"John"}).save();
new Person({name:"Doe"}).save();
});
Person.select("firstName = 'Uriel'");
Person.count("lastName = ?",["Katz"])
Abstract over the API
“While developing transaction support for GearsORM i had to write a test, in that test it execute 100 inserts and 100 updates, this test take about 15 seconds for the inserts and about 10 seconds for the updates without
transactions,when using transactions for each set it takes about 377ms for the inserts and
200ms for the updates that is about
39 times faster!”
![Page 24: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/24.jpg)
GearShift
Gearshift.rules[1] = {
// create the demo table
up: function() {
return this.e("CREATE TABLE demo_table (
id INTEGER PRIMARY KEY
AUTOINCREMENT,
name VARCHAR(30),
movie VARCHAR(30)
)").success;
},
down: function() {
return this.e("DROP TABLE demo_table").success;
}
};
DB Migrations
![Page 25: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/25.jpg)
Database Tools
![Page 26: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/26.jpg)
Database ToolsGears In Motion
![Page 27: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/27.jpg)
Buxfer
![Page 28: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/28.jpg)
Full Text Search
• Gears added FTS2 to SQLite
• Create the databasedb.execute('CREATE VIRTUAL TABLE recipe USING fts2(dish, ingredients)');
• Search the databasedb.execute('SELECT dish FROM recipe WHERE recipe MATCH ?', ['tomatoes']);
Fun queries: dish:stew tomatoes Find rows with 'stew' in the dish field, and 'tomatoes' in any field.
![Page 29: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/29.jpg)
The Digg Oracle
![Page 30: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/30.jpg)
![Page 31: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/31.jpg)
Local ServerA mini-web server that groks 200 and 304
![Page 32: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/32.jpg)
ResourceStore
var pageFiles = [ location.pathname, 'gears_base.js','foo.html’ ];
try {
localServer = google.gears.factory.create('beta.localserver', '1.0');
} catch (e) {
alert('Could not create local server: ' + e.message);return;
}
var store = localServer.openStore(this.storeName) ||
localServer.createStore(this.storeName);
store.capture(pageFiles, function(url, success, captureId) {
console.log(url + ' capture ' + (success ? 'succeeded' : 'failed'));
});
Manual capture
![Page 33: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/33.jpg)
ManagedResourceStore
{
"betaManifestVersion": 1, // version of the manifest file format
"version": "my_version_string",
// optional
// If the store specifies a requiredCookie, when a request would hit
// an entry contained in the manifest except the requiredCookie is
// not present, the local server responds with a redirect to this URL.
"redirectUrl": "login.html",
// URLs to be cached (URLs are given relative to the manifest URL)
"entries": [
{ "url": "main.html", "src": "main_offline.html" },
{ "url": ".", "redirect": "main.html" },
{ "url": "main.js" }
{ "url": "formHandler.html", "ignoreQuery": true },
]
}
JSON Me!
![Page 34: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/34.jpg)
![Page 35: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/35.jpg)
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
JavaScript Web Browsing
Potential
Bottleneck
Browser
![Page 36: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/36.jpg)
User Interface
WorkerPool
Browser
1
WorkerPool
2 3
Message Passing
![Page 37: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/37.jpg)
Workerpool API
function nextPrime(n) {
// TODO: New top-secret prime-finding algorithm goes here.
google.gears.workerPool.sendMessage(result);
}
var pool = google.gears.factory.create('beta.workerpool', '1.0');
pool.onmessage = function(message) {
alert('next prime is: ' + message);
}
var worker = pool.createWorker(String(nextPrime) + '; nextPrime
()');
![Page 38: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/38.jpg)
![Page 39: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/39.jpg)
Gears
Local Server
WorkerPool
Database
The Offline Years
![Page 40: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/40.jpg)
Catching up to the present
![Page 41: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/41.jpg)
Geolocation APIEven on a laptop?
![Page 42: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/42.jpg)
Geolocation API
// Getting the object
var location = google.gears.factory.create("beta.location",
"1.0");
// Setting up a callback to handle "location changed" events
location.onlocationstatechanged = function() {
if (this.state == COMPLETE) {
SetStatusText("Location accuracy:", this.accuracy);
MoveMap(this.latitude, this.longitude);
}
}
location.startLocationUpdates();
Even on a laptop?
![Page 43: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/43.jpg)
Desktop API
var desktop = google.gears.factory.create('beta.desktop');desktop.createShortcut("Test Application", "An application at http://test.com/index.html", "http://test.com/index.html", { "16x16": "http://test.com/icon16x16.png", "32x32": "http://test.com/icon32x32.png", "48x48": "http://test.com/icon48x48.png", "128x128": "http://test.com/icon128x128.png"});
Shortcuts and beyond
![Page 44: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/44.jpg)
Don’t you want a better File Upload?
![Page 45: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/45.jpg)
Don’t you want a better File Upload?
File System API
Blob API
Resumable HTTP
![Page 46: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/46.jpg)
![Page 47: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/47.jpg)
Upload Sample
var desktop = google.gears.factory.create('beta.desktop');desktop.openFiles( function(files) { for (var i = 0; i < files.length; i++) { var entry = {filename: files[i].name, uploaded: false, length: files[i].blob.length, blob: files[i].blob, bytesUploaded: 0, geoAddress: self.geoAddress_, uploadRetries: 0}; .... }, { filter: ['video/quicktime', '.wmv', 'video/avi'] } );
Desktop File Reference API
![Page 48: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/48.jpg)
Upload Sample
var req = google.gears.factory.create('beta.httprequest'); var uploadURL = '/upload';req.open('POST', uploadURL); req.setRequestHeader('Content-Disposition', 'attachment; filename="' + fileName + '"');req.setRequestHeader('Content-Type', 'application/octet-stream');req.setRequestHeader('Content-Range', 'bytes ' + byteRange); req.onreadystatechange = function() { // update status messages etc}
Resumable HTTP
![Page 49: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/49.jpg)
Gears
Blob
Resumable HTTP
File System
Local Server
WorkerPool
Desktop
Geolocation
Database
The Offline Years
The “Now”
![Page 50: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/50.jpg)
The Future?
![Page 51: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/51.jpg)
Notification APIGrowl for the Web
var notifier = google.gears.factory.create('beta.notifier', '1.0'); notifier.notify({ application: "My App", title: 'warning', description: 'some text', priority: 2, sticky: 'True', password: 'Really Secure',});
![Page 52: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/52.jpg)
Audio APIPlay and Record
// playvar audio = google.gears.factory.create('beta.audio');audio.src = 'http://blahblahblob.com/sampleaudio.wav';audio.load();audio.play();
// recordvar recorder = google.gears.factory.create('beta.audiorecorder');recorder.destination = <http post url>recorder.autoStream = true;recorder.record(); //asynchronous call
![Page 53: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/53.jpg)
HTML 5 Gears
• Standards• Long term• All browsers• No plugin
• Implementation• Battle hardened• A place for innovation• Cross browser• Plugin
Past
Present
Future
A bleeding edge version of HTML 5!
![Page 54: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/54.jpg)
HTML 5 and Gears
HTML 5 Web WorkersWorkerpool
Gears APIs Standards
Geolocation W3C Geolocation
Database HTML 5 Local Storage
Local Server HTML 5 Offline Store
![Page 55: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/55.jpg)
<video><audio><canvas><time><progress><meter><menu><input type="email | date | min | max | required"... >postMessageDrag and drop
HTML 5 in General
Ian (Hixie) HicksonStandards Editor, Google Employee
![Page 56: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/56.jpg)
Gears
Blob
Resumable HTTP
File System
Local Server
Audio
WorkerPool
Desktop
Geolocation
Database
NotificationA bleeding edge version of HTML 5!
The F
uture
The Offline Years
The “Now”
![Page 57: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/57.jpg)
Now hosting open source JavaScript libraries at Google
Starting with: Prototype, Script.aculo.us, jQuery, Dojo, MootoolsAccepting requests for other open source librariesCan access directly:
1
What if popular JavaScript libraries were available and shared in the browser?
ajax.googleapis.com/ajax/lib/prototype?v=1.6.0.2&packed=false
Other features
Automatic compressionMinification of libraries
2
Can access via AJAX API Loader: google.load(“prototype”, “1.6”);
Not tied to Google Code
![Page 58: Gears and HTML 5 @media Ajax London 2008](https://reader034.vdocument.in/reader034/viewer/2022051610/54835546b479590a0d8b4a0f/html5/thumbnails/58.jpg)