Talk on Gears at Six Apart

Gears: Teaching the Web New

Tricks

Brad Neubergcode.google.com

1Friday, April 11, 2008

Honored to be here2Friday, April 11, 2008

3Friday, April 11, 2008

TrackBack

4Friday, April 11, 2008

Memcached

5Friday, April 11, 2008

Atom

6Friday, April 11, 2008

Social Networking and Tagging

7Friday, April 11, 2008

Perlbal and Gearman

8Friday, April 11, 2008

9Friday, April 11, 2008

10Friday, April 11, 2008

11Friday, April 11, 2008

Who is this chump?12Friday, April 11, 2008

The Web is the platform of today, and of the future

13Friday, April 11, 2008

It takes too long to update the Web14Friday, April 11, 2008

15Friday, April 11, 2008

New Web Browsers

15Friday, April 11, 2008

New Web Browsers

Upgrade Existing Browsers

15Friday, April 11, 2008

“Insanity:

Doing the same thing over and over again and

expecting different results.”

16Friday, April 11, 2008

17Friday, April 11, 2008

Open Source Update Mechanism for the Web

18Friday, April 11, 2008

Augment Existing Browsers19Friday, April 11, 2008

HTML

CSS

JavaScript

Ajax++20Friday, April 11, 2008

HTML

CSS

JavaScriptDatabase

Ajax++20Friday, April 11, 2008

HTML

CSS

JavaScriptDatabase

Ajax++

Client-Side Search

20Friday, April 11, 2008

HTML

CSS

JavaScriptDatabase

Worker Pool

Ajax++

Client-Side Search

20Friday, April 11, 2008

HTML

CSS

JavaScriptDatabase

Worker Pool

X-Domain Mashups

Ajax++

Client-Side Search

20Friday, April 11, 2008

HTML

CSS

JavaScriptDatabase

Worker Pool

X-Domain Mashups

Desktop API

Ajax++

Client-Side Search

20Friday, April 11, 2008

HTML

CSS

JavaScriptDatabase

Local ServerWorker Pool

X-Domain Mashups

Desktop API

Ajax++

Client-Side Search

20Friday, April 11, 2008

Possible Future Gears21Friday, April 11, 2008

Crypto

Possible Future Gears21Friday, April 11, 2008

Crypto

Location

Possible Future Gears21Friday, April 11, 2008

Crypto

Location

Notifications

Possible Future Gears21Friday, April 11, 2008

Crypto

Location

Notifications

Binary Blobs

Possible Future Gears21Friday, April 11, 2008

Crypto

Location

Notifications

Binary Blobs

Resumable HTTP

Possible Future Gears21Friday, April 11, 2008

Crypto

Location

Notifications

Binary Blobs

Resumable HTTP

Possible Future Gears

HTML 5 Support

21Friday, April 11, 2008

Crypto

Location

Notifications

Binary Blobs

Resumable HTTP

Possible Future Gears

HTML 5 Support

2D/3D

21Friday, April 11, 2008

Database22Friday, April 11, 2008

Database

• Local SQL storage

• SQLite: Open source, mature, small (343K), fast

• Full-featured relational database

• Gigabytes of storage capacity

• Strict same-origin security model

23Friday, April 11, 2008

