Cross Domain WebMashups with JQueryand Google App EngineAndy McKay. Clearwind Consultinghttp://clearwind.ca
Also known asA bunch of cool buzz words to try and describe    some of the stuff I’m doing these days   and get me in to 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 arent SOAP and WSDL"The three chief virtues of a programmer are: Laziness,         Impatience and Hubris”. Larry Wall
back in time...
Zope 2Plone RailsDjango
rewriting things constantly is good for billable hours
small web applications    returning xml
Ajax browser: rails.site.ca                                 server: another.cabrowser: django.site.ca
theres a problem
Single origin policy
browser: clearwind.ca                           server: some.other.caThe same origin policy prevents document or script lo...
1. proxybrowser: clearwind.ca   server: clearwind.ca   server: some.other.ca
2. hacks  flash iframedocument  script
3. JSONPJavaScript Object Notation       with Padding
Example: json-time                 By Simon Willison           http://json-time.appspot.com/http://github.com/simonw/json-...
JSON{    "tz": "America/Chicago",    "hour": 3,    "datetime": "Tue, 19 May 2009 03:06:50 -0500",    "second": 50,    "err...
JSONPprocess_time({  "tz": "America/Chicago",  "hour": 3,  "datetime": "Tue, 19 May 2009 03:09:09 -0500",  "second": 9,  "...
Cross Domain   JQuery App Engine
JQuery for json-timevar url = "http://json-time.appspot.com/timezones.json?"$.getJSON(url + "callback=?",        function ...
JSON time demo
Complete JSON time demo$(document).ready(function() {    var url = "http://json-time.appspot.com";      function showTime(...
Cross Domain   JQuery App Engine
Easiest deployment  Best scalability  Minimal effort
Not straight PythonHas its limitations and quirks
And its free
Example Mashup  The coolest technology of 2006          Google MapsThe 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.combrowser: geohashtag.appspot.com   server: geohashtag.appspot.com
Modelfrom google.appengine.ext import dbclass Tag(db.Model):    name = db.StringProperty(required=True)    geostring = db....
IssueYou cannot do an inequality test on two fields in one query.                     Or use GeoPt.               GeoHash s...
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.combrowser: atomtojsonp.appspot.com                 server: search.twitter.com                        ...
Proxy?    Because twitter doesnt have JSON exportOther services like Google RSS or Yahoo YQL have                     prob...
No ModelQuite common for  App Engine
Just feedparser                  http://www.feedparser.org/class JSONHandler(webapp.RequestHandler):    def get(self):    ...
JSONtwitter.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.combrowser: geojsontweet.appspot.com   server: maps.google.combrowser: geojsontweet.appspot.com
geojsontweet.appspot.combrowser: geojsontweet.appspot.com     server: maps.google.combrowser: geojsontweet.appspot.com   s...
geojsontweet.appspot.combrowser: geojsontweet.appspot.com                server: maps.google.combrowser: geojsontweet.apps...
No ModelIn fact, completely static HTML  (with JS, no server side code)
Some Javascriptfunction move() {        var bounds = map.getBounds();        var sw = bounds.getSouthWest();        var ne...
Some more Javascriptfunction twitter() {    var tag = null;    for (var obj in tags) {        var url = map_details.atom_d...
Slideshow     http://flowplayer.org/tools/scrollable.html$("#tweets-" + tweet["tag"]).parent().scrollable({    interval: 40...
Geojsontweet demo
Serious issues
TrustYou are executing someone elses JavaScript     in your site. Better be trustworthy.
Single points of failure?
Single points of failure?
EnterpriseInternal servers?
Questions?Code: http://svn.clearwind.ca/public/projects/presentations                 Email: andy@clearwind.ca
huhu
Upcoming SlideShare
Loading in …5
×

huhu

443 views

Published on

  • Be the first to comment

  • Be the first to like this

huhu

  1. 1. Cross Domain WebMashups with JQueryand Google App EngineAndy McKay. Clearwind Consultinghttp://clearwind.ca
  2. 2. Also known asA 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 arent SOAP and WSDL"The three chief virtues of a programmer are: Laziness, Impatience and Hubris”. Larry Wall
  8. 8. back in time...
  9. 9. Zope 2Plone RailsDjango
  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.cabrowser: django.site.ca
  13. 13. theres a problem
  14. 14. Single origin policy
  15. 15. browser: clearwind.ca server: some.other.caThe same origin policy prevents document or script loaded from one origin from gettingor setting properties of a document from a different origin.-- From http://www.mozilla.org/projects/security/components/same-origin.html
  16. 16. 1. proxybrowser: clearwind.ca server: clearwind.ca server: some.other.ca
  17. 17. 2. hacks flash iframedocument script
  18. 18. 3. JSONPJavaScript 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{ "tz": "America/Chicago", "hour": 3, "datetime": "Tue, 19 May 2009 03:06:50 -0500", "second": 50, "error": false, "minute": 6}
  21. 21. JSONPprocess_time({ "tz": "America/Chicago", "hour": 3, "datetime": "Tue, 19 May 2009 03:09:09 -0500", "second": 9, "error": false, "minute": 9})
  22. 22. Cross Domain JQuery App Engine
  23. 23. JQuery for json-timevar url = "http://json-time.appspot.com/timezones.json?"$.getJSON(url + "callback=?", function (json) { ... });
  24. 24. JSON time demo
  25. 25. Complete JSON time demo$(document).ready(function() { var url = "http://json-time.appspot.com"; function showTime(data) { $.getJSON(url + "/time.json?tz=" + $("#zones").val() + &callback=?, function (json){ $("#zones-msg").text(The time is now + json["datetime"] + .); }); }; $.getJSON(url + "/timezones.json?callback=?", function (json) { var zones = $("#zones"); for (var k = 0; k < json.length; k++) { zones.append("<option>" + json[k] + "</option>"); }; zones.bind("change", showTime) });});
  26. 26. Cross Domain JQuery App Engine
  27. 27. Easiest deployment Best scalability Minimal effort
  28. 28. Not straight PythonHas its limitations and quirks
  29. 29. And its free
  30. 30. Example Mashup The coolest technology of 2006 Google MapsThe 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.combrowser: geohashtag.appspot.com server: geohashtag.appspot.com
  34. 34. Modelfrom google.appengine.ext import dbclass Tag(db.Model): name = db.StringProperty(required=True) geostring = db.StringProperty(required=True)
  35. 35. IssueYou 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.combrowser: atomtojsonp.appspot.com server: search.twitter.com server: atomtojsonp.appspot.com
  40. 40. Proxy? Because twitter doesnt have JSON exportOther 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 ModelQuite common for App Engine
  42. 42. Just feedparser http://www.feedparser.org/class JSONHandler(webapp.RequestHandler): def get(self): url = self.request.get("url") data = feedparser.parse(url) if self.request.get("callback"): data = "%s(%s)" % (self.request.get("callback"), data) self.response.out.write(data)
  43. 43. JSONtwitter.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.combrowser: geojsontweet.appspot.com server: maps.google.combrowser: geojsontweet.appspot.com
  47. 47. geojsontweet.appspot.combrowser: geojsontweet.appspot.com server: maps.google.combrowser: geojsontweet.appspot.com server: geohashtag.appspot.combrowser: geojsontweet.appspot.com
  48. 48. geojsontweet.appspot.combrowser: geojsontweet.appspot.com server: maps.google.combrowser: geojsontweet.appspot.com server: geohashtag.appspot.combrowser: geojsontweet.appspot.com server: search.twitter.com server: atomtojsonp.appspot.com
  49. 49. No ModelIn fact, completely static HTML (with JS, no server side code)
  50. 50. Some Javascriptfunction 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 Javascriptfunction 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$("#tweets-" + tweet["tag"]).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. TrustYou are executing someone elses JavaScript in your site. Better be trustworthy.
  56. 56. Single points of failure?
  57. 57. Single points of failure?
  58. 58. EnterpriseInternal servers?
  59. 59. Questions?Code: http://svn.clearwind.ca/public/projects/presentations Email: andy@clearwind.ca

×