Titanium Mobile: flexibility vs. performance

Appcelerator Titanium Mobile

FLEXIBILITY
VS
PERFORMANCE
Olivier Morandi

$ whoami
Olivier Morandi
Software engineer

http://titaniumninja.com
olivier.morandi@gmail.com
@olivier_morandi
https://github.com/omorandi

2 Appcelerator Titanium - Flexibility vs. Performance

Titanium Mobile
• Rapid development & prototyping tool
• Single high level language: JS
• Multiple deployment platforms (iOS, Android, ...)
• We can leverage an ever growing set of JS
libraries and modules (web, node.js, etc.)
• Possibility to extend the framework with native
modules


Titanium Apps are NATIVE

Can we also expect a native User Experience?


Titanium 2.0
• Improved stability
• Improved platform parity
• Improved performance
• Appcelerator Cloud Services


Some Mobile Dev Tools
Mobile Web Flexibility → ∞
+ High Level Language
+ High Level APIs
+ Dynamic updates
+ Cross Platform

Titanium
PhoneGap
Mobile

RubyMotion

0 ← Performance 1
+ Execution Speed
+ Native UX
+ Native capabilities


Some Mobile Dev Tools
Mobile Web Flexibility → ∞
+ High Level Language
+ High Level APIs
+ Dynamic updates
+ Cross Platform

Titanium ?
PhoneGap
Mobile

? RubyMotion

0 ← Performance 1
+ Execution Speed
+ Native UX
+ Native capabilities


An example: Ti.UI.TableView


Common Problems
• Slow transitions
– the table view takes ages to show up
• Choppy scrolling
– Everybody wants super-slick animations, isn’t it?


Towards Increased Performance
• Understand the tools, then:

Measure

Optimize

Learn


Runtime Environment
JS APP JS APP

V8
Parser Parser
JavaScriptCore

Bytecode Titanium Native Titanium
gen Modules Code Gen Modules
OPT
Native
Interpreter
Code

IOS SDK ANDROID SDK


Runtime Environment
JS APP JS APP

V8
Parser Parser
JavaScriptCore

Bytecode Titanium Native Titanium
gen Modules Code Gen Modules
OPT
JIT
NOInterpreter Native
Code

IOS SDK ANDROID SDK


Measure: which runs faster?
function processRow(row) {
return {title: row.info};
}

1 2
var rows = []; var rows = [];
for (var r = 0; r < array.length; r++) { for (var r = 0; r < array.length; r++) {
rows.push({title: array[r].info}); rows.push(processRow(array[r]));
} }

3 4
var len = array.length; var len = array.length;
for (var r = 0; r < len; r++) { for (var r = 0; r < len; r++) {
rows.push({title: array[r].info}); rows.push(processRow(array[r]));
} }

5
var rows = array.map(processRow);


Tests on iPhone 4
1000

100
ms

10

1
100 1000 10000

Number of Rows

1) for + inline 2) for + funct
3) for + inline + cache len 4) for + funct + cache len
5) map


Which runs faster?
function processRow2(row) {
return Ti.UI.createTableViewRow({title: row.info});
}

1 2
for (var r = 0; r < array.length; r++) { for (var r = 0; r < array.length; r++) {
rows.push(Ti.UI.createTableViewRow( rows.push(processRow2(array[r]));
{title: array[r].info})); }
}

3 4
var len = array.length; var len = array.length;
for (var r = 0; r < len; r++) { for (var r = 0; r < len; r++) {
rows.push(Ti.UI.createTableViewRow( rows.push(processRow2(array[r]));
{title: array[r].info})); }
}

5
var rows = array.map(processRow2);


Tests on iPhone 4
10000

1000
ms

100

10

1
10 100 1000
Number of rows

5) map


Tests on iPhone 4
10000

ES E
TH
1000

T
S !!
U !
R TS
T L
ms

’T U
100

N ES
O R
D
10

1
10 100 1000
Number of rows

5) map


WHY?
• They’re not generalizable
• Your code won’t look like the one presented here
• Do your own measurements


Is table creation slow?
• Obtaining some rough ﬁgures:

var start = new Date().getTime();

//your code goes here

var end = new Date().getTime();
Ti.API.info('elapsed ms: ' + (end - start));


Are there more accurate tools?
• mmm.... AFAIK NO!


Android DDMS + Traceview


Android DDMS + Traceview

WHERE’S MY JS???

Xcode Instruments: proﬁler tool


Xcode Instruments: proﬁler tool

JS code hidden here


Titanium Proﬁler... still to come


Titanium Proﬁler (iOS only)
• Custom version of the Ti JavaScriptCore library
• Work in progress
• Some info here
http://titaniumninja.com/proﬁling-ti-mobile-apps-is-it-possible/
• Will be possibly integrated in Ti Mobile
• Stay tuned on
http://titaniumninja.com/


Is table creation REALLY slow?
• Try optimizing the row creation loop body
• Implement Lazy loading
– Initialize the table with fewer rows and show it
immediately
– Meantime continue creating the remaining rows and
update the table with the complete row set


Wanna smooth scrolling?


Instruments: Core Animation


Tables with complex rows are slow

~35-40 FPS
Expected: ~60 FPS


1. Blended layers

These labels are transparent, even if we set
the background color, or a background image


What can we do?

