the yahoo open stack

Diving into the Yahoo! Open Stack

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

DEVELOPER.YAHOO.COM EXAMPLES|TUTORIALS|CODESAMPLES

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

YAHOO! HIRES OPEN SOURCE DEVELOPERS RASMUSLERDORF|DOUGCROCKFORD|DOUGCUTTING|CHRISTIANHEILMANN

YAHOO! GIVES BACK TO OPEN SOURCE YUI|BROWSERPLUS|DESIGNPATTERNS|R3|YSLOW+PERFORMANCERULES

YAHOO! ENGAGES COMMUNITIES WITH OPEN HACK EVENTS AROUND THE WORLD

HackDays|HackU|TechTalks|YDNTheater

WE ARE OPEN AT YAHOO!

PROGRESS. EVERYONE IS WORKING TOGETHER!

OPEN PLATFORMS + COLLABORATION OPENID|XRDS|OAUTH|PORTABLECONTACTS|OPENSOCIAL

The goals of Yahoo! Open Strategy

Y! OS – Establish a social dimension

•  UnderlyingsocialplaOorm•  SocialAPIsw/OpenSocial

•  Unifiedprofilesystem

•  RichconnecTons•  UpdatesacrossYahoo!

•  Linkyourexternalaccounts

Y! OS – Unified Open Profile

Y! OS – Open to 3rd‐par>es like never before

•  Yahoo!DeveloperNetwork•  DeveloperTools(YUI,etc)

•  SocialAPIs•  Profiles•  ConnecTons•  Updates

•  DataAPIs•  OAuth

•  Yahoo!QueryLanguage•  Yahoo!ApplicaTonPlaOorm

•  OpenSocial

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

Y! OS – The Open Stack

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

What is Yahoo! Developer Network?

•  JavaScriptFramework– UTliTes‐YAHOO,Dom,Event,AnimaTon,BrowserHistoryManager,ConnecTonManager,Cookie,DataSource,DragandDrop,Element,Get,ImageLoader,JSON,Resize,Selector,Loader

–  Controls/Widgets‐AutoComplete,Bu^on,Calendar,Charts,ColorPicker,DataTable,ImageCropper,RichTextEditor,Slider,Uploader

–  Container(Module,Overlay,Panel,ToolTp,Dialog),LayoutManager,Menu,TabView,TreeView

– Debug–Logger,Profiler,Test

Y! Developer Network – YUI JS

•  CSSFoundaTon– Reset‐NeutralizesbrowserCSSstyles– Base‐AppliesconsistentstylefoundaTon– Fonts‐FoundaTonfortypographyandfont‐sizing– Grids‐Thousandsofwireframelayouts

•  UserInterfaceDesignPa^ernsLibrary– ProvensoluTonstocommoninterfaces– h^p://developer.yahoo.com/ypa^erns/

– GradeBrowserSupport/ProgressiveEnhancement

Y! Developer Network – YUI CSS

•  Morethan275funcTonalexamples– h^p://developer.yahoo.com/yui/examples/

•  Yslow+PerformanceRules– h^p://developer.yahoo.com/performance

•  YUIBlog– h^p://yuiblog.com/

•  MailingList@Yahoo!Groups– h^p://tech.groups.yahoo.com/group/ydn‐javascript/

Y! Developer Network – Documenta>on

Y! Developer Network

SearchMonkey + BOSS

A simple Blueprint Example

Yahoo! Open Stack ‐ OAuth

Yahoo! Open Stack ‐ OAuth • 2‐legged&3‐leggedOAuth• ConsumerKey/ConsumerSecret• SimilartoproprietaryBBAuth,butopenstandard

h3p://developer.yahoo.com/oauth/

h3p://oauth.net/core/1.0

Y! Open Stack – Doing the Dance

Yahoo! Open Stack ‐ OpenID

•  OpenIDmakesiteasyforyoutodeliverasimplifiedloginexperienceforyourusers

•  Yahoo!isanOpenID2.0provider–youcanuseyourYahoo!usernameonanopenidenabledsite

h3p://developer.yahoo.com/openid/

Y! OS – Rewire Yahoo!

