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.

1. YUICONF 2009
@reid on twitter
rburke@yahoo-inc.com
Reid Burke
Building YAP Applications with YUI

2. What is YUI?

3. What is YAP?

4. YUICONF 2009
Your web app

5. YUICONF 2009
Yahoo!’s network

6. YUICONF 2009

7. YUICONF 2009
330M+
users every month

8. YUICONF 2009
40M
daily users

9. Zynga
weRead.com
RockYou!
LabPixies

10. YUICONF 2009
Getting started

11. YUICONF 2009
developer.yahoo.com
My Projects

12. YUICONF 2009
developer.yahoo.com
My Projects Create an app

13. YUICONF 2009

14. YUICONF 2009
You’re all set,
continue.

15. YUICONF 2009

16. YUICONF 2009
Two views

17. YUICONF 2009

18. YUICONF 2009
Small View
Full View

19. YUICONF 2009
Small View
overview of your app
HTML & YML only

20. YUICONF 2009

21. YUICONF 2009

22. YUICONF 2009
Full View
proxied
supports JavaScript

23. YUICONF 2009

24. Your web server URL

25. YUICONF 2009
Need hosting?

26. YUICONF 2009
Need hosting?
Free Joyent
Accelerator for a year.
signup.joyent.com/yahoo_signup

27. Your web server URL

28. http://reid.yahoo.joyent.us/game/

29. YUICONF 2009
http://reid.yahoo.joyent.us/game/

30. YUICONF 2009
http://reid.yahoo.joyent.us/game/fight.php

31. YUICONF 2009
http://apps.yahoo.com/-foo/fight.php
http://reid.yahoo.joyent.us/game/fight.php

32. YUICONF 2009
YAP isn’t always on
apps.yahoo.com

33. YUICONF 2009
<a href=”http://
apps.yahoo.com/-foo/
fight.php?u={guid}”>
Attack your friend!
</a>

34. YUICONF 2009
<a href=”http://
apps.yahoo.com/-foo/
fight.php?u={guid}”>
Attack your friend!
</a>

35. YUICONF 2009
YML

36. YUICONF 2009
<yml:a
params=”fight.php?
u={guid}”>
Attack them!
</yml:a>

37. YUICONF 2009
<yml:a
params=”fight.php?
u={guid}”
replace=”foo”>
Attack them!
</yml:a>

38. YUICONF 2009
<yml:a
params=”fight.php?
u={guid}”
replace=”foo”>
Attack <yml:pronoun
uid=”{guid}”
objective=”true”/>!
</yml:a>

39. YUICONF 2009
<div id=”content”>
Loading...</div>
<yml:include
params=”smallView.php”
replace=”content”/>

40. YUICONF 2009
Selected friend:
<yml:user-badge
uid=”{friend}”
linked=”true”/>.

41. YUICONF 2009
<style>
h1 { color red; }
<yml:if-env ua=”ie”>
h1 { color: green; }
</yml:if-env>
</style>

42. YUICONF 2009
developer.yahoo.com/yap/yml

43. YUICONF 2009
Make 2 apps:

44. YUICONF 2009
Make 2 apps:
test it on yahoo.com
Development

45. YUICONF 2009
Make 2 apps:
test it on yahoo.com
Development
Production
make metadata
changes on dev first

46. YUICONF 2009
What’s the
approval process?

47. YUICONF 2009
There isn’t one.

48. YUICONF 2009
No application
review!

49. YUICONF 2009
Things can go
wrong

50. YUICONF 2009

51. YUICONF 2009
•top.location

52. YUICONF 2009
•top.location
•Browser history

53. YUICONF 2009
•top.location
•Browser history
•Cookie & token stealing

54. YUICONF 2009
•top.location
•Browser history
•Cookie & token stealing
•Script injection

55. YUICONF 2009
•top.location
•Browser history
•Cookie & token stealing
•Script injection
•Host discovery

56. YUICONF 2009
•top.location
•Browser history
•Cookie & token stealing
•Script injection
•Host discovery
•XMLHttpRequest

57. YUICONF 2009
Caja

58. YUICONF 2009
Caja
unbiased review

59. YUICONF 2009
Untrusted
JavaScript

60. YUICONF 2009
Untrusted
JavaScript
evil.com/yap.php

61. YUICONF 2009
Untrusted
JavaScript
YAP
Engine
evil.com/yap.php

62. YUICONF 2009
Untrusted
JavaScript
YAP
Engine
Cajoled
script
evil.com/yap.php apps.yahoo.com/-3vi1

