Building YAP Applications with YUI
Upcoming SlideShare
Loading in...5
×
 

Building YAP Applications with YUI

on

  • 6,993 views

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 ...

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.

Statistics

Views

Total Views
6,993
Views on SlideShare
6,970
Embed Views
23

Actions

Likes
10
Downloads
81
Comments
0

4 Embeds 23

http://www.slideshare.net 12
http://lanyrd.com 5
http://www.linkedin.com 5
http://www.lmodules.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building YAP Applications with YUI Building YAP Applications with YUI Presentation Transcript

    • 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