codestrong 2012 breakout session i os internals and best practices
TRANSCRIPT
![Page 1: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/1.jpg)
iOS Internals and Best Practices
Blain Hamon & Max StepanovSenior Software Engineers
Appcelerator, Inc.@blainhamon @maxstepanov
![Page 2: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/2.jpg)
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps
iOS Internals
![Page 3: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/3.jpg)
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps
iOS Internals
![Page 4: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/4.jpg)
• 2009: Versions 0.3-0.8
• Based on web views
• Native via JSON service
• Drew upon Ti:Desktop
Ti.API.prehistory
![Page 5: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/5.jpg)
• 2010+: Versions 0.9+
• Built-in Interpreters
• Native via JS callbacks
• Focused on Mobile
Ti.API.today
![Page 6: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/6.jpg)
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps
iOS Internals
![Page 7: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/7.jpg)
• Native OS
App To The Future
Native OS
![Page 8: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/8.jpg)
• Native OS
• OS Abstraction Layer
App To The Future
Native OS
OS Abstraction Layer
![Page 9: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/9.jpg)
• Native OS
• OS Abstraction Layer
• Ti Binding (Kroll)
App To The Future
Native OS
OS Abstraction Layer Ti Binding (Kroll)
![Page 10: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/10.jpg)
• Native OS
• OS Abstraction Layer
• Ti Binding (Kroll)
• Ti Foundation Layer
App To The Future
Native OS
OS Abstraction Layer Ti Binding (Kroll)
Ti Foundation Layer
![Page 11: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/11.jpg)
• Native OS
• OS Abstraction Layer
• Ti Binding (Kroll)
• Ti Foundation Layer
• Modules
App To The Future
Native OS
OS Abstraction Layer Ti Binding (Kroll)
Ti Foundation Layer
UI App Network Other Modules…
![Page 12: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/12.jpg)
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps
iOS Internals
![Page 13: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/13.jpg)
UI-triggered event:
• UI asynchronously triggers event listener
• UI is ready for more action while JS processes.
Game of Threads
User taps button
EventListener
UI JS
User taps button
EventListener
![Page 14: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/14.jpg)
JS-triggered events:
• Still asychronous
• First in, first out queue
Game of Threads UI JS
fireEvent(‘foo’);setTimeout(0,ƒ());
Timeout Function
EventListener
![Page 15: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/15.jpg)
Expensive listeners:
• Still first in, first out
• Delayed responses
Game of Threads UI JS
User taps button
EventListener
User taps button
EventListener
User taps button
EventListener
![Page 16: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/16.jpg)
Options:
• Block user interaction, but only as a last resort
Game of Threads UI JS
User taps button
EventListener
User taps button
EventListener
User taps button
EventListener
Button covered
![Page 17: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/17.jpg)
Options:
• Block user interaction, but only as a last resort
• Break up expensive listeners
Game of Threads UI JS
User taps button 1
User taps button 2
EventListener 2
EventListener 1
EventListener 1.1
EventListener 1.2
![Page 18: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/18.jpg)
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps
iOS Internals
![Page 19: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/19.jpg)
• In global namespace
My Little Memory
held1 = {foo:5};
![Page 20: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/20.jpg)
• In global namespace
• In a closure of a function
held1 = {foo:5};
foo = (function(){var held2=0;return function()
{return held2++;};})();
My Little Memory
![Page 21: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/21.jpg)
• In global namespace
• In a closure of a function
• Property of a retained object
held1 = {foo:5};
foo = (function(){var held2=0;return function()
{return held2++;};})();
foo.bar = held3;foo.add(held4);
My Little Memory
![Page 22: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/22.jpg)
• In global namespace
• In a closure of a function
• Property of a retained object
• Artificially retained via Titanium
held1 = {foo:5};
foo = (function(){var held2=0;return function()
{return held2++;};})();
foo.bar = held3;foo.add(held4);
held5.open();
My Little Memory
![Page 23: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/23.jpg)
• Be aware of variable scope
• “nulling out”
held1 = {foo:5};
foo = (function(){var held2=0;return function()
{return held2++;};})();
foo.bar = held3;foo.add(held4);
held5.open();
My Little Memory
![Page 24: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/24.jpg)
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps
iOS Internals
![Page 25: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/25.jpg)
JS(JSCORE)• Proxies represent
Titanium objects
• Proxies are threadsafe
• Proxies store data as a native copy
Class of the Titans
UI(NATIVE)
JS(NATIVE)
Ti Proxy
UIView Object Ti Binding Object JS Object
![Page 26: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/26.jpg)
JS(JSCORE)• Proxies represent
Titanium objects
• Proxies are threadsafe
• Proxies store data as a native copy
• Method objects are generated
Class of the Titans
UI(NATIVE)
JS(NATIVE)
Ti Proxy
UIView Object Ti Binding Object JS Object
(Method) JS Object
![Page 27: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/27.jpg)
JS(JSCORE)• Native can be
expensive
• Cache when possible
• Use properties instead of setters
• Pass properties in creators
• Use applyProperties()
Class of the Titans
UI(NATIVE)
JS(NATIVE)
Ti Proxy
UIView Object Ti Binding Object JS Object
(Method) JS Object
![Page 28: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/28.jpg)
• History
• Structure
• Responsive Apps
• Memory-Light Apps
• Fast-Performing Apps
• Fast-Drawing Apps
iOS Internals
![Page 29: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/29.jpg)
• iOS uses OpenGL underneath
• Views cache as textures
• Opaque textures are faster
• Resizing can be expensive
• Transparency can be expensive
Epic View Time
![Page 30: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/30.jpg)
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
Epic View Time
![Page 31: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/31.jpg)
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
}));
![Page 32: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/32.jpg)
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
}));
![Page 33: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/33.jpg)
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'
});
![Page 34: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/34.jpg)
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
iOS Internals
![Page 35: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/35.jpg)
iOS Debugging
![Page 36: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/36.jpg)
iOS Simulator Physical Devices
New in Titanium
Titanium 3.0Titanium 1.7
![Page 37: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/37.jpg)
• 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)!
Device Debugging
![Page 38: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/38.jpg)
• Turn off Auto-Lock on device
• Ensure same WiFi network
• Don’t forget to launch your app
Debugging Tips
http://docs.appcelerator.com/titanium/3.0/ Debugging on iOS Devices
![Page 39: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/39.jpg)
• UI thread for handling user interactions
• JS thread for the application logic
• Debugger thread for communications with Titanium Studio
• Other iOS platform threads
Game of Threads UI JS
User taps button 1
postlayout eventGeo location
Function
EventListener 1 var x = 1;Ti.API.log(x);openWin(x);
EventListener 2 Line 1
Line 2Line 3
DBG
Run
![Page 40: Codestrong 2012 breakout session i os internals and best practices](https://reader037.vdocuments.mx/reader037/viewer/2022102901/554d1759b4c9052c5a8b56af/html5/thumbnails/40.jpg)
• Use conditional breakpoints
• A block of JavaScript code
• Hit count
• Use Console logging with Ti.API functions
Best Practices