Your SlideShare is downloading. ×
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,225
views

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,225
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
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
    • OpenSocial
    • Caja
    • Yahoo! Application Platform
  • 3. OpenSocial
    • Open standard for social apps & APIs
    • Supported by > 30 sites
      • Yahoo!, Google, MySpace, LinkedIn …
    • Source: http://bit.ly/4GHoxE
  • 4. 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)
  • 5.
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>
    • <Module>
    • <ModulePrefs title=&quot;Hello World!&quot;>
    • <Require feature=&quot;opensocial-0.8&quot;/>
    • </ModulePrefs>
    • <Content type=&quot;html&quot;>
    • <![CDATA[
    • Hello, world!
    • ]]>
    • </Content>
    • </Module>
    • Source: http://bit.ly/90pp8y
  • 6.
    • function loadFriends() {
    • var req = opensocial.newDataRequest();
    • req.add(req.newFetchPersonRequest(
    • opensocial.IdSpec.PersonId.VIEWER), 'viewer’
    • );
    • var viewerFriends = opensocial.newIdSpec({
    • &quot;userId&quot; : &quot;VIEWER&quot;,
    • &quot;groupId&quot; : &quot;FRIENDS&quot; }
    • );
    • 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
  • 7.
    • function onLoadFriends(data) {
    • var viewer = data.get('viewer').getData();
    • var viewerFriends = data.get('viewerFriends').getData();
    • //do something w/ data
    • }
    • Source: http://bit.ly/90pp8y
  • 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. OpenSocial best practice
    • Balance container support w/ cross-container insulation
    • Sources: Personal experience & http://bit.ly/6rzcMl
  • 10. Caja
    • HTML, CSS, & JavaScript security
    • Object- Ca pabilities Ja vaScript
    • open source
    • Yahoo! uses it in production
    • Related concepts:
      • ADSafe JS
      • FBJS
  • 11. 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
  • 12.
    • <div id=&quot;foo&quot;>
    • Lorem ipsum dolor sit amet
    • </div>
    • <script>
    • var foo = document.getElementById('foo');
    • foo.style.color = 'red';
    • </script>
    • Source: Yahoo! Developer Network
  • 13.
    • <div class='caja-outer'>
    • <div class='cajoled' id='cajoled-box'>
    • <div id=&quot;foo-cajoled&quot;>
    • Lorem ipsum dolor sit amet
    • </div></div></div>
    • Source: Yahoo! Developer Network
  • 14.
    • 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
  • 15. Image credit: Yahoo! Developer Network
  • 16. Yahoo! Application Platform
    • OpenSocial JavaScript & REST APIs
    • Open to all developers
    • Apps featured on Yahoo! homepage
  • 17. 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
  • 18. Resources cont.
    • Yahoo! Application Platform
      • YAP documentation: bit.ly/6hfxEc
      • OpenSocial support: bit.ly/60etK5
      • Caja support: bit.ly/8w45F9

×