Codestrong 2012 breakout session i os internals and best practices
Download as PPTX, PDF1 like1,050 views
This document summarizes best practices for developing responsive, memory-efficient, and high-performance iOS apps using Titanium. It discusses Titanium's architecture including proxies, bindings, and modules. It provides tips for managing memory by avoiding closures, using properties over setters, and nulling out variables. It also offers recommendations for fast drawing like using opaque textures, avoiding dynamic resizing, and setting view sizes explicitly.
Codestrong 2012 breakout session i os internals and best practices
- 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