Liferay UI (R)evolution

  • 1,626 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,626
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
40
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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