Diving into the Yahoo! Open Stack
Dus>n Whi3le – dus>n@yahoo‐inc.com h3p://developer.yahoo.com/hacku/

EXAMPLES | TUTORIALS | CODE SAMPLES
DEVELOPER.YAHOO.COM

FREEBSD | LINUX | APACHE | PHP | MYSQL | BUGZILLA | HADOOP | SYMFONY
YAHOO! IS POWERED BY OPEN SOURCE
TECHNOLOGIES

W3C | MICROFORMATS | OAUTH | OPENID | OPENSOCIAL
YAHOO! EMBRACES OPEN STANDARDS

RASMUS LERDORF | DOUG CROCKFORD | DOUG CUTTING | CHRISTIAN HEILMANN
YAHOO! HIRES OPEN SOURCE DEVELOPERS

YUI | BROWSER PLUS | DESIGN PATTERNS | R3 | YSLOW + PERFORMANCE RULES
YAHOO! GIVES BACK TO OPEN SOURCE

YQL | PIPES | BOSS | CONTACTS | UPDATES | MAIL | DELICIOUS | FLICKR | UPCOMING
| HOTJOBS | MAPS | FIREEAGLE | GEOLOCATION | LOCAL | TRAFFIC | WEATHER |
MUSIC | ANSWERS | SHOPPING | FINANCE | TRAVEL
YAHOO! SHARES ITS DATA THROUGH
OPEN APIS AND WEB SERVICES

Hack Days | HackU | Tech Talks | YDN Theater
YAHOO! ENGAGES COMMUNITIES WITH
OPEN HACK EVENTS AROUND THE WORLD

WE ARE OPEN AT YAHOO!

PROGRESS. EVERYONE IS WORKING
TOGETHER!

OPENID | XRDS | OAUTH | PORTABLE CONTACTS | OPEN SOCIAL
OPEN PLATFORMS + COLLABORATION

The goals of Yahoo! Open Strategy

Y! OS – Establish a social dimension
• Underlying social plaOorm
• Social APIs w/ OpenSocial
• Unified profile system
• Rich connecTons
• Updates across Yahoo!
• Link your external
accounts

Y! OS – Unified Open Profile

Y! OS – Unified Open Profile

Y! OS – Unified Open Profile

Y! OS – Open to 3rd‐par>es like never before
• Yahoo! Developer Network
• Developer Tools (YUI, etc)
• Social APIs
• Profiles
• ConnecTons
• Updates
• Data APIs
• OAuth
• Yahoo! Query Language
• Yahoo! ApplicaTon PlaOorm
• OpenSocial

Y! OS – The Open Stack
h3p://developer.yahoo.com/yos/

Y! Developer Network

What is Yahoo! Developer Network?
The Yahoo! Developer Network offers open source tools and
open data APIs to make it easy for developers to build
applica>ons and mashups.
• 50+ APIs / Web Services
– Developer Dashboard
– Tutorials + Code Samples
– API Documenta>on
Yahoo! User Interface libraries + ASTRA
•
Design Pa3erns Library
•
PHP / Python / Ruby Dev Centers
•
Blogs / Theater / Events / Evangelism
•

Y! Developer Network – YUI JS
• JavaScript Framework
– UTliTes ‐ YAHOO, Dom, Event, AnimaTon, Browser
History Manager, ConnecTon Manager, Cookie,
DataSource, Drag and Drop, Element, Get,
ImageLoader, JSON, Resize, Selector, Loader
– Controls / Widgets ‐ AutoComplete, Bu^on, Calendar,
Charts, Color Picker, DataTable, ImageCropper, Rich
Text Editor, Slider, Uploader
– Container (Module, Overlay, Panel, ToolTp, Dialog),
Layout Manager, Menu, TabView, TreeView
– Debug – Logger, Profiler, Test

