opensocial, caja & the yahoo! application platform

OpenSocial, Caja & theYahoo! Application Platform

Erik Eldridge

Engineer/Evangelist

Yahoo! Developer Network

Image credit: http://www.flickr.com/photos/pinksherbet/345653550/

Presentation outline

• OpenSocial

• Caja

• Yahoo! Application Platform

OpenSocial

• Open standard for social apps & APIs

• Supported by > 30 sites– Yahoo!, Google, MySpace, LinkedIn …

Source: http://bit.ly/4GHoxE

OpenSocial best practice

• Deploy on Facebook and all OpenSocial containers– Yahoo!: 126M monthly users– Facebook: 100M– MySpace: 60M– Hi5: 53M– LinkedIn: 20M

Source: http://bit.ly/4GHoxE & BuddyPoke (0 --> 100M users in 1 yr)

<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Hello World!">

<Require feature="opensocial-0.8"/>

</ModulePrefs> <Content type="html"> <![CDATA[ Hello, world! ]]> </Content></Module>

Source: http://bit.ly/90pp8y

function loadFriends() {

var req = opensocial.newDataRequest();

req.add(req.newFetchPersonRequest(

opensocial.IdSpec.PersonId.VIEWER), 'viewer’

);

var viewerFriends = opensocial.newIdSpec({

"userId" : "VIEWER",

"groupId" : "FRIENDS" }

);

var opt_params = {};

opt_params[

opensocial.DataRequest.PeopleRequestFields.MAX] = 100;

req.add(req.newFetchPeopleRequest(

viewerFriends, opt_params), 'viewerFriends');

req.send(onLoadFriends);

}

Source: http://bit.ly/90pp8y

function onLoadFriends(data) {

var viewer = data.get('viewer').getData();

var viewerFriends = data.get('viewerFriends').getData();

//do something w/ data

}

Source: http://bit.ly/90pp8y

mobyDick = { “title” : “Moby Dick”, “author”: “Herman Melville”};var json = gadgets.json.stringify(mobyDick);var req = opensocial.newDataRequest();req.add(req.newUpdatePersonAppDataRequest( ‘VIEWER’, 'favoriteBook', json));req.send();

Source: http://bit.ly/8ExIx0

OpenSocial best practice

• Balance container support w/ cross-container insulation

Sources: Personal experience & http://bit.ly/6rzcMl

Caja

• HTML, CSS, & JavaScript security

• Object-Capabilities JavaScript

• open source

• Yahoo! uses it in production

• Related concepts: – ADSafe JS– FBJS

Object-Capabilities defined

• An O.C. Language is an OO language that ensures:– Objects are encapsulated — only

accessed via public API.– Objects can only influence the outside

world by sending messages on references.– An object's creator can deny access by not

providing references.

Source: Marc S.: “Emily: A High Performance Language …” via http://bit.ly/8ohHOW

<div id="foo">

Lorem ipsum dolor sit amet

</div>

<script>

var foo = document.getElementById('foo');

foo.style.color = 'red';

</script>

Source: Yahoo! Developer Network

<div class='caja-outer'>

<div class='cajoled' id='cajoled-box'>

<div id="foo-cajoled">

Lorem ipsum dolor sit amet

</div></div></div>

…

Source: Yahoo! Developer Network

var $v = ___.readImport(IMPORTS___, '$v', { 'getOuters': { '()': { } }, 'initOuter': { '()': { } },...$v.initOuter('onerror');$v.so('foo', $v.cm($v.ro('document'), 'getElementById',

[ 'foo' ]));$v.s($v.r($v.ro('foo'), 'style'), 'color', 'red');

Source: Yahoo! Developer Network

Image credit: Yahoo! Developer Network

Yahoo! Application Platform

• OpenSocial JavaScript & REST APIs

• Open to all developers

• Apps featured on Yahoo! homepage

Resources

• OpenSocial – OpenSocial project: opensocial.org– Cross-container dev: bit.ly/6rzcMl– Apache Shindig: bit.ly/6hUJn5

• Caja– Caja project: bit.ly/4Y7qfG– Securing WebApps: bit.ly/6cKyAy

Resources cont.

• Yahoo! Application Platform– YAP documentation: bit.ly/6hfxEc– OpenSocial support: bit.ly/60etK5– Caja support: bit.ly/8w45F9