Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Liferay UI revolution
Search
Eduardo Lundgren
November 20, 2013
0
180
Liferay UI revolution
Eduardo Lundgren
November 20, 2013
Tweet
Share
More Decks by Eduardo Lundgren
See All by Eduardo Lundgren
WeDeploy
eduardolundgren
0
43
Introducing Liferay Standalone Applications
eduardolundgren
3
510
Single Page Applications in Liferay
eduardolundgren
5
2.5k
Single Page Applications done right
eduardolundgren
10
740
tracking.js with Maira Bello
eduardolundgren
0
110
Single Page Application
eduardolundgren
0
400
Getting Started with YUI3 and AlloyUI
eduardolundgren
0
70
Getting started with AlloyUI
eduardolundgren
0
67
Augmented Reality.js
eduardolundgren
0
150
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
Adopting Sorbet at Scale
ufuk
73
9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Designing for humans not robots
tammielis
249
25k
Navigating Team Friction
lara
183
14k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
What's new in Ruby 2.0
geeforr
341
31k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Scaling GitHub
holman
458
140k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
38
2.1k
Transcript
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
Tuesday, October 22, 13
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
v3.0 - JS Tuesday, October 22, 13
v4.2 - JS Tuesday, October 22, 13
v5.0 - jQuery Tuesday, October 22, 13
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
Tuesday, October 22, 13
how to improve that? Tuesday, October 22, 13
2009 Tuesday, October 22, 13
Tuesday, October 22, 13
Tuesday, October 22, 13
YUI = effects DOM ajax events ... MVC Tuesday, October
22, 13
YUI = effects DOM ajax events ... MVC Tuesday, October
22, 13
YUI = effects DOM ajax events ... MVC Tuesday, October
22, 13
YUI = effects DOM ajax events ... MVC Tuesday, October
22, 13
YUI = effects DOM ajax events ... MVC Tuesday, October
22, 13
YUI = effects DOM ajax events ... MVC Tuesday, October
22, 13
YUI = effects DOM ajax events ... MVC Tuesday, October
22, 13
AlloyUI = calendar tabs buttons carousel ... audio Tuesday, October
22, 13
AlloyUI = calendar tabs buttons carousel ... audio Tuesday, October
22, 13
AlloyUI = calendar tabs buttons carousel ... audio Tuesday, October
22, 13
AlloyUI = calendar tabs buttons carousel ... audio Tuesday, October
22, 13
AlloyUI = calendar tabs buttons carousel ... audio Tuesday, October
22, 13
AlloyUI = calendar tabs buttons carousel ... audio Tuesday, October
22, 13
AlloyUI = calendar tabs buttons carousel ... audio Tuesday, October
22, 13
Tuesday, October 22, 13
JavaScript Tuesday, October 22, 13
Tuesday, October 22, 13
YUI Tuesday, October 22, 13
Tuesday, October 22, 13
AlloyUI Tuesday, October 22, 13
60 components in 6 months Tuesday, October 22, 13
Tuesday, October 22, 13
Tuesday, October 22, 13
08/2012 Tuesday, October 22, 13
08/2012 Tuesday, October 22, 13
08/2012 cartola (brazilian desert) banana butter cheese cinnamon sugar Tuesday,
October 22, 13
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
Tuesday, October 22, 13
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
Tuesday, October 22, 13
Tuesday, October 22, 13
mobile devices Tuesday, October 22, 13
mobile vs responsive design Tuesday, October 22, 13
Tuesday, October 22, 13
how to test? Tuesday, October 22, 13
Tuesday, October 22, 13
responsive design preview Tuesday, October 22, 13
HTML Tuesday, October 22, 13
Tuesday, October 22, 13
native inputs <input type=”email”> <input type=”time”> <input type=”number”> <input type=”date”>
Tuesday, October 22, 13
“HTML5 is the future” Tuesday, October 22, 13
wanna see the future? Tuesday, October 22, 13
Tuesday, October 22, 13
HTML5 is today! Tuesday, October 22, 13
Content Consumer Devices 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