Your SlideShare is downloading. ×
YAP: Deep Dive Yahoo! Application Platform Tony Ng Director of Engineering
Agenda <ul><li>Quick Recap </li></ul><ul><li>Developer Dashboard </li></ul><ul><li>Yahoo! Markup Language (YML) </li></ul>...
YAP: Quick Recap <ul><li>Platform that enables applications to run on Yahoo! home page and My Yahoo! </li></ul><ul><li>YAP...
Open Yahoo!: Audience is the Platform
Anatomy of YAP Application
3 Simple Things to Define for Each Application <ul><li>Application metadata </li></ul><ul><ul><li>name, description, icons...
Small View <ul><li>Personalized snapshot of application </li></ul><ul><li>Fast response time </li></ul>
Canvas View <ul><li>Full, interactive view of application </li></ul>
Demo – Create Your First YAP App
Demo – Create Your First YAP App
YAP Programming Model <ul><li>App logic hosted on dev server </li></ul><ul><li>YAP proxies user request to dev server, pas...
Small View Programming Model <ul><li>Content hosted by YAP </li></ul><ul><li>Written in HTML, CSS and Yahoo! Markup Langua...
Canvas View Programming Model <ul><li>Content hosted by developer server </li></ul><ul><ul><li>Application URL </li></ul><...
Accessing Social Data from Application <ul><li>User social data available </li></ul><ul><ul><li>profile, address book, upd...
Yahoo! Markup Language (YML) <ul><li>Simple markup language for  </li></ul><ul><ul><li>Dynamic web content </li></ul></ul>...
YML: Dynamic Web Content / Ajax <ul><li>yml:a </li></ul><ul><ul><li>Update web content upon user clicking </li></ul></ul><...
Implementing Tab Views with yml:a <ul><li><yml:a view=“tagsearch.php” replace=“content1”>Search by tags</yml:a> </li></ul>...
Dynamic Content Loading with yml:include <ul><li><yml:include view=“topApps.php” replace=“content1”>Loading top apps…  </l...
YML: Social Data Access <ul><li>yml:friend-selector </li></ul><ul><ul><li>Present and select a list of friends </li></ul><...
YML: Media Content <ul><li>yml:swf (Canvas view only) </li></ul><ul><ul><li>Includes Flash object </li></ul></ul><ul><li>y...
YML: Viral Sharing (Canvas View only) <ul><li>yml:share </li></ul><ul><ul><li>Creates standard form that opens a message d...
YML Demo
YML Demo
YML Demo
YAP and Open Social <ul><li>Open Social </li></ul><ul><ul><li>API for accessing user social data </li></ul></ul><ul><ul><l...
Making Ajax Request in YAP <ul><li>With proxy model, direct XHR cannot reach developer server </li></ul><ul><li>Two ways: ...
Open Social Demo: Ajax Request
Open Social Demo: Ajax Request
Open Social Demo: Ajax Request
Open Social Demo: Publish Yahoo! Updates
Open Social Demo: Publish Yahoo! Updates
Open Social Demo: Publish Yahoo! Updates
Securing Third Party Code – Caja <ul><li>Additional “sandbox” on top of iFrame protection </li></ul><ul><li>One of the fir...
Caja Restrictions <ul><li>No direct access to implied global objects </li></ul><ul><ul><li>Proxy access to DOM </li></ul><...
Caja Examples <ul><li>See Caja limitation doc for workarounds </li></ul><ul><ul><li>http://developer.yahoo.com/yap/caja </...
Caja Best Practices <ul><li>Adhere to W3C standards (HTML 4.01 and CSS 2.1) </li></ul><ul><li>Use YML </li></ul><ul><li>Pu...
YUI 2 / Caja <ul><li>Beta support for YUI 2.8 </li></ul><ul><li>YUI Core </li></ul><ul><ul><li>YAHOO, DOM, Event utility <...
Summary and Call to Action <ul><li>Use YAP to expose your application on the Yahoo! Home page to over 330 million users </...
Developer Resources <ul><li>YAP – developer.yahoo.com/yap/homepage </li></ul><ul><li>Dev Tool – developer.yahoo.com/dashbo...
YAP: Deep Dive Yahoo! Application Platform Tony Ng [email_address]
Upcoming SlideShare
Loading in...5
×

