Building YAP Applications with YUI

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    7 Favorites

    Building YAP Applications with YUI - Presentation Transcript

    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

    + Reid BurkeReid Burke, 1 month ago

    custom

    777 views, 7 favs, 0 embeds more stats

    The Yahoo! Application Platform allows you to build more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 777
      • 777 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 7
    • Downloads 26
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories