Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Building YAP Applications with YUI
                   Reid Burke
                  @reid on twitter
YUICONF 2009   rburke@...
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 2...
<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
   ...
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 2...
•   top.location

   • Browser history
   • Cookie & token stealing

   • Script injection

   • Host discovery
   • XMLHt...
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.c...
Let’s get YUI


YUICONF 2009
YUI Core
   The YAHOO Global Object (base requirement for all YUI components)
       DOM Collection (convenience methods f...
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 src=”my.js”>
         </script><link href=”my.css”
               rel=”stylesheet”>




         <script>/* my.js ...
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 re...
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 */ }




YU...
Dialogs & CSS


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




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

YU...
•   Small and Full Views

   • Free Joyent Accelerator
   • YML tags

   • Cajoled scripts

   • YUI 2.8.0 pre-cajoled
   ...
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/...
Prochain SlideShare
Chargement dans…5
×

Building YAP Applications with YUI

12 932 vues

Publié le

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.

Publié dans : Technologie, Design
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Building YAP Applications with YUI

  1. Building YAP Applications with YUI Reid Burke @reid on twitter YUICONF 2009 rburke@yahoo-inc.com
  2. What is YUI?
  3. What is YAP?
  4. Your web app YUICONF 2009
  5. Yahoo!’s network YUICONF 2009
  6. YUICONF 2009
  7. 330M+ users every month YUICONF 2009
  8. 40M daily users YUICONF 2009
  9. LabPixies Zynga weRead.com RockYou!
  10. Getting started YUICONF 2009
  11. My Projects developer.yahoo.com YUICONF 2009
  12. My Projects Create an app developer.yahoo.com YUICONF 2009
  13. YUICONF 2009
  14. You’re all set, continue. YUICONF 2009
  15. YUICONF 2009
  16. Two views YUICONF 2009
  17. YUICONF 2009
  18. Full View Small View YUICONF 2009
  19. Small View overview of your app HTML & YML only YUICONF 2009
  20. YUICONF 2009
  21. YUICONF 2009
  22. Full View proxied supports JavaScript YUICONF 2009
  23. YUICONF 2009
  24. Your web server URL
  25. Need hosting? YUICONF 2009
  26. Need hosting? Free Joyent Accelerator for a year. signup.joyent.com/yahoo_signup YUICONF 2009
  27. Your web server URL
  28. http://reid.yahoo.joyent.us/game/
  29. http://reid.yahoo.joyent.us/game/ YUICONF 2009
  30. http://reid.yahoo.joyent.us/game/fight.php YUICONF 2009
  31. http://apps.yahoo.com/-foo/fight.php http://reid.yahoo.joyent.us/game/fight.php YUICONF 2009
  32. YAP isn’t always on apps.yahoo.com YUICONF 2009
  33. <a href=”http:// apps.yahoo.com/-foo/ fight.php?u={guid}”> Attack your friend! </a> YUICONF 2009
  34. <a href=”http:// apps.yahoo.com/-foo/ fight.php?u={guid}”> Attack your friend! </a> YUICONF 2009
  35. YML YUICONF 2009
  36. <yml:a params=”fight.php? u={guid}”> Attack them! </yml:a> YUICONF 2009
  37. <yml:a params=”fight.php? u={guid}” replace=”foo”> Attack them! </yml:a> YUICONF 2009
  38. <yml:a params=”fight.php? u={guid}” replace=”foo”> Attack <yml:pronoun uid=”{guid}” objective=”true”/>! </yml:a> YUICONF 2009
  39. <div id=”content”> Loading...</div> <yml:include params=”smallView.php” replace=”content”/> YUICONF 2009
  40. Selected friend: <yml:user-badge uid=”{friend}” linked=”true”/>. YUICONF 2009
  41. <style> h1 { color red; } <yml:if-env ua=”ie”> h1 { color: green; } </yml:if-env> </style> YUICONF 2009
  42. developer.yahoo.com/yap/yml YUICONF 2009
  43. Make 2 apps: YUICONF 2009
  44. Make 2 apps: Development test it on yahoo.com YUICONF 2009
  45. Make 2 apps: Development test it on yahoo.com Production make metadata changes on dev first YUICONF 2009
  46. What’s the approval process? YUICONF 2009
  47. There isn’t one. YUICONF 2009
  48. No application review! YUICONF 2009
  49. Things can go wrong YUICONF 2009
  50. YUICONF 2009
  51. • top.location YUICONF 2009
  52. • top.location • Browser history YUICONF 2009
  53. • top.location • Browser history • Cookie & token stealing YUICONF 2009
  54. • top.location • Browser history • Cookie & token stealing • Script injection YUICONF 2009
  55. • top.location • Browser history • Cookie & token stealing • Script injection • Host discovery YUICONF 2009
  56. • top.location • Browser history • Cookie & token stealing • Script injection • Host discovery • XMLHttpRequest YUICONF 2009
  57. Caja YUICONF 2009
  58. Caja unbiased review YUICONF 2009
  59. Untrusted JavaScript YUICONF 2009
  60. Untrusted JavaScript evil.com/yap.php YUICONF 2009
  61. Untrusted YAP JavaScript Engine evil.com/yap.php YUICONF 2009
  62. Untrusted YAP Cajoled JavaScript Engine script evil.com/yap.php apps.yahoo.com/-3vi1 YUICONF 2009
  63. Let’s get YUI YUICONF 2009
  64. 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
  65. YAP supports 2.8 YUICONF 2009
  66. YAP supports 2.8 mostly YUICONF 2009
  67. Take advantage of our YUI hosting YUICONF 2009
  68. <script src=”http:// yui.yahooapis.com/2.8.0/” rewritten to pre- cajoled versions YUICONF 2009
  69. YUICONF 2009
  70. 2.8.0 in the URL YUICONF 2009
  71. Working with Caja YUICONF 2009
  72. Hello standards! YUICONF 2009
  73. W3C compliant JavaScript API YUICONF 2009
  74. Caja makes up for browser deficiencies YUICONF 2009
  75. No external JavaScript or CSS YUICONF 2009
  76. Your HTML/JS/CSS needs to be inline YUICONF 2009
  77. <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
  78. <script src=”my.js”> </script><link href=”my.css” rel=”stylesheet”> <script>/* my.js */</script> <style>/* my.css */</style> YUICONF 2009
  79. be lazy github.com/reid/ungadget YUICONF 2009
  80. Externalized JavaScript and CSS. We’re working on it. YUICONF 2009
  81. No access to computed styles YUICONF 2009
  82. Script is always run after your markup YUICONF 2009
  83. <script/><h1/><div/><script/> <h1/><div/> <script>/* Concatenated */</script> YUICONF 2009
  84. restricted this YUICONF 2009
  85. document.location can’t be set document.location = myURL; YUICONF 2009
  86. No with YUICONF 2009
  87. No document.write YUICONF 2009
  88. document.write(“Hello world!”); YAHOO.util.Dom.get(“foo”).innerHTML = “Hello World!”; YUICONF 2009
  89. Avoid CSS hacks YUICONF 2009
  90. <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
  91. Creating SWFs YUICONF 2009
  92. <yml:swf/> YUICONF 2009
  93. YAP caches images YUICONF 2009
  94. Changed images? Change the URL. YUICONF 2009
  95. Examples! github.com/reid/yap-examples YUICONF 2009
  96. Logger YUICONF 2009
  97. Logger YUICONF 2009
  98. Logger YUICONF 2009
  99. Logger YUICONF 2009
  100. Dialogs & CSS YUICONF 2009
  101. Dialogs & CSS /* YUI Fonts CSS can’t apply rules to body */ #app { /* rules from fonts.css */ } YUICONF 2009
  102. Dialogs & CSS /* YUI Fonts CSS can’t apply rules to body */ #app { /* rules from fonts.css */ } YUICONF 2009
  103. Examples! developer.yahoo.com/yap/guide/yui-examples.html YUICONF 2009
  104. developer.yahoo.com/yap YUICONF 2009
  105. Make some apps! YUICONF 2009
  106. • Small and Full Views YUICONF 2009
  107. • Small and Full Views • Free Joyent Accelerator YUICONF 2009
  108. • Small and Full Views • Free Joyent Accelerator • YML tags YUICONF 2009
  109. • Small and Full Views • Free Joyent Accelerator • YML tags • Cajoled scripts YUICONF 2009
  110. • Small and Full Views • Free Joyent Accelerator • YML tags • Cajoled scripts • YUI 2.8.0 pre-cajoled YUICONF 2009
  111. • Small and Full Views • Free Joyent Accelerator • YML tags • Cajoled scripts • YUI 2.8.0 pre-cajoled • No external scripts YUICONF 2009
  112. Questions? YUICONF 2009
  113. @reid on Twitter rburke@yahoo-inc.com YUICONF 2009
  114. Thank You Download this presentation: slideshare.net/reidburke Photograph used under the CC BY 2.0 license. flickr.com/photos/soundfromwayout/143822346 YUICONF 2009

×