opensocial, caja & the yahoo! application platform
DESCRIPTION
An introduction to OpenSocial, Caja, and the Yahoo! Application Platform. Slides first used at UCSD 1/14/10.TRANSCRIPT
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