1. iOS Internals and Best Practices
Blain Hamon & Max Stepanov
Senior Software Engineers
Appcelerator, Inc.
@blainhamon @maxstepanov
bhamon@appcelerator.com mstepanov@appcelerator.com

2. iOS Internals
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps

3. iOS Internals
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps

4. Ti.API.prehistory
• 2009: Versions 0.3-0.8
• Based on web views
• Native via JSON service
• Drew upon Ti:Desktop

5. Ti.API.today
• 2010+: Versions 0.9+
• Built-in Interpreters
• Native via JS callbacks
• Focused on Mobile

6. iOS Internals
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps

7. App To The Future
• Native OS
Native OS

8. App To The Future
• Native OS
• OS Abstraction Layer
OS Abstraction Layer
Native OS

9. App To The Future
• Native OS
• OS Abstraction Layer
• Ti Binding (Kroll)
OS Abstraction Layer Ti Binding (Kroll)
Native OS

10. App To The Future
• Native OS
• OS Abstraction Layer
• Ti Binding (Kroll)
Ti Foundation Layer
• Ti Foundation Layer
OS Abstraction Layer Ti Binding (Kroll)
Native OS

11. App To The Future
• Native OS
• OS Abstraction Layer
UI App Network Other Modules…
• Ti Binding (Kroll)
Ti Foundation Layer
• Ti Foundation Layer
OS Abstraction Layer Ti Binding (Kroll)
• Modules
Native OS

12. iOS Internals
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps

13. Game of Threads
User taps button
UI-triggered event:
User taps button EventListener
• UI asynchronously
triggers event listener
• UI is ready for more
action while JS EventListener
processes.

14. Game of Threads
JS-triggered events:
fireEvent(‘foo’);
• Still asychronous setTimeout(0,ƒ());
• First in, first out queue
EventListener
Timeout Function

15. Game of Threads
User taps button
Expensive listeners: User taps button
User taps button EventListener
• Still first in, first out
• Delayed responses
EventListener
EventListener

16. Game of Threads
User taps button
Options: User taps button
User taps button EventListener
• Block user Button covered
interaction, but only
as a last resort
EventListener
EventListener

17. Game of Threads
User taps button 1
Options: User taps button 2 EventListener 1
• Block user EventListener 2
interaction, but only
as a last resort EventListener 1.1
• Break up expensive EventListener 1.2
listeners

18. iOS Internals
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps

19. My Little Memory
• In global held1 = {foo:5};
namespace

20. My Little Memory
• In global held1 = {foo:5};
namespace
• In a closure of a foo = (function(){
function var held2=0;
return function()
{return held2++;};
})();

21. My Little Memory
• In global held1 = {foo:5};
namespace
• In a closure of a foo = (function(){
function var held2=0;
return function()
• Property of a
retained object {return held2++;};
})();
foo.bar = held3;
foo.add(held4);

22. My Little Memory
• In global held1 = {foo:5};
namespace
• In a closure of a foo = (function(){
function var held2=0;
return function()
• Property of a
retained object {return held2++;};
})();
• Artificially
retained via
Titanium foo.bar = held3;
foo.add(held4);
held5.open();

23. My Little Memory
• Be aware of held1 = {foo:5};
variable scope
• “nulling out” foo = (function(){
var held2=0;
return function()
{return held2++;};
})();
foo.bar = held3;
foo.add(held4);
held5.open();

24. iOS Internals
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps

25. Class of the Titans
• Proxies represent
Titanium objects
Ti Proxy
• Proxies are
threadsafe
UIView Object Ti Binding Object JS Object
• Proxies store data as
a native copy

26. Class of the Titans
• Proxies represent
Titanium objects
Ti Proxy
• Proxies are
threadsafe
UIView Object Ti Binding Object JS Object
• Proxies store data as
a native copy
(Method) JS Object
• Method objects are
generated

27. Class of the Titans
• Native can be
expensive
Ti Proxy
• Cache when possible
• Use properties UIView Object Ti Binding Object JS Object
instead of setters
• Pass properties in (Method) JS Object
creators
• Use applyProperties()

28. iOS Internals
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps

29. Epic View Time
• iOS uses OpenGL underneath
• Views cache as textures
• Opaque textures are faster
• Resizing can be expensive
• Transparency can be expensive

30. Epic View Time
iOS uses OpenGL underneath
• Views cache as textures
• Opaque textures are faster
• Rendering happens often
Some behaviors are expensive
• Resizing view sizes
• Transparent/views with alpha
• Dynamic graphics

31. Epic View Time
var row = Ti.UI.createTableViewRow({
height:Ti.UI.SIZE,
layout:'horizontal’
});
row.add(Ti.UI.createImageView({
image: myUrl,
top: 10,
height:89,
bottom:11,
left: 0,
width:125
}));
row.add(Ti.UI.createLabel({
text: myText,
left:5,
width:Ti.UI.SIZE,
height:Ti.UI.SIZE
}));

32. Epic View Time
var row = Ti.UI.createTableViewRow({
height:Ti.UI.SIZE,
layout:'horizontal’
});
row.add(Ti.UI.createImageView({
image: myUrl,
top: 10,
height:89,
bottom:11,
left: 0,
width:125
}));
row.add(Ti.UI.createLabel({
text: myText,
left:5,
width:Ti.UI.SIZE,
height:Ti.UI.SIZE
}));

33. Epic View Time
var row = Ti.UI.createTableViewRow({
height:100
});
row.add(Ti.UI.createImageView({
image: myUrl,
top: 10,
height:89,
bottom:11,
left: 0,
width:125,
backgroundColor:'white'
}));
row.add(Ti.UI.createLabel({
text: myText,
top:0,
left:130,
right:0,
bottom:0,
backgroundColor:'white'
});

34. iOS Internals
Being responsive:
• Block UI as last resort
• Break up expensive tasks
Being memory-efficient:
• Mind native object references
Being fast:
• Cache when possible
• Reduce using native containers
• Concentrate property setting
Being fast-rendering:
• Aim for static, opaque views

35. iOS Debugging

36. New in Titanium
Titanium 1.7 Titanium 3.0
iOS Simulator
Physical Devices

37. Device Debugging
• Install with iTunes
• Requires network connectivity
between development machine
and a device
• Local WiFi or Hotspot
• iPhone Personal Hotspot via
WiFi, Bluetooth or USB
• Titanium Studio will do the best to
locate your device(s)!

38. Debugging Tips
• Turn off Auto-Lock on device
• Ensure same WiFi network
• Don’t forget to launch your app
http://docs.appcelerator.com/titanium/3.0/ Debugging on iOS Devices

39. Game of Threads
User taps button 1
EventListener 1
• UI thread for handling  var x = 1;
user interactions Ti.API.log(x);
openWin(x);
• JS thread for the postlayout event
application logic Geo location
Function Run
• Debugger thread for
communications with EventListener 2
Titanium Studio  Line 1
Line 2
• Other iOS platform Line 3
threads

40. Best Practices
• Use conditional breakpoints
• A block of JavaScript code
• Hit count
• Use Console logging with
Ti.API functions

41. Blain Hamon & Max Stepanov
@blainhamon @maxstepanov
bhamon@appcelerator.com mstepanov@appcelerator.com