Diving Into The Yahoo Open Stack @ SF PHP Meetup

Diving into the Yahoo! Open Stack  

h3p://developer.yahoo.com/ Dus>n Whi3le – dus>n@yahoo‐inc.com 

DEVELOPER.YAHOO.COM EXAMPLES | TUTORIALS | CODE SAMPLES 

YAHOO! IS POWERED BY OPEN SOURCE TECHNOLOGIES 

FREEBSD | LINUX | APACHE | PHP | MYSQL | BUGZILLA | HADOOP | SYMFONY 

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

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

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

YAHOO! SHARES ITS DATA THROUGH OPEN APIS AND WEB SERVICES 

YQL | PIPES | BOSS | CONTACTS | UPDATES | MAIL | DELICIOUS | FLICKR | UPCOMING | HOTJOBS | MAPS | FIREEAGLE | GEOLOCATION | LOCAL | TRAFFIC | WEATHER | 

MUSIC | ANSWERS | SHOPPING | FINANCE | TRAVEL 

YAHOO! ENGAGES COMMUNITIES WITH OPEN HACK EVENTS AROUND THE WORLD 

Hack Days | HackU | Tech Talks | YDN Theater 

WE ARE OPEN AT YAHOO! 

PROGRESS. EVERYONE IS WORKING TOGETHER! 

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

h3p://developer.yahoo.com/yos/ 

Y! OS – The Open Stack 

developer.yahoo.com 

developer.yahoo.com 

developer.yahoo.com 

developer.yahoo.com 

developer.yahoo.com 

SearchMonkey + BOSS 

A simple Blueprint Example 

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 

What is Yahoo! Developer Network? 

•  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 JS 

•  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 – YUI CSS 

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

Y! Developer Network – Documenta>on 

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/ 

h3p://oauth.net/core/1.0 

Y! Open Stack – Doing the Dance  

A Query Language for the Web 

SELECT  * FROM INTERNET 

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

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

Y! Open Stack – YQL 

50 

YQL Command: SHOW tables 

YQL – Available Tables 

•  3 Verbs 

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

YQL ‐ Verbs 

53 

YQL Command: DESC social.connecOons 

YQL – Table Contents 

YQL Statements ‐ Basics 

SELECT what FROM collecOon 

WHERE filter condiOon 

IN (sub‐select) 

LIMIT n OFFSET nshow: 

Syntax 

YQL Statements ‐ Collec>ons 

•  FROM collecOon •  Yahoo! WebServices 

– Social Dir, Upcoming, MyblogLog, Y!Local, Search(BOSS) 

•  External DataSources – XML, Atom, RSS, JSON, CSV, HTML  

Syntax ‐> Select ‐> Collec>on 

•  Table data can be filtered in the WHERE clause either – Remotely by the table data source – Locally by the YQL engine (dot notaOon) 

Syntax ‐> Select ‐> WHERE clause 

YQL Statements – Where 

YQL Statements ‐ Subselects 

•  IN (SELECT ...) –  Join across data sources – Field IN (select guid from ...) – Like SELECT but can return only N leaves 

Syntax ‐> Select ‐> Sub‐Select 

Get the profile for all my connec1ons: 

select * from social.profile where guid in (select guid from social.connec?ons where owner_guid = me) 

•  Delicious •  Dopplr •  Friendfeed •  Github •  New York Times •  Shopping 

•  TwiXer •  Weather •  Wesabe •  Whitepages 

•  Zillow •  …. 

Available on github ‐ hXp://github.com/spullara/yql‐tables/ 

YQL ‐ Open 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  

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 – API End Points 

66 

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 

YQL – Query Formats 

67 

YQL – Running a Query with YOS SDK 

YQL + PIPES 

•  select * from social.connecOons 

•  select * from delicious.feeds.popular 

•  select * from flickr.photos.interesOngness 

•  select * from friendfeed.status 

•  select * from github.checkins 

YQL ‐ Examples 

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 

84 

Open Applica>on Code Dive 

 What can you do with open apps? 

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 (Large View) 

yml:a yml:ad yml:audio yml:form yml:friend‐selector yml:if‐env yml:message yml:name yml:profile‐pic yml:pronoun yml:share yml:swf yml:user‐badge   

YML Lite Tags (Small View) 

yml:a yml:audio yml:form yml:if‐env yml:name yml:profile‐pic yml:pronoun yml:user‐badge 

YML Tags 

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. 

Caja – What is it?

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 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 – What is it?

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 

getSessionedUser    (session) getOwner                        (session) getUser                           (session) query                               (session) getPresence                    (user) setPresence                    (user) listUpdates                      (user) listConnecOonUpdates    (user) insertUpdate                   (user) deleteUpdate                  (user) loadProfile                      (user) getConnecOons              (user) getContacts                    (user) setSmallView                 (user) 

2‐Legged OAuth 

setSmallView    (applicaOon) query             (applicaOon)         

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>’; ?> 

<?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 – Finding connec>ons 

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 

117 

Open App Code Dive  Lets build a social app live  

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 

Building an Open App : CommonGround 

•  Scalable HosOng –  Joyent – Free OpenSocial Accelerators – Google App Engine – Amazon EC2 + S3 

•  Framework – PHP (symfony) 

– Python (Django) – Ruby (Rails) 

Open Apps – A good founda>on 

•  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 will we learn? 

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 

Five steps to an Open App 

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 ‐ 

hXp://developer.yahoo.com/yos YAP Main Overview ‐ 

hXp://developer.yahoo.com/yap YQL Docs ‐ 

hXp://developer.yahoo.com/yql YML Docs ‐ 

hXp://developer.yahoo.com/yap/yml  YDN Forum –        hXp://developer.yahoo.com/forum YAP Dashboard ‐ 

hXp://developer.yahoo.com/dashboard 

YQL Console ‐ hXp://developer.yahoo.com/yql/console  

ApplicaOon Gallery ‐ hXp://apps.yahoo.com/myapps 

JSLint ‐ hXp://www.jslint.com 

PHP SDK ‐ hXp://developer.yahoo.com/social/sdk/ 

AS3 SDK ‐ hXp://developer.yahoo.com/flash/yos/ 

Caja ‐ hXp://code.google.com/p/google‐caja/  

Caja Support ‐ hXp://developer.yahoo.com/yap/guide/caja‐support.html  

133 

Open Apps Code Dive  Common Ques>ons  

•  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! 

DEVELOPER.YAHOO.COM EXAMPLES | TUTORIALS | CODE SAMPLES 

ENJOY THE REST OF SF PHP MEETUP