Yahoo! Application Platform (YAP)
-
Upload
ravikiran-j -
Category
Technology
-
view
1.444 -
download
9
description
Transcript of Yahoo! Application Platform (YAP)
Yahoo Application Platform (YAP)
Ravikiran J
DeveloperTwitter: @ravikiranj
Agenda
• Pre-requisites
• Web Application
• YAP
• Web App to YAP App
• Rich Demo
• YAP Caveats
• Important Links
Pre-requisites
• HTML (structured content)
• Little bit of CSS (beautify)
• Little bit of Javascript (dynamic/interaction)
• Little bit of PHP/Python (logic)
• Web Services / API’s (data source)
Looks like I need to know 101 things! Doh !
Web Application
• A Web Application is an application that is
accessed over a network such as the Internet or
an intranet.
• Browser-controlled environment (e.g. a Java
applet) or Coded in a browser-supported
language (HTML + CSS + Javascript).
Web Application Flow
Request
Server(Logic)[PHP + Libs]
Web Service / API /Database
Response
GET/POST
Raw data
Resp data
CSS
HTML
Javascript
Let’s start simplifying
• Let us build a simple WebApp step by step.
• What is YAP ? Why do I need YAP ? What is YAPify ?
• Caution: Design First, Code Last.
Simple App - Flickr Recent Photos
• Display a grid view of recent flickr photos.
• Should be able to view a single photo in zoom view.
• http://hackyourworld.org/~ravikirn/flickr_yap_demo/
Flickr Recent Photos Flow
Request
Server(Logic)[PHP + Libs]
Response
GET/POST
Raw data
Resp data
CSS
HTML
Javascript
YQL
(flickr.photos.recent)
Flickr Recent Photos - Raw
• SELECT * FROM flickr.photos.recent LIMIT 10;
• http://tinyurl.com/69dyy77
• http://hackyourworld.org/~ravikirn/flickr_yap_demo/flickr_raw.php
Flickr Recent Photos - HTML
• Convert Raw XML into images.
• <ul> ... <li><a><img /></a></li> … </ul>
• http://hackyourworld.org/~ravikirn/flickr_yap_demo/flickr_html.php
Flickr Recent PhotosHTML + CSS
• Remove the ugly list-style and show the images in a grid format.
• http://hackyourworld.org/~ravikirn/flickr_yap_demo/flickr_html_css.php
Flickr Recent Photos HTML + CSS + JS
• Add interactions / click-handler via javascript to enable zoom-view.
• http://hackyourworld.org/~ravikirn/flickr_yap_demo/flickr_html_css_js.php
Flickr Recent Photos HTML + CSS + JS
Yahoo! Application Platform
• YAP is the software and services that enable developers to build Web applications that are available throughout Yahoo!.
• Developer provides great apps, Yahoo! will shower it with traffic and users.
• Sounds like a win/win, doesn’t it ? That’s our goal.
YAP - Advantages
• Never need to worry about user traffic
• Instant deployment and distribution
• Build applications using your favorite software stack, environment and servers.
• OpenSocial and Social Distribution
YAP – Create a new project
YAP – Create a new project
YAP – Download default xml
Update your config
• ModulePrefs (title, desc, category)
• Icon & some more icons
• Short description
• Small view
• Full view
• It’s a little annoying to fix xml errors, so ensure its proper the first time itself
Create a Small View
• Create a preview version of your app called as “smallview”
• Very important to give a launcher to the full view. ( http://tinyurl.com/4vp9tuc )
• Don’t try to mimic fullview but give a teaser.
Convert your Web App to YAP app( Fix the Full View )
• Remove black listed tags
• Make your CSS inline
• Make your Javascript inline / **AJAX **
• Ensure it passes through Caja (pronounced “KAhah”)
Web App YAP appCaja + Rules
YAP – Upload new config
Flickr Recent Photos – Small view
Flickr Recent Photo – Full view
Live Preview / Additional Purchase
• Push your app live so that you can directly view it in production on a Yahoo! page.
• Full View of the apps are available in Y! Games, Y! pulse, Y! Messenger.
• My Yahoo! will also launch inline full view in a couple of months.
Some more good stuff
• YML (Yahoo! Markup Language) (http://tinyurl.com/4u5cj42)
• Social Directory API (http://tinyurl.com/4w94qje)
• OpenSocial (Common API’s for web-based social network applications) (http://tinyurl.com/45exubc)
• Updates API (http://tinyurl.com/d8nj5e)
Rich demo of a decent app
• YouTube Videos App
• http://pulse.yahoo.com/y/apps/yZj8ez5i/?yap_intl=in&yap_js=IN
Rich demo - Screenshot
Rich demo - Screenshot
YAP Caveats
• All of your files need to be on a public server.
• Not all HTML / Javascript will run due to Cajoling (http://textsnip.com/6f7fb2/jscript)
• YUI Support in YAP (http://developer.yahoo.com/yap/guide/yui-support.html)
YAP Caja/JS Caveat
• Include YUI 2.8.0 – makes things lot easier
• Any javascript you write, sandbox it under a namespace.
• Use YUICompressor to minify code.
• http://hackyourworld.org/~ravikirn/caveats/js_in_yap.php
Important Links
• http://developer.yahoo.com/
• http://developer.yahoo.com/everything.html
• http://developer.yahoo.com/yap/guide/index.html
• http://developer.yahoo.com/documentation
• http://code.google.com/p/google-caja/
• http://code.google.com/apis/opensocial/