Google Back to Front
From Gears to App Engine, and beyond

Interesting, passionate, times

We
Believe...
The Web is the platform of today,
and of the future

Act One
The Client

Top Grossing Film of 1957 Top Grossing Film of 2007

“Gimme Offline!”

It takes too long to update the Web

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

Database
Embedded using SQLite
Contributed Full Text Search
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]);

GearsDB
Abstract over the API
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);
person = db.selectRow('person', 'id = 1');
// force
person.name = 'Sally';
db.forceRow('person', person);
person = db.selectRow('person', 'id = 1');
db.deleteRow('person', bob);

GearsORM
Are we going to get a GearsHibernate?
var Person = new GearsOrm.Model(\"Person\", {
firstName: GearsOrm.Fields.String({maxLength:25}),
lastName: GearsOrm.Fields.String({maxLength:25})
});
GearsORM.Transaction(function() { “While developing transaction support for
new Person({name:\"John\"}).save(); GearsORM i had to write a test, in that test it
execute 100 inserts and 100 updates, this test take
new Person({name:\"Doe\"}).save(); 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
Person.select(\"firstName = 'Uriel'\"); 39 times faster!”
Person.count(\"lastName = ?\",[\"Katz\"])

GearShift
DB Migrations for Gears
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;
}
};

Database Tools

Buxfer

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.

The Digg Oracle

Local Server
A mini-web server that groks 200 and 304

ResourceStore
Manually Capturing
var pageFiles = [
location.pathname,
'gears_base.js',
'../scripts/gears_db.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'));
});

ManagedResourceStore
JSON Me
{
// version of the manifest file format
\"betaManifestVersion\": 1,
// version of the set of resources described in this manifest file
\"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 },
]
}

HTML 5
Offline in General
<html application=”manifest-of-urls.txt”>
<html application>
“There’s a concept of an application cache. An application cache is a group
of resources, the group being identified by a URI (which typically happens
to resolve to a manifest). Resources in a cache are either top-level or
not; top-level resources are those that are HTML or XML and when parsed
with scripting disabled have with the value of
the attribute pointing to the same URI as identifies the cache.
When you visit a page you first check to see if you have that page in a
cache as a known top-level page.”

Future
Present
Ab
l
edg eeding
ev
of H ersion
TML
Past 5!
HTML 5 Gears
• Standards • Implementation
• Long term • Battle hardened
• All browsers • A place for innovation
• Cross browser
• No plugin • Plugin

Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
al
enti ck
Pot lene
t
Bot
JavaScript Web Browsing
Browser

1
Browser
User Interface Message Passing
2 3
WorkerPool WorkerPool

Worker Pool Code
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()');

JavaScript Read Write APIs

Desktop
Shortcuts
var desktop = google.gears.factory.create('beta.desktop');
desktop.createShortcut(\"Test Application\",
\"An application at http://www.test.com/index.html\",
\"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\"});

Notification API
Growl 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',
});

Location API
Even on a laptop?
// 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();

Audio API
Play and Record
// play
var audio = google.gears.factory.create('beta.audio');
audio.src = 'http://blahblahblob.com/sampleaudio.wav';
audio.load();
audio.play();
// record
var recorder = google.gears.factory.create('beta.audiorecorder');
recorder.destination = <http post url>
recorder.autoStream = true;
recorder.record(); //asynchronous call

File System API
Blob API
Resumable HTTP
Don’t you want a better File Upload?

Gears: Open Source Update
Mechanism for the Web

Don't forget, RIA's have rich
internet back-ends (RIBs?)
Jonathan Schwartz
CEO, Sun Microsystems

Act Two
The Server

Google App Engine
Running Web Apps on Google’s Infrastructure
• Fully-integrated
application environment
• Language agnostic runtime
Python for now
• Free quota of 5M
pageviews per month
code.google.com/appengine

Google App Engine
Challenges

Google App Engine
Easy to use, Easy to scale, Free to start

Develop locally. Deploy to Google. Launch.

Develop locally. Deploy to Google. Launch.
Deploy

Develop locally. Deploy to Google. Launch.

Develop locally.
• Google App Engine SDK is open source
• Simulates production environment
•dev_appserver.py myapp
•appcfg.py update myapp

Hello World
Simplest output, simplest config
# helloworld.py
print \"Content-Type: text/html\"
print
print \"Hello, world!\"
# app.yaml
application: dalmaer-helloworld
version: 1
runtime: python
api_version: 1
handlers:
- url: /.*
script: helloworld.py

loadcontacts
var contacts = [
{ id: 1, name: ‘Dion Almaer’, ... },
{ id: 2, name: ‘Ben Galbraith’, ... },
savecontact ]
name=’Dion A Lamer’
email=’dion@almaer.com’
Web Services

threads
sockets
files
foreground
the snake is almost there

from django import v0_96 as django

Store data
Scalable, and not like a RDBMS
Wow, that's a
big table!

Data Model
Just an object
from google.appengine.ext import db
class Story(db.Model):
title = db.StringProperty()
body = db.TextProperty(required=True)
author = db.UserProperty(required=True)
created = db.DateTimeProperty(auto_now_add=True)
rating = db.RatingProperty()
# Many other types: BlobProperty, ReferenceProperty, EmailProperty, PhoneProperty, IMProperty,
PostallAddressProperty, etc.

GQL
Our query language
SELECT *
FROM Story
WHERE title = 'App Engine Launch'
AND author = :current_user
AND rating >= 10
ORDER BY rating, created DESC

Run the queries
Beyond GQL
Story.gql(GQL_FROM_BEFORE,
current_user = users.get_current_user())
query = Story.all()
query.filter('title =', 'Foo')
.order('-date')
.ancestor(key)

Inserts
Manipulating the data
story = Story(
title = 'Morning Glory',
body = '....',
author = users.get_current_user(),
)
story.put() # save or update
story.delete() # delete if saved

Call Web Services

URL Fetch API
Aint no urllib2
from google.appengine.api import urlfetch
some_feed = urlfetch.fetch('http://somesite.com/rss')
if some_feed.status_code == 200:
self.response.out.write(some_feed.content)
53
421

Authenticate to Google
OpenID provider.... available

Users API
But you can do your own thing too of course...
from google.appengine.api import users
current_user = users.get_current_user()
if not current_user:
self.redirect(users.create_login_url('/
current_url'))
nickname = current_user.nickname()
email = current_user.email()
if users.is_current_user_admin():
...

Send Email

Email API
No SMTP config required
from google.appengine.api import mail
def post(self):
email_body = self.request.get('email_body')
sender = users.get_current_user().email
mail.send_mail(sender=sender,
to='marce@google.com',
subject='Wiki Page',
body=email_body)
self.response.out.write('Email Sent')

Manipulate Images

Image Manipulation API
No SMTP config required
# in model
avatar = db.BlobProperty()
# in handler
avatar = images.resize(self.request.get(\"img\"), 32,
32)
# available
resize
crop
rotate
horizontal_flip
vertical_flip
im_feeling_lucky :)

Memcache Support
In-memory distributed cache

Memcache API
In-memory distributed cache
from google.appengine.api import memcache
def get_data():
data = memcache.get(\"key\")
if data is not None:
return data
else:
data = self.query_for_data()
memcache.add(\"key\", data, 60)
return data
# Set several values, overwriting any existing values for these keys.
memcache.set_multi({ \"USA_98105\": \"raining\",
\"USA_94105\": \"foggy\",
\"USA_94043\": \"sunny\" },
key_prefix=\"weather_\", time=3600)
# Atomically increment an integer value.
memcache.set(key=\"counter\", 0)
memcache.incr(\"counter\")
memcache.incr(\"counter\")
memcache.incr(\"counter\")

Google App Engine
Areas of Work, Including…
• Offline Processing
• Rich Media Support
– e.g., large file upload / download
• Add’l Infrastructure Services
• What would you like to see?
74

Use it as you will
No need to go whole hog

Your Application
Web Services

Python
Runtime
Web
Configuration
Applications
Static Files URL Fetch API
Google App
Engine
Email API Users API
Memcache API Image API

Act Three
And there’s more

What if popular JavaScript libraries
were available and shared in the browser?
1 Now hosting open source JavaScript libraries at Google
Starting with: Prototype, Script.aculo.us, jQuery, Dojo, Mootools
Accepting requests for other open source libraries
Can access directly:
ajax.googleapis.com/ajax/lib/prototype?v=1.6.0.2&packed=false
Can access via AJAX API Loader:
google.load(“prototype”, “1.6”);
2 Other features
Automatic compression
Minification of libraries
Not tied to Google Code