Talk on Gears at Six Apart
102
Gears: Teaching the Web New Tricks Brad Neuberg code.google.com 1 Friday, April 11, 2008
-
Upload
bradneuberg -
Category
Business
-
view
972 -
download
0
description
Gears is an open source plugin that upgrades the web with new features, including a local database, JavaScript threads, offline, secure x-domain mashups, and more. Brad Neuberg, a member of the Gears team, spoke at Six Apart's hackathon on Gears.
Transcript of 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
