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

2. EXAMPLES | TUTORIALS | CODE SAMPLES
DEVELOPER.YAHOO.COM

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

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

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

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

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

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

9. WE ARE OPEN AT YAHOO!

10. PROGRESS. EVERYONE IS WORKING
TOGETHER!

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

13. The goals of Yahoo! Open Strategy

14. 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

17. Y! OS – Unified Open Profile

18. Y! OS – Unified Open Profile

19. Y! OS – Unified Open Profile

24. 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

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

27. Y! Developer Network

28. 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

31. 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

32. 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

33. 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/

34. Y! Developer Network

42. SearchMonkey + BOSS

45. A simple Blueprint Example

47. Yahoo! Open Stack ‐ OAuth

48. 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/

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

53. 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/

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

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

58. A Query Language for the Web

59. 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.

60. 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.

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

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

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

64. 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

67. 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)

68. 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)

70. 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’

71. 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”

72. YQL – Available Tables
YQL Command: SHOW tables
72

73. 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/

74. YQL – Open Tables

75. YQL – Open Tables

76. YQL – Open Tables

77. 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

78. 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=quot;madonnaquot; LIMIT 3 OFFSET 10
Remove Table Size Control
‐ SELECT what FROM table(0,500) WHERE condiTon
‐ SELECT * FROM web.search(0,10) WHERE query=quot;madonnaquot; AND result.XXX = something
78

79. 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

80. YQL + PIPES

81. YQL – Running a Query
81

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

84. 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

85. Y! Open Stack – Open Applica>ons

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

107. 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

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

109. 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

110. 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.

111. 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

112. 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.

113. Caja – JavaScript Before Cajoling

114. Caja – JavaScript Arer Cajoling

115. 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

116. 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

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

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

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

120. Caja Prac>cal – Running an AJAX Request

121. Caja Prac>cal – Working with JSON

122. 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>

123. Caja Prac>cal – Assigning Click Handlers

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

125. 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

126. 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

127. YOSSDK – Methods
3‐Legged OAuth 2‐Legged OAuth
getSessionedUser (session) setSmallView (applicaTon)
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)

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

129. <?php
// Include the PHP SDK for YSP library.
require_once(quot;yosdk/lib/Yahoo.incquot;);
// Define values for keys required for authoriza>on
define(CONSUMER_KEY,quot;dj0yJmk9ZDNwaXdQSEZ…jquot;);
define(CONSUMER_SECRET,quot;37fe717538e0598e6c70d4262…quot;);
// 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=quot;28569531@N00quot; and text=quot;jumpquot;
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=quot;h3p://farm' . $v‐>farm . '.sta>c.flickr.com/' . $v‐>server . '/' . $v‐>id . '_' . $v‐
>secret . '_m.jpgquot; alt=quot;Image' . $k . 'quot;/>' ;
}
echo quot;<html><body>quot; . $imgs . '</body></html>’;
?>

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

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

133. YOSSDK – Crea>ng an update
3‐Legged OAuth

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

135. YOSSDK – Upda>ng the small view

136. YAP Applica>ons
How do I get started?
136

137. 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

140. 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)

141. 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

142. 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

143. h3p://developer.yahoo.com/dashboard

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

148. My Apps + Featured ApplicaTons

149. YAP Code Dive
Lets build a social app live
149

150. YAP Code Dive
Common Ques>ons
150

151. 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

152. • 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?

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

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

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