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/