•  UpdatesacrossYahoo!•  OpenAppsforMyYahoo

•  OpenAppsforMobile

Y! Open Stack – Social APIs

•  SocialDirectory(read)

•  Contacts(read)

•  UserStatus(read/write)

•  Updates(read/write)

•  h3p://developer.yahoo.com/social

A Query Language for the Web

•  ThousandsofWebServicesthatprovidevaluabledata

•  RequireDeveloperstoreaddocumentaTonandformURLs/queries.

•  Dataisisolated•  Needscombining,tweaking,shapingevenaleritgetstothedeveloper.

Y! Open Stack – YQL

•  SQL‐LikeLanguage– SynonymouswithDataaccess

– Familiartodevelopers– Expressiveenoughtogettherightdata.

•  SelfDescribing‐show,desctable•  Allowsyoutoquery,filterandjoindataacrossWebServices.

Y! Open Stack – YQL

61

YQLCommand:DESCsocial.connecTons

YQL – Table Contents

•  3 Verbs

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

YQL ‐ Verbs

YQL Statements ‐ Basics

SELECTwhatFROMcollecTon

WHEREfiltercondiTon

IN(sub‐select)

LIMITnOFFSETnshow:

Syntax

YQL Statements ‐ Collec>ons

•  FROMcollecTon•  Yahoo!WebServices

– SocialDir,Upcoming,MyblogLog,Y!Local,Search(BOSS)

•  ExternalDataSources– XML,Atom,RSS,JSON,CSV,HTML

Syntax ‐> Select ‐> Collec>on

•  TabledatacanbefilteredintheWHEREclauseeither– Remotelybythetabledatasource– LocallybytheYQLengine(dotnotaTon)

Syntax ‐> Select ‐> WHERE clause

YQL Statements – Where

YQL Statements ‐ Subselects

•  IN(SELECT...)–  Joinacrossdatasources– FieldIN(selectguidfrom...)– LikeSELECTbutcanreturnonlyNleaves

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)

•  ChangingtheTableSize– Yahoo!Tablesarelimitedtoasmallnumberbydefault(10)

–  IncreasesetsizeasparameterstoCollecTon

select * from local.search(100) where zip=‘94089’ and query=‘pizza’

Syntax ‐> Select ‐> Table Size

select * from local.search where zip=‘94089’ and query=‘pizza’

YQL Statements – Table

•  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 ‐ Filters

72

YQLCommand:SHOWtables

YQL – Available Tables

•  Delicious•  Dopplr•  Friendfeed•  Github•  NewYorkTimes•  Shopping

•  Twi^er•  Weather•  Wesabe•  Whitepages

•  Zillow•  ….

Availableongithub‐h^p://github.com/spullara/yql‐tables/

YQL ‐ Open Tables

YQL – Open Tables

YQL – Open Tables

•  SchemadefinesmappingbetweenYQLandEndpoint

•  Keyscaneitherbequery,pathormatrixparameters

•  Keyscanbemarkedasrequired

•  YQLCompilervalidatesexistenceofrequiredkeys

78

ProjecTon‐SELECTwhatFROMtable‐SELECT*FROMsocial.connecTons

LocalandRemoteFiltering‐SELECTwhatFROMtableWHEREfilter‐SELECT*FROMsocial.profileWHEREguid=me

Sub‐selects‐JoiningData‐SELECTwhatFROMtableWHEREfieldvalueIN(SELECT...)‐SELECT*FROMsocial.profileWHEREguidIN(SELECTguidFROMsocial.connecTonsWHEREowner_guid=me)

LocalPagingControl‐SELECTwhatFROMtableWHEREfilterLIMIT10OFFSET50‐SELECT*FROMweb.searchWHEREquery="madonna"LIMIT3OFFSET10

RemoveTableSizeControl‐SELECTwhatFROMtable(0,500)WHEREcondiTon‐SELECT*FROMweb.search(0,10)WHEREquery="madonna"ANDresult.XXX=something

YQL – Query Formats

OAuthEndpoint•  h^p://query.yahooapis.com/v1/yql?q=...

