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

•  JavaScript Framework 
  –  UOliOes ‐ YAHOO, Dom, Event, AnimaOon, Browser 
     History...
Y! Developer Network – YUI CSS 

•  CSS FoundaOon 
  –  Reset ‐ Neutralizes browser CSS styles 
  –  Base ‐ Applies consis...
Y! Developer Network – Documenta>on 

•  More than 275 funcOonal examples 
   –  hXp://developer.yahoo.com/yui/examples/ 
...
Yahoo! Open Strategy 
Y! OS – Unified Open Profile 
Y! OS – Open to 3rd‐par>es like never before 
                  •  Yahoo! Developer Network 
                      •  Deve...
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 
A Query Language for the Web 




  SELECT  * FROM INTERNET 
Before YQL 

•  Thousands of Web Services that provide 
   valuable data 
•  Require developers to read documentaOon 
   a...
Y! Open Stack – YQL 

•  SQL‐Like Language 
  –  Synonymous with Data access 
  –  Familiar to developers 
  –  Expressive...
YQL – Available Tables 


YQL Command: SHOW tables 




                              50 
YQL ‐ Verbs 

•  3 Verbs 

   –  show: lists the supported tables 
   –  desc: describes the structure of a table 
   –  s...
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 nsho...
YQL Statements ‐ Collec>ons 
Syntax ‐> Select ‐> Collec>on 


•  FROM collecOon 
•  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 ‐ Open Tables 

         Delicious                                     TwiXer 
    •                                  ...
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 – API End Points 

OAuth Endpoint 
•  hXp://query.yahooapis.com/v1/yql?q=... 

Public Endpoint  
•  hXp://query.yahooa...
YQL – Query Formats 
ProjecOon 
‐ SELECT what FROM table 
‐ SELECT * FROM social.connecOons 

Local and Remote Filtering 
...
YQL – Running a Query with YOS SDK 




                67 
YQL + PIPES 
YQL ‐ Examples 


     select * from social.connecOons 
• 
     select * from delicious.feeds.popular 
• 
     select * fr...
Y! Open Stack – Applica>on Pladorm 

•  Allows developers to deploy their own web 
   based applica>ons on Yahoo!  
•  Mul...
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 th...
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 saniOzes 
  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 AcOveX 
   components, use of eval and iframes. 
•  External lib...
Caja – JavaScript Before Cajoling 
Caja – JavaScript Amer Cajoling 
Caja & JavaScript – What doesn’t work?
•  eval() 
•  new FuncOon() 
•  Strings as event handlers (node.onclick = '...';) 
...
Caja & HTML – What doesn’t work?
•  name aXributes with gadgets.io.makeRequest 
•  Custom aXributes 
•  Custom tags 
•  Un...
Caja & IFRAME – Concerns

IFrame Concerns 
•  Drive‐by downloads 

•  Phishing aXacks 

•  No real content restricOons 


...
Caja & CSS – What doesn’t work?
•  * hacks 
•  _ hacks 
•  IE condiOonals 
•  Insert‐aker 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 saniOzer 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                       ...
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(quot;yosdk/lib/Yahoo.incquot;); 

// Define values for keys re...
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 
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 ...
Open Apps – A good founda>on 

•  Scalable HosOng 
  –  Joyent – Free OpenSocial Accelerators 
  –  Google App Engine 
  –...
What will we learn? 
     How to work with the YOS SDK 
• 
     Using social apis through YQL 
• 
     Using any web data ...
Five steps to an Open App 
1.    Create an applicaOon in developer dashboard 
2.    Set applicaOon URL 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://devel...
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 g...
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 
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Diving Into The Yahoo Open Stack @ SF PHP Meetup
Upcoming SlideShare
Loading in...5
×

Diving Into The Yahoo Open Stack @ SF PHP Meetup

3,023

Published on

