Getting started with YUI3 and AlloyUI

JAX Conference - Mainz, 2013

Transcript

1. getting started with YUI3 and AlloyUI Mainz, 2013.
4. how some back-end devs see themselves
5. how some back-end devs see front-end devs
6. “CSS is very easy”
10. “javascript is ugly and full of bugs”
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
24. twitter.com/joelambert/status/327047616326152193
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
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
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
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.
124. dank :)