The document provides a comprehensive overview of the Yahoo! Application Platform (YAP) including its components, programming models, and features like YML and Open Social integration. It details how to create applications, manage user interactions, and secure content using Caja. The document also emphasizes the platform's audience reach and offers resources for developers to get started with YAP.

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

2. Agenda Quick Recap Developer Dashboard Yahoo! Markup Language (YML) Open Social Caja

3. YAP: Quick Recap Platform that enables applications to run on Yahoo! home page and My Yahoo! YAP Components: Developer dashboard APIs and web services Secure runtime and rendering proxy Distribution and discovery infrastructure

4. Open Yahoo!: Audience is the Platform

5. Anatomy of YAP Application

6. 3 Simple Things to Define for Each Application Application metadata name, description, icons, screenshot, category Small view Canvas view

7. Small View Personalized snapshot of application Fast response time

8. Canvas View Full, interactive view of application

9. Demo – Create Your First YAP App

10. Demo – Create Your First YAP App

11. YAP Programming Model App logic hosted on dev server YAP proxies user request to dev server, passing parameters via HTTP POST: Viewer guid, timezone, country code canvas, view, app id Viewer access token, secret, timestamp YAP consumer key and request signature Image URLs returned from dev server are rewritten and cached by YAP 2 & 3 legged OAuth is used for protected resource access

12. Small View Programming Model Content hosted by YAP Written in HTML, CSS and Yahoo! Markup Language (YML) No JavaScript Two ways to provide dynamic, personalized small view: setSmallView(guid, newSV) yml:include

13. Canvas View Programming Model Content hosted by developer server Application URL YAP proxies all requests to dev server Use any programming language / framework JavaScript is allowed (subject to Caja sanitization) Making Ajax requests Use YML Use Open Social gadgets.io.makeRequest

14. Accessing Social Data from Application User social data available profile, address book, updates, status Multiple ways to access data YML Open Social JS / REST API Yahoo! Query Language (YQL) WS call to Yahoo! Social APIs Leverage Yahoo! SDK to simplify code

15. Yahoo! Markup Language (YML) Simple markup language for Dynamic web content Social data access Media content Viral sharing Hide security details from application Can be used in Small and Canvas views Especially useful in Small view since JavaScript is not allowed

16. YML: Dynamic Web Content / Ajax yml:a Update web content upon user clicking yml:form Create web form and update web content upon user clicking yml:include Refresh web content dynamically

17. Implementing Tab Views with yml:a <yml:a view=“tagsearch.php” replace=“content1”>Search by tags</yml:a> … <div id=“content1”> … </div> User clicks on tab

18. Dynamic Content Loading with yml:include <yml:include view=“topApps.php” replace=“content1”>Loading top apps… </yml:include> … <div id=“content1”> … </div>

19. YML: Social Data Access yml:friend-selector Present and select a list of friends yml:name, yml:profile-pic, yml:pronoun, yml:user-badge Display user name / profile picture information Example <yml:profile-pic uid=“viewer” width=“60”><br> Hi, my name is <yml:name/>

20. YML: Media Content yml:swf (Canvas view only) Includes Flash object yml:audio Creates audio player that plays MP3 files yml:ad (Canvas view only) Includes third party advertising network content Example: Embedding Flash Content using yml:swf <yml:swf src=&quot;http://www.youtube.com/v/MqbaZcX67L0&quot; width=&quot;560&quot; height=&quot;340&quot;/>

21. YML: Viral Sharing (Canvas View only) yml:share Creates standard form that opens a message dialog for sharing the application yml:message Creates customizable form that opens a message dialog for sending notifcations from application Example <yml:share> <input type=&quot;submit&quot; value=&quot;Invite Friends”> </yml:/share>

22. YML Demo

23. YML Demo

24. YML Demo

25. YAP and Open Social Open Social API for accessing user social data Implemented by several social web sites, including Yahoo! Yahoo! is board member of Open Social Foundation YAP supports Open Social 0.8 JS, REST and Gadget Core APIs OS Activity mapped to Yahoo! Updates API OS Person / People mapped to Yahoo! Profile and Connections gadget.xml and 0.9 support coming

26. Making Ajax Request in YAP With proxy model, direct XHR cannot reach developer server Two ways: <yml:a>, <yml:include> Open Social gadgets.io.makeRequest API

27. Open Social Demo: Ajax Request

28. Open Social Demo: Ajax Request

29. Open Social Demo: Ajax Request

30. Open Social Demo: Publish Yahoo! Updates

31. Open Social Demo: Publish Yahoo! Updates

32. Open Social Demo: Publish Yahoo! Updates

33. Securing Third Party Code – Caja Additional “sandbox” on top of iFrame protection One of the first to integrate Caja in production Enables Yahoo! to embed third party applications safely Aggressively re-write and remove unsafe HTML / CSS / JavaScript

34. Caja Restrictions No direct access to implied global objects Proxy access to DOM No document.write (use innerHTML) No <embed>, <object>, <iframe> No eval, with, this No JavaScript:void(0) Some CSS hacks No external CSS and JavaScript (inlined only)

35. Caja Examples See Caja limitation doc for workarounds http://developer.yahoo.com/yap/caja 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. Caja Best Practices Adhere to W3C standards (HTML 4.01 and CSS 2.1) Use YML Push more logic to server-side Use supported JS library Open Social 0.8, YUI 2.8 subset Use JSLint and Caja test bed http://www.jslint.com http://cajadores.com/demos/testbed/

37. YUI 2 / Caja Beta support for YUI 2.8 YUI Core YAHOO, DOM, Event utility YUI Utilities Animation, DataSource, DragNDrop, Element, ImageLoader, Resize, Selector YUI Library Controls / Widgets AutoComplete, Button, Container, Menu, TabView, TreeView Available on YAP preview server preview.apps.yahoo.com

38. Summary and Call to Action Use YAP to expose your application on the Yahoo! Home page to over 330 million users Create an YAP app hack! We are here to help Learn more about YAP: Building Your App on Yahoo! – Partner Perspective (3pm) Yahoo! Social APIs & SDKs (4:10pm) Yahoo! App Marketing (4pm)

39. Developer Resources YAP – developer.yahoo.com/yap/homepage Dev Tool – developer.yahoo.com/dashboard Dev Guide – developer.yahoo.com/yap/guide Forum – developer.yahoo.com/forum Samples – developer.yahoo.com/yos/code_exs SDKs – developer.yahoo.com/social/sdk Joyent Free Hosting – signup.joyent.com/yahoo_signup

40. YAP: Deep Dive Yahoo! Application Platform Tony Ng [email_address]