Liferay UI revolution

Liferay UI revolution Liferay NAS, 2013 Tuesday, October 22, 13

@eduardolundgren Tuesday, October 22, 13

I’m from brazil Tuesday, October 22, 13

Tuesday, October 22, 13

“Study the past if you would define the future” -
Confucius Tuesday, October 22, 13

v1.7 - JS Tuesday, October 22, 13

v5.0 - jQuery Tuesday, October 22, 13

v6.0 - AlloyUI Tuesday, October 22, 13

what was the problem? Tuesday, October 22, 13

liferay is growing Tuesday, October 22, 13

commits by year 250 ➪ 2500 Tuesday, October 22, 13

commits by year Tuesday, October 22, 13

lines of code 1M ➪ 9M Tuesday, October 22, 13

lines by year Tuesday, October 22, 13

it’s a lot of code to maintain Tuesday, October 22,
13

how to improve that? Tuesday, October 22, 13

2009 Tuesday, October 22, 13

YUI = effects DOM ajax events ... MVC Tuesday, October
22, 13

AlloyUI = calendar tabs buttons carousel ... audio Tuesday, October
22, 13

JavaScript Tuesday, October 22, 13

YUI Tuesday, October 22, 13

AlloyUI Tuesday, October 22, 13

60 components in 6 months Tuesday, October 22, 13

08/2012 Tuesday, October 22, 13

08/2012 cartola (brazilian desert) banana butter cheese cinnamon sugar Tuesday,
October 22, 13

AlloyUI 2.0 01/2013 Tuesday, October 22, 13

easier to use #1 Tuesday, October 22, 13

v1.5.x A) Git Clone 1.03 gb B) Download ZIP 78.1
mb Tuesday, October 22, 13

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

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

carousel Tuesday, October 22, 13

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

image cropper Tuesday, October 22, 13

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

but I’m a java guy! Tuesday, October 22, 13

<taglibs> \o/ Tuesday, October 22, 13

taglibs Button <aui:button name="saveButton" type="submit" value="save" /> Tuesday, October 22,
13

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> Tuesday, October 22, 13

faster to build #2 Tuesday, October 22, 13

v1.5.x Time to build ~5 min Tuesday, October 22, 13

v2.0.x Time to build ~1 min Tuesday, October 22, 13

more docs #3 Tuesday, October 22, 13

alloyui.com Tuesday, October 22, 13

> 1,200,000 pageviews Tuesday, October 22, 13

+30 tutorials +60 examples all written in markdown Tuesday, October
22, 13

more community engagement #4 Tuesday, October 22, 13

january, 2013 october, 2013 Tuesday, October 22, 13

> 30,000 downloads Tuesday, October 22, 13

better performance #5 Tuesday, October 22, 13

“Optimize the front-end performance first, because 80% of the user
response time is spent there.” - Steve Souders, Google Tuesday, October 22, 13

jsperf.com/yui-basecore-vs-base/5 YUI 3.6 vs 3.11 Tuesday, October 22, 13

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

redesign everything #6 Tuesday, October 22, 13

liferay.github.io/alloy-bootstrap Tuesday, October 22, 13

twitter.com/_pier/status/337880167802355712 Tuesday, October 22, 13

what about liferay portal? Tuesday, October 22, 13

Liferay Portal AlloyUI Tuesday, October 22, 13

AlloyUI lines of code Tuesday, October 22, 13

80,000 lines of code maintained by AlloyUI community Tuesday, October
22, 13

themes Tuesday, October 22, 13

new classic theme Tuesday, October 22, 13

github.com/liferay/alloy-bootstrap Tuesday, October 22, 13

what about custom themes? Tuesday, October 22, 13

bootstrapthemes.com Tuesday, October 22, 13

wrapbootstrap.com Tuesday, October 22, 13

bootswatch.com Tuesday, October 22, 13

how can I upgrade my theme/plugin? Tuesday, October 22, 13

github.com/liferay/liferay-aui-upgrade-tool Tuesday, October 22, 13

1. Install 2. Execute upgrade tool $ npm install -g
laut $ laut -f ~/Liferay/liferay-plugins Tuesday, October 22, 13

localization Tuesday, October 22, 13

over 100,000 submissions, modifications, and approval actions Tuesday, October 22,
13

translate.liferay.com Tuesday, October 22, 13

mobile devices Tuesday, October 22, 13

mobile vs responsive design Tuesday, October 22, 13

how to test? Tuesday, October 22, 13

responsive design preview Tuesday, October 22, 13

HTML Tuesday, October 22, 13

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

“HTML5 is the future” Tuesday, October 22, 13

wanna see the future? Tuesday, October 22, 13

HTML5 is today! Tuesday, October 22, 13

Content Consumer Devices Tuesday, October 22, 13

old browsers are like B&W TVs Tuesday, October 22, 13

new browsers are like HD TVs Tuesday, October 22, 13

TV already solved that problem Tuesday, October 22, 13

so why people keep doing this? Tuesday, October 22, 13

“The best way to predict the future is to create
it” - Abraham Lincoln Tuesday, October 22, 13

thank you :) Tuesday, October 22, 13

Liferay UI revolution

Liferay UI revolution

More Decks by Eduardo Lundgren

Featured

Transcript