Scaling Open Jonathan LeBlanc – Technology Evangelist Yahoo! Developer Network – Partner Integrations Slides http://www.slideshare.net/jleblanc/future-of-web-apps-miami-fl-february-2009

YAP Applications What’s a YAP Application?

YAP Applications What’s a YAP Application?

YAP Applications How do I get started?

YAP Applications How do I get started?

Runs on YAP Supports 2- & 3- legged OAuth Supports OpenSocial 0.8 JavaScript APIs Open Applications

Runs on YAP

Supports 2- & 3- legged OAuth

Supports OpenSocial 0.8 JavaScript APIs

Open Application - Views Small View Large View

Open Application – Small View

Open Application – Large View

http://developer.yahoo.com/dashboard

http://developer.yahoo.com/dashboard

http://developer.yahoo.com/dashboard

http://developer.yahoo.com/dashboard

Runs off platform Supports 2- & 3-legged OAuth Does not contain views Requires users to authenticate session OAuth Applications

Runs off platform

Supports 2- & 3-legged OAuth

Does not contain views

Requires users to authenticate session

http://developer.yahoo.com/dashboard

http://developer.yahoo.com/dashboard

http://developer.yahoo.com/dashboard

http://developer.yahoo.com/dashboard

YAP Code Dive What can you do with YAP?

YAP Code Dive What can you do with YAP?

YAP Code Dive PHP SDK

YAP Code Dive PHP SDK

Used For: - Public user data and open APIs PHP SDK – 2-Legged OAuth Initialization

Used For: Private data access PHP SDK – 3-Legged OAuth Initialization

Used For:

Private data access

3-Legged OAuth getSessionedUser (session) getOwner (session) getUser (session) query (session) getPresence (user) setPresence (user) listUpdates (user) listConnectionUpdates (user) insertUpdate (user) deleteUpdate (user) loadProfile (user) getConnections (user) getContacts (user) setSmallView (user) 2-Legged OAuth setSmallView (application) query (application) PHP SDK – Available Methods

PHP SDK – Create a User Update

PHP SDK – Set the Status of a User

YAP Code Dive Yahoo! Markup Language (YML)

YAP Code Dive Yahoo! Markup Language (YML)

YML Tags (Large View) yml:a yml:ad yml:audio yml:form yml:friend-selector yml:if-env yml:message yml:name yml:profile-pic yml:pronoun yml:share yml:swf yml:user-badge YML Lite Tags (Small View) yml:a yml:audio yml:form yml:if-env yml:name yml:profile-pic yml:pronoun yml:user-badge YML – Available Tags

YML:A Tab Sample - Controller

YML:A Tab Sample – Tab Construction

YML:A Tab Sample - Product

YML:A Small View Update Sample

YML:A Small View Update Sample

YAP Code Dive Yahoo! Query Language (YQL)

YAP Code Dive Yahoo! Query Language (YQL)

YQL – Running a Query

YAP Code Dive Caja

YAP Code Dive Caja

Caja – JavaScript Before Cajoling

Caja – JavaScript After Cajoling

Caja - IFrame Security Concerns IFrame Concerns Drive-by downloads No real content restrictions Other known exploits Caja Implementation Blacklist all / Whitelist some model Secure OpenSocial container

IFrame Concerns

Drive-by downloads

No real content restrictions

Other known exploits

Caja Implementation

Blacklist all / Whitelist some model

Secure OpenSocial container

Caja – Best Practices Use OpenSocial JavaScript standards Use W3C standards Use YML wherever possible Unit test all JavaScript Read the documentation (http://developer.yahoo.com/yos) Participate in the forums (http://developer.yahoo.net/forum/)

Use OpenSocial JavaScript standards

Use W3C standards

Use YML wherever possible

Unit test all JavaScript

Read the documentation (http://developer.yahoo.com/yos)

Participate in the forums (http://developer.yahoo.net/forum/)

Caja Practical – Running an AJAX Request

Caja Practical – Working with JSON

Caja Practical – Assigning Click Handlers Caja client side sanitizer strips JavaScript when inserted in DOM following AJAX requests How do I assign click handlers then? Given: DOM Node with an ID <div id=‘myClickDiv’>Click Me!</div>

Caja client side sanitizer strips JavaScript when inserted in DOM following AJAX requests

How do I assign click handlers then?

Given: DOM Node with an ID

<div id=‘myClickDiv’>Click Me!</div>

Caja Practical – Assigning Click Handlers Step 1 – Assign click handler after innerHTML is set

Caja Practical – Assigning Click Handlers Step 2 – Define your callback function

YAP Code Dive Common Questions

YAP Code Dive Common Questions

I have an existing OpenSocial application. How do I get started? I have an existing Facebook application. How do I get started? How do I authenticate OAuth using JavaScript? What is a Java Module Envelope error and how do I fix it? Plans for other SDKs besides PHP and AS3? How do users find my application? Common Questions – Q & A

I have an existing OpenSocial application. How do I get started?

I have an existing Facebook application. How do I get started?

How do I authenticate OAuth using JavaScript?

What is a Java Module Envelope error and how do I fix it?

Plans for other SDKs besides PHP and AS3?

How do users find my application?

Thank You Questions?

Thank You Questions?