Building YAP Applications with YUI
114
-
Upload
reid-burke -
Category
Technology
-
view
4.700 -
download
0
description
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.
Transcript of 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
40Mdaily 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 Viewoverview of your app
HTML & YML only
YUICONF 2009
YUICONF 2009
YUICONF 2009
Full Viewproxied
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
Productionmake 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
Cajaunbiased review
YUICONF 2009
UntrustedJavaScript
YUICONF 2009
UntrustedJavaScript
evil.com/yap.php
YUICONF 2009
UntrustedJavaScript
YAPEngine
evil.com/yap.php
YUICONF 2009
UntrustedJavaScript
YAPEngine
Cajoledscript
evil.com/yap.php apps.yahoo.com/-3vi1
YUICONF 2009
Let’s get YUI
YUICONF 2009
YUI CoreThe YAHOO Global Object (base requirement for all YUI components)
DOM Collection (convenience methods for DOM interactions)Event Utility (event normalization and custom events)
UtilitiesAnimation
Connection ManagerDrag & Drop
ElementImageLoader
ResizeSelector
Controls / WidgetsAutoComplete
ButtonContainer
(includes Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog)
MenuTabViewTreeView
YUICONF 2009
YAP supports 2.8
YUICONF 2009
YAP supports 2.8mostly
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 compliantJavaScript 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 lazygithub.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
Thank You
Photograph used under the CC BY 2.0 license.flickr.com/photos/soundfromwayout/143822346
Download this presentation:
slideshare.net/reidburke
