Liferay UI (R)evolution

2,232
-1

Published on

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

No Downloads
Views
Total Views
2,232
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
53
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.

×