-(UILabel*)label
{
! if (label==nil)
! {
label = [[UILabel alloc] initWithFrame:CGRectZero];
label.backgroundColor = [UIColor whiteColor];
label.numberOfLines = 0;
[self addSubview:label];
label.opaque = YES;
self.opaque = YES;
self.backgroundColor = [UIColor whiteColor];
! }
! return label;
} TiUILabel.m:104

Discussion (Cfr. UIView Reference)
“The opaque property provides a hint to the drawing system as to how it should treat the view. If set
to YES, the drawing system treats the view as fully opaque, which allows the drawing system to
optimize some drawing operations and improve performance”


What can we do?

!!
-(UILabel*)label
{

!
! if (label==nil)

IX
! {

F
label = [[UILabel alloc] initWithFrame:CGRectZero];

A
label.backgroundColor = [UIColor whiteColor];
label.numberOfLines = 0;

T
[self addSubview:label];

O
label.opaque = YES;

N
self.opaque = YES;
self.backgroundColor = [UIColor whiteColor];
! }
! return label;
} TiUILabel.m:104

Discussion (Cfr. UIView Reference)
“The opaque property provides a hint to the drawing system as to how it should treat the view. If set
to YES, the drawing system treats the view as fully opaque, which allows the drawing system to
optimize some drawing operations and improve performance”


Result

~45-50 FPS


2. Offscreen rendered layers


Solution
• Don’t use rounded corners (borderRadius)
• Use an image mask instead

var img = Ti.UI.createMaskedImage({
mask : 'mask.png',// alpha mask
image : myPicture,//image to mask
mode : Ti.UI.iOS.BLEND_MODE_SCREEN
});


What about FPSs?

~55-60 FPS
(Just using image masks)


Not satisﬁed? Going fully native
• Let’s create a custom optimized UITableView
• We’ll expose it through a native module


API for the custom view
• API
• createMessagesView(properties);
• setMessages([]messages);
• insert(message);
• addEventListener(‘click’, callback);
• Conﬁg
{
rowBackgroundColor: '#efefef',
nameColorIfMe: '#191919',
nameColorIfOther: '#8f032c',
…
}


API for the custom view
• API
IT Y
• setMessages([]messages);IB
IL
• createMessagesView(properties);

• insert(message); EX
FL callback);
ED
• addEventListener(‘click’,
S
• Conﬁg
R EA
EC
{

D
rowBackgroundColor: '#efefef',
nameColorIfMe: '#191919',
nameColorIfOther: '#8f032c',
…
}


Message model

{
isMe: true,
name: "Vincent",
picture: "vin.png",
body: "It's not. It's the same ballpark.",
date: 12394838299 //unix timestamp
},


A single row

name date

picture
Click

body


Traditional UITableViewCell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath
*)indexPath
{! !
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MessageCell"];
!
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:@"MessageCell"] autorelease];

UILabel *nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(75.0, 25.0, 120.0, 18.0)];
nameLabel.font = [UIFont boldSystemFontOfSize:16.0];
nameLabel.textAlignment = UITextAlignmentLeft;
! ! nameLabel.backgroundColor = rowBackgroundColor;
! !
[cell.contentView addSubview:nameLabel];

} else {
//...
}

Message *msg = [messages objectAtIndex:(indexPath.row)];
BOOL isMe = [TiUtils boolValue:[dict objectForKey:@"isMe"]];
nameLabel.textColor = isMe ? nameColorIfMe : nameColorIfOther;
//...


Not fast enough? Use FastCells
- (void) drawContentView:(CGRect)rect { Low level drawing primitives
if (message == nil)
return;

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextClearRect(context, rect);

CGFloat max_width = self.contentView.frame.size.width;

if (message.isMe)
[nameColorIfMe set];
else
[nameColorIfOther set];

[message.name drawInRect:CGRectMake(userInfoLeft, userInfoTop, rectWidth(userInfoLeft,
userInfoRight, max_width), userInfoHeight) withFont:bigBoldFont
lineBreakMode:UILineBreakModeTailTruncation];

//...
}


Concluding remarks on Titanium
• Is it worth it?
• Does it really speeds up development?
• Is developing with Titanium “better” or “worse”
than making parallel per-platform developments?


Where’s the value?
• Quick prototyping iterations
• Single complex business-logic core
• Cross platform deployment
• Maintainability of the project in the long term


Some interesting reads
• JavaScriptCore, the WebKit JS implementation - http://wingolog.org/archives/
2011/10/28/javascriptcore-the-webkit-js-implementation
• v8: a tale of two compilers - http://wingolog.org/archives/2011/07/05/v8-a-tale-
of-two-compilers
• JSC v/s V8 performance on ARM - http://xc0ffee.wordpress.com/2011/09/07/
webkit-gtk-jsc-vs-v8-performance-on-arm/
• The Future of JavaScript Engines: Replace Them With JavaScript Compilers -
http://shorestreet.com/node/43
• Optimisation: don't waste your time - http://www.scirra.com/blog/83/
optimisation-dont-waste-your-time
• Guidelines for JavaScript Programs: Are They Still Necessary? - http://www.inf.u-
szeged.hu/~akiss/pub/pdf/herczeg_guidelines.pdf


Thank YOU!

Any question?


Titanium Mobile: flexibility vs. performance

More Related Content

What's hot (20)

Similar to Titanium Mobile: flexibility vs. performance (20)

Recently uploaded (20)

Titanium Mobile: flexibility vs. performance