Y! Developer Network – YUI CSS
• CSS FoundaTon
– Reset ‐ Neutralizes browser CSS styles
– Base ‐ Applies consistent style foundaTon
– Fonts ‐ FoundaTon for typography and font‐sizing
– Grids ‐ Thousands of wireframe layouts
• User Interface Design Pa^erns Library
– Proven soluTons to common interfaces
– h^p://developer.yahoo.com/ypa^erns/
– Grade Browser Support / Progressive Enhancement

Y! Developer Network – Documenta>on
• More than 275 funcTonal examples
– h^p://developer.yahoo.com/yui/examples/
• Yslow + Performance Rules
– h^p://developer.yahoo.com/performance
• YUI Blog
– h^p://yuiblog.com/
• Mailing List @ Yahoo! Groups
– h^p://tech.groups.yahoo.com/group/ydn‐
javascript/

Y! Developer Network

SearchMonkey + BOSS

A simple Blueprint Example

Yahoo! Open Stack ‐ OAuth

Yahoo! Open Stack ‐ OAuth
• 2‐legged & 3‐legged OAuth
• Consumer Key / Consumer Secret
• Similar to proprietary BBAuth, but open standard
h3p://developer.yahoo.com/oauth/

Y! Open Stack – Doing the Dance
h3p://oauth.net/core/1.0

Yahoo! Open Stack ‐ OpenID
• OpenID makes it easy for you to deliver a
simplified login experience for your users
• Yahoo! is an OpenID 2.0 provider – you can
use your Yahoo! username on an openid
enabled site
h3p://developer.yahoo.com/openid/

Y! OS – Rewire Yahoo!
• Updates across Yahoo!
• Open Apps for My Yahoo
• Open Apps for Mobile

Y! Open Stack – Social APIs
• Social Directory (read)
• Contacts (read)
• User Status (read / write)
• Updates (read / write)
• h3p://developer.yahoo.com/social

A Query Language for the Web

Y! Open Stack – YQL
• Thousands of Web Services that provide
valuable data
• Require Developers to read documentaTon
and form URLs/queries.
• Data is isolated
• Needs combining, tweaking, shaping even
aler it gets to the developer.

Y! Open Stack – YQL
• SQL‐Like Language
– Synonymous with Data access
– Familiar to developers
– Expressive enough to get the right data.
• Self Describing ‐ show, desc table
• Allows you to query, filter and join data across
Web Services.

YQL – Table Contents
YQL Command: DESC social.connecTons
61

YQL ‐ Verbs
• 3 Verbs
– show: lists the supported tables
– desc: describes the structure of a table
– select: fetches data Tables, Verbs, Filters

YQL Statements ‐ Basics
Syntax
SELECT what
FROM collecTon
WHERE filter condiTon
IN (sub‐select)
LIMIT n OFFSET nshow:

YQL Statements ‐ Collec>ons
Syntax ‐> Select ‐> Collec>on
• FROM collecTon
• Yahoo! WebServices
– Social Dir, Upcoming, MyblogLog, Y!Local,
Search(BOSS)
• External DataSources
– XML, Atom, RSS, JSON, CSV, HTML

YQL Statements – Where
Syntax ‐> Select ‐> WHERE clause
• Table data can be filtered in the WHERE clause
either
– Remotely by the table data source
– Locally by the YQL engine (dot notaTon)

YQL Statements ‐ Subselects
Syntax ‐> Select ‐> Sub‐Select
• IN (SELECT ...)
– Join across data sources
– Field IN (select guid from ...)
– Like SELECT but can return only N leaves
Get the profile for all my connec1ons:
select * from social.profile where guid in (select guid from social.connec?ons where
owner_guid = me)

YQL Statements – Table
Syntax ‐> Select ‐> Table Size
• Changing the Table Size
– Yahoo! Tables are limited to a small number by
default (10)
select * from local.search where zip=‘94089’ and query=‘pizza’
– Increase set size as parameters to CollecTon
select * from local.search(100) where zip=‘94089’ and query=‘pizza’

YQL ‐ Filters
• Filters: limi?ng condi?ons for the output
data.
– Follows a where clause Tables, Verbs, Filters
• select * from social.contact where guid=me
• select * from flickr.photos.search where
text=”Cat”

