Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Yahoo! Application Platform Technical Deep Dive

3 976 vues

Publié le

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.

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

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]