OpenSocial, Caja & the Yahoo! Application Platform

  • 1,159 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,159
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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