Liferay UI (R)evolution
92
Liferay UI revolution São Paulo, 2014
-
Upload
zeno-rocha -
Category
Technology
-
view
1.602 -
download
1
description
Transcript of Liferay UI (R)evolution
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
YUI =
effects
DOM
ajax
events...
MVC
AlloyUI =
calendar
tabs
buttons
carousel...
audio
JavaScript
YUI
AlloyUI
60 components in 6 months
08/2012
AlloyUI 2
01/2013
easierto use
#1
v1.5.xA) Git Clone 1.03 gb B) Download ZIP 78.1 mb
v2.0.xJust load it from CDN <script src="http://cdn.alloyui.com/2.0.0pr7/aui/aui-min.js"></script>
No need to download entire project, just use YUI().use('aui-carousel', function (Y) { // code goes here });
v2.0.x
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/
taglibsButton
<aui:button name="saveButton" type="submit" value="save" />
taglibsForm Validation
<aui:input name="myField"> <aui:validator name="required" /> <aui:validator name="digits" /> <aui:validator name="range" > [8,50] </aui:validator></aui:input>
fasterto build
#2
v1.5.x
Time to build~5 min
v2.0.x
Time to build~1 min
moredocs
#3
> 1,200,000 pageviews
+30 tutorials +60 examples !
All written in Markdown
morecommunity
engagement
#4
january, 2013
october, 2013
> 30,000downloads
betterperformance
#5
“Optimize the front-end performance first, because 80% of the user response time is spent there.” !
- Steve Souders, Google
jsperf.com/yui-basecore-vs-base/5
Base> 40,000 ops/sec BaseCore> 90,000 ops/sec
YUI 3.6 vs 3.11
redesign everything
#6
what about
liferay portal?
Liferay Portal
AlloyUI
themes
new classic theme
what about
custom themes?
how can I upgrade my theme/plugin?
github.com/liferay/liferay-aui-upgrade-tool
1. Install
2. Execute
upgrade tool
$ npm install -g laut
$ laut -f ~/Liferay/liferay-plugins
localization
over 100,000 submissions, modifications, and approval actions
mobile devices
mobile vs
responsive design
how to test?
responsive design
preview
HTML
native inputs
<input type=”email”>
<input type=”time”>
<input type=”number”>
<input type=”date”>
“HTML5 is the future”
wanna see the future?
HTML5 is today!
Content Consumer����������� ������������������ Devices
Content Consumer����������� ������������������ Devices
old browsers are like B&W TVs
new browsers are like HD TVs
TV already solved that problem
so why people keep doing this?
“The best way to predict the future is to create it”
- Abraham Lincoln
obrigado :)
