1. Liferay UI
revolution
São Paulo, 2014

5. “Study the past if
you would define
the future”
- Confucius

6. v1.7 - JS

7. v3.0 - JS

8. v4.2 - JS

9. v5.0 - jQuery

11. v6.0 - AlloyUI

12. 2009

13. @natecavanaugh

14. @eduardolundgren

16. effects
ajax
YUI =
MVC
events
DOM ...

17. calendar
buttons
AlloyUI = audio
carousel
tabs ...

18. JavaScript

19. YUI

20. AlloyUI

21. 60 components in 6 months

23. 08/2012

25. AlloyUI 2
01/2013

26. #1
easier
to use

27. v1.5.x
A) Git Clone 1.03 gb
B) Download ZIP 78.1 mb

28. v2.0.x
Just load it from CDN
<script src="http://cdn.alloyui.com/
2.0.0pr7/aui/aui-min.js"></script>

29. v2.0.x
No need to download
entire project, just use
YUI().use('aui-carousel', function (Y) {
// code goes here
});

30. carousel

31. carousel
YUI().use('aui-carousel', function(Y) {
new Y.Carousel({
contentBox: '#myCarousel',
height: 250,
width: 700
}).render();
});

32. image cropper

33. image cropper
YUI().use('aui-image-cropper', function(Y) {
new Y.ImageCropper({
srcNode: '#myImage'
}).render();
});

34. but I’m
a java
guy!

35. <taglibs> o/

36. taglibs
<aui:button name="saveButton"
type="submit" value="save" />
Button

37. taglibs
Form Validation
<aui:input name="myField">
<aui:validator name="required" />
<aui:validator name="digits" />
<aui:validator name="range" >
[8,50]
</aui:validator>
</aui:input>

38. #2
faster
to build

39. v1.5.x
Time to build
~5 min

40. v2.0.x
Time to build
~1 min

41. #3
more
docs

42. alloyui.com

43. > 1,200,000
pageviews

44. +30 tutorials
+60 examples
!
All written
in Markdown

45. #4
more
community
engagement

46. october, 2013
january, 2013

47. > 30,000
downloads

48. #5
better
performance

49. Optimize the front-end
performance first, because 80%
of the user response time is
spent there.
!
- Steve Souders,
Google

50. YUI 3.6 vs 3.11
jsperf.com/yui-basecore-vs-base/5

51. YUI 3.6 vs 3.11
Base
> 40,000 ops/sec
BaseCore
> 90,000 ops/sec
jsperf.com/yui-basecore-vs-base/5

52. #6
redesign
everything

53. liferay.github.io/alloy-bootstrap

54. twitter.com/_pier/status/337880167802355712

55. what
about
liferay
portal?

56.
Liferay Portal
AlloyUI

57. themes

58. new
classic
theme

59. github.com/liferay/alloy-bootstrap

61. what
about
custom
themes?

62. bootstrapthemes.com

63. wrapbootstrap.com

64. bootswatch.com

65. how can I
upgrade my
theme/plugin?

66. github.com/liferay/liferay-aui-upgrade-tool

67. upgrade tool
1. Install
$ npm install -g laut
2. Execute
$ laut -f ~/Liferay/liferay-plugins

68. localization

69. over 100,000
submissions,
modifications,
and approval
actions

70. translate.liferay.com

72. mobile
devices

73. mobile
vs
responsive
design

75. how to
test?

77. responsive
design
preview

78. HTML

80. <input type=”email”>
<input type=”date”>
native inputs
<input type=”number”>
<input type=”time”>

81. “HTML5 is
the future”

82. wanna see the future?

84. HTML5
is today!

85. Content
Consumer

86.
Devices

87. Content
Consumer

88.
Devices

89. old browsers are like BW TVs

90. new browsers are like HD TVs

91. TV already solved that problem

92. so why people
keep doing this?

93. “The best way
to predict the
future is to
create it”
- Abraham Lincoln

94. obrigado :)