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 t...
Cross Domain
   JQuery
 App Engine
Cross Domain
   JQuery
 App Engine
mashup
“a web page or application that combines data
  from two or more external online sources”
reusable web applications
that aren't SOAP and WSDL

quot;The three chief virtues of a programmer are: Laziness,
         Impatience and Hubris”. La...
back in time...
Zope 2
Plone
 Rails
Django
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
there's a problem
Single origin policy
browser: clearwind.ca                           server: some.other.ca

The same origin policy prevents document or script ...
1. proxy


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

  flash
 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/js...
JSON
{
    quot;tzquot;: quot;America/Chicagoquot;,
    quot;hourquot;: 3,
    quot;datetimequot;: quot;Tue, 19 May 2009 0...
JSONP

process_time({
  quot;tzquot;: quot;America/Chicagoquot;,
  quot;hourquot;: 3,
  quot;datetimequot;: quot;Tue, 19 M...
Cross Domain
   JQuery
 App Engine
JQuery for json-time


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

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

      functi...
Cross Domain
   JQuery
 App Engine
Easiest deployment
  Best scalability
  Minimal effort
Not straight Python
Has it's limitations and quirks
And it's free
Example Mashup
  The coolest technology of 2006
          Google Maps
The most hyped technology of 2009
               Twi...
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...
Issue
You cannot do an inequality test on two fields in one query.
                     Or use GeoPt.

               GeoHa...
JSON

     tag.json (returns location for a tag)
bounds.json (returns all the tags in a rectangle)
Geohashtag demo
Step 2:
Parse RSS into JSONP
atomtojsonp.appspot.com




browser: atomtojsonp.appspot.com                 server: search.twitter.com
                  ...
Proxy?
    Because twitter doesn't have JSON export
Other services like Google RSS or Yahoo YQL have
                     ...
No Model

Quite common for
  App Engine
Just feedparser
                  http://www.feedparser.org/


class JSONHandler(webapp.RequestHandler):
    def get(self)...
JSON

twitter.json (smaller twitter version for a search term)
         atom.json (a whole atom file for a url)
Atomtwojsonp demo
Step 3:
Mash it up
geojsontweet.appspot.com


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




browser: geojsontweet.appspot.c...
geojsontweet.appspot.com


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




browser: geojsontweet.appspot...
geojsontweet.appspot.com


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




browser: geojsontw...
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();
        va...
Some more Javascript

function twitter() {
    var tag = null;
    for (var obj in tags) {
        var url = map_details.a...
Slideshow
     http://flowplayer.org/tools/scrollable.html


$(quot;#tweets-quot; + tweet[quot;tagquot;]).parent().scrollab...
Geojsontweet demo
Serious issues
Trust
You are executing someone else's JavaScript
     in your site. Better be trustworthy.
Single points of failure?
Single points of failure?
Enterprise
Internal servers?
Questions?
Code: http://svn.clearwind.ca/public/projects/presentations
                 Email: andy@clearwind.ca
Cross Domain Web
Mashups with JQuery and Google App Engine
Upcoming SlideShare
Loading in …5
×

Cross Domain Web
Mashups with JQuery and Google App Engine

11,646 views

Published on

An example of how to do a mashup of Google App Engine applications using jQuery and JSONP

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,646
On SlideShare
0
From Embeds
0
Number of Embeds
440
Actions
Shares
0
Downloads
97
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Cross Domain Web
Mashups with JQuery and Google App Engine

  1. 1. Cross Domain Web Mashups with JQuery and Google App Engine Andy McKay. Clearwind Consulting http://clearwind.ca
  2. 2. 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
  3. 3. Cross Domain JQuery App Engine
  4. 4. Cross Domain JQuery App Engine
  5. 5. mashup “a web page or application that combines data from two or more external online sources”
  6. 6. reusable web applications
  7. 7. that aren't SOAP and WSDL quot;The three chief virtues of a programmer are: Laziness, Impatience and Hubris”. Larry Wall
  8. 8. back in time...
  9. 9. Zope 2 Plone Rails Django
  10. 10. rewriting things constantly is good for billable hours
  11. 11. small web applications returning xml
  12. 12. Ajax browser: rails.site.ca server: another.ca browser: django.site.ca
  13. 13. there's a problem
  14. 14. Single origin policy
  15. 15. 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
  16. 16. 1. proxy browser: clearwind.ca server: clearwind.ca server: some.other.ca
  17. 17. 2. hacks flash iframe document script
  18. 18. 3. JSONP JavaScript Object Notation with Padding
  19. 19. Example: json-time By Simon Willison http://json-time.appspot.com/ http://github.com/simonw/json-time/tree/master
  20. 20. 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 }
  21. 21. 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 })
  22. 22. Cross Domain JQuery App Engine
  23. 23. JQuery for json-time var url = quot;http://json-time.appspot.com/timezones.json?quot; $.getJSON(url + quot;callback=?quot;, function (json) { ... });
  24. 24. JSON time demo
  25. 25. 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) }); });
  26. 26. Cross Domain JQuery App Engine
  27. 27. Easiest deployment Best scalability Minimal effort
  28. 28. Not straight Python Has it's limitations and quirks
  29. 29. And it's free
  30. 30. Example Mashup The coolest technology of 2006 Google Maps The most hyped technology of 2009 Twitter
  31. 31. Twitter messages with a map by hash tag eg: #owv2009
  32. 32. Step 1: Assign hash tag to location
  33. 33. geohashtag.appspot.com browser: geohashtag.appspot.com server: geohashtag.appspot.com
  34. 34. Model from google.appengine.ext import db class Tag(db.Model): name = db.StringProperty(required=True) geostring = db.StringProperty(required=True)
  35. 35. Issue You cannot do an inequality test on two fields in one query. Or use GeoPt. GeoHash solves this problem: http://en.wikipedia.org/wiki/Geohash
  36. 36. JSON tag.json (returns location for a tag) bounds.json (returns all the tags in a rectangle)
  37. 37. Geohashtag demo
  38. 38. Step 2: Parse RSS into JSONP
  39. 39. atomtojsonp.appspot.com browser: atomtojsonp.appspot.com server: search.twitter.com server: atomtojsonp.appspot.com
  40. 40. 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/
  41. 41. No Model Quite common for App Engine
  42. 42. 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)
  43. 43. JSON twitter.json (smaller twitter version for a search term) atom.json (a whole atom file for a url)
  44. 44. Atomtwojsonp demo
  45. 45. Step 3: Mash it up
  46. 46. geojsontweet.appspot.com browser: geojsontweet.appspot.com server: maps.google.com browser: geojsontweet.appspot.com
  47. 47. geojsontweet.appspot.com browser: geojsontweet.appspot.com server: maps.google.com browser: geojsontweet.appspot.com server: geohashtag.appspot.com browser: geojsontweet.appspot.com
  48. 48. geojsontweet.appspot.com browser: geojsontweet.appspot.com server: maps.google.com browser: geojsontweet.appspot.com server: geohashtag.appspot.com browser: geojsontweet.appspot.com server: search.twitter.com server: atomtojsonp.appspot.com
  49. 49. No Model In fact, completely static HTML (with JS, no server side code)
  50. 50. 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) { for (var k = 0; k < json.length; k++) { ...
  51. 51. 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; for (var k = 0; k < json.length; k++) { ....
  52. 52. Slideshow http://flowplayer.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); } });
  53. 53. Geojsontweet demo
  54. 54. Serious issues
  55. 55. Trust You are executing someone else's JavaScript in your site. Better be trustworthy.
  56. 56. Single points of failure?
  57. 57. Single points of failure?
  58. 58. Enterprise Internal servers?
  59. 59. Questions? Code: http://svn.clearwind.ca/public/projects/presentations Email: andy@clearwind.ca

×