PublicEndpoint•  h^p://query.yahooapis.com/v1/public/yql?q=

YQLConsole•  h^p://developer.yahoo.com/yql/console

YQL – API End Points

YQL + PIPES

81

YQL – Running a Query

•  select*fromsocial.connecTons

•  select*fromdelicious.feeds.popular

•  select*fromflickr.photos.interesTngness

•  select*fromfriendfeed.status

•  select*fromgithub.checkins

YQL ‐ Examples

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

102

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

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

yml:ayml:adyml:audioyml:formyml:friend‐selectoryml:if‐envyml:messageyml:nameyml:profile‐picyml:pronounyml:shareyml:swfyml:user‐badge

YML Lite Tags (Small View)

yml:ayml:audioyml:formyml:if‐envyml:nameyml:profile‐picyml:pronounyml:user‐badge

YML Tags

CajaisaJavaScriptsandboxofsorts.ItsaniTzesJavaScriptandHTML,removingunsafecode.Thatcodethenrunsinthebrowser.ThisallowsYahootosafelyincludeexternally

createdJavaScript.Developersshouldexpectthattheycannotdoeverythingtheywould

normallydoinawebapplicaTon.

Caja – What is it?

Y! Open Stack – Caja

•  HTML/CSS/JavaScriptsecurer

•  Enforcesstandards

•  OneofthefirsttointegrateCaja(andkeepitrunning)

•  h^p://code.google.com/p/google‐caja

•  h^p://developer.yahoo.com/yap/guide/caja‐support.html

•  CajapreventstheuseofarbitraryAcTveXcomponents,useofevalandiframes.

•  ExternallibrarieslikeYUIarenotsupported.•  Itdoesnotallowdocument.writebutinnerHTMLisallowed.

•  ObjectsinCajacannotbeextendedbyuseofobj.prototype.

•  Nodirectaccesstorealglobalobjects.

Caja – What is it?

Caja – JavaScript Before Cajoling

Caja – JavaScript Arer Cajoling

Caja & JavaScript – What doesn’t work? •  eval()

•  newFuncTon()

•  Stringsaseventhandlers(node.onclick='...';)

•  Namesendingwithdouble/tripleunderscores

•  withfuncTon(with(obj){...})

•  Implicitglobalvariables(specifyvarvariable)

•  CallingamethodasafuncTon

•  document.write

•  window.event

•  .onclick

•  OpenSocialgadgets.io.makeRequestreturnJS

Caja & HTML – What doesn’t work? •  namea^ributeswithgadgets.io.makeRequest

•  Customa^ributes

•  Customtags

•  Unclosedtags

•  <embed>

•  <iframe>

•  <linkrel=‘…

•  javascript:void(0)•  Radiobu^onsinIE

•  RelaTveurl’s

Caja & IFRAME – Concerns

IFrame Concerns

•  Drive‐bydownloads

•  Phishinga^acks

•  NorealcontentrestricTons

Caja Implementa>on

•  Blacklistall/Whitelistsomemodel

Caja & CSS – What doesn’t work? •  *hacks

•  _hacks

•  IEcondiTonals

•  Insert‐alerclearfix

•  expression()

•  @import

•  BackgroundimagesinIE

Caja – Best Prac>ces

•  UseOpenSocialJavaScriptstandards•  UseW3Cstandards

•  UseYMLwhereverpossible

