0
OpenSocial, Caja & the Yahoo! Application Platform Erik Eldridge Engineer/Evangelist Yahoo! Developer Network Image credit...
Presentation outline <ul><li>OpenSocial </li></ul><ul><li>Caja </li></ul><ul><li>Yahoo! Application Platform </li></ul>
OpenSocial <ul><li>Open standard for social apps & APIs </li></ul><ul><li>Supported by > 30 sites </li></ul><ul><ul><li>Ya...
OpenSocial best practice <ul><li>Deploy on Facebook and all OpenSocial containers </li></ul><ul><ul><li>Yahoo!: 126M month...
<ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> </li></ul><ul><li><Module>  </li></ul><ul><li><ModuleP...
<ul><li>function loadFriends() { </li></ul><ul><li>var req = opensocial.newDataRequest(); </li></ul><ul><li>req.add(req.ne...
<ul><li>function onLoadFriends(data) { </li></ul><ul><li>var viewer = data.get('viewer').getData(); </li></ul><ul><li>var ...
mobyDick = { “ title” : “Moby Dick”, “ author”: “Herman Melville” }; var json = gadgets.json.stringify(mobyDick); var req ...
OpenSocial best practice <ul><li>Balance container support w/ cross-container insulation </li></ul><ul><li>Sources: Person...
Caja <ul><li>HTML, CSS, & JavaScript security  </li></ul><ul><li>Object- Ca pabilities  Ja vaScript </li></ul><ul><li>open...
Object-Capabilities defined <ul><li>An O.C. Language is an OO language that ensures: </li></ul><ul><ul><li>Objects are enc...
<ul><li><div id=&quot;foo&quot;> </li></ul><ul><li>Lorem ipsum dolor sit amet </li></ul><ul><li></div> </li></ul><ul><li><...
<ul><li><div class='caja-outer'> </li></ul><ul><li><div class='cajoled' id='cajoled-box'> </li></ul><ul><li><div id=&quot;...
<ul><li>var $v = ___.readImport(IMPORTS___, '$v', { </li></ul><ul><li>'getOuters': { </li></ul><ul><li>'()': { } </li></ul...
Image credit: Yahoo! Developer Network
Yahoo! Application Platform <ul><li>OpenSocial JavaScript & REST APIs </li></ul><ul><li>Open to all developers </li></ul><...
Resources <ul><li>OpenSocial  </li></ul><ul><ul><li>OpenSocial project:  opensocial.org </li></ul></ul><ul><ul><li>Cross-c...
Resources cont. <ul><li>Yahoo! Application Platform </li></ul><ul><ul><li>YAP documentation:  bit.ly/6hfxEc </li></ul></ul...
Upcoming SlideShare
Loading in...5
×

OpenSocial, Caja & the Yahoo! Application Platform

1,258

Published on

An introduction to OpenSocial, Caja, and the Yahoo! Application Platform. Slides first used at UCSD 1/14/10.

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

  • Be the first to like this

No Downloads
Views
Total Views
1,258
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "OpenSocial, Caja & the Yahoo! Application Platform"

  1. 1. OpenSocial, Caja & the Yahoo! Application Platform Erik Eldridge Engineer/Evangelist Yahoo! Developer Network Image credit: http://www.flickr.com/photos/pinksherbet/345653550/
  2. 2. Presentation outline <ul><li>OpenSocial </li></ul><ul><li>Caja </li></ul><ul><li>Yahoo! Application Platform </li></ul>
  3. 3. OpenSocial <ul><li>Open standard for social apps & APIs </li></ul><ul><li>Supported by > 30 sites </li></ul><ul><ul><li>Yahoo!, Google, MySpace, LinkedIn … </li></ul></ul><ul><li>Source: http://bit.ly/4GHoxE </li></ul>
  4. 4. OpenSocial best practice <ul><li>Deploy on Facebook and all OpenSocial containers </li></ul><ul><ul><li>Yahoo!: 126M monthly users </li></ul></ul><ul><ul><li>Facebook: 100M </li></ul></ul><ul><ul><li>MySpace: 60M </li></ul></ul><ul><ul><li>Hi5: 53M </li></ul></ul><ul><ul><li>LinkedIn: 20M </li></ul></ul><ul><li>Source: http://bit.ly/4GHoxE & BuddyPoke (0 --> 100M users in 1 yr) </li></ul>
  5. 5. <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> </li></ul><ul><li><Module> </li></ul><ul><li><ModulePrefs title=&quot;Hello World!&quot;> </li></ul><ul><li><Require feature=&quot;opensocial-0.8&quot;/> </li></ul><ul><li></ModulePrefs> </li></ul><ul><li><Content type=&quot;html&quot;> </li></ul><ul><li><![CDATA[ </li></ul><ul><li>Hello, world! </li></ul><ul><li>]]> </li></ul><ul><li></Content> </li></ul><ul><li></Module> </li></ul><ul><li>Source: http://bit.ly/90pp8y </li></ul>
  6. 6. <ul><li>function loadFriends() { </li></ul><ul><li>var req = opensocial.newDataRequest(); </li></ul><ul><li>req.add(req.newFetchPersonRequest( </li></ul><ul><li>opensocial.IdSpec.PersonId.VIEWER), 'viewer’ </li></ul><ul><li>); </li></ul><ul><li>var viewerFriends = opensocial.newIdSpec({ </li></ul><ul><li>&quot;userId&quot; : &quot;VIEWER&quot;, </li></ul><ul><li>&quot;groupId&quot; : &quot;FRIENDS&quot; } </li></ul><ul><li>); </li></ul><ul><li>var opt_params = {}; </li></ul><ul><li>opt_params[ </li></ul><ul><li>opensocial.DataRequest.PeopleRequestFields.MAX] = 100; </li></ul><ul><li>req.add(req.newFetchPeopleRequest( </li></ul><ul><li>viewerFriends, opt_params), 'viewerFriends'); </li></ul><ul><li>req.send(onLoadFriends); </li></ul><ul><li>} </li></ul><ul><li>Source: http://bit.ly/90pp8y </li></ul>
  7. 7. <ul><li>function onLoadFriends(data) { </li></ul><ul><li>var viewer = data.get('viewer').getData(); </li></ul><ul><li>var viewerFriends = data.get('viewerFriends').getData(); </li></ul><ul><li>//do something w/ data </li></ul><ul><li>} </li></ul><ul><li>Source: http://bit.ly/90pp8y </li></ul>
  8. 8. 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
  9. 9. OpenSocial best practice <ul><li>Balance container support w/ cross-container insulation </li></ul><ul><li>Sources: Personal experience & http://bit.ly/6rzcMl </li></ul>
  10. 10. Caja <ul><li>HTML, CSS, & JavaScript security </li></ul><ul><li>Object- Ca pabilities Ja vaScript </li></ul><ul><li>open source </li></ul><ul><li>Yahoo! uses it in production </li></ul><ul><li>Related concepts: </li></ul><ul><ul><li>ADSafe JS </li></ul></ul><ul><ul><li>FBJS </li></ul></ul>
  11. 11. Object-Capabilities defined <ul><li>An O.C. Language is an OO language that ensures: </li></ul><ul><ul><li>Objects are encapsulated — only accessed via public API. </li></ul></ul><ul><ul><li>Objects can only influence the outside world by sending messages on references. </li></ul></ul><ul><ul><li>An object's creator can deny access by not providing references. </li></ul></ul><ul><li>Source: Marc S.: “Emily: A High Performance Language …” via http://bit.ly/8ohHOW </li></ul>
  12. 12. <ul><li><div id=&quot;foo&quot;> </li></ul><ul><li>Lorem ipsum dolor sit amet </li></ul><ul><li></div> </li></ul><ul><li><script> </li></ul><ul><li>var foo = document.getElementById('foo'); </li></ul><ul><li>foo.style.color = 'red'; </li></ul><ul><li></script> </li></ul><ul><li>Source: Yahoo! Developer Network </li></ul>
  13. 13. <ul><li><div class='caja-outer'> </li></ul><ul><li><div class='cajoled' id='cajoled-box'> </li></ul><ul><li><div id=&quot;foo-cajoled&quot;> </li></ul><ul><li>Lorem ipsum dolor sit amet </li></ul><ul><li></div></div></div> </li></ul><ul><li>… </li></ul><ul><li>Source: Yahoo! Developer Network </li></ul>
  14. 14. <ul><li>var $v = ___.readImport(IMPORTS___, '$v', { </li></ul><ul><li>'getOuters': { </li></ul><ul><li>'()': { } </li></ul><ul><li>}, </li></ul><ul><li>'initOuter': { </li></ul><ul><li>'()': { } </li></ul><ul><li>}, </li></ul><ul><li>... </li></ul><ul><li>$v.initOuter('onerror'); </li></ul><ul><li>$v.so('foo', $v.cm($v.ro('document'), 'getElementById', [ 'foo' ])); </li></ul><ul><li>$v.s($v.r($v.ro('foo'), 'style'), 'color', 'red'); </li></ul><ul><li>Source: Yahoo! Developer Network </li></ul>
  15. 15. Image credit: Yahoo! Developer Network
  16. 16. Yahoo! Application Platform <ul><li>OpenSocial JavaScript & REST APIs </li></ul><ul><li>Open to all developers </li></ul><ul><li>Apps featured on Yahoo! homepage </li></ul>
  17. 17. Resources <ul><li>OpenSocial </li></ul><ul><ul><li>OpenSocial project: opensocial.org </li></ul></ul><ul><ul><li>Cross-container dev: bit.ly/6rzcMl </li></ul></ul><ul><ul><li>Apache Shindig: bit.ly/6hUJn5 </li></ul></ul><ul><li>Caja </li></ul><ul><ul><li>Caja project: bit.ly/4Y7qfG </li></ul></ul><ul><ul><li>Securing WebApps: bit.ly/6cKyAy </li></ul></ul>
  18. 18. Resources cont. <ul><li>Yahoo! Application Platform </li></ul><ul><ul><li>YAP documentation: bit.ly/6hfxEc </li></ul></ul><ul><ul><li>OpenSocial support: bit.ly/60etK5 </li></ul></ul><ul><ul><li>Caja support: bit.ly/8w45F9 </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×