Yahoo! Application Platform Technical Deep Dive

YAP: Deep Dive Yahoo! Application Platform Tony Ng Director of Engineering

Agenda

Quick Recap

Developer Dashboard

Yahoo! Markup Language (YML)

Open Social

Caja

YAP: Quick Recap

Platform that enables applications to run on Yahoo! home page and My Yahoo!

YAP Components:

Developer dashboard

APIs and web services

Secure runtime and rendering proxy

Distribution and discovery infrastructure

Open Yahoo!: Audience is the Platform

Anatomy of YAP Application

3 Simple Things to Define for Each Application

Application metadata

name, description, icons, screenshot, category

Small view

Canvas view

Small View

Personalized snapshot of application

Fast response time

Canvas View

Full, interactive view of application

Demo – Create Your First YAP App

YAP Programming Model

App logic hosted on dev server

YAP proxies user request to dev server, passing parameters via HTTP POST:

Viewer guid, timezone, country code

canvas, view, app id

Viewer access token, secret, timestamp

YAP consumer key and request signature

Image URLs returned from dev server are rewritten and cached by YAP

2 & 3 legged OAuth is used for protected resource access

Small View Programming Model

Content hosted by YAP

Written in HTML, CSS and Yahoo! Markup Language (YML)

No JavaScript

Two ways to provide dynamic, personalized small view:

setSmallView(guid, newSV)

yml:include

Canvas View Programming Model

Content hosted by developer server

Application URL

YAP proxies all requests to dev server

Use any programming language / framework

JavaScript is allowed (subject to Caja sanitization)

Making Ajax requests

Use YML

Use Open Social gadgets.io.makeRequest

Accessing Social Data from Application

User social data available

profile, address book, updates, status

Multiple ways to access data

YML

Open Social JS / REST API

Yahoo! Query Language (YQL)

WS call to Yahoo! Social APIs

Leverage Yahoo! SDK to simplify code

Yahoo! Markup Language (YML)

Simple markup language for

Dynamic web content

Social data access

Media content

Viral sharing

Hide security details from application

Can be used in Small and Canvas views

Especially useful in Small view since JavaScript is not allowed

YML: Dynamic Web Content / Ajax

yml:a

Update web content upon user clicking

yml:form

Create web form and update web content upon user clicking

yml:include

Refresh web content dynamically

Implementing Tab Views with yml:a

<yml:a view=“tagsearch.php” replace=“content1”>Search by tags</yml:a>

…

<div id=“content1”> … </div>

User clicks on tab

Dynamic Content Loading with yml:include

<yml:include view=“topApps.php” replace=“content1”>Loading top apps…

</yml:include>

…

<div id=“content1”> … </div>

YML: Social Data Access

yml:friend-selector

Present and select a list of friends

yml:name, yml:profile-pic, yml:pronoun, yml:user-badge

Display user name / profile picture information

Example <yml:profile-pic uid=“viewer” width=“60”><br> Hi, my name is <yml:name/>

YML: Media Content

yml:swf (Canvas view only)

Includes Flash object

yml:audio

Creates audio player that plays MP3 files

yml:ad (Canvas view only)

Includes third party advertising network content

Example: Embedding Flash Content using yml:swf

<yml:swf src="http://www.youtube.com/v/MqbaZcX67L0" width="560" height="340"/>

YML: Viral Sharing (Canvas View only)

yml:share

Creates standard form that opens a message dialog for sharing the application

yml:message

Creates customizable form that opens a message dialog for sending notifcations from application

Example

<yml:share> <input type="submit" value="Invite Friends”> </yml:/share>

YML Demo

YAP and Open Social

Open Social

API for accessing user social data

Implemented by several social web sites, including Yahoo!

Yahoo! is board member of Open Social Foundation

YAP supports Open Social 0.8 JS, REST and Gadget Core APIs

OS Activity mapped to Yahoo! Updates API

OS Person / People mapped to Yahoo! Profile and Connections

gadget.xml and 0.9 support coming

Making Ajax Request in YAP

With proxy model, direct XHR cannot reach developer server

Two ways:

<yml:a>, <yml:include>

Open Social gadgets.io.makeRequest API

Open Social Demo: Ajax Request

Open Social Demo: Publish Yahoo! Updates

Securing Third Party Code – Caja

Additional “sandbox” on top of iFrame protection

One of the first to integrate Caja in production

Enables Yahoo! to embed third party applications safely

Aggressively re-write and remove unsafe HTML / CSS / JavaScript

Caja Restrictions

No direct access to implied global objects

Proxy access to DOM

No document.write (use innerHTML)

No <embed>, <object>, <iframe>

No eval, with, this

No JavaScript:void(0)

Some CSS hacks

No external CSS and JavaScript (inlined only)

Caja Examples

See Caja limitation doc for workarounds

http://developer.yahoo.com/yap/caja

Instead of Use document.write() <var x = document.getElementById(‘x’); x.innerHTML = ‘abc’; javascript:void(0) <a href="#" onclick="click(); return false">click</a> <link rel=stylesheet> <script src=“…” /> @import Inline CSS and JS <object>, <embed> <swf> for Flash object

Caja Best Practices

Adhere to W3C standards (HTML 4.01 and CSS 2.1)

Use YML

Push more logic to server-side

Use supported JS library

Open Social 0.8, YUI 2.8 subset

Use JSLint and Caja test bed

http://www.jslint.com

http://cajadores.com/demos/testbed/

YUI 2 / Caja

Beta support for YUI 2.8

YUI Core

YAHOO, DOM, Event utility

YUI Utilities

Animation, DataSource, DragNDrop, Element, ImageLoader, Resize, Selector

YUI Library Controls / Widgets

AutoComplete, Button, Container, Menu, TabView, TreeView

Available on YAP preview server

preview.apps.yahoo.com

Summary and Call to Action

Use YAP to expose your application on the Yahoo! Home page to over 330 million users

Create an YAP app hack! We are here to help

Learn more about YAP:

Building Your App on Yahoo! – Partner Perspective (3pm)

Yahoo! Social APIs & SDKs (4:10pm)

Yahoo! App Marketing (4pm)

Developer Resources

YAP – developer.yahoo.com/yap/homepage

Dev Tool – developer.yahoo.com/dashboard

Dev Guide – developer.yahoo.com/yap/guide

Forum – developer.yahoo.com/forum

Samples – developer.yahoo.com/yos/code_exs

SDKs – developer.yahoo.com/social/sdk

Joyent Free Hosting – signup.joyent.com/yahoo_signup

YAP: Deep Dive Yahoo! Application Platform Tony Ng [email_address]

Yahoo! Application Platform Technical Deep Dive

0 comments

Notes on slide 1

2 Favorites & 1 Event