SlideShare a Scribd company logo
1 of 114
Download to read offline
YUICONF 2009
@reid on twitter
rburke@yahoo-inc.com
Reid Burke
Building YAP Applications with YUI
What is YUI?
What is YAP?
YUICONF 2009
Your web app
YUICONF 2009
Yahoo!’s network
YUICONF 2009
YUICONF 2009
330M+
users every month
YUICONF 2009
40M
daily users
Zynga
weRead.com
RockYou!
LabPixies
YUICONF 2009
Getting started
YUICONF 2009
developer.yahoo.com
My Projects
YUICONF 2009
developer.yahoo.com
My Projects Create an app
YUICONF 2009
YUICONF 2009
You’re all set,
continue.
YUICONF 2009
YUICONF 2009
Two views
YUICONF 2009
YUICONF 2009
Small View
Full 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
Your web server URL
YUICONF 2009
Need hosting?
YUICONF 2009
Need hosting?
Free Joyent
Accelerator for a year.
signup.joyent.com/yahoo_signup
Your web server URL
http://reid.yahoo.joyent.us/game/
YUICONF 2009
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:
test it on yahoo.com
Development
YUICONF 2009
Make 2 apps:
test it on yahoo.com
Development
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
JavaScript
YAP
Engine
evil.com/yap.php
YUICONF 2009
Untrusted
JavaScript
YAP
Engine
Cajoled
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)
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
YUICONF 2009
YAP supports 2.8
YUICONF 2009
YAP supports 2.8
mostly
YUICONF 2009
Take advantage of
our YUI hosting
YUICONF 2009
rewritten to pre-
cajoled versions
<script src=”http://
yui.yahooapis.com/2.8.0/”
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
Photograph used under the CC BY 2.0 license.
flickr.com/photos/soundfromwayout/143822346
Download this presentation:
slideshare.net/reidburke

More Related Content

Building YAP Applications with YUI