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

What is YUI?

What is YAP?

Your web app
YUICONF 2009

Yahoo!’s network
YUICONF 2009

YUICONF 2009

330M+
users every month
YUICONF 2009

40M
daily users
YUICONF 2009

LabPixies
Zynga
weRead.com
RockYou!

Getting started
YUICONF 2009

My Projects
developer.yahoo.com
YUICONF 2009

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

YUICONF 2009

You’re all set,
continue.
YUICONF 2009

YUICONF 2009

Two views
YUICONF 2009

YUICONF 2009

Full View
Small View
YUICONF 2009

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

YUICONF 2009

YUICONF 2009

Full View
proxied
supports JavaScript
YUICONF 2009

YUICONF 2009

Your web server URL

Need hosting?
YUICONF 2009

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

Your web server URL

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

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

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

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

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

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

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

YML
YUICONF 2009

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

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

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

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

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

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

developer.yahoo.com/yap/yml
YUICONF 2009

Make 2 apps:
YUICONF 2009

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

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

What’s the
approval process?
YUICONF 2009

There isn’t one.
YUICONF 2009

No application
review!
YUICONF 2009

Things can go
wrong
YUICONF 2009

YUICONF 2009

• top.location
YUICONF 2009

• top.location
• Browser history
YUICONF 2009

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

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

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

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

Caja
YUICONF 2009

Caja
unbiased review
YUICONF 2009

Untrusted
JavaScript
YUICONF 2009

Untrusted
JavaScript
evil.com/yap.php
YUICONF 2009

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

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

Let’s get YUI
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)
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

YAP supports 2.8
YUICONF 2009

YAP supports 2.8
mostly
YUICONF 2009

Take advantage of
our YUI hosting
YUICONF 2009

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

YUICONF 2009

2.8.0 in the URL
YUICONF 2009

Working with Caja
YUICONF 2009

Hello standards!
YUICONF 2009

W3C compliant
JavaScript API
YUICONF 2009

Caja makes up for
browser
deficiencies
YUICONF 2009

No external
JavaScript or CSS
YUICONF 2009

Your HTML/JS/CSS
needs to be inline
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>
YUICONF 2009

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

be lazy
github.com/reid/ungadget
YUICONF 2009

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

No access to
computed styles
YUICONF 2009

Script is always run
after your markup
YUICONF 2009

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

restricted this
YUICONF 2009

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

No with
YUICONF 2009

No document.write
YUICONF 2009

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

Avoid CSS hacks
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>
YUICONF 2009

Creating SWFs
YUICONF 2009

<yml:swf/>
YUICONF 2009

YAP caches images
YUICONF 2009

Changed images?
Change the URL.
YUICONF 2009

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

Logger
YUICONF 2009

Logger
YUICONF 2009

Logger
YUICONF 2009

Logger
YUICONF 2009

Dialogs & CSS
YUICONF 2009

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

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

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

developer.yahoo.com/yap
YUICONF 2009

Make some apps!
YUICONF 2009

• Small and Full Views
YUICONF 2009

• Small and Full Views
• Free Joyent Accelerator
YUICONF 2009

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

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

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

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

Questions?
YUICONF 2009

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

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