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

E190023b66e2b8aa73a842b106920c93?s=128

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.

  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 :)