Yahoo Application Platform (YAP) Ravikiran J Developer Twitter: @ravikiranj
Agenda <ul><li>Pre-requisites </li></ul><ul><li>Web Application </li></ul><ul><li>YAP </li></ul><ul><li>Web App to YAP App...
Pre-requisites <ul><li>HTML (structured content) </li></ul><ul><li>Little bit of CSS (beautify) </li></ul><ul><li>Little b...
Web Application <ul><li>A Web Application is an application that is  </li></ul><ul><li>accessed over a network such as the...
Web Application Flow Request Server (Logic) [PHP + Libs] Web Service / API /Database Response GET/POST Raw data Resp data ...
Let’s start simplifying  <ul><li>Let us build a simple WebApp step by step.  </li></ul><ul><li>What is YAP ? Why do I need...
Simple App - Flickr Recent Photos <ul><li>Display a grid view of recent flickr photos.  </li></ul><ul><li>Should be able t...
Flickr Recent Photos Flow Request Server (Logic) [PHP + Libs] Response GET/POST Raw data Resp data CSS HTML Javascript YQL...
Flickr Recent Photos - Raw <ul><li>SELECT * FROM flickr.photos.recent LIMIT 10; </li></ul><ul><li>http://tinyurl.com/69dyy...
Flickr Recent Photos - HTML <ul><li>Convert Raw XML into images. </li></ul><ul><li><ul> ... <li><a><img /></a></li> … </ul...
Flickr Recent Photos HTML + CSS <ul><li>Remove the ugly list-style and show the images in a grid format. </li></ul><ul><li...
Flickr Recent Photos  HTML + CSS + JS <ul><li>Add interactions / click-handler via javascript to enable zoom-view. </li></...
Flickr Recent Photos  HTML + CSS + JS
Yahoo! Application Platform <ul><li>YAP is the software and services that enable developers to build Web applications that...
YAP - Advantages <ul><li>Never need to worry about user traffic </li></ul><ul><li>Instant deployment and distribution </li...
YAP – Create a new project
YAP – Create a new project
YAP – Download default xml
Update your config <ul><li>ModulePrefs (title, desc, category) </li></ul><ul><li>Icon & some more icons </li></ul><ul><li>...
Create a Small View <ul><li>Create a preview version of your app called as “smallview” </li></ul><ul><li>Very important to...
Convert your Web App to YAP app ( Fix the Full View ) <ul><li>Remove black listed tags </li></ul><ul><li>Make your CSS inl...
YAP – Upload new config
Flickr Recent Photos – Small view
Flickr Recent Photo – Full view
Live Preview / Additional Purchase <ul><li>Push your app live so that you can directly view it in production on a Yahoo! p...
Some more good stuff <ul><li>YML (Yahoo! Markup Language) ( http://tinyurl.com/4u5cj42 ) </li></ul><ul><li>Social Director...
Rich demo of a decent app <ul><li>YouTube Videos App </li></ul><ul><li>http://pulse.yahoo.com/y/apps/yZj8ez5i/?yap_intl= i...
Rich demo - Screenshot
Rich demo - Screenshot
YAP Caveats <ul><li>All of your files need to be on a public server. </li></ul><ul><li>Not all HTML / Javascript will run ...
YAP Caja/JS Caveat <ul><li>Include YUI 2.8.0 – makes things lot easier </li></ul><ul><li>Any javascript you write, sandbox...
Important Links <ul><li>http:// developer.yahoo.com / </li></ul><ul><li>http:// developer.yahoo.com/everything.html </li><...
Upcoming SlideShare
Loading in …5
×

Yahoo! Application Platform (YAP)

1,626 views
1,536 views

Published on

Web Application and Yahoo! Application Platform talk presented during the HackU 2011 @ IIT Kharagpur.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,626
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Yahoo! Application Platform (YAP)

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

×