Talk on Gears at Six Apart

Slide 1: Gears: Teaching the Web New Tricks Brad Neuberg code.google.com Friday, April 11, 2008 1

Slide 2: Honored to be here Friday, April 11, 2008 2

Slide 3: Friday, April 11, 2008 3

Slide 4: TrackBack Friday, April 11, 2008 4

Slide 5: Memcached Friday, April 11, 2008 5

Slide 6: Atom Friday, April 11, 2008 6

Slide 7: Social Networking and Tagging Friday, April 11, 2008 7

Slide 8: Perlbal and Gearman Friday, April 11, 2008 8

Slide 9: Friday, April 11, 2008 9

Slide 10: Friday, April 11, 2008 10

Slide 11: Friday, April 11, 2008 11

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

Slide 13: The Web is the platform of today, and of the future Friday, April 11, 2008 13

Slide 14: It takes too long to update the Web Friday, April 11, 2008 14

Slide 15: Friday, April 11, 2008 15

Slide 16: New Web Browsers Friday, April 11, 2008 15

Slide 17: New Web Browsers Upgrade Existing Browsers Friday, April 11, 2008 15

Slide 18: “Insanity: Doing the same thing over and over again and expecting different results.” Friday, April 11, 2008 16

Slide 19: Friday, April 11, 2008 17

Slide 20: Open Source Update Mechanism for the Web Friday, April 11, 2008 18

Slide 21: Augment Existing Browsers Friday, April 11, 2008 19

Slide 22: JavaScript CSS HTML Ajax++ Friday, April 11, 2008 20

Slide 23: JavaScript Database CSS HTML Ajax++ Friday, April 11, 2008 20

Slide 24: JavaScript Database CSS Client-Side Search HTML Ajax++ Friday, April 11, 2008 20

Slide 25: JavaScript Database CSS Client-Side Search HTML Worker Pool Ajax++ Friday, April 11, 2008 20

Slide 26: JavaScript Database X-Domain Mashups CSS Client-Side Search HTML Worker Pool Ajax++ Friday, April 11, 2008 20

Slide 27: JavaScript Database X-Domain Mashups CSS Client-Side Search Desktop API HTML Worker Pool Ajax++ Friday, April 11, 2008 20

Slide 28: JavaScript Database X-Domain Mashups CSS Client-Side Search Desktop API HTML Worker Pool Local Server Ajax++ Friday, April 11, 2008 20

Slide 29: Possible Future Gears Friday, April 11, 2008 21

Slide 30: Crypto Possible Future Gears Friday, April 11, 2008 21

Slide 31: Crypto Location Possible Future Gears Friday, April 11, 2008 21

Slide 32: Crypto Location Notifications Possible Future Gears Friday, April 11, 2008 21

Slide 33: Crypto Binary Blobs Location Notifications Possible Future Gears Friday, April 11, 2008 21

Slide 34: Crypto Binary Blobs Location Resumable HTTP Notifications Possible Future Gears Friday, April 11, 2008 21

Slide 35: Crypto Binary Blobs Location Resumable HTTP Notifications HTML 5 Support Possible Future Gears Friday, April 11, 2008 21

Slide 36: Crypto Binary Blobs 2D/3D Location Resumable HTTP Notifications HTML 5 Support Possible Future Gears Friday, April 11, 2008 21

Slide 37: Database Friday, April 11, 2008 22

Slide 38: Database • Local SQL storage • SQLite: Open source, mature, small (343K), fast • Full-featured relational database • Gigabytes of storage capacity • Strict same-origin security model Friday, April 11, 2008 23

Slide 39: Database Code Friday, April 11, 2008 24

Slide 40: Database Code var db = google.gears.factory.create('beta.database'); Friday, April 11, 2008 24

Slide 41: Database Code var db = google.gears.factory.create('beta.database'); db.open('database-test'); Friday, April 11, 2008 24

Slide 42: Database Code var db = google.gears.factory.create('beta.database'); db.open('database-test'); db.execute('create table if not exists Test' + Friday, April 11, 2008 24

Slide 43: Database Code var db = google.gears.factory.create('beta.database'); db.open('database-test'); db.execute('create table if not exists Test' + ' (Phrase text, Timestamp int)'); Friday, April 11, 2008 24

Slide 44: Database Code var 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!', Friday, April 11, 2008 24

Slide 45: Database Code var 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()]); Friday, April 11, 2008 24

Slide 46: Database Code var 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'); Friday, April 11, 2008 24

Slide 47: Database Code var 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()) { Friday, April 11, 2008 24

Slide 48: Database Code var 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)); Friday, April 11, 2008 24

Slide 49: Database Code var 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(); Friday, April 11, 2008 24

Slide 50: Database Code var 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(); } Friday, April 11, 2008 24

Slide 51: Database Code var 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(); Friday, April 11, 2008 24

Slide 52: Database • Demo • View Database Friday, April 11, 2008 25

Slide 53: Local Server Friday, April 11, 2008 26

Slide 54: Local Server • Run web applications offline • Capture UI: HTML, JavaScript, CSS • Serves locally even when connected Friday, April 11, 2008 27

