Wednesday, May 19, 2010

Cross-Domain AJAX and JavaScript Techniques

How To Impress Your Friends, Make Money, and Be Cool Like Google (or a Sneaky Spy Like Facebook)

Are you looking to expose your services to the widest audience possible? Are you trying to find a clear description of when to use any of the following techniques you found when you Googled for Cross-Domain JavaScript or AJAX?
  • Beacons or Tracking Pixels
  • Server-Side Ajax Proxies
  • JSONP (JSON with Padding) or Dynamic Script Injection
  • iframes to Display Data or Panels
  • Using iframes for Cross-Domain Communication
  • Domain-Lowering with iframes
  • window.postMessage()
  • Embedding Flickr, Twitter, RSS feeds, or Google Calendar with only simple JavaScript snippets
Well, this is for you! I recently gave a presentation at work to nearly all of our engineering staff, some of our QA and front-line support folks, and to anyone else who accidentally ended up in our training room during lunch time. It has received great interest since the talk, so I thought I'd unleash it into the wild and see if it helps anyone else! I have shared the presentation on Google Docs at: Cross-Domain AJAX and JavaScript Techniques.

Be sure to review the speaker's notes, as I have a lot of references in there. A few of them refer to an ASP.NET MVC project I used to demo some of the techniques, but I have not included that demo site on this site yet. Most of the interesting ones link to sites that display the techniques in use or have good tutorials on them.

A Cookbook of What and When

There are plenty of sites that explain how to implement many of the cross-domain communication techniques that are available, but I never really saw any that talk about when it is appropriate to use which techniques. That, to me, is the key: understanding my need and circumstances and finding one or more appropriate ways to solve it. The presentation includes a Cross-Domain AJAX and JavaScript Cheat Sheet at the very end that lists the what and when in a condensed format.

Because many of the engineers I work with are more comfortable in the middle-tier services than with front-end development, I include a brief introduction/history of some of the key pieces and the motivation for learning them now. I also cover other lead-in topics such as:
  • Limited Scalability of Server-Side Rendering
  • "Free" Horizontal Scaling with JavaScript
  • AtomPub, gData, OData, E-Tags
  • Caching for pages as well as data with various intermediaries
  • Facebook Fan panels, Like Buttons, AdSense and other "embeddable" technologies

What's the Business Value of Cross-Domain JavaScript?

As I have been working on more complex sites and pushing for JavaScript-based logging at our company to reduce the technical overhead and reliance on particular server-side technologies for logging, I have had to examine what other companies are doing to scale their services separate from their web site, enable cross-domain sharing of user information and, and how to syndicate and expose the services we provide to other web sites with minimal implementation friction.

It turns out that once companies like Google and Facebook have a valuable repository of information and provide value-add to them, a NEW opportunity arises: SYNDICATION. It is hard to drive traffic to your site beyond some typical growth patterns, advertising, etc. But if you can get others to embed you on their sites, they do the distribution for you and your data, services, and user experience can travel all over the web to where people already are.

The AdSense ads on this very blog are a perfect example of that (they are also about the only secure ad display platform out there). The (now somewhat loathed) Facebook Connect, Facebook Like buttons and iframes that let Facebook see you as you travel across the web are all heavily used, although many engineers are surprised when they find out exactly how they are implemented with "crude, old-school crap" like iframes and domain tricks. I personally find these techniques elegant uses of the standards as documented and HTML5 is expanding on these commonly used techniques to allow more of this type of communication!

Please Enjoy, Comment, and Share the Link

Please feel free to share the link around and to comment on this blog with any and all feedback. This is the kind of thing I would like to have more complete example projects around if it is helpful, or links to other good posts with implementation details. I am really listening to the commentary, so please, feed me :-)

I really feel strongly that these types of techniques drive some of the most successful companies into incredible growth, visibility, and utility and we can all benefit from learning these techniques, when to use them, and why they are awesome.