Yahoo! Application Platform Technical Deep Dive

3,443

Published on

Learn how to build applications for a platform that can reach 330M+ worldwide users! This session gives a technical overview of the Yahoo! Application Platform (YAP), which enables third-party applications to be embedded within popular Yahoo! destinations such as My Yahoo! and the Yahoo! home page. The session will cover key features of YAP, including Yahoo Markup Language (YML), Caja, Open Social, image cache and application editor. Next the talk will explain how to build an application for this platform as well as best practices to deliver great user experience from your application.

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

No Downloads
Views
Total Views
3,443
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Yahoo! Application Platform Technical Deep Dive"

  1. 1. YAP: Deep Dive Yahoo! Application Platform Tony Ng Director of Engineering
  2. 2. Agenda <ul><li>Quick Recap </li></ul><ul><li>Developer Dashboard </li></ul><ul><li>Yahoo! Markup Language (YML) </li></ul><ul><li>Open Social </li></ul><ul><li>Caja </li></ul>
  3. 3. YAP: Quick Recap <ul><li>Platform that enables applications to run on Yahoo! home page and My Yahoo! </li></ul><ul><li>YAP Components: </li></ul><ul><ul><li>Developer dashboard </li></ul></ul><ul><ul><li>APIs and web services </li></ul></ul><ul><ul><li>Secure runtime and rendering proxy </li></ul></ul><ul><ul><li>Distribution and discovery infrastructure </li></ul></ul>
  4. 4. Open Yahoo!: Audience is the Platform
  5. 5. Anatomy of YAP Application
  6. 6. 3 Simple Things to Define for Each Application <ul><li>Application metadata </li></ul><ul><ul><li>name, description, icons, screenshot, category </li></ul></ul><ul><li>Small view </li></ul><ul><li>Canvas view </li></ul>
  7. 7. Small View <ul><li>Personalized snapshot of application </li></ul><ul><li>Fast response time </li></ul>
  8. 8. Canvas View <ul><li>Full, interactive view of application </li></ul>
  9. 9. Demo – Create Your First YAP App
  10. 10. Demo – Create Your First YAP App
  11. 11. YAP Programming Model <ul><li>App logic hosted on dev server </li></ul><ul><li>YAP proxies user request to dev server, passing parameters via HTTP POST: </li></ul><ul><ul><li>Viewer guid, timezone, country code </li></ul></ul><ul><ul><li>canvas, view, app id </li></ul></ul><ul><ul><li>Viewer access token, secret, timestamp </li></ul></ul><ul><ul><li>YAP consumer key and request signature </li></ul></ul><ul><li>Image URLs returned from dev server are rewritten and cached by YAP </li></ul><ul><li>2 & 3 legged OAuth is used for protected resource access </li></ul>
  12. 12. Small View Programming Model <ul><li>Content hosted by YAP </li></ul><ul><li>Written in HTML, CSS and Yahoo! Markup Language (YML) </li></ul><ul><li>No JavaScript </li></ul><ul><li>Two ways to provide dynamic, personalized small view: </li></ul><ul><ul><li>setSmallView(guid, newSV) </li></ul></ul><ul><ul><li>yml:include </li></ul></ul>
  13. 13. Canvas View Programming Model <ul><li>Content hosted by developer server </li></ul><ul><ul><li>Application URL </li></ul></ul><ul><li>YAP proxies all requests to dev server </li></ul><ul><li>Use any programming language / framework </li></ul><ul><li>JavaScript is allowed (subject to Caja sanitization) </li></ul><ul><li>Making Ajax requests </li></ul><ul><ul><li>Use YML </li></ul></ul><ul><ul><li>Use Open Social gadgets.io.makeRequest </li></ul></ul>
  14. 14. Accessing Social Data from Application <ul><li>User social data available </li></ul><ul><ul><li>profile, address book, updates, status </li></ul></ul><ul><li>Multiple ways to access data </li></ul><ul><ul><li>YML </li></ul></ul><ul><ul><li>Open Social JS / REST API </li></ul></ul><ul><ul><li>Yahoo! Query Language (YQL) </li></ul></ul><ul><ul><li>WS call to Yahoo! Social APIs </li></ul></ul><ul><ul><li>Leverage Yahoo! SDK to simplify code </li></ul></ul>
  15. 15. Yahoo! Markup Language (YML) <ul><li>Simple markup language for </li></ul><ul><ul><li>Dynamic web content </li></ul></ul><ul><ul><li>Social data access </li></ul></ul><ul><ul><li>Media content </li></ul></ul><ul><ul><li>Viral sharing </li></ul></ul><ul><li>Hide security details from application </li></ul><ul><li>Can be used in Small and Canvas views </li></ul><ul><ul><li>Especially useful in Small view since JavaScript is not allowed </li></ul></ul>
  16. 16. YML: Dynamic Web Content / Ajax <ul><li>yml:a </li></ul><ul><ul><li>Update web content upon user clicking </li></ul></ul><ul><li>yml:form </li></ul><ul><ul><li>Create web form and update web content upon user clicking </li></ul></ul><ul><li>yml:include </li></ul><ul><ul><li>Refresh web content dynamically </li></ul></ul>
  17. 17. Implementing Tab Views with yml:a <ul><li><yml:a view=“tagsearch.php” replace=“content1”>Search by tags</yml:a> </li></ul><ul><li>… </li></ul><ul><li><div id=“content1”> … </div> </li></ul>User clicks on tab
  18. 18. Dynamic Content Loading with yml:include <ul><li><yml:include view=“topApps.php” replace=“content1”>Loading top apps… </li></ul><ul><li></yml:include> </li></ul><ul><li>… </li></ul><ul><li><div id=“content1”> … </div> </li></ul>
  19. 19. YML: Social Data Access <ul><li>yml:friend-selector </li></ul><ul><ul><li>Present and select a list of friends </li></ul></ul><ul><li>yml:name, yml:profile-pic, yml:pronoun, yml:user-badge </li></ul><ul><ul><li>Display user name / profile picture information </li></ul></ul><ul><li>Example <yml:profile-pic uid=“viewer” width=“60”><br> Hi, my name is <yml:name/> </li></ul>
  20. 20. YML: Media Content <ul><li>yml:swf (Canvas view only) </li></ul><ul><ul><li>Includes Flash object </li></ul></ul><ul><li>yml:audio </li></ul><ul><ul><li>Creates audio player that plays MP3 files </li></ul></ul><ul><li>yml:ad (Canvas view only) </li></ul><ul><ul><li>Includes third party advertising network content </li></ul></ul><ul><li>Example: Embedding Flash Content using yml:swf </li></ul><ul><ul><li><yml:swf src=&quot;http://www.youtube.com/v/MqbaZcX67L0&quot; width=&quot;560&quot; height=&quot;340&quot;/> </li></ul></ul>
  21. 21. YML: Viral Sharing (Canvas View only) <ul><li>yml:share </li></ul><ul><ul><li>Creates standard form that opens a message dialog for sharing the application </li></ul></ul><ul><li>yml:message </li></ul><ul><ul><li>Creates customizable form that opens a message dialog for sending notifcations from application </li></ul></ul><ul><li>Example </li></ul><ul><ul><li><yml:share> <input type=&quot;submit&quot; value=&quot;Invite Friends”> </yml:/share> </li></ul></ul>
  22. 22. YML Demo
  23. 23. YML Demo
  24. 24. YML Demo
  25. 25. YAP and Open Social <ul><li>Open Social </li></ul><ul><ul><li>API for accessing user social data </li></ul></ul><ul><ul><li>Implemented by several social web sites, including Yahoo! </li></ul></ul><ul><ul><li>Yahoo! is board member of Open Social Foundation </li></ul></ul><ul><li>YAP supports Open Social 0.8 JS, REST and Gadget Core APIs </li></ul><ul><ul><li>OS Activity mapped to Yahoo! Updates API </li></ul></ul><ul><ul><li>OS Person / People mapped to Yahoo! Profile and Connections </li></ul></ul><ul><li>gadget.xml and 0.9 support coming </li></ul>
  26. 26. Making Ajax Request in YAP <ul><li>With proxy model, direct XHR cannot reach developer server </li></ul><ul><li>Two ways: </li></ul><ul><ul><li><yml:a>, <yml:include> </li></ul></ul><ul><ul><li>Open Social gadgets.io.makeRequest API </li></ul></ul>
  27. 27. Open Social Demo: Ajax Request
  28. 28. Open Social Demo: Ajax Request
  29. 29. Open Social Demo: Ajax Request
  30. 30. Open Social Demo: Publish Yahoo! Updates
  31. 31. Open Social Demo: Publish Yahoo! Updates
  32. 32. Open Social Demo: Publish Yahoo! Updates
  33. 33. Securing Third Party Code – Caja <ul><li>Additional “sandbox” on top of iFrame protection </li></ul><ul><li>One of the first to integrate Caja in production </li></ul><ul><li>Enables Yahoo! to embed third party applications safely </li></ul><ul><li>Aggressively re-write and remove unsafe HTML / CSS / JavaScript </li></ul>
  34. 34. Caja Restrictions <ul><li>No direct access to implied global objects </li></ul><ul><ul><li>Proxy access to DOM </li></ul></ul><ul><li>No document.write (use innerHTML) </li></ul><ul><li>No <embed>, <object>, <iframe> </li></ul><ul><li>No eval, with, this </li></ul><ul><li>No JavaScript:void(0) </li></ul><ul><li>Some CSS hacks </li></ul><ul><li>No external CSS and JavaScript (inlined only) </li></ul>
  35. 35. Caja Examples <ul><li>See Caja limitation doc for workarounds </li></ul><ul><ul><li>http://developer.yahoo.com/yap/caja </li></ul></ul>Instead of Use document.write() <var x = document.getElementById(‘x’); x.innerHTML = ‘abc’; javascript:void(0) <a href=&quot;#&quot; onclick=&quot;click(); return false&quot;>click</a> <link rel=stylesheet> <script src=“…” /> @import Inline CSS and JS <object>, <embed> <swf> for Flash object
  36. 36. Caja Best Practices <ul><li>Adhere to W3C standards (HTML 4.01 and CSS 2.1) </li></ul><ul><li>Use YML </li></ul><ul><li>Push more logic to server-side </li></ul><ul><li>Use supported JS library </li></ul><ul><ul><li>Open Social 0.8, YUI 2.8 subset </li></ul></ul><ul><li>Use JSLint and Caja test bed </li></ul><ul><ul><li>http://www.jslint.com </li></ul></ul><ul><ul><li>http://cajadores.com/demos/testbed/ </li></ul></ul>
  37. 37. YUI 2 / Caja <ul><li>Beta support for YUI 2.8 </li></ul><ul><li>YUI Core </li></ul><ul><ul><li>YAHOO, DOM, Event utility </li></ul></ul><ul><li>YUI Utilities </li></ul><ul><ul><li>Animation, DataSource, DragNDrop, Element, ImageLoader, Resize, Selector </li></ul></ul><ul><li>YUI Library Controls / Widgets </li></ul><ul><ul><li>AutoComplete, Button, Container, Menu, TabView, TreeView </li></ul></ul><ul><li>Available on YAP preview server </li></ul><ul><ul><li>preview.apps.yahoo.com </li></ul></ul>
  38. 38. Summary and Call to Action <ul><li>Use YAP to expose your application on the Yahoo! Home page to over 330 million users </li></ul><ul><li>Create an YAP app hack! We are here to help </li></ul><ul><li>Learn more about YAP: </li></ul><ul><ul><li>Building Your App on Yahoo! – Partner Perspective (3pm) </li></ul></ul><ul><ul><li>Yahoo! Social APIs & SDKs (4:10pm) </li></ul></ul><ul><ul><li>Yahoo! App Marketing (4pm) </li></ul></ul>
  39. 39. Developer Resources <ul><li>YAP – developer.yahoo.com/yap/homepage </li></ul><ul><li>Dev Tool – developer.yahoo.com/dashboard </li></ul><ul><li>Dev Guide – developer.yahoo.com/yap/guide </li></ul><ul><li>Forum – developer.yahoo.com/forum </li></ul><ul><li>Samples – developer.yahoo.com/yos/code_exs </li></ul><ul><li>SDKs – developer.yahoo.com/social/sdk </li></ul><ul><li>Joyent Free Hosting – signup.joyent.com/yahoo_signup </li></ul>
  40. 40. YAP: Deep Dive Yahoo! Application Platform Tony Ng [email_address]

×