Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting started with YUI3 and AlloyUI

Getting started with YUI3 and AlloyUI

JAX Conference - Mainz, 2013

Zeno Rocha

April 25, 2013
Tweet

More Decks by Zeno Rocha

Other Decks in Programming

Transcript

  1. getting started
    with YUI3 and
    AlloyUI
    Mainz, 2013.

    View Slide

  2. View Slide

  3. View Slide

  4. how some
    back-end
    devs see
    themselves

    View Slide

  5. how some
    back-end
    devs see
    front-end
    devs

    View Slide

  6. “CSS is very easy”

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. “javascript
    is ugly and
    full of bugs”

    View Slide

  11. View Slide

  12. EcmaScript 6 is coming

    View Slide

  13. front-end
    is changing

    View Slide

  14. extremejs.com

    View Slide

  15. github.com/languages

    View Slide

  16. there are three
    types of people

    View Slide

  17. 1. those who
    compile
    javascript

    View Slide

  18. developers.google.com/web-toolkit

    View Slide

  19. 2. those who
    doesn’t
    compile

    View Slide

  20. developers.google.com/closure/library

    View Slide

  21. 3. java == javascript

    View Slide

  22. View Slide

  23. View Slide

  24. twitter.com/joelambert/status/327047616326152193

    View Slide

  25. View Slide

  26. today we’re
    going to
    talk about
    server-agnostic
    JS frameworks

    View Slide

  27. Events,
    Selection,
    DOM Manipulation,
    Animation,
    Ajax requests
    jquery.com

    View Slide

  28. mootools.net

    View Slide

  29. UI components
    twitter.github.io/bootstrap

    View Slide

  30. jqueryui.com

    View Slide

  31. Templates
    mustache.github.io

    View Slide

  32. handlebarsjs.com

    View Slide

  33. Module loader
    requirejs.org

    View Slide

  34. headjs.com

    View Slide

  35. MV*
    backbonejs.org

    View Slide

  36. knockoutjs.com

    View Slide

  37. angularjs.org

    View Slide

  38. emberjs.com

    View Slide

  39. Tests
    BDD
    TDD
    pivotal.github.io/jasmine

    View Slide

  40. qunitjs.com

    View Slide

  41. View Slide

  42. yuilibrary.com

    View Slide

  43. yuilibrary.com/projects/yuitest

    View Slide

  44. yui.github.io/yuicompressor

    View Slide

  45. yui.github.io/yuidoc

    View Slide

  46. yui.github.io/yogi

    View Slide

  47. YUI3
    modules

    View Slide

  48. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  49. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  50. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  51. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  52. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  53. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  54. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  55. yuilibrary.com/yui/docs/guides

    View Slide

  56. yuilibrary.com/yui/docs/dial/dial-interactive.html

    View Slide

  57. yuilibrary.com/yui/docs/app/app-todo.html

    View Slide

  58. yuilibrary.com/yui/docs/graphics/graphics-violin.html

    View Slide

  59. YUI3
    basics

    View Slide

  60. $('.foo');
    DOM
    traversal
    Y.all('.foo');
    YUI3
    jQuery

    View Slide

  61. $('#foo').html('bar');
    DOM
    manipulation
    Y.one('#foo').setHTML('bar');
    YUI3
    jQuery

    View Slide

  62. $('#close-btn').on('click', function() {
    // do something
    });
    events
    Y.one('#close-btn').on('click', function() {
    // do something
    });
    YUI3
    jQuery

    View Slide

  63. $('#fade').animate({
    opacity: 0,
    }, 5000);
    effects
    Y.one('#fade').transition({
    duration: 1,
    opacity : 0
    });
    YUI3
    jQuery

    View Slide

  64. $.ajax({
    url: "api.json",
    success: function(data) {
    // do something
    }
    });
    ajax
    Y.io('api.json', {
    on: {
    success: function(data) {
    // do something
    }
    }
    });
    YUI3
    jQuery

    View Slide

  65. alloyui.com/rosetta-stone

    View Slide

  66. YUI3
    loading

    View Slide

  67. View Slide

  68. “Optimize the front-end
    performance first, because
    80/90% of the user response
    time is spent there.”
    - Steve Souders,
    Engineer at Google

    View Slide

  69. without YUI...

    View Slide






  70. ...
    ...

    View Slide

  71. performance--
    maintainability--

    View Slide

  72. blocks render

    View Slide

  73. with YUI...

    View Slide

  74. one <br/>

    View Slide

  75. seed file

    View Slide

  76. everything else
    asynchronous
    combo-loaded
    from CDN

    View Slide

  77. sandbox
    YUI().use('module-name', function (Y) {
    // code goes here
    });

    View Slide

  78. why
    asynchronous?

    View Slide

  79. non-blocking
    http requests

    View Slide

  80. why
    combo-loaded?

    View Slide

  81. yuilibrary.com/yui/configurator

    View Slide

  82. why
    load from a CDN?

    View Slide

  83. geographically
    closer

    View Slide

  84. YUI
    gallery

    View Slide

  85. yuilibrary.com/gallery

    View Slide

  86. your code on
    Yahoo’s CDN

    View Slide

  87. github.com/yui/yui3-gallery

    View Slide

  88. available to
    anyone

    View Slide

  89. just use()
    YUI().use('gallery-audio', function (Y) {
    // code goes here
    });

    View Slide

  90. mzl.la/OEbuQH

    View Slide

  91. AlloyUI

    View Slide

  92. @natecavanaugh

    View Slide

  93. @eduardolundgren

    View Slide

  94. created on 2009

    View Slide

  95. alloyui.com

    View Slide

  96. built on top of YUI3

    View Slide

  97. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  98. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  99. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  100. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  101. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  102. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  103. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  104. what we wanted:
    char counter

    View Slide

  105. #twitter-box
    #myTextarea
    #myCounter

    View Slide

  106. #twitter-box
    #myTextarea
    #myCounter

    View Slide

  107. #twitter-box
    #myTextarea
    #myCounter

    View Slide

  108. #twitter-box
    #myTextarea
    #myCounter

    View Slide

  109. alloyui.com/examples/char-counter/real-world

    View Slide

  110. what we wanted:
    schedule

    View Slide

  111. View Slide

  112. alloyui.com/examples/scheduler

    View Slide

  113. what we wanted:
    a better way to
    express ideas

    View Slide

  114. * drag and drop UI
    * flexible API
    * support all browsers
    * no flash (HTML5)

    View Slide

  115. alloyui.com/examples/diagram-builder

    View Slide

  116. alloyui.com/api

    View Slide

  117. but I’m
    a java
    guy!

    View Slide

  118. \o/

    View Slide

  119. taglibs
    type="submit" value="save"/>
    Button

    View Slide

  120. taglibs




    [8,50]


    Form Validation

    View Slide

  121. the success of an application
    doesn’t depends on the
    technology itself...
    ...but how it is applied.

    View Slide

  122. View Slide

  123. View Slide

  124. dank :)

    View Slide