Jax Conf @ Mainz, Germany @ April, 2013

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