Getting started with YUI3 and AlloyUI

Getting started with YUI3 and AlloyUI

JAX Conference - Mainz, 2013

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

April 25, 2013
Tweet

Transcript

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

  2. None
  3. None
  4. how some back-end devs see themselves

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

  6. “CSS is very easy”

  7. None
  8. None
  9. None
  10. “javascript is ugly and full of bugs”

  11. None
  12. EcmaScript 6 is coming

  13. front-end is changing

  14. extremejs.com

  15. github.com/languages

  16. there are three types of people

  17. 1. those who compile javascript

  18. developers.google.com/web-toolkit

  19. 2. those who doesn’t compile

  20. developers.google.com/closure/library

  21. 3. java == javascript

  22. None
  23. None
  24. twitter.com/joelambert/status/327047616326152193

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

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

  28. mootools.net

  29. UI components twitter.github.io/bootstrap

  30. jqueryui.com

  31. Templates mustache.github.io

  32. handlebarsjs.com

  33. Module loader requirejs.org

  34. headjs.com

  35. MV* backbonejs.org

  36. knockoutjs.com

  37. angularjs.org

  38. emberjs.com

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

  40. qunitjs.com

  41. None
  42. yuilibrary.com

  43. yuilibrary.com/projects/yuitest

  44. yui.github.io/yuicompressor

  45. yui.github.io/yuidoc

  46. yui.github.io/yogi

  47. YUI3 modules

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

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

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

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

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

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

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

  55. yuilibrary.com/yui/docs/guides

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

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

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

  59. YUI3 basics

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

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

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

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

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

    }); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery
  65. alloyui.com/rosetta-stone

  66. YUI3 loading

  67. None
  68. “Optimize the front-end performance first, because 80/90% of the user

    response time is spent there.” - Steve Souders, Engineer at Google
  69. without YUI...

  70. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/ 1.9.1/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/ 1.10.2/jquery-ui.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ mustache.js/0.7.2/mustache.js"></script> <script

    src="//cdnjs.cloudflare.com/ajax/libs/ require.js/2.1.5/require.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/ 1.0.0-rc.2/ember-1.0.pre.js"></script> ... ...
  71. performance-- maintainability--

  72. blocks render

  73. with YUI...

  74. one <script>

  75. seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script>

  76. everything else asynchronous combo-loaded from CDN

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

  78. why asynchronous?

  79. non-blocking http requests

  80. why combo-loaded?

  81. yuilibrary.com/yui/configurator

  82. why load from a CDN?

  83. geographically closer

  84. YUI gallery

  85. yuilibrary.com/gallery

  86. your code on Yahoo’s CDN

  87. github.com/yui/yui3-gallery

  88. available to anyone

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

    });
  90. mzl.la/OEbuQH

  91. AlloyUI

  92. @natecavanaugh

  93. @eduardolundgren

  94. created on 2009

  95. alloyui.com

  96. built on top of YUI3

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

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

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

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

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

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

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

  104. what we wanted: char counter

  105. #twitter-box #myTextarea #myCounter

  106. #twitter-box #myTextarea #myCounter

  107. #twitter-box #myTextarea #myCounter

  108. #twitter-box #myTextarea #myCounter

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

  110. what we wanted: schedule

  111. None
  112. alloyui.com/examples/scheduler

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

  114. * drag and drop UI * flexible API * support

    all browsers * no flash (HTML5)
  115. alloyui.com/examples/diagram-builder

  116. alloyui.com/api

  117. but I’m a java guy!

  118. <taglibs> \o/

  119. taglibs <aui:button name="saveButton" type="submit" value="save"/> Button

  120. taglibs <aui:input name="myField" > <aui:validator name="required" /> <aui:validator name="digits" />

    <aui:validator name="range" > [8,50] </aui:validator> </aui:input> Form Validation
  121. the success of an application doesn’t depends on the technology

    itself... ...but how it is applied.
  122. None
  123. None
  124. dank :)