Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Indo além com AlloyUI

934 views

Published on

Descubra o poder do framework AlloyUI para construção de aplicações web de alta escala, aprimorando a experiência e elevando a interação do usuário para um outro nível.

Published in: Technology
  • Be the first to comment

Indo além com AlloyUI

  1. 1. getting started with YUI3 and AlloyUI Front in BH, 2013 terça-feira, 6 de agosto de 13
  2. 2. @eduardolundgren terça-feira, 6 de agosto de 13
  3. 3. terça-feira, 6 de agosto de 13
  4. 4. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira, 6 de agosto de 13
  5. 5. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira, 6 de agosto de 13
  6. 6. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira, 6 de agosto de 13
  7. 7. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira, 6 de agosto de 13
  8. 8. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira, 6 de agosto de 13
  9. 9. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira, 6 de agosto de 13
  10. 10. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira, 6 de agosto de 13
  11. 11. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira, 6 de agosto de 13
  12. 12. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira, 6 de agosto de 13
  13. 13. jquery.com (2006) terça-feira, 6 de agosto de 13
  14. 14. today we’re going to talk about server-agnostic JS frameworks terça-feira, 6 de agosto de 13
  15. 15. Events, Selection, DOM Manipulation, Animation, Ajax requests jquery.com terça-feira, 6 de agosto de 13
  16. 16. mootools.net terça-feira, 6 de agosto de 13
  17. 17. UI components twitter.github.io/bootstrap terça-feira, 6 de agosto de 13
  18. 18. jqueryui.com terça-feira, 6 de agosto de 13
  19. 19. Templates mustache.github.io terça-feira, 6 de agosto de 13
  20. 20. handlebarsjs.com terça-feira, 6 de agosto de 13
  21. 21. Module loader requirejs.org terça-feira, 6 de agosto de 13
  22. 22. headjs.com terça-feira, 6 de agosto de 13
  23. 23. MV* backbonejs.org terça-feira, 6 de agosto de 13
  24. 24. knockoutjs.com terça-feira, 6 de agosto de 13
  25. 25. angularjs.org terça-feira, 6 de agosto de 13
  26. 26. emberjs.com terça-feira, 6 de agosto de 13
  27. 27. Tests BDD TDD pivotal.github.io/jasmine terça-feira, 6 de agosto de 13
  28. 28. qunitjs.com terça-feira, 6 de agosto de 13
  29. 29. terça-feira, 6 de agosto de 13
  30. 30. yuilibrary.com terça-feira, 6 de agosto de 13
  31. 31. YUI3 modules terça-feira, 6 de agosto de 13
  32. 32. YUI = effects DOM ajax events ... MVC terça-feira, 6 de agosto de 13
  33. 33. YUI = effects DOM ajax events ... MVC terça-feira, 6 de agosto de 13
  34. 34. YUI = effects DOM ajax events ... MVC terça-feira, 6 de agosto de 13
  35. 35. YUI = effects DOM ajax events ... MVC terça-feira, 6 de agosto de 13
  36. 36. YUI = effects DOM ajax events ... MVC terça-feira, 6 de agosto de 13
  37. 37. YUI = effects DOM ajax events ... MVC terça-feira, 6 de agosto de 13
  38. 38. YUI = effects DOM ajax events ... MVC terça-feira, 6 de agosto de 13
  39. 39. yuilibrary.com/yui/docs/guides terça-feira, 6 de agosto de 13
  40. 40. yuilibrary.com/yui/docs/dial/dial-interactive.html terça-feira, 6 de agosto de 13
  41. 41. yuilibrary.com/yui/docs/app/app-todo.html terça-feira, 6 de agosto de 13
  42. 42. yuilibrary.com/yui/docs/graphics/graphics-violin.html terça-feira, 6 de agosto de 13
  43. 43. YUI3 basics terça-feira, 6 de agosto de 13
  44. 44. $('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery terça-feira, 6 de agosto de 13
  45. 45. $('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery terça-feira, 6 de agosto de 13
  46. 46. $('#close-btn').on('click', function() { // do something }); events Y.one('#close-btn').on('click', function() { // do something }); YUI3 jQuery terça-feira, 6 de agosto de 13
  47. 47. $('#fade').animate({ opacity: 0, }, 5000); effects Y.one('#fade').transition({ duration: 1, opacity : 0 }); YUI3 jQuery terça-feira, 6 de agosto de 13
  48. 48. $.ajax({ url: "api.json", success: function(data) { // do something } }); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery terça-feira, 6 de agosto de 13
  49. 49. alloyui.com/rosetta-stone terça-feira, 6 de agosto de 13
  50. 50. YUI3 loading terça-feira, 6 de agosto de 13
  51. 51. terça-feira, 6 de agosto de 13
  52. 52. “Optimize the front-end performance first, because 80% of the user response time is spent there.” - Steve Souders, Engineer at Google terça-feira, 6 de agosto de 13
  53. 53. without YUI... terça-feira, 6 de agosto de 13
  54. 54. <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> ... ... terça-feira, 6 de agosto de 13
  55. 55. performance-- maintainability-- terça-feira, 6 de agosto de 13
  56. 56. blocks render terça-feira, 6 de agosto de 13
  57. 57. with YUI... terça-feira, 6 de agosto de 13
  58. 58. one <script> terça-feira, 6 de agosto de 13
  59. 59. seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> terça-feira, 6 de agosto de 13
  60. 60. seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> terça-feira, 6 de agosto de 13
  61. 61. everything else asynchronous combo-loaded from CDN terça-feira, 6 de agosto de 13
  62. 62. sandbox YUI().use('module-name', function (Y) { // code goes here }); terça-feira, 6 de agosto de 13
  63. 63. why asynchronous? terça-feira, 6 de agosto de 13
  64. 64. non-blocking http requests terça-feira, 6 de agosto de 13
  65. 65. load on demand terça-feira, 6 de agosto de 13
  66. 66. why combo-loaded? terça-feira, 6 de agosto de 13
  67. 67. yuilibrary.com/yui/configurator terça-feira, 6 de agosto de 13
  68. 68. loader +combo terça-feira, 6 de agosto de 13
  69. 69. why load from a CDN? terça-feira, 6 de agosto de 13
  70. 70. geographically closer terça-feira, 6 de agosto de 13
  71. 71. YUI gallery terça-feira, 6 de agosto de 13
  72. 72. yuilibrary.com/gallery terça-feira, 6 de agosto de 13
  73. 73. your code on Yahoo’s CDN terça-feira, 6 de agosto de 13
  74. 74. github.com/yui/yui3-gallery terça-feira, 6 de agosto de 13
  75. 75. available to anyone terça-feira, 6 de agosto de 13
  76. 76. just use() YUI().use('gallery-audio', function (Y) { // code goes here }); terça-feira, 6 de agosto de 13
  77. 77. mzl.la/OEbuQH terça-feira, 6 de agosto de 13
  78. 78. AlloyUI terça-feira, 6 de agosto de 13
  79. 79. @natecavanaugh terça-feira, 6 de agosto de 13
  80. 80. created on 2009 terça-feira, 6 de agosto de 13
  81. 81. alloyui.com terça-feira, 6 de agosto de 13
  82. 82. built on top of YUI3 terça-feira, 6 de agosto de 13
  83. 83. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6 de agosto de 13
  84. 84. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6 de agosto de 13
  85. 85. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6 de agosto de 13
  86. 86. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6 de agosto de 13
  87. 87. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6 de agosto de 13
  88. 88. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6 de agosto de 13
  89. 89. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6 de agosto de 13
  90. 90. terça-feira, 6 de agosto de 13
  91. 91. terça-feira, 6 de agosto de 13
  92. 92. what we wanted: char counter terça-feira, 6 de agosto de 13
  93. 93. #twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
  94. 94. #twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
  95. 95. #twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
  96. 96. #twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
  97. 97. alloyui.com/examples/char-counter/real-world terça-feira, 6 de agosto de 13
  98. 98. what we wanted: schedule terça-feira, 6 de agosto de 13
  99. 99. terça-feira, 6 de agosto de 13
  100. 100. alloyui.com/examples/scheduler terça-feira, 6 de agosto de 13
  101. 101. what we wanted: a better way to express ideas terça-feira, 6 de agosto de 13
  102. 102. * drag and drop UI * flexible API * support all browsers * no flash (HTML5) terça-feira, 6 de agosto de 13
  103. 103. alloyui.com/examples/diagram-builder terça-feira, 6 de agosto de 13
  104. 104. terça-feira, 6 de agosto de 13
  105. 105. obrigado :) terça-feira, 6 de agosto de 13

×