Slides presented at San Francisco PHP meetup on April 2nd, 2009.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,023
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Diving Into The Yahoo Open Stack @ SF PHP Meetup"

  1. 1. Diving into the Yahoo! Open Stack   Dus>n Whi3le – dus>n@yahoo‐inc.com  h3p://developer.yahoo.com/ 
  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. Y! OS – The Open Stack  h3p://developer.yahoo.com/yos/ 
  13. 13. developer.yahoo.com 
  14. 14. developer.yahoo.com 
  15. 15. developer.yahoo.com 
  16. 16. developer.yahoo.com 
  17. 17. developer.yahoo.com 
  18. 18. SearchMonkey + BOSS 
  19. 19. A simple Blueprint Example 
  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  –  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 
  22. 22. 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 
  23. 23. 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/ 
  24. 24. Yahoo! Open Strategy 
  25. 25. Y! OS – Unified Open Profile 
  26. 26. 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 
  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. A Query Language for the Web  SELECT  * FROM INTERNET 
  31. 31. 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. 
  32. 32. 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. 
  33. 33. YQL – Available Tables  YQL Command: SHOW tables  50 
  34. 34. YQL ‐ Verbs  •  3 Verbs  –  show: lists the supported tables  –  desc: describes the structure of a table  –  select: fetches data Tables, Verbs, Filters 
  35. 35. YQL – Table Contents  YQL Command: DESC social.connecOons  53 
  36. 36. YQL Statements ‐ Basics  Syntax  SELECT what  FROM collecOon  WHERE filter condiOon  IN (sub‐select)  LIMIT n OFFSET nshow: 
  37. 37. 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  
  38. 38. 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) 
  39. 39. 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) 
  40. 40. 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/ 
  41. 41. YQL – Open Tables 
  42. 42. YQL – Open Tables 
  43. 43. YQL – Open Tables 
  44. 44. 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  
  45. 45. 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 
  46. 46. 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=quot;madonnaquot; LIMIT 3 OFFSET 10  Remove Table Size Control  ‐ SELECT what FROM table(0,500) WHERE condiOon  ‐ SELECT * FROM web.search(0,10) WHERE query=quot;madonnaquot; AND result.XXX = something  66 
  47. 47. YQL – Running a Query with YOS SDK  67 
  48. 48. YQL + PIPES 
  49. 49. YQL ‐ Examples  select * from social.connecOons  •  select * from delicious.feeds.popular  •  select * from flickr.photos.interesOngness  •  select * from friendfeed.status  •  select * from github.checkins  • 
  50. 50. 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 
  51. 51. Y! Open Stack – Open Applica>ons 
  52. 52. Open Applica>on  Code Dive   What can you do with open apps?  84 
  53. 53. 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 
  54. 54. 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   
  55. 55. 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. 
  56. 56. 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 
  57. 57. 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. 
  58. 58. Caja – JavaScript Before Cajoling 
  59. 59. Caja – JavaScript Amer Cajoling 
  60. 60. 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 
  61. 61. 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 
  62. 62. Caja & IFRAME – Concerns IFrame Concerns  •  Drive‐by downloads  •  Phishing aXacks  •  No real content restricOons  Caja Implementa>on  •  Blacklist all / Whitelist some model 
  63. 63. Caja & CSS – What doesn’t work? •  * hacks  •  _ hacks  •  IE condiOonals  •  Insert‐aker clear fix  •  expression()  •  @import  •  Background images in IE 
  64. 64. 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/) 
  65. 65. Caja Prac>cal – Running an AJAX Request 
  66. 66. Caja Prac>cal – Working with JSON 
  67. 67. 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> 
  68. 68. Caja Prac>cal – Assigning Click Handlers 
  69. 69. Caja Prac>cal – Assigning Click Handlers  Step 2 – Define your callback func>on 
  70. 70. 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 
  71. 71. 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 
  72. 72. 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) 
  73. 73. YOSSDK – 2‐Legged OAuth  Used For:  ‐  Public user data and open APIs 
  74. 74. YOSSDK – 3‐Legged OAuth  Used For:  ‐  Private data access 
  75. 75. <?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>’;  ?> 
  76. 76. 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 authorizaOon  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.connecOons WHERE owner_guid=me LIMIT 2quot;;  $result = $session‐>query($query);  // Build the output HTML  echo(quot;<html><body><pre><h2>ConnecOon Data</h2>quot; );  var_dump($result) ;  echo(quot;</pre></body></html>quot;);  ?> 
  77. 77. YOSSDK – Crea>ng an update  3‐Legged OAuth 
  78. 78. YOSSDK – Se€ng the status of a user  3‐Legged OAuth 
  79. 79. YOSSDK – Upda>ng the small view 
  80. 80. Open App Code Dive   Lets build a social app live   117 
  81. 81. 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 
  82. 82. 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) 
  83. 83. 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  • 
  84. 84. 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 
  85. 85. h3p://developer.yahoo.com/dashboard 
  86. 86. CommonGround available on GitHub  h3p://github.com/dwhi3le/commonground 
  87. 87. My Apps + Featured ApplicaOons 
  88. 88. 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 
  89. 89. Open Apps Code Dive   Common Ques>ons   133 
  90. 90. •  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? 
  91. 91. QUESTIONS?  (I will be around for the whole event, so please do say hello and ask quesOons) 
  92. 92. WANT TO JOIN YAHOO?  WE ARE HIRING AND HAVE INTERNSHIPS! 
  93. 93. ENJOY THE REST OF SF PHP MEETUP  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.

×