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 
           TECHNO...
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
|
GEOLOCATI...
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/
OpenS...
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

                      •  Deve...
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...
Y! Developer Network – YUI JS 

•  JavaScript
Framework

  –  UTliTes
‐
YAHOO,
Dom,
Event,
AnimaTon,
Browser

     History...
Y! Developer Network – YUI CSS 

•  CSS
FoundaTon

  –  Reset
‐
Neutralizes
browser
CSS
styles

  –  Base
‐
Applies
consis...
Y! Developer Network – Documenta>on 

•  More
than
275
funcTonal
examples

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

...
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
...
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...
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
...
A Query Language for the Web 
Y! Open Stack – YQL 

•  Thousands
of
Web
Services
that
provide

   valuable
data

•  Require
Developers
to
read
documenta...
Y! Open Stack – YQL 

•  SQL‐Like
Language

  –  Synonymous
with
Data
access

  –  Familiar
to
developers

  –  Expressive...
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 
   –  s...
YQL Statements ‐ Basics

Syntax 


SELECT
what

FROM
collecTon

WHERE
filter
condiTon

IN
(sub‐select)

LIMIT
n
OFFSET
nsho...
YQL Statements ‐ Collec>ons

Syntax ‐> Select ‐> Collec>on 


•  FROM
collecTon

•  Yahoo!
WebServices

    –  Social
Dir,...
YQL Statements – Where


Syntax ‐> Select ‐> WHERE clause 


•  Table
data
can
be
filtered
in
the
WHERE
clause

   either

...
YQL Statements ‐ Subselects

Syntax ‐> Select ‐> Sub‐Select 


•  IN
(SELECT
...)

     –  Join
across
data
sources

     ...
YQL Statements – Table

Syntax ‐> Select ‐> Table Size 


•  Changing
the
Table
Size

     –  Yahoo!
Tables
are
limited
to...
YQL ‐ Filters 

•  Filters: limi?ng condi?ons for the output 
   data.  
  –  Follows a where clause Tables, Verbs, Filter...
YQL – Available Tables 


YQL
Command:
SHOW
tables





                              72

YQL ‐ Open Tables 

    •    Delicious
                               •    Twi^er

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

   ...
YQL – Query Formats

ProjecTon

‐
SELECT
what
FROM
table

‐
SELECT
*
FROM
social.connecTons


Local
and
Remote
Filtering

...
YQL – API End Points 

OAuth
Endpoint

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


Public
Endpoint


•  h^p://query.yahooa...
YQL + PIPES 
YQL – Running a Query 




          81

YQL ‐ Examples 


•    select
*
from
social.connecTons

•    select
*
from
delicious.feeds.popular

•    select
*
from
flic...
Y! Open Stack – Applica>on Planorm 
•  Allows developers the opportunity to deploy 
   their own web based applica>ons on ...
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 th...
What is YML?

•  Dynamic and secure interac>ons: Several 
   YML tags provide UI widgets and rich 
   interac>ons that nor...
YML Tags 
YML Tags (Large View)        YML Lite Tags (Small View) 

yml:a
                       yml:a

yml:ad
           ...
Caja – What is it?


Caja
is
a
JavaScript
sandbox
of
sorts.

It
saniTzes

  JavaScript
and
HTML,
removing
unsafe
code.


 ...
Y! Open Stack – Caja 

•  HTML
/
CSS
/
JavaScript
securer

•  Enforces
standards

