Your SlideShare is downloading. ×
0
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Liferay UI (R)evolution

1,938

Published on

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

No Downloads
Views
Total Views
1,938
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
51
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

×