This document provides an overview of YUI3 and AlloyUI frameworks. It discusses how YUI3 offers modules for DOM manipulation, events, effects, AJAX requests and more. AlloyUI is introduced as a set of UI components built on YUI3, including calendars, tabs and buttons. Examples are given of building a character counter and scheduler using AlloyUI. The benefits of YUI3 like performance, maintainability and loading from CDNs are also highlighted.

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