YQL – Available Tables
YQL Command: SHOW tables
72

YQL ‐ Open Tables
Delicious Twi^er
• •
Dopplr Weather
• •
Friendfeed Wesabe
• •
Github Whitepages
• •
New York Times Zillow
• •
Shopping ….
• •
Available on github ‐ h^p://github.com/spullara/yql‐tables/

YQL – Open Tables

YQL – Open Tables

YQL – Open Tables

YQL – Open Tables
• Schema defines mapping between YQL and
Endpoint
• Keys can either be query, path or matrix
parameters
• Keys can be marked as required
• YQL Compiler validates existence of required
keys

YQL – Query Formats
ProjecTon
‐ SELECT what FROM table
‐ SELECT * FROM social.connecTons
Local and Remote Filtering
‐ SELECT what FROM table WHERE filter
‐ SELECT * FROM social.profile WHERE guid = me
Sub‐selects ‐ Joining Data
‐ SELECT what FROM table WHERE fieldvalue IN (SELECT ...)
‐ SELECT * FROM social.profile WHERE guid
IN (SELECT guid FROM social.connecTons WHERE owner_guid=me)
Local Paging Control
‐ SELECT what FROM table WHERE filter LIMIT 10 OFFSET 50
‐ SELECT * FROM web.search WHERE query=\"madonna\" LIMIT 3 OFFSET 10
Remove Table Size Control
‐ SELECT what FROM table(0,500) WHERE condiTon
‐ SELECT * FROM web.search(0,10) WHERE query=\"madonna\" AND result.XXX = something
78

YQL – API End Points
OAuth Endpoint
• h^p://query.yahooapis.com/v1/yql?q=...
Public Endpoint
• h^p://query.yahooapis.com/v1/public/yql?q=
YQL Console
• h^p://developer.yahoo.com/yql/console

YQL + PIPES

YQL – Running a Query
81

YQL ‐ Examples
select * from social.connecTons
•
select * from delicious.feeds.popular
•
select * from flickr.photos.interesTngness
•
select * from friendfeed.status
•
select * from github.checkins
•

Y! Open Stack – Applica>on Planorm
• Allows developers the opportunity to deploy
their own web based applica>ons on Yahoo!
• Mul>ple Views: Small and Canvas
• Social Context: the new Yahoo! Social
Directory
• Developer Dashboard
• OpenSocial 0.8 Javascript APIs

Y! Open Stack – Open Applica>ons

Open Applica>on
Code Dive
What can you do with open apps?
102

What is YML?
• YML tags make it easy for you to create
applica>ons that access social data, such as a list
of the user’s friends.
• Similar in format to XML, YML provides
func>onality to Open Applica>ons in a safe and
standardized fashion. yml:friend‐selector
yml:visible‐to‐friends
• Will begin integra>ng into OSML

What is YML?
• Dynamic and secure interac>ons: Several
YML tags provide UI widgets and rich
interac>ons that normally require untrusted
javascript.

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

Caja – What is it?
Caja is a JavaScript sandbox of sorts. It saniTzes
JavaScript and HTML, removing unsafe code.
That code then runs in the browser. This
allows Yahoo to safely include externally
created JavaScript. Developers should expect
that they cannot do everything they would
normally do in a web applicaTon.

Y! Open Stack – Caja
• HTML / CSS / JavaScript securer
• Enforces standards
• One of the first to integrate Caja (and keep it running)
• h^p://code.google.com/p/google‐caja
• h^p://developer.yahoo.com/yap/guide/caja‐support.html

Caja – What is it?
• Caja prevents the use of arbitrary AcTveX
components, use of eval and iframes.
• External libraries like YUI are not supported.
• It does not allow document.write but
innerHTML is allowed.
• Objects in Caja cannot be extended by use of
obj.prototype.
• No direct access to real global objects.

Caja – JavaScript Before Cajoling

Caja – JavaScript Arer Cajoling