•  UnittestallJavaScript•  ReadthedocumentaTon(h^p://developer.yahoo.com/yos)

•  ParTcipateintheforums(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

•  CajaclientsidesaniTzerstripsJavaScriptwhen

insertedinDOMfollowingAJAXrequests

•  HowdoIassignclickhandlersthen?

Given: DOM Node with an ID

<divid=‘myClickDiv’>ClickMe!</div>


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)listConnecTonUpdates (user)insertUpdate (user)deleteUpdate (user)loadProfile (user)getConnecTons (user)getContacts (user)setSmallView (user)

2‐Legged OAuth

setSmallView (applicaTon)query (applicaTon)

YOSSDK – 2‐Legged OAuth

UsedFor:

‐ PublicuserdataandopenAPIs

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

UsedFor:

‐ Privatedataaccess

<?php//IncludethePHPSDKforYSPlibrary.require_once("yosdk/lib/Yahoo.inc");

//DefinevaluesforkeysrequiredforauthorizaTondefine(CONSUMER_KEY,"dj0yJmk9ZDNwaXd…j");define(CONSUMER_SECRET,"37fe717538e0598e6…");

$session=YahooSession::requireSession(CONSUMER_KEY,CONSUMER_SECRET);

//DefineYQLqueriesfortheSocialDirectoryAPIs$query="SELECT*FROMsocial.connecTonsWHEREowner_guid=meLIMIT2";$result=$session‐>query($query);

//BuildtheoutputHTMLecho("<html><body><pre><h2>ConnecTonData</h2>");var_dump($result);echo("</pre></body></html>");?>

YOSSDK – Finding connec>ons

YOSSDK – Crea>ng an update

3‐LeggedOAuth

YOSSDK – Se�ng the status of a user

3‐LeggedOAuth

YOSSDK – Upda>ng the small view

136

YAP Applica>ons How do I get started?

Experience: BasicWebDevKnowledge–HTML/CSS/Javascript

What we are building: Commonground–Findoutwhatyouhaveincommonwithyoursocialgraph:music,movies,books,hobbies.

What we will use: YOSSDK,YQL,YAP

Building a YAP App : CommonGround

•  SimpleScalableHosTng–  Joyent–FreeOpenSocialAccelerators– GoogleAppEngine– AmazonEC2+S3

•  Framework– PHP(symfony)

– Python(Django)– Ruby(Rails)

Y! Applica>on Planorm – A good start

•  HowtoworkwiththeYOSSDK•  UsingsocialapisthroughYQL•  UsinganywebdatathroughYQLapis•  DisplayingsocialdatawithYMLandYAP

What will we learn?

•  CreateanapplicaTonindeveloperdashboard•  SetapplicaTonurlindevelopertool•  BuildapplicaTon•  Previewindevelopertool•  Pushliveindevelopertool•  Pushtogallery

What does it take?

h3p://developer.yahoo.com/dashboard

CommonGround available on GitHub

h3p://github.com/dwhi3le/commonground

MyApps+FeaturedApplicaTons

149

YAP Code Dive Lets build a social app live

150

YAP Code Dive Common Ques>ons

Ge�ng Started ‐ Documenta>on Y!OSMainOverview‐

h^p://developer.yahoo.com/yosYAPMainOverview‐

h^p://developer.yahoo.com/yapYQLDocs‐

h^p://developer.yahoo.com/yqlYMLDocs‐

h^p://developer.yahoo.com/yap/ymlYDNForum–h^p://developer.yahoo.com/forumYAPDashboard‐

h^p://developer.yahoo.com/dashboard

YQLConsole‐h^p://developer.yahoo.com/yql/console

ApplicaTonGallery‐h^p://apps.yahoo.com/myapps

JSLint‐h^p://www.jslint.com

PHPSDK‐h^p://developer.yahoo.com/social/sdk/

AS3SDK‐h^p://developer.yahoo.com/flash/yos/

Caja‐h^p://code.google.com/p/google‐caja/

CajaSupport‐h^p://developer.yahoo.com/yap/guide/caja‐support.html

•  IhaveanexisTngOpenSocialapplicaTon.HowdoIgetstarted?

•  IhaveanexisTngFacebookapplicaTon.HowdoIgetstarted?

•  CanIputadsinmyapplicaTon?

•  HowdoIauthenTcateOAuthusingJavaScript?

•  Noneofmystylesaredisplaying,what’shappening?

•  WhyPHP/AS3forthefirstSDK?

•  setSmallViewisnotworking?What’sgoingon?

•  HowdousersfindmyapplicaTon?

QUESTIONS? (Iwillbearoundforthewholeevent,sopleasedosayhelloandaskquesTons)

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

DEVELOPER.YAHOO.COM EXAMPLES|TUTORIALS|CODESAMPLES

ENJOY THE REST OF HACKU

the yahoo open stack

Technology