Your SlideShare is downloading. ×
0
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
OpenSocial, Caja & the Yahoo! Application Platform
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

OpenSocial, Caja & the Yahoo! Application Platform

1,249

Published on

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

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,249
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. OpenSocial, Caja & the Yahoo! Application Platform Erik Eldridge Engineer/Evangelist Yahoo! Developer Network Image credit: http://www.flickr.com/photos/pinksherbet/345653550/
  • 2. Presentation outline <ul><li>OpenSocial </li></ul><ul><li>Caja </li></ul><ul><li>Yahoo! Application Platform </li></ul>
  • 3. OpenSocial <ul><li>Open standard for social apps &amp; APIs </li></ul><ul><li>Supported by &gt; 30 sites </li></ul><ul><ul><li>Yahoo!, Google, MySpace, LinkedIn … </li></ul></ul><ul><li>Source: http://bit.ly/4GHoxE </li></ul>
  • 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 &amp; BuddyPoke (0 --&gt; 100M users in 1 yr) </li></ul>
  • 5. <ul><li>&lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot; ?&gt; </li></ul><ul><li>&lt;Module&gt; </li></ul><ul><li>&lt;ModulePrefs title=&amp;quot;Hello World!&amp;quot;&gt; </li></ul><ul><li>&lt;Require feature=&amp;quot;opensocial-0.8&amp;quot;/&gt; </li></ul><ul><li>&lt;/ModulePrefs&gt; </li></ul><ul><li>&lt;Content type=&amp;quot;html&amp;quot;&gt; </li></ul><ul><li>&lt;![CDATA[ </li></ul><ul><li>Hello, world! </li></ul><ul><li>]]&gt; </li></ul><ul><li>&lt;/Content&gt; </li></ul><ul><li>&lt;/Module&gt; </li></ul><ul><li>Source: http://bit.ly/90pp8y </li></ul>
  • 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), &apos;viewer’ </li></ul><ul><li>); </li></ul><ul><li>var viewerFriends = opensocial.newIdSpec({ </li></ul><ul><li>&amp;quot;userId&amp;quot; : &amp;quot;VIEWER&amp;quot;, </li></ul><ul><li>&amp;quot;groupId&amp;quot; : &amp;quot;FRIENDS&amp;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), &apos;viewerFriends&apos;); </li></ul><ul><li>req.send(onLoadFriends); </li></ul><ul><li>} </li></ul><ul><li>Source: http://bit.ly/90pp8y </li></ul>
  • 7. <ul><li>function onLoadFriends(data) { </li></ul><ul><li>var viewer = data.get(&apos;viewer&apos;).getData(); </li></ul><ul><li>var viewerFriends = data.get(&apos;viewerFriends&apos;).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. mobyDick = { “ title” : “Moby Dick”, “ author”: “Herman Melville” }; var json = gadgets.json.stringify(mobyDick); var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest( ‘ VIEWER’, &apos;favoriteBook&apos;, json )); req.send(); Source: http://bit.ly/8ExIx0
  • 9. OpenSocial best practice <ul><li>Balance container support w/ cross-container insulation </li></ul><ul><li>Sources: Personal experience &amp; http://bit.ly/6rzcMl </li></ul>
  • 10. Caja <ul><li>HTML, CSS, &amp; 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. 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&apos;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. <ul><li>&lt;div id=&amp;quot;foo&amp;quot;&gt; </li></ul><ul><li>Lorem ipsum dolor sit amet </li></ul><ul><li>&lt;/div&gt; </li></ul><ul><li>&lt;script&gt; </li></ul><ul><li>var foo = document.getElementById(&apos;foo&apos;); </li></ul><ul><li>foo.style.color = &apos;red&apos;; </li></ul><ul><li>&lt;/script&gt; </li></ul><ul><li>Source: Yahoo! Developer Network </li></ul>
  • 13. <ul><li>&lt;div class=&apos;caja-outer&apos;&gt; </li></ul><ul><li>&lt;div class=&apos;cajoled&apos; id=&apos;cajoled-box&apos;&gt; </li></ul><ul><li>&lt;div id=&amp;quot;foo-cajoled&amp;quot;&gt; </li></ul><ul><li>Lorem ipsum dolor sit amet </li></ul><ul><li>&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; </li></ul><ul><li>… </li></ul><ul><li>Source: Yahoo! Developer Network </li></ul>
  • 14. <ul><li>var $v = ___.readImport(IMPORTS___, &apos;$v&apos;, { </li></ul><ul><li>&apos;getOuters&apos;: { </li></ul><ul><li>&apos;()&apos;: { } </li></ul><ul><li>}, </li></ul><ul><li>&apos;initOuter&apos;: { </li></ul><ul><li>&apos;()&apos;: { } </li></ul><ul><li>}, </li></ul><ul><li>... </li></ul><ul><li>$v.initOuter(&apos;onerror&apos;); </li></ul><ul><li>$v.so(&apos;foo&apos;, $v.cm($v.ro(&apos;document&apos;), &apos;getElementById&apos;, [ &apos;foo&apos; ])); </li></ul><ul><li>$v.s($v.r($v.ro(&apos;foo&apos;), &apos;style&apos;), &apos;color&apos;, &apos;red&apos;); </li></ul><ul><li>Source: Yahoo! Developer Network </li></ul>
  • 15. Image credit: Yahoo! Developer Network
  • 16. Yahoo! Application Platform <ul><li>OpenSocial JavaScript &amp; REST APIs </li></ul><ul><li>Open to all developers </li></ul><ul><li>Apps featured on Yahoo! homepage </li></ul>
  • 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. 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>

×