Caja & JavaScript – What doesn’t work?
• eval()
• new FuncTon()
• Strings as event handlers (node.onclick = '...';)
• Names ending with double / triple underscores
• with funcTon (with (obj) { ... })
• Implicit global variables (specify var variable)
• Calling a method as a funcTon
• document.write
• window.event
• .onclick
• OpenSocial gadgets.io.makeRequest return JS

Caja & HTML – What doesn’t work?
• name a^ributes with gadgets.io.makeRequest
• Custom a^ributes
• Custom tags
• Unclosed tags
• <embed>
• <iframe>
• <link rel=‘…
• javascript:void(0)
• Radio bu^ons in IE
• RelaTve url’s

Caja & IFRAME – Concerns
IFrame Concerns
• Drive‐by downloads
• Phishing a^acks
• No real content restricTons
Caja Implementa>on
• Blacklist all / Whitelist some model

Caja & CSS – What doesn’t work?
• * hacks
• _ hacks
• IE condiTonals
• Insert‐aler clear fix
• expression()
• @import
• Background images in IE

Caja – Best Prac>ces
• Use OpenSocial JavaScript standards
• Use W3C standards
• Use YML wherever possible
• Unit test all JavaScript
• Read the documentaTon (h^p://developer.yahoo.com/yos)
• ParTcipate in the forums (h^p://developer.yahoo.net/
forum/)

Caja Prac>cal – Running an AJAX Request

Caja Prac>cal – Working with JSON

Caja Prac>cal – Assigning Click Handlers
• Caja client side saniTzer 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 Prac>cal – Assigning Click Handlers

Caja Prac>cal – Assigning Click Handlers
Step 2 – Define your callback func>on

Y! Open Stack – SDKs
PHP SDK Currently Available
Open and OAuth Applica>ons
Ac>onScript 3 SDK Currently Available
Open Applica>ons
Java SDK in Development
Open and OAuth Applica>ons

Installing the YOS PHP SDK
1. Download the SDK
– http://developer.yahoo.com/social/sdk
2. Unzip yos_php_sdk-1.1
3. Get a Developer Key
– http://developer.yahoo.com/dashboard
4. Start to write some code

YOSSDK – Methods
3‐Legged OAuth 2‐Legged OAuth
getSessionedUser setSmallView (applicaTon)
(session)
getOwner (session) query (applicaTon)
getUser (session)
query (session)
getPresence (user)
setPresence (user)
listUpdates (user)
listConnecTonUpdates (user)
insertUpdate (user)
deleteUpdate (user)
loadProfile (user)
getConnecTons (user)
getContacts (user)
setSmallView (user)

YOSSDK – 2‐Legged OAuth
Used For:
‐ Public user data and open APIs

<?php
// Include the PHP SDK for YSP library.
require_once(\"yosdk/lib/Yahoo.inc\");
// Define values for keys required for authoriza>on
define(CONSUMER_KEY,\"dj0yJmk9ZDNwaXdQSEZ…j\");
define(CONSUMER_SECRET,\"37fe717538e0598e6c70d4262…\");
// The YahooApplica>on class is used for two‐legged authoriza>on, which doesn't need user
authoriza>on.
$two_legged_app = new YahooApplica>on(CONSUMER_KEY,CONSUMER_SECRET);
// Create queries for Flickr
$yql_request = 'select * from flickr.photos.search where user_id=\"28569531@N00\" and text=\"jump\"
limit 6';
// Make the request
$results = $two_legged_app‐>query($yql_request);
$photos = $results‐>query‐>results‐>photo;
// Build the output HTML
foreach($photos as $k=>$v) {
$imgs .= '<img src=\"h3p://farm' . $v‐>farm . '.sta>c.flickr.com/' . $v‐>server . '/' . $v‐>id . '_' . $v‐
>secret . '_m.jpg\" alt=\"Image' . $k . '\"/>' ;
}
echo \"<html><body>\" . $imgs . '</body></html>’;
?>

YOSSDK – 3‐Legged OAuth
Used For:
‐ Private data access

YOSSDK – Finding connec>ons
<?php
// Include the PHP SDK for YSP library.
require_once(\"yosdk/lib/Yahoo.inc\");
// Define values for keys required for authorizaTon
define(CONSUMER_KEY,\"dj0yJmk9ZDNwaXd…j\");
define(CONSUMER_SECRET,\"37fe717538e0598e6…\");
$session=YahooSession::requireSession(CONSUMER_KEY,CONSUMER_SECRET);
// Define YQL queries for the Social Directory APIs
$query = \"SELECT * FROM social.connecTons WHERE owner_guid=me LIMIT 2\";
$result = $session‐>query($query);
// Build the output HTML
echo(\"<html><body><pre><h2>ConnecTon Data</h2>\" );
var_dump($result) ;
echo(\"</pre></body></html>\");
?>

YOSSDK – Crea>ng an update
3‐Legged OAuth

YOSSDK – Se•ng the status of a user
3‐Legged OAuth

YOSSDK – Upda>ng the small view

YAP Applica>ons
How do I get started?
136

Building a YAP App : CommonGround
Experience: Basic Web Dev Knowledge – HTML/CSS/
Javascript
What we are building: Common ground – Find out what
you have in common with your social graph: music,
movies, books, hobbies.
What we will use: YOSSDK, YQL, YAP

Y! Applica>on Planorm – A good start
• Simple Scalable HosTng
– Joyent – Free OpenSocial Accelerators
– Google App Engine
– Amazon EC2 + S3
• Framework
– PHP (symfony)
– Python (Django)
– Ruby (Rails)

What will we learn?
How to work with the YOS SDK
•
Using social apis through YQL
•
Using any web data through YQL apis
•
Displaying social data with YML and YAP
•

What does it take?
Create an applicaTon in developer dashboard
•
Set applicaTon url in developer tool
•
Build applicaTon
•
Preview in developer tool
•
Push live in developer tool
•
Push to gallery
•

h3p://developer.yahoo.com/dashboard

CommonGround available on GitHub
h3p://github.com/dwhi3le/commonground

My Apps + Featured ApplicaTons

YAP Code Dive
Lets build a social app live
149

YAP Code Dive
Common Ques>ons
150

Ge•ng Started ‐ Documenta>on
Y!OS Main Overview ‐ JSLint ‐ h^p://www.jslint.com
h^p://developer.yahoo.com/yos
YAP Main Overview ‐ PHP SDK ‐
h^p://developer.yahoo.com/yap h^p://developer.yahoo.com/social/
YQL Docs ‐ sdk/
h^p://developer.yahoo.com/yql AS3 SDK ‐
YML Docs ‐ h^p://developer.yahoo.com/flash/
h^p://developer.yahoo.com/yap/yml yos/
YDN Forum –
h^p://developer.yahoo.com/forum
Caja ‐
YAP Dashboard ‐ h^p://code.google.com/p/google‐
h^p://developer.yahoo.com/ caja/
dashboard Caja Support ‐
YQL Console ‐ h^p://developer.yahoo.com/yap/
h^p://developer.yahoo.com/yql/ guide/caja‐support.html
console
ApplicaTon Gallery ‐
h^p://apps.yahoo.com/myapps

• I have an exisTng OpenSocial applicaTon. How do I get started?
• I have an exisTng Facebook applicaTon. How do I get started?
• Can I put ads in my applicaTon?
• How do I authenTcate OAuth using JavaScript?
• None of my styles are displaying, what’s happening?
• Why PHP / AS3 for the first SDK?
• setSmallView is not working? What’s going on?
• How do users find my applicaTon?

QUESTIONS?
(I will be around for the whole event, so please do say hello and ask quesTons)

WANT TO JOIN YAHOO?
WE ARE HIRING AND HAVE INTERNSHIPS!

ENJOY THE REST OF HACKU
EXAMPLES | TUTORIALS | CODE SAMPLES
DEVELOPER.YAHOO.COM