appforum 2014 boost hybrid app performance
TRANSCRIPT
TOP 10 WAYS TO:BOOST HYBRID APP PERFORMANCEROB GALVIN
ME
ROB GALVIN
NORTH CAROLINA, USA
DATABASE, DESKTOP, WEB, MOBILE
RHOMOBILE, EMDK FOR ANDROID,
ENTERPRISE BROWSER
http://tiny.cc/robg
YOU & PERFORMANCE
ABOUT THIS PRESENTATION
SLOW
$.get("server/product.aspx?id=100").done(
function(page){
$("body").html(page);
});
<li><a href="server/product.aspx?id=100">TC55</a></li>
PROBLEM: ROUNDTRIPS TO SERVER TO GET UI AND DATA
TAPREQUEST
PAGEWAIT
GET
RESPONSE
DISPLAY
PAGE
DON’T GENERATE UI ON THE SERVER
#10
FAST
Create UI on client side in
Javascript
Insert/Remove views into DOM
as needed
SINGLE PAGE ARCHITECTURE
<html>
<head>
<title>Huge App</title>
<script src=”app.js”/>
</head>
<body>
</body>
</html>
SLOW
// Get Data
$.ajax({ url: "server/product.aspx?id=100"}).done(
function(product){
// some JSON structure
displayProduct(product);
});
PROBLEM: UI NON RESPONSIVE
TAPREQUEST
DATAWAIT
PARSE
DATA
DISPLAY
VIEW
MAKE SOMETHING HAPPEN IMMEDIATELY
DON’T LET USER WAIT FOR UI
# 9
FAST
TAPDISPLAY
VIEW
REQUEST
DATAWAIT
UPDATE
VIEW
displayView();
// Get Some Lookup Data
$.ajax({ url: "server/slowfeed"}).done( function(data){
updateView(data);
});
SLOW
// Get Some Lookup Data
$.ajax({ url: "server/shipping"}).done( function(data){
shipping = data;
});
PROBLEM: UNNECESSARY DELAY ON DATA THAT DOES NOT CHANGE OFTEN
CACHE STATIC / SEMI-STATIC DATA
# 8.1
FAST
Use RHOM to keep data local
Use RhoConnect to keep
‘semi-static’ data in sync with
differential updatesvar shipping = Shipping.find(‘all’);
SLOW
// Didn’t you say to do this in #9
displayView();
// Get Some Lookup Data
$.ajax({ url: "server/slowfeed"}).done( function(data){
updateView(data);
});
PROBLEM: EMPTY UI WHILE WAITING FOR DATA
CACHE DYNAMIC DATA
# 8.2
FAST
SHOW LAST KNOWN GOOD
DATA IS BETTER THAN
NOTHING AT ALL
// Show UI After Tap - Rule #9
displayView();
// Use RHOM for last known data
displayCachedOldData();
// Get Some Lookup Data
$.ajax({ url:
"server/slowfeed"}).done(
function(data){
showData(data);
});
SLOW
$(“#nav a.back”).on(“click”,clickhandler);
$(“#nav a.back”).css(“color”,”blue”);
$(“#nav a.back”).css(“text-decoration”,”none”);
$(“#nav a.back”).attr(“href”,”#”);
PROBLEM: UNNECESSARY DOM QUERIES
CACHE QUERY SELECTORS
# 8.3
FAST
var nextButton = $(“#nav a.next”);
nextButton.on(“click”,clickhandler);
nextButton.css(“color”,”blue”);
nextButton.css(“text-decoration”,”none”);
nextButton.attr(“href”,”#”);
ANIMATIONS
.page
.left
.page
.center
.page
.right
//Put next page to be display off viewport to right
$(“#page2”).attr(“class”,”page right”);
// Transition new page to viewport
$(“#page2”).attr(“class”,”page center transition”);
// Transition old page off viewport to the left
$(“#page1”).attr(“class”,”page left transition”);
SLOW
.page {
position:absolute; top:0, left:0, width:100%; height:100%
}
.page.left {
left: -100%;
}
.page.center {
left:0;
}
.page.right {
left: 100%;
}
.page.transition {
transition-duration: .25s;
}
PROBLEM: NOT USING GPU
HARDWARE ENABLE YOUR CSS
* WINDOWS MOBILE/CE = NO GPUDON’T USE ANIMATIONS
# 7
FAST.page {
position:absolute; top:0, left:0, width:100%; height:100%;
transform: translate3d(0,0,0);
}
.page.left {
transform: translate3d(-100%,0,0);
}
.page.center {
transform: translate3d(0,0,0);
}
.page.right {
transform: translate3d(100%,0,0);
}
.page.transition {
transition-duration: .25s;
}
SLOW
click: 308ms
click: 302ms
click: 305ms
PROBLEM: WEBVIEW WAITING FOR DOUBLE-TAP
AVOID 300MS CLICK EVENT DELAY
# 6
FAST
Use Touch Events?
Cons:
- Can’t use same code on desktop
- Extra conditioning
- May need Touch Start for gestures
touchStart: 5ms
click: 309ms
Use FastClick
https://github.com/ftlabs/fastclick
Micro Library
Don’t have to change your code
SLOW
<li><img src=”/images/icon_home”/>Home<li>
<li><img src=”/images/icon_gears”/>Settings<li>
<li><img src=”/images/icon_3dots”/>Details<li>
<li><img src=”/images/icon_camera”/>Take Picture<li>
<li><img src=”/images/icon_barcode”/>Scan Barcode<li>
PROBLEM: ALOT OF HTTP REQUESTS
* EVEN BETTER - USE ICON-FONTS
- Vector
- Scalable
- Pixel Perfect
- More Adaptable
- More CSS Control
USE SPRITES TO STORE IMAGES*
# 5 SPRITECOW.COM
SLOWcolor: rgb(230, 230, 230);
text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: rgb(210, 20, 20);
background: -moz-linear-gradient(90deg, rgb(210, 20, 20)
30%, rgb(250, 20, 20) 70%);
background: -webkit-linear-gradient(90deg, rgb(210, 20,
20) 30%, rgb(250, 20, 20) 70%);
background: -o-linear-gradient(90deg, rgb(210, 20, 20)
30%, rgb(250, 20, 20) 70%);
background: -ms-linear-gradient(90deg, rgb(210, 20, 20)
30%, rgb(250, 20, 20) 70%);
background: linear-gradient(0deg, rgb(210, 20, 20) 30%,
rgb(250, 20, 20) 70%);
-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75);
box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75);
SHADOWS AND GRADIENTS ARE PERFORMANCE
KILLERS
# 4
FAST
DON’T USE SHADOWS, GRADIENTS, ETC
KEEP UP WITH MODERN UI DESIGN
FLAT IS THE NEW BLACK
SLOW
$(‘body’).append(‘<ul id=”products”></ul>’);
for (var i = 1; i <100; i++){
$(‘#producs’).append(‘<li>’ + product[i] + ‘</li>’);
}
PROBLEM: TRIGGER REFLOW WHEN DOM IS TOUCHED
AVOID REFLOWS & KEEP DOM SHALLOW
# 3
FAST
var products = ‘<ul id=”products”>’;
for (var i = 1; i <100; i++){
products += ‘<li>’ + product[i] + ‘</li>’;
}
products += ‘</ul>’;
$(‘body’).append(products);
SLOW
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css"/>
<script src="js/jquery-1.11.1.min.js"></script>
// I NEED THIS BECAUSE I WANT MY PAGES TO HAVE TRANSITIONS<script src="js/jquery.mobile-1.4.3.min.js"></script>
PROBLEM: TOO MUCH EXTRA BAGGAGE FOR USE CASE
UNDERSTAND TRADEOFFS FOR FRAMEWORK USAGE
# 2
FAST
CONSIDER MICRO LIBRARIES
KNOW WHO IS DICTATING ARCHITECTURE
INSPECT LIBRARY FOR PERFORMANCE
PRACTICES
SLOW
PROBLEM: NOT TESTING REAL WORLD
TEST ON DEVICE - BECOME EXPERT IN TOOLS TO
MEASURE PERFORMANCE
# 1
SUMMARY
10. Don’t Generate the UI on the server
9. Display something while waiting for the data
8. Cache everything you can - use RHOM
7. GPU Enable your CSS
6. Avoid 300ms Click Delay
5. Use Font-Icons or Sprites for icons/images
4. Forget shadows/gradients - use modern flat UI design
3. Know your framework - weigh bang for buck!
2. Reflow = Jankiness - Avoid and eliminate them
1. Test with Many Devices - know your profiling tools
