• Save
Yahoo! Application Platform Technical Deep Dive
Upcoming SlideShare
Loading in...5
×
 

Yahoo! Application Platform Technical Deep Dive

on

  • 4,565 views

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 ...

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.

Statistics

Views

Total Views
4,565
Slideshare-icon Views on SlideShare
4,537
Embed Views
28

Actions

Likes
3
Downloads
0
Comments
0

3 Embeds 28

http://www.linkedin.com 14
https://www.linkedin.com 8
http://www.slideshare.net 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Yahoo! Application Platform Technical Deep Dive Yahoo! Application Platform Technical Deep Dive Presentation Transcript

    • YAP: Deep Dive Yahoo! Application Platform Tony Ng Director of Engineering
    • Agenda
      • Quick Recap
      • Developer Dashboard
      • Yahoo! Markup Language (YML)
      • Open Social
      • Caja
    • 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
    • Open Yahoo!: Audience is the Platform
    • Anatomy of YAP Application
    • 3 Simple Things to Define for Each Application
      • Application metadata
        • name, description, icons, screenshot, category
      • Small view
      • Canvas view
    • Small View
      • Personalized snapshot of application
      • Fast response time
    • Canvas View
      • Full, interactive view of application
    • Demo – Create Your First YAP App
    • Demo – Create Your First YAP App
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Dynamic Content Loading with yml:include
      • <yml:include view=“topApps.php” replace=“content1”>Loading top apps…
      • </yml:include>
      • <div id=“content1”> … </div>
    • 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/>
    • 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;/>
    • 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>
    • YML Demo
    • YML Demo
    • YML Demo
    • 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
    • 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
    • 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
      • 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
    • 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)
    • 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
    • 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/
    • 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
    • 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)
    • 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
    • YAP: Deep Dive Yahoo! Application Platform Tony Ng [email_address]