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

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

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

developer.yahoo.com

developer.yahoo.com

developer.yahoo.com

developer.yahoo.com

developer.yahoo.com

SearchMonkey + BOSS

A simple Blueprint Example

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
– UOliOes ‐ YAHOO, Dom, Event, AnimaOon, Browser
History Manager, ConnecOon Manager, Cookie,
DataSource, Drag and Drop, Element, Get,
ImageLoader, JSON, Resize, Selector, Loader
– Controls / Widgets ‐ AutoComplete, BuXon, Calendar,
Charts, Color Picker, DataTable, ImageCropper, Rich
Text Editor, Slider, Uploader
– Container (Module, Overlay, Panel, ToolOp, Dialog),
Layout Manager, Menu, TabView, TreeView
– Debug – Logger, Profiler, Test

Y! Developer Network – YUI CSS
• CSS FoundaOon
– Reset ‐ Neutralizes browser CSS styles
– Base ‐ Applies consistent style foundaOon
– Fonts ‐ FoundaOon for typography and font‐sizing
– Grids ‐ Thousands of wireframe layouts
• User Interface Design PaXerns Library
– Proven soluOons to common interfaces
– hXp://developer.yahoo.com/ypaXerns/
– Grade Browser Support / Progressive Enhancement

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

Yahoo! Open Strategy

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
• ConnecOons
• Updates
• Data APIs
• OAuth
• Yahoo! Query Language
• Yahoo! ApplicaOon Plahorm
• OpenSocial

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

A Query Language for the Web
SELECT * FROM INTERNET

Before YQL
• Thousands of Web Services that provide
valuable data
• Require developers to read documentaOon
and form URLs/queries.
• Data is isolated
• Needs combining, tweaking, shaping even
aker 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 – Available Tables
YQL Command: SHOW tables
50

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

YQL – Table Contents
YQL Command: DESC social.connecOons
53

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

YQL Statements ‐ Collec>ons
Syntax ‐> Select ‐> Collec>on
• FROM collecOon
• 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 notaOon)

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 ‐ Open Tables
Delicious TwiXer
• •
Dopplr Weather
• •
Friendfeed Wesabe
• •
Github Whitepages
• •
New York Times Zillow
• •
Shopping ….
• •
Available on github ‐ hXp://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 – API End Points
OAuth Endpoint
• hXp://query.yahooapis.com/v1/yql?q=...
Public Endpoint
• hXp://query.yahooapis.com/v1/public/yql?q=
YQL Console
• hXp://developer.yahoo.com/yql/console

YQL – Query Formats
ProjecOon
‐ SELECT what FROM table
‐ SELECT * FROM social.connecOons
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.connecOons 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 condiOon
‐ SELECT * FROM web.search(0,10) WHERE query=\"madonna\" AND result.XXX = something
66

YQL – Running a Query with YOS SDK
67

YQL + PIPES

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

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

Y! Open Stack – Open Applica>ons

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

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

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 saniOzes
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 applicaOon.

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

Caja – What is it?
• Caja prevents the use of arbitrary AcOveX
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 Amer Cajoling

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

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

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

Caja & CSS – What doesn’t work?
• * hacks
• _ hacks
• IE condiOonals
• Insert‐aker 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 documentaOon (hXp://developer.yahoo.com/yos)
• ParOcipate in the forums (hXp://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 saniOzer 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 (applicaOon)
(session)
getOwner (session) query (applicaOon)
getUser (session)
query (session)
getPresence (user)
setPresence (user)
listUpdates (user)
listConnecOonUpdates (user)
insertUpdate (user)
deleteUpdate (user)
loadProfile (user)
getConnecOons (user)
getContacts (user)
setSmallView (user)

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

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

<?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 – Finding connec>ons
<?php
// Include the PHP SDK for YSP library.
require_once(\"yosdk/lib/Yahoo.inc\");
// Define values for keys required for authorizaOon
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.connecOons WHERE owner_guid=me LIMIT 2\";
$result = $session‐>query($query);
// Build the output HTML
echo(\"<html><body><pre><h2>ConnecOon 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

Open App Code Dive
Lets build a social app live
117

Building an Open App :
CommonGround
Experience: Basic Web Dev Knowledge – PHP/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

Open Apps – A good founda>on
• Scalable HosOng
– 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
•

Five steps to an Open App
1. Create an applicaOon in developer dashboard
2. Set applicaOon URL in developer tool
3. Build applicaOon
4. Preview in developer tool
5. Push live in developer tool

h3p://developer.yahoo.com/dashboard

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

My Apps + Featured ApplicaOons

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

Open Apps Code Dive
Common Ques>ons
133

• I have an exisOng OpenSocial applicaOon. How do I get started?
• I have an exisOng Facebook applicaOon. How do I get started?
• Can I put ads in my applicaOon?
• How do I authenOcate 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 applicaOon?

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

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

ENJOY THE REST OF SF PHP MEETUP
EXAMPLES | TUTORIALS | CODE SAMPLES
DEVELOPER.YAHOO.COM