Getting Started with YUI3 and AlloyUI

Transcript

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