Database Code

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('create table if not exists Test' +

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('create table if not exists Test' + ' (Phrase text, Timestamp int)');

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('create table if not exists Test' + ' (Phrase text, Timestamp int)');db.execute('insert into Test values (?, ?)', ['Monkey!',

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('create table if not exists Test' + ' (Phrase text, Timestamp int)');db.execute('insert into Test values (?, ?)', ['Monkey!',

new Date().getTime()]);

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('create table if not exists Test' + ' (Phrase text, Timestamp int)');db.execute('insert into Test values (?, ?)', ['Monkey!',

new Date().getTime()]);

var rs = db.execute('select * from Test order by Timestamp desc');

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('create table if not exists Test' + ' (Phrase text, Timestamp int)');db.execute('insert into Test values (?, ?)', ['Monkey!',

new Date().getTime()]);

var rs = db.execute('select * from Test order by Timestamp desc');

while (rs.isValidRow()) {

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('create table if not exists Test' + ' (Phrase text, Timestamp int)');db.execute('insert into Test values (?, ?)', ['Monkey!',

new Date().getTime()]);

var rs = db.execute('select * from Test order by Timestamp desc');

while (rs.isValidRow()) { alert(rs.field(0) + '@' + rs.field(1));

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('create table if not exists Test' + ' (Phrase text, Timestamp int)');db.execute('insert into Test values (?, ?)', ['Monkey!',

new Date().getTime()]);

var rs = db.execute('select * from Test order by Timestamp desc');

while (rs.isValidRow()) { alert(rs.field(0) + '@' + rs.field(1)); rs.next();

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('create table if not exists Test' + ' (Phrase text, Timestamp int)');db.execute('insert into Test values (?, ?)', ['Monkey!',

new Date().getTime()]);

var rs = db.execute('select * from Test order by Timestamp desc');

while (rs.isValidRow()) { alert(rs.field(0) + '@' + rs.field(1)); rs.next();}

24Friday, April 11, 2008

Database Codevar db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('create table if not exists Test' + ' (Phrase text, Timestamp int)');db.execute('insert into Test values (?, ?)', ['Monkey!',

new Date().getTime()]);

var rs = db.execute('select * from Test order by Timestamp desc');

while (rs.isValidRow()) { alert(rs.field(0) + '@' + rs.field(1)); rs.next();}

rs.close();

24Friday, April 11, 2008

Database

• Demo

• View Database

25Friday, April 11, 2008

Local Server26Friday, April 11, 2008

Local Server

• Run web applications offline

• Capture UI: HTML, JavaScript, CSS

• Serves locally even when connected

27Friday, April 11, 2008

Local Server

• ResourceStore

• Capture individual URLs

• ManagedResourceStore

• Capture manifest of resources

28Friday, April 11, 2008

Local Server Code

29Friday, April 11, 2008

Local Server Codevar localServer = google.gears.factory.create

29Friday, April 11, 2008

Local Server Codevar localServer = google.gears.factory.create

('beta.localserver');

29Friday, April 11, 2008

Local Server Codevar localServer = google.gears.factory.create

('beta.localserver');

var store = localServer.createManagedStore('test-store');

29Friday, April 11, 2008

Local Server Codevar localServer = google.gears.factory.create

('beta.localserver');

var store = localServer.createManagedStore('test-store');

store.manifestUrl = 'site-manifest.txt';

29Friday, April 11, 2008

Local Server Codevar localServer = google.gears.factory.create

('beta.localserver');

var store = localServer.createManagedStore('test-store');

store.manifestUrl = 'site-manifest.txt';store.checkForUpdate();

29Friday, April 11, 2008

Local Server Code// site-manifest.txt{ "betaManifestVersion": 1, "version": "site_version_string", "entries": [ { "url": "site.html" }, { "url": "gears_init.js" } ]}

30Friday, April 11, 2008

• Demo

Local Server

31Friday, April 11, 2008

Worker Pool32Friday, April 11, 2008

Worker PoolJavaScript needs threads after all? Brendan!

Browser JavaScript Engine

WorkerPool

WorkerPool

window, document no access

33Friday, April 11, 2008

Worker Pool Code

34Friday, April 11, 2008

Worker Pool Codevar pool = google.gears.factory.create('beta.workerpool');

34Friday, April 11, 2008

Worker Pool Codevar pool = google.gears.factory.create('beta.workerpool');

pool.onmessage = function(message) {

34Friday, April 11, 2008

Worker Pool Codevar pool = google.gears.factory.create('beta.workerpool');

pool.onmessage = function(message) { alert('next prime is: ' + message);

34Friday, April 11, 2008

Worker Pool Codevar pool = google.gears.factory.create('beta.workerpool');

pool.onmessage = function(message) { alert('next prime is: ' + message);}

34Friday, April 11, 2008

Worker Pool Codevar pool = google.gears.factory.create('beta.workerpool');

pool.onmessage = function(message) { alert('next prime is: ' + message);}

function nextPrime(n) {

34Friday, April 11, 2008

Worker Pool Codevar pool = google.gears.factory.create('beta.workerpool');

pool.onmessage = function(message) { alert('next prime is: ' + message);}

function nextPrime(n) { // TODO: Prime-finding algorithm goes here.

34Friday, April 11, 2008

Worker Pool Codevar pool = google.gears.factory.create('beta.workerpool');

pool.onmessage = function(message) { alert('next prime is: ' + message);}

function nextPrime(n) { // TODO: Prime-finding algorithm goes here. google.gears.workerPool.sendMessage(result);

34Friday, April 11, 2008

Worker Pool Codevar pool = google.gears.factory.create('beta.workerpool');

pool.onmessage = function(message) { alert('next prime is: ' + message);}

function nextPrime(n) { // TODO: Prime-finding algorithm goes here. google.gears.workerPool.sendMessage(result);}

34Friday, April 11, 2008

Worker Pool Codevar pool = google.gears.factory.create('beta.workerpool');

pool.onmessage = function(message) { alert('next prime is: ' + message);}

function nextPrime(n) { // TODO: Prime-finding algorithm goes here. google.gears.workerPool.sendMessage(result);}

var runMe = String(nextPrime) + '; nextPrime()';

34Friday, April 11, 2008

Worker Pool Codevar pool = google.gears.factory.create('beta.workerpool');

pool.onmessage = function(message) { alert('next prime is: ' + message);}

function nextPrime(n) { // TODO: Prime-finding algorithm goes here. google.gears.workerPool.sendMessage(result);}

var runMe = String(nextPrime) + '; nextPrime()';

var worker = pool.createWorker(runMe);

34Friday, April 11, 2008

• Demo

Worker Pool

35Friday, April 11, 2008

Desktop API36Friday, April 11, 2008

DesktopShortcuts

var desktop = google.gears.factory.create('beta.desktop');desktop.createShortcut("Test Application", "http://www.test.com/index.html", {"16x16": "http://www.test.com/icon16x16.png", "32x32": "http://www.test.com/icon32x32.png", "48x48": "http://www.test.com/icon48x48.png", "128x128": "http://www.test.com/icon128x128.png"});

37Friday, April 11, 2008

Cross Domain Workers38Friday, April 11, 2008

Cross Domain Web Services

• Future of web is mashups

• Calling services (and embedding components) from across the web

• Currently insecure (cookie issues, XSS attacks, etc.)

• Third party services can hijack page

• Hard, buggy, and slow

39Friday, April 11, 2008

Cross Domain Workers

• Web-sites can expose APIs callable by third-parties

• Works by messaging between sites

• Gears mediates communication inside the browser

• No cookies are sent

40Friday, April 11, 2008

41Friday, April 11, 2008

42Friday, April 11, 2008

Full-Text Search43Friday, April 11, 2008

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.

44Friday, April 11, 2008

The Digg Oracle45Friday, April 11, 2008

blog.gears46Friday, April 11, 2008

Gears is more than offline...47Friday, April 11, 2008

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!

48Friday, April 11, 2008

What does offline mean?

49Friday, April 11, 2008

What is the philosophy?

• One application, one URL

• Seamless transitions between online and offline

• Ability to use local data, even when online

• Available to all users on all platforms

• ... and a pony

50Friday, April 11, 2008

What is the philosophy?Do for offline what XMLHttpRequest did for web apps

Open Web

XMLHttpRequest

Ajax LibrariesDojo, jQuery, Prototype, GWT

Open Web

Gears

Gears LibrariesDojo Offline, GWT

51Friday, April 11, 2008

Syncing

52Friday, April 11, 2008

Dojo StorageDojo Offline

GWT

Toolkit Support

53Friday, April 11, 2008

PubTools

• Super easy way to take static content offline in 5 minutes

• Just link in a JavaScript library and add a little bit of HTML to page

• Example

• Get the bookmarklet

54Friday, April 11, 2008

Location API

55Friday, April 11, 2008

Google Gears for Mobile

56Friday, April 11, 2008

57Friday, April 11, 2008

Don’t you want a better File Upload?

58Friday, April 11, 2008

Would you like a better CSS?59Friday, April 11, 2008

Questions?• Google Gears is an open source plugin that aims to

push the Web forward• The components are simple to use• You need to think about your architecture

• http://code.google.com/apis/gears/• http://gears.google.com/

• Thanks for your time!60Friday, April 11, 2008