Liferay UI
revolution
São Paulo, 2014

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

v1.7 - JS

v3.0 - JS

v4.2 - JS

v5.0 - jQuery

v6.0 - AlloyUI

2009

@natecavanaugh

@eduardolundgren

effects
ajax
YUI =
MVC
events
DOM ...

calendar
buttons
AlloyUI = audio
carousel
tabs ...

JavaScript

YUI

AlloyUI

60 components in 6 months

08/2012

AlloyUI 2
01/2013

#1
easier
to use

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

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

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

carousel

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

image cropper

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

but I’m
a java
guy!

<taglibs> o/

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

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>

#2
faster
to build

v1.5.x
Time to build
~5 min

v2.0.x
Time to build
~1 min

#3
more
docs

alloyui.com

> 1,200,000
pageviews

+30 tutorials
+60 examples
!
All written
in Markdown

#4
more
community
engagement

october, 2013
january, 2013

> 30,000
downloads

#5
better
performance

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

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

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

#6
redesign
everything

liferay.github.io/alloy-bootstrap

twitter.com/_pier/status/337880167802355712

what
about
liferay
portal?

Liferay Portal
AlloyUI

themes

new
classic
theme

github.com/liferay/alloy-bootstrap

what
about
custom
themes?

bootstrapthemes.com

wrapbootstrap.com

bootswatch.com

how can I
upgrade my
theme/plugin?

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

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

localization

over 100,000
submissions,
modifications,
and approval
actions

translate.liferay.com

mobile
devices

mobile
vs
responsive
design

how to
test?

responsive
design
preview

HTML

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

“HTML5 is
the future”

wanna see the future?

HTML5
is today!

Content
Consumer