•  One
of
the
first
to
integrate
Caja
(an...
Caja – What is it?

•  Caja
prevents
the
use
of
arbitrary
AcTveX

   components,
use
of
eval
and
iframes.

•  External
lib...
Caja – JavaScript Before Cajoling 
Caja – JavaScript Arer Cajoling 
Caja & JavaScript – What doesn’t work?
•  eval()

•  new
FuncTon()

•  Strings
as
event
handlers
(node.onclick
=
'...';)

...
Caja & HTML – What doesn’t work?
•  name
a^ributes
with
gadgets.io.makeRequest

•  Custom
a^ributes

•  Custom
tags

•  Un...
Caja & IFRAME – Concerns

IFrame Concerns 
•  Drive‐by
downloads


•  Phishing
a^acks


•  No
real
content
restricTons



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

•  _
hacks

•  IE
condiTonals

•  Insert‐aler
clear
fix

•  expression()

•  @i...
Caja – Best Prac>ces 

•  Use
OpenSocial
JavaScript
standards

•  Use
W3C
standards

•  Use
YML
wherever
possible

•  Unit...
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
follow...
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 A...
Installing the YOS PHP SDK 
1.  Download the SDK

    –  http://developer.yahoo.com/social/sdk

2.  Unzip yos_php_sdk-1.1
...
YOSSDK – Methods 
3‐Legged OAuth                                   2‐Legged OAuth 
getSessionedUser 
                 
(se...
YOSSDK – 2‐Legged OAuth 




Used
For:

‐ 
Public
user
data
and
open
APIs

<?php 
// Include the PHP SDK for YSP library. 
require_once(quot;yosdk/lib/Yahoo.incquot;); 

// Define values for keys re...
YOSSDK – 3‐Legged OAuth 




Used
For:

‐ 
Private
data
access

YOSSDK – Finding connec>ons 
<?php

//
Include
the
PHP
SDK
for
YSP
library.

require_once(quot;yosdk/lib/Yahoo.incquot;);
...
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...
Y! Applica>on Planorm – A good start 

 •  Simple
Scalable
HosTng

   –  Joyent
–
Free
OpenSocial
Accelerators

   –  Goog...
What will we learn?

•    How
to
work
with
the
YOS
SDK

•    Using
social
apis
through
YQL

•    Using
any
web
data
throug...
What does it take?

•    Create
an
applicaTon
in
developer
dashboard

•    Set
applicaTon
url
in
developer
tool

•    Buil...
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://devel...
•  I
have
an
exisTng
OpenSocial
applicaTon.

How
do
I
get
started?


•  I
have
an
exisTng
Facebook
applicaTon.

How
do
I
g...
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 
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
The Yahoo Open Stack
Upcoming SlideShare
Loading in...5
×

The Yahoo Open Stack

6,591

Published on

Published in: Technology
3 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,591
On Slideshare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
59
Comments
3
Likes
2
Embeds 0
No embeds

No notes for slide

The Yahoo Open Stack

  1. 1. Diving into the Yahoo! Open Stack   Dus>n Whi3le – dus>n@yahoo‐inc.com
 h3p://developer.yahoo.com/hacku/ 
  2. 2. EXAMPLES
|
TUTORIALS
|
CODE
SAMPLES
 DEVELOPER.YAHOO.COM 
  3. 3. FREEBSD
|
LINUX
|
APACHE
|
PHP
|
MYSQL
|
BUGZILLA
|
HADOOP
|
SYMFONY
 YAHOO! IS POWERED BY OPEN SOURCE  TECHNOLOGIES 
  4. 4. W3C
|
MICROFORMATS
|
OAUTH
|
OPENID
|
OPENSOCIAL
 YAHOO! EMBRACES OPEN STANDARDS 
  5. 5. RASMUS
LERDORF
|
DOUG
CROCKFORD
|
DOUG
CUTTING
|
CHRISTIAN
HEILMANN
 YAHOO! HIRES OPEN SOURCE DEVELOPERS 
  6. 6. YUI
|
BROWSER
PLUS
|
DESIGN
PATTERNS
|
R3
|
YSLOW
+
PERFORMANCE
RULES
 YAHOO! GIVES BACK TO OPEN SOURCE 
  7. 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. 8. Hack
Days
|
HackU
|
Tech
Talks
|
YDN
Theater
 YAHOO! ENGAGES COMMUNITIES WITH  OPEN HACK EVENTS AROUND THE WORLD 
  9. 9. WE ARE OPEN AT YAHOO! 
  10. 10. PROGRESS. EVERYONE IS WORKING  TOGETHER! 
  11. 11. OPENID
|
XRDS
|
OAUTH
|
PORTABLE
CONTACTS
|
OPEN
SOCIAL
 OPEN PLATFORMS + COLLABORATION 
  12. 12. The goals of Yahoo! Open Strategy 
  13. 13. 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

  14. 14. Y! OS – Unified Open Profile 
  15. 15. Y! OS – Unified Open Profile 
  16. 16. Y! OS – Unified Open Profile 
  17. 17. 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

  18. 18. Y! OS – The Open Stack  h3p://developer.yahoo.com/yos/ 
  19. 19. Y! Developer Network 
  20. 20. 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 
  21. 21. 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

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

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

  24. 24. Y! Developer Network 
  25. 25. SearchMonkey + BOSS 
  26. 26. A simple Blueprint Example 
  27. 27. Yahoo! Open Stack ‐ OAuth  
  28. 28. 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/ 
  29. 29. Y! Open Stack – Doing the Dance   h3p://oauth.net/core/1.0 
  30. 30. 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/ 
  31. 31. Y! OS – Rewire Yahoo!  •  Updates
across
Yahoo!
 •  Open
Apps
for
My
Yahoo
 •  Open
Apps
for
Mobile


  32. 32. Y! Open Stack – Social APIs  •  Social
Directory
(read)
 •  Contacts
(read)
 •  User
Status
(read
/
write)
 •  Updates
(read
/
write)
 •  h3p://developer.yahoo.com/social 
  33. 33. A Query Language for the Web 
  34. 34. 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.

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

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

  37. 37. YQL ‐ Verbs  •  3 Verbs  –  show: lists the supported tables  –  desc: describes the structure of a table  –  select: fetches data Tables, Verbs, Filters 
  38. 38. YQL Statements ‐ Basics
 Syntax  SELECT
what
 FROM
collecTon
 WHERE
filter
condiTon
 IN
(sub‐select)
 LIMIT
n
OFFSET
nshow:

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


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

  41. 41. 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) 
  42. 42. 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’ 
  43. 43. 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” 

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

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

  46. 46. YQL – Open Tables 
  47. 47. YQL – Open Tables 
  48. 48. YQL – Open Tables 
  49. 49. 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


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

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

  52. 52. YQL + PIPES 
  53. 53. YQL – Running a Query  81

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

  55. 55. 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 
  56. 56. Y! Open Stack – Open Applica>ons 
  57. 57. Open Applica>on  Code Dive   What can you do with open apps?  102

  58. 58. 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 
  59. 59. What is YML?
 •  Dynamic and secure interac>ons: Several  YML tags provide UI widgets and rich  interac>ons that normally require untrusted  javascript. 
  60. 60. 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



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

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

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

  64. 64. Caja – JavaScript Before Cajoling 
  65. 65. Caja – JavaScript Arer Cajoling 
  66. 66. 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

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

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

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

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

  71. 71. Caja Prac>cal – Running an AJAX Request 
  72. 72. Caja Prac>cal – Working with JSON 
  73. 73. 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> 
  74. 74. Caja Prac>cal – Assigning Click Handlers 
  75. 75. Caja Prac>cal – Assigning Click Handlers  Step 2 – Define your callback func>on 
  76. 76. 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 
  77. 77. 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 

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

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

  80. 80. <?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>’;  ?> 
  81. 81. YOSSDK – 3‐Legged OAuth  Used
For:
 ‐ 
Private
data
access

  82. 82. 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;);
 ?>

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

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

  85. 85. YOSSDK – Upda>ng the small view 
  86. 86. YAP Applica>ons   How do I get started? 
 136

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

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

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

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

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

  92. 92. CommonGround available on GitHub  h3p://github.com/dwhi3le/commonground 
  93. 93. My
Apps
+
Featured
ApplicaTons

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

  95. 95. YAP Code Dive   Common Ques>ons 
 150

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

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

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

  99. 99. WANT TO JOIN YAHOO?  WE ARE HIRING AND HAVE INTERNSHIPS! 
  100. 100. ENJOY THE REST OF HACKU  EXAMPLES
|
TUTORIALS
|
CODE
SAMPLES
 DEVELOPER.YAHOO.COM 
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×