YUICONF 2009

@reid on twitterrburke@yahoo-inc.com

Reid BurkeBuilding 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

@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