Indo além com AlloyUI

855 visualizações

Publicada em

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.

Publicada em: Tecnologia
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
855
No SlideShare
0
A partir de incorporações
0
Número de incorporações
14
Ações
Compartilhamentos
0
Downloads
26
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

×