Building YAP Applications with YUI

9,322 views

Published on

The Yahoo! Application Platform allows you to build apps for the new Yahoo! homepage, My Yahoo! and other Yahoo! destinations. This session will focus on leveraging YUI on YAP, addressing best practices and noting differences from a typical environment. Particular attention will be given to writing cajolable script under Caja, the source-to-source translator that secures untrusted third-party JavaScript in YAP.

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

No Downloads
Views
Total views
9,322
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
82
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Building YAP Applications with YUI

  1. Building YAP Applications with YUI Reid Burke @reid on twitter YUICONF 2009 rburke@yahoo-inc.com
  2. What is YUI?
  3. What is YAP?
  4. Your web app YUICONF 2009
  5. Yahoo!’s network YUICONF 2009
  6. YUICONF 2009
  7. 330M+ users every month YUICONF 2009
  8. 40M daily users YUICONF 2009
  9. LabPixies Zynga weRead.com RockYou!
  10. Getting started YUICONF 2009
  11. My Projects developer.yahoo.com YUICONF 2009
  12. My Projects Create an app developer.yahoo.com YUICONF 2009
  13. YUICONF 2009
  14. You’re all set, continue. YUICONF 2009
  15. YUICONF 2009
  16. Two views YUICONF 2009
  17. YUICONF 2009
  18. Full View Small View YUICONF 2009
  19. Small View overview of your app HTML & YML only YUICONF 2009
  20. YUICONF 2009
  21. YUICONF 2009
  22. Full View proxied supports JavaScript YUICONF 2009
  23. YUICONF 2009
  24. Your web server URL
  25. Need hosting? YUICONF 2009
  26. Need hosting? Free Joyent Accelerator for a year. signup.joyent.com/yahoo_signup YUICONF 2009
  27. Your web server URL
  28. http://reid.yahoo.joyent.us/game/
  29. http://reid.yahoo.joyent.us/game/ YUICONF 2009
  30. http://reid.yahoo.joyent.us/game/fight.php YUICONF 2009
  31. http://apps.yahoo.com/-foo/fight.php http://reid.yahoo.joyent.us/game/fight.php YUICONF 2009
  32. YAP isn’t always on apps.yahoo.com YUICONF 2009
  33. <a href=”http:// apps.yahoo.com/-foo/ fight.php?u={guid}”> Attack your friend! </a> YUICONF 2009
  34. <a href=”http:// apps.yahoo.com/-foo/ fight.php?u={guid}”> Attack your friend! </a> YUICONF 2009
  35. YML YUICONF 2009
  36. <yml:a params=”fight.php? u={guid}”> Attack them! </yml:a> YUICONF 2009
  37. <yml:a params=”fight.php? u={guid}” replace=”foo”> Attack them! </yml:a> YUICONF 2009
  38. <yml:a params=”fight.php? u={guid}” replace=”foo”> Attack <yml:pronoun uid=”{guid}” objective=”true”/>! </yml:a> YUICONF 2009
  39. <div id=”content”> Loading...</div> <yml:include params=”smallView.php” replace=”content”/> YUICONF 2009
  40. Selected friend: <yml:user-badge uid=”{friend}” linked=”true”/>. YUICONF 2009
  41. <style> h1 { color red; } <yml:if-env ua=”ie”> h1 { color: green; } </yml:if-env> </style> YUICONF 2009
  42. developer.yahoo.com/yap/yml YUICONF 2009
  43. Make 2 apps: YUICONF 2009
  44. Make 2 apps: Development test it on yahoo.com YUICONF 2009
  45. Make 2 apps: Development test it on yahoo.com Production make metadata changes on dev first YUICONF 2009
  46. What’s the approval process? YUICONF 2009
  47. There isn’t one. YUICONF 2009
  48. No application review! YUICONF 2009
  49. Things can go wrong YUICONF 2009
  50. YUICONF 2009
  51. • top.location YUICONF 2009
  52. • top.location • Browser history YUICONF 2009
  53. • top.location • Browser history • Cookie & token stealing YUICONF 2009
  54. • top.location • Browser history • Cookie & token stealing • Script injection YUICONF 2009
  55. • top.location • Browser history • Cookie & token stealing • Script injection • Host discovery YUICONF 2009
  56. • top.location • Browser history • Cookie & token stealing • Script injection • Host discovery • XMLHttpRequest YUICONF 2009
  57. Caja YUICONF 2009
  58. Caja unbiased review YUICONF 2009
  59. Untrusted JavaScript YUICONF 2009
  60. Untrusted JavaScript evil.com/yap.php YUICONF 2009
  61. Untrusted YAP JavaScript Engine evil.com/yap.php YUICONF 2009
  62. Untrusted YAP Cajoled JavaScript Engine script evil.com/yap.php apps.yahoo.com/-3vi1 YUICONF 2009
  63. Let’s get YUI YUICONF 2009
  64. YUI Core The YAHOO Global Object (base requirement for all YUI components) DOM Collection (convenience methods for DOM interactions) Event Utility (event normalization and custom events) Controls / Widgets Utilities AutoComplete Animation Button Connection Manager Container Drag & Drop (includes Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog) Element Menu ImageLoader TabView Resize TreeView Selector YUICONF 2009
  65. YAP supports 2.8 YUICONF 2009
  66. YAP supports 2.8 mostly YUICONF 2009
  67. Take advantage of our YUI hosting YUICONF 2009
  68. <script src=”http:// yui.yahooapis.com/2.8.0/” rewritten to pre- cajoled versions YUICONF 2009
  69. YUICONF 2009
  70. 2.8.0 in the URL YUICONF 2009
  71. Working with Caja YUICONF 2009
  72. Hello standards! YUICONF 2009
  73. W3C compliant JavaScript API YUICONF 2009
  74. Caja makes up for browser deficiencies YUICONF 2009
  75. No external JavaScript or CSS YUICONF 2009
  76. Your HTML/JS/CSS needs to be inline YUICONF 2009
  77. <style> #hd { background: #fff; } </style> <div id=”container”> <div id=”hd”> <h1>My Awesome App</h1> </div> </div> <script> document.getElementById(“hd”).innerHTML = “Super Awesome App”; </script> YUICONF 2009
  78. <script src=”my.js”> </script><link href=”my.css” rel=”stylesheet”> <script>/* my.js */</script> <style>/* my.css */</style> YUICONF 2009
  79. be lazy github.com/reid/ungadget YUICONF 2009
  80. Externalized JavaScript and CSS. We’re working on it. YUICONF 2009
  81. No access to computed styles YUICONF 2009
  82. Script is always run after your markup YUICONF 2009
  83. <script/><h1/><div/><script/> <h1/><div/> <script>/* Concatenated */</script> YUICONF 2009
  84. restricted this YUICONF 2009
  85. document.location can’t be set document.location = myURL; YUICONF 2009
  86. No with YUICONF 2009
  87. No document.write YUICONF 2009
  88. document.write(“Hello world!”); YAHOO.util.Dom.get(“foo”).innerHTML = “Hello World!”; YUICONF 2009
  89. Avoid CSS hacks YUICONF 2009
  90. <style> h1 { color: red; } h1 { _color: green; } </style> <style> h1 { color red; } <yml:if-env ua=”ie”> h1 { color: green; } </yml:if-env> </style> YUICONF 2009
  91. Creating SWFs YUICONF 2009
  92. <yml:swf/> YUICONF 2009
  93. YAP caches images YUICONF 2009
  94. Changed images? Change the URL. YUICONF 2009
  95. Examples! github.com/reid/yap-examples YUICONF 2009
  96. Logger YUICONF 2009
  97. Logger YUICONF 2009
  98. Logger YUICONF 2009
  99. Logger YUICONF 2009
  100. Dialogs & CSS YUICONF 2009
  101. Dialogs & CSS /* YUI Fonts CSS can’t apply rules to body */ #app { /* rules from fonts.css */ } YUICONF 2009
  102. Dialogs & CSS /* YUI Fonts CSS can’t apply rules to body */ #app { /* rules from fonts.css */ } YUICONF 2009
  103. Examples! developer.yahoo.com/yap/guide/yui-examples.html YUICONF 2009
  104. developer.yahoo.com/yap YUICONF 2009
  105. Make some apps! YUICONF 2009
  106. • Small and Full Views YUICONF 2009
  107. • Small and Full Views • Free Joyent Accelerator YUICONF 2009
  108. • Small and Full Views • Free Joyent Accelerator • YML tags YUICONF 2009
  109. • Small and Full Views • Free Joyent Accelerator • YML tags • Cajoled scripts YUICONF 2009
  110. • Small and Full Views • Free Joyent Accelerator • YML tags • Cajoled scripts • YUI 2.8.0 pre-cajoled YUICONF 2009
  111. • Small and Full Views • Free Joyent Accelerator • YML tags • Cajoled scripts • YUI 2.8.0 pre-cajoled • No external scripts YUICONF 2009
  112. Questions? YUICONF 2009
  113. @reid on Twitter rburke@yahoo-inc.com YUICONF 2009
  114. Thank You Download this presentation: slideshare.net/reidburke Photograph used under the CC BY 2.0 license. flickr.com/photos/soundfromwayout/143822346 YUICONF 2009

×