Slide 55: Local Server • ResourceStore • Capture individual URLs • ManagedResourceStore • Capture manifest of resources Friday, April 11, 2008 28

Slide 56: Local Server Code Friday, April 11, 2008 29

Slide 57: Local Server Code var localServer = google.gears.factory.create Friday, April 11, 2008 29

Slide 58: Local Server Code var localServer = google.gears.factory.create ('beta.localserver'); Friday, April 11, 2008 29

Slide 59: Local Server Code var localServer = google.gears.factory.create ('beta.localserver'); var store = localServer.createManagedStore('test-store'); Friday, April 11, 2008 29

Slide 60: Local Server Code var localServer = google.gears.factory.create ('beta.localserver'); var store = localServer.createManagedStore('test-store'); store.manifestUrl = 'site-manifest.txt'; Friday, April 11, 2008 29

Slide 61: Local Server Code var localServer = google.gears.factory.create ('beta.localserver'); var store = localServer.createManagedStore('test-store'); store.manifestUrl = 'site-manifest.txt'; store.checkForUpdate(); Friday, April 11, 2008 29

Slide 62: Local Server Code // site-manifest.txt { "betaManifestVersion": 1, "version": "site_version_string", "entries": [ { "url": "site.html" }, { "url": "gears_init.js" } ] } Friday, April 11, 2008 30

Slide 63: Local Server • Demo Friday, April 11, 2008 31

Slide 64: Worker Pool Friday, April 11, 2008 32

Slide 65: Worker Pool JavaScript needs threads after all? Brendan! WorkerPool Browser JavaScript Engine WorkerPool window, document no access Friday, April 11, 2008 33

Slide 66: Worker Pool Code Friday, April 11, 2008 34

Slide 67: Worker Pool Code var pool = google.gears.factory.create('beta.workerpool'); Friday, April 11, 2008 34

Slide 68: Worker Pool Code var pool = google.gears.factory.create('beta.workerpool'); pool.onmessage = function(message) { Friday, April 11, 2008 34

Slide 69: Worker Pool Code var pool = google.gears.factory.create('beta.workerpool'); pool.onmessage = function(message) { alert('next prime is: ' + message); Friday, April 11, 2008 34

Slide 70: Worker Pool Code var pool = google.gears.factory.create('beta.workerpool'); pool.onmessage = function(message) { alert('next prime is: ' + message); } Friday, April 11, 2008 34

Slide 71: Worker Pool Code var pool = google.gears.factory.create('beta.workerpool'); pool.onmessage = function(message) { alert('next prime is: ' + message); } function nextPrime(n) { Friday, April 11, 2008 34

Slide 72: Worker Pool Code var 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. Friday, April 11, 2008 34

Slide 73: Worker Pool Code var 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); Friday, April 11, 2008 34

Slide 74: Worker Pool Code var 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); } Friday, April 11, 2008 34

Slide 75: Worker Pool Code var 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()'; Friday, April 11, 2008 34

Slide 76: Worker Pool Code var 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); Friday, April 11, 2008 34

Slide 77: Worker Pool • Demo Friday, April 11, 2008 35

Slide 78: Desktop API Friday, April 11, 2008 36

Slide 79: Desktop Shortcuts 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"}); Friday, April 11, 2008 37

Slide 80: Cross Domain Workers Friday, April 11, 2008 38

Slide 81: 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 Friday, April 11, 2008 39

Slide 82: 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 Friday, April 11, 2008 40

Slide 83: Friday, April 11, 2008 41

Slide 84: Friday, April 11, 2008 42

Slide 85: Full-Text Search Friday, April 11, 2008 43

Slide 86: Full Text Search • Gears added FTS2 to SQLite • Create the database db.execute('CREATE VIRTUAL TABLE recipe USING fts2(dish, ingredients)'); • Search the database db.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. Friday, April 11, 2008 44

Slide 87: The Digg Oracle Friday, April 11, 2008 45

Slide 88: blog.gears Friday, April 11, 2008 46

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

Slide 90: 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! Friday, April 11, 2008 48

Slide 91: What does offline mean? Friday, April 11, 2008 49

Slide 92: 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 Friday, April 11, 2008 50

Slide 93: What is the philosophy? Do for offline what XMLHttpRequest did for web apps Ajax Libraries Gears Libraries Dojo, jQuery, Prototype, GWT Dojo Offline, GWT XMLHttpRequest Gears Open Web Open Web Friday, April 11, 2008 51

Slide 94: Syncing Friday, April 11, 2008 52

Slide 95: Dojo Storage Dojo Offline GWT Toolkit Support Friday, April 11, 2008 53

Slide 96: 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 Friday, April 11, 2008 54

Slide 97: Location API Friday, April 11, 2008 55

Slide 98: Google Gears for Mobile Friday, April 11, 2008 56

Slide 99: Friday, April 11, 2008 57

Slide 100: Don’t you want a better File Upload? Friday, April 11, 2008 58

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

Slide 102: 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! Friday, April 11, 2008 60