Future of Web Apps - Miami, FL - February 2009

Scaling OpenJonathan LeBlanc – Sr. Software Engineer / Tech Evangelist

Yahoo! Developer Network – Partner Integrations

February 23, 2009

2

YAP Applications What’s a YAP Application?

9

YAP Applications How do I get started?

10

• Runs on YAP

• Supports 2- & 3- legged OAuth

• Supports OpenSocial 0.8

JavaScript APIs

Open Applications

11

Open Application - Views

Small View

Large View

12

Open Application – Small View

13

Open Application – Large View

14

http://developer.yahoo.com/dashboard

15


19

• Runs off platform

• Supports 2- & 3-legged OAuth

• Does not contain views

• Requires users to authenticate

session

OAuth Applications

20


21


27

YAP Code Dive What can you do with YAP?

28

YAP Code Dive PHP SDK

29

Used For:

- Public user data and open APIs

PHP SDK – 2-Legged OAuth Initialization

30

Used For:

- Private data access

PHP SDK – 3-Legged OAuth Initialization

31

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

32

PHP SDK – Create a User Update

33

PHP SDK – Set the Status of a User

34

YAP Code Dive Yahoo! Markup Language (YML)

35

YML Tags (Large View)

yml:ayml:adyml:audioyml:formyml:friend-selectoryml:if-envyml:messageyml:nameyml:profile-picyml:pronounyml:shareyml:swfyml:user-badge

YML Lite Tags (Small View)

yml:ayml:audioyml:formyml:if-envyml:nameyml:profile-picyml:pronounyml:user-badge

YML – Available Tags

36

YML:A Tab Sample - Controller

37

YML:A Tab Sample – Tab Construction

38

YML:A Tab Sample - Product

39

YML:A Small View Update Sample

40

YML:A Small View Update Sample

41

YAP Code Dive Yahoo! Query Language (YQL)

42

YQL – Running a Query

43

YAP Code Dive Caja

44

Caja – JavaScript Before Cajoling

45

Caja – JavaScript After Cajoling

46

Caja - IFrame Security Concerns

IFrame Concerns

• Drive-by downloads

• Phishing attacks

• No real content restrictions

Caja Implementation

• Blacklist all / Whitelist some model

47

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/)

48

Caja Practical – Running an AJAX Request

49

Caja Practical – Working with JSON

50

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>

51


Step 1 – Assign click handler after innerHTML is set

52


Step 2 – Define your callback function

53

YAP Code Dive Common Questions

54

• 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

55

Thank You Questions?

Future of Web Apps - Miami, FL - February 2009

Technology

Transcript of Future of Web Apps - Miami, FL - February 2009