63. YUICONF 2009
Let’s get YUI

64. YUICONF 2009
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)
Utilities
Animation
Connection Manager
Drag & Drop
Element
ImageLoader
Resize
Selector
Controls / Widgets
AutoComplete
Button
Container
(includes Module, Overlay, Panel,
Tooltip, Dialog, SimpleDialog)
Menu
TabView
TreeView

65. YUICONF 2009
YAP supports 2.8

66. YUICONF 2009
YAP supports 2.8
mostly

67. YUICONF 2009
Take advantage of
our YUI hosting

68. YUICONF 2009
rewritten to pre-
cajoled versions
<script src=”http://
yui.yahooapis.com/2.8.0/”

69. YUICONF 2009

70. YUICONF 2009
2.8.0 in the URL

71. YUICONF 2009
Working with Caja

72. YUICONF 2009
Hello standards!

73. YUICONF 2009
W3C compliant
JavaScript API

74. YUICONF 2009
Caja makes up for
browser
deficiencies

75. YUICONF 2009
No external
JavaScript or CSS

76. YUICONF 2009
Your HTML/JS/CSS
needs to be inline

77. YUICONF 2009
<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>

78. YUICONF 2009
<script src=”my.js”>
</script><link href=”my.css”
rel=”stylesheet”>
<script>/* my.js */</script>
<style>/* my.css */</style>

79. YUICONF 2009
be lazy
github.com/reid/ungadget

80. YUICONF 2009
Externalized
JavaScript and CSS.
We’re working on it.

81. YUICONF 2009
No access to
computed styles

82. YUICONF 2009
Script is always run
after your markup

83. YUICONF 2009
<script/><h1/><div/><script/>
<h1/><div/>
<script>/* Concatenated */</script>

84. YUICONF 2009
restricted this

85. YUICONF 2009
document.location
can’t be set
document.location = myURL;

86. YUICONF 2009
No with

87. YUICONF 2009
No document.write

88. YUICONF 2009
document.write(“Hello world!”);
YAHOO.util.Dom.get(“foo”).innerHTML =
“Hello World!”;

89. YUICONF 2009
Avoid CSS hacks

90. YUICONF 2009
<style>
h1 { color: red; }
h1 { _color: green; }
</style>
<style>
h1 { color red; }
<yml:if-env ua=”ie”>
h1 { color: green; }
</yml:if-env>
</style>

91. YUICONF 2009
Creating SWFs

92. YUICONF 2009
<yml:swf/>

93. YUICONF 2009
YAP caches images

94. YUICONF 2009
Changed images?
Change the URL.

95. YUICONF 2009
Examples!
github.com/reid/yap-examples

96. YUICONF 2009
Logger

97. YUICONF 2009
Logger

98. YUICONF 2009
Logger

99. YUICONF 2009
Logger

100. YUICONF 2009
Dialogs & CSS

101. YUICONF 2009
Dialogs & CSS
/*YUI Fonts CSS can’t apply rules to body */
#app { /* rules from fonts.css */ }

102. YUICONF 2009
Dialogs & CSS
/*YUI Fonts CSS can’t apply rules to body */
#app { /* rules from fonts.css */ }

103. YUICONF 2009
Examples!
developer.yahoo.com/yap/guide/yui-examples.html

104. YUICONF 2009
developer.yahoo.com/yap

105. YUICONF 2009
Make some apps!

106. YUICONF 2009
•Small and Full Views

107. YUICONF 2009
•Small and Full Views
•Free Joyent Accelerator

108. YUICONF 2009
•Small and Full Views
•Free Joyent Accelerator
•YML tags

109. YUICONF 2009
•Small and Full Views
•Free Joyent Accelerator
•YML tags
•Cajoled scripts

110. YUICONF 2009
•Small and Full Views
•Free Joyent Accelerator
•YML tags
•Cajoled scripts
•YUI 2.8.0 pre-cajoled

111. YUICONF 2009
•Small and Full Views
•Free Joyent Accelerator
•YML tags
•Cajoled scripts
•YUI 2.8.0 pre-cajoled
•No external scripts

112. YUICONF 2009
Questions?

113. YUICONF 2009
@reid on Twitter
rburke@yahoo-inc.com

114. YUICONF 2009
Thank You
Photograph used under the CC BY 2.0 license.
flickr.com/photos/soundfromwayout/143822346
Download this presentation:
slideshare.net/reidburke