Cross Domain Web Mashups with JQuery and Google App Engine

Cross Domain Web
Mashups with JQuery
and Google App Engine

Andy McKay. Clearwind Consulting
http://clearwind.ca

Also known as
A bunch of cool buzz words to try and describe
some of the stuff I’m doing these days
and get me in to talk at cool conferences

Cross Domain
JQuery
App Engine

mashup
“a web page or application that combines data
from two or more external online sources”

that aren't SOAP and WSDL

quot;The three chief virtues of a programmer are: Laziness,
Impatience and Hubris”. Larry Wall

rewriting things constantly
is good for billable hours

small web applications
returning xml

Ajax

browser: rails.site.ca

server: another.ca

browser: django.site.ca

browser: clearwind.ca server: some.other.ca

The same origin policy prevents document or script loaded from one origin from getting
or setting properties of a document from a different origin.
-- From http://www.mozilla.org/projects/security/components/same-origin.html

1. proxy

browser: clearwind.ca server: clearwind.ca server: some.other.ca

2. hacks

ﬂash
iframe
document
script

3. JSONP

JavaScript Object Notation
with Padding

Example: json-time
By Simon Willison
http://json-time.appspot.com/
http://github.com/simonw/json-time/tree/master

JSON
{
quot;tzquot;: quot;America/Chicagoquot;,
quot;hourquot;: 3,
quot;datetimequot;: quot;Tue, 19 May 2009 03:06:50 -0500quot;,
quot;secondquot;: 50,
quot;errorquot;: false,
quot;minutequot;: 6
}

JSONP

process_time({
quot;tzquot;: quot;America/Chicagoquot;,
quot;hourquot;: 3,
quot;datetimequot;: quot;Tue, 19 May 2009 03:09:09 -0500quot;,
quot;secondquot;: 9,
quot;errorquot;: false,
quot;minutequot;: 9
})

JQuery for json-time

var url = quot;http://json-time.appspot.com/timezones.json?quot;

$.getJSON(url + quot;callback=?quot;,
function (json) {
...
});

Complete JSON time demo
$(document).ready(function() {
var url = quot;http://json-time.appspot.comquot;;

function showTime(data) {
$.getJSON(url + quot;/time.json?tz=quot; + $(quot;#zonesquot;).val() + '&callback=?',
function (json){
$(quot;#zones-msgquot;).text('The time is now ' + json[quot;datetimequot;] + '.');
});
};

$.getJSON(url + quot;/timezones.json?callback=?quot;,
function (json) {
var zones = $(quot;#zonesquot;);
for (var k = 0; k < json.length; k++) {
zones.append(quot;<option>quot; + json[k] + quot;</option>quot;);
};
zones.bind(quot;changequot;, showTime)
});
});

Easiest deployment
Best scalability
Minimal effort

Not straight Python
Has it's limitations and quirks

Example Mashup
The coolest technology of 2006
Google Maps
The most hyped technology of 2009
Twitter

Twitter messages with a map
by hash tag eg: #owv2009

Step 1:
Assign hash tag to location

geohashtag.appspot.com

browser: geohashtag.appspot.com server: geohashtag.appspot.com

Model

from google.appengine.ext import db

class Tag(db.Model):
name = db.StringProperty(required=True)
geostring = db.StringProperty(required=True)

Issue
You cannot do an inequality test on two ﬁelds in one query.
Or use GeoPt.

GeoHash solves this problem:
http://en.wikipedia.org/wiki/Geohash

JSON

tag.json (returns location for a tag)
bounds.json (returns all the tags in a rectangle)

atomtojsonp.appspot.com

browser: atomtojsonp.appspot.com server: search.twitter.com
server: atomtojsonp.appspot.com

Proxy?
Because twitter doesn't have JSON export
Other services like Google RSS or Yahoo YQL have
problems

But checkout: http://developer.yahoo.com/yql/
and http://code.google.com/apis/ajaxfeeds/

No Model

Quite common for
App Engine

Just feedparser
http://www.feedparser.org/

class JSONHandler(webapp.RequestHandler):
def get(self):
url = self.request.get(quot;urlquot;)
data = feedparser.parse(url)
if self.request.get(quot;callbackquot;):
data = quot;%s(%s)quot; % (self.request.get(quot;callbackquot;), data)
self.response.out.write(data)

JSON

twitter.json (smaller twitter version for a search term)
atom.json (a whole atom ﬁle for a url)

geojsontweet.appspot.com

browser: geojsontweet.appspot.com server: maps.google.com

browser: geojsontweet.appspot.com



browser: geojsontweet.appspot.com server: geohashtag.appspot.com

browser: geojsontweet.appspot.com



browser: geojsontweet.appspot.com server: geohashtag.appspot.com

browser: geojsontweet.appspot.com server: search.twitter.com
server: atomtojsonp.appspot.com

No Model
In fact, completely static HTML
(with JS, no server side code)

Some Javascript
function move() {
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();

var url = map_details.tags_domain + '/bounds.json?nelat=';
url += ne.lat() + '&nelon=' + ne.lng();
url += '&swlon=' + sw.lng() + '&swlat=' + sw.lat() + '&callback=?'

if (map_details.last_url != url) {
map_details.last_url = url
$.getJSON(url,
function(json) {
if (json) {
...

Some more Javascript

function twitter() {
var tag = null;
for (var obj in tags) {
var url = map_details.atom_domain + '/twitter.json?tag=' + obj +
'&callback=?'
$.getJSON(url,
function(json) {
var tweet = null;
....

Slideshow
http://ﬂowplayer.org/tools/scrollable.html

$(quot;#tweets-quot; + tweet[quot;tagquot;]).parent().scrollable({
interval: 4000,
loop: true,
speed: 600,
onBeforeSeek: function() {
this.getItems().fadeTo(300, 0.2);
},
onSeek: function() {
this.getItems().fadeTo(300, 1);
}
});

Trust
You are executing someone else's JavaScript
in your site. Better be trustworthy.

Cross Domain Web Mashups with JQuery and Google App Engine

Questions?
Code: http://svn.clearwind.ca/public/projects/presentations
Email: andy@clearwind.ca

Cross Domain Web Mashups with JQuery and Google App Engine

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Cross Domain Web Mashups with JQuery and Google App Engine

Similar to Cross Domain Web Mashups with JQuery and Google App Engine (20)

Recently uploaded

Recently uploaded (20)