Yahoo! Application Platform Technical Deep Dive

1. YAP: Deep Dive Yahoo! Application Platform Tony Ng Director of Engineering

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. 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. Open Yahoo!: Audience is the Platform

5. Anatomy of YAP Application

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. Small View <ul><li>Personalized snapshot of application </li></ul><ul><li>Fast response time </li></ul>

8. Canvas View <ul><li>Full, interactive view of application </li></ul>

9. Demo – Create Your First YAP App

10. Demo – Create Your First YAP App

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. 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. 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. 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. 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. 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. 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. 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. 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. 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="http://www.youtube.com/v/MqbaZcX67L0" width="560" height="340"/> </li></ul></ul>

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="submit" value="Invite Friends”> </yml:/share> </li></ul></ul>

22. YML Demo

23. YML Demo

24. YML Demo

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. 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. Open Social Demo: Ajax Request

30. Open Social Demo: Publish Yahoo! Updates

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. 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. 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="#" onclick="click(); return false">click</a> <link rel=stylesheet> <script src=“…” /> @import Inline CSS and JS <object>, <embed> <swf> for Flash object

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. 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. 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. 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. YAP: Deep Dive Yahoo! Application Platform Tony Ng [email_address]