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	
...
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" />	
...
#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
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Liferay UI (R)evolution
Upcoming SlideShare
Loading in...5
×

Liferay UI (R)evolution

2,000

Published on

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,000
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
52
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Liferay UI (R)evolution

  1. 1. Liferay UI revolution São Paulo, 2014
  2. 2. “Study the past if
 you would define
 the future” - Confucius
  3. 3. v1.7 - JS
  4. 4. v3.0 - JS
  5. 5. v4.2 - JS
  6. 6. v5.0 - jQuery
  7. 7. v6.0 - AlloyUI
  8. 8. 2009
  9. 9. @natecavanaugh
  10. 10. @eduardolundgren
  11. 11. effects ajax YUI = MVC events DOM ...
  12. 12. calendar buttons AlloyUI = audio carousel tabs ...
  13. 13. JavaScript
  14. 14. YUI
  15. 15. AlloyUI
  16. 16. 60 components in 6 months
  17. 17. 08/2012
  18. 18. AlloyUI 2 01/2013
  19. 19. #1 easier
 to use
  20. 20. v1.5.x A) Git Clone 1.03 gb B) Download ZIP 78.1 mb
  21. 21. v2.0.x Just load it from CDN <script src="http://cdn.alloyui.com/ 2.0.0pr7/aui/aui-min.js"></script>
  22. 22. v2.0.x No need to download entire project, just use YUI().use('aui-carousel', function (Y) { // code goes here });
  23. 23. carousel
  24. 24. carousel YUI().use('aui-carousel', function(Y) { new Y.Carousel({ contentBox: '#myCarousel', height: 250, width: 700 }).render(); });
  25. 25. image cropper
  26. 26. image cropper YUI().use('aui-image-cropper', function(Y) { new Y.ImageCropper({ srcNode: '#myImage' }).render(); });
  27. 27. but I’m a java guy!
  28. 28. <taglibs> o/
  29. 29. taglibs <aui:button name="saveButton"
 type="submit" value="save" /> Button
  30. 30. 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>
  31. 31. #2 faster
 to build
  32. 32. v1.5.x Time to build
 ~5 min
  33. 33. v2.0.x Time to build
 ~1 min
  34. 34. #3 more
 docs
  35. 35. alloyui.com
  36. 36. > 1,200,000 pageviews
  37. 37. +30 tutorials +60 examples ! All written in Markdown
  38. 38. #4 more
 community
 engagement
  39. 39. october, 2013 january, 2013
  40. 40. > 30,000
 downloads
  41. 41. #5 better
 performance
  42. 42. Optimize the front-end performance first, because 80% of the user response time is spent there. ! - Steve Souders, Google
  43. 43. YUI 3.6 vs 3.11
 jsperf.com/yui-basecore-vs-base/5
  44. 44. YUI 3.6 vs 3.11
 Base
 > 40,000 ops/sec BaseCore
 > 90,000 ops/sec jsperf.com/yui-basecore-vs-base/5
  45. 45. #6 redesign
 everything
  46. 46. liferay.github.io/alloy-bootstrap
  47. 47. twitter.com/_pier/status/337880167802355712
  48. 48. what about liferay portal?
  49. 49. 
 Liferay Portal 
 AlloyUI
  50. 50. themes
  51. 51. new classic theme
  52. 52. github.com/liferay/alloy-bootstrap
  53. 53. what about custom themes?
  54. 54. bootstrapthemes.com
  55. 55. wrapbootstrap.com
  56. 56. bootswatch.com
  57. 57. how can I upgrade my theme/plugin?
  58. 58. github.com/liferay/liferay-aui-upgrade-tool
  59. 59. upgrade tool 1. Install $ npm install -g laut 2. Execute $ laut -f ~/Liferay/liferay-plugins
  60. 60. localization
  61. 61. over 100,000 submissions, modifications, and approval actions
  62. 62. translate.liferay.com
  63. 63. mobile devices
  64. 64. mobile vs responsive design
  65. 65. how to test?
  66. 66. responsive design preview
  67. 67. HTML
  68. 68. <input type=”email”> <input type=”date”> native inputs <input type=”number”> <input type=”time”>
  69. 69. “HTML5 is the future”
  70. 70. wanna see the future?
  71. 71. HTML5 is today!
  72. 72. Content Consumer
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×