• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Liferay UI (R)evolution
 

Liferay UI (R)evolution

on

  • 1,125 views

 

Statistics

Views

Total Views
1,125
Views on SlideShare
1,110
Embed Views
15

Actions

Likes
2
Downloads
27
Comments
0

4 Embeds 15

http://lanyrd.com 8
http://www.feedspot.com 4
http://www.slideee.com 2
http://feeds.feedburner.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Liferay UI (R)evolution Liferay UI (R)evolution Presentation Transcript

    • 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 }).render(); });
    • 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" /> <aui:validator name="range" > [8,50] </aui:validator> </aui:input>
    • #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
    •    Devices
    • Content Consumer
    •    Devices
    • old browsers are like B&W TVs
    • new browsers are like HD TVs
    • TV already solved that problem
    • so why people keep doing this?
    • “The best way to predict the future is to create it” - Abraham Lincoln
    • obrigado :)