Codestrong 2012 breakout session i os internals and best practices

1,104 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,104
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Codestrong 2012 breakout session i os internals and best practices

  1. 1. iOS Internals and Best Practices Blain Hamon & Max Stepanov Senior Software Engineers Appcelerator, Inc. @blainhamon @maxstepanov bhamon@appcelerator.com mstepanov@appcelerator.com
  2. 2. iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
  3. 3. iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
  4. 4. Ti.API.prehistory • 2009: Versions 0.3-0.8 • Based on web views • Native via JSON service • Drew upon Ti:Desktop
  5. 5. Ti.API.today • 2010+: Versions 0.9+ • Built-in Interpreters • Native via JS callbacks • Focused on Mobile
  6. 6. iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
  7. 7. App To The Future• Native OS Native OS
  8. 8. App To The Future• Native OS• OS Abstraction Layer OS Abstraction Layer Native OS
  9. 9. App To The Future• Native OS• OS Abstraction Layer• Ti Binding (Kroll) OS Abstraction Layer Ti Binding (Kroll) Native OS
  10. 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. 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. 12. iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
  13. 13. Game of Threads User taps buttonUI-triggered event: User taps button EventListener• UI asynchronously triggers event listener• UI is ready for more action while JS EventListener processes.
  14. 14. Game of ThreadsJS-triggered events: fireEvent(‘foo’);• Still asychronous setTimeout(0,ƒ());• First in, first out queue EventListener Timeout Function
  15. 15. Game of Threads User taps buttonExpensive listeners: User taps button User taps button EventListener• Still first in, first out• Delayed responses EventListener EventListener
  16. 16. Game of Threads User taps buttonOptions: User taps button User taps button EventListener• Block user Button covered interaction, but only as a last resort EventListener EventListener
  17. 17. Game of Threads User taps button 1Options: 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. 18. iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
  19. 19. My Little Memory• In global held1 = {foo:5}; namespace
  20. 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. 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. 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. 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. 24. iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
  25. 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. 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. 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. 28. iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
  29. 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. 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. 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. 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. 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. 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. 35. iOS Debugging
  36. 36. New in Titanium Titanium 1.7 Titanium 3.0 iOS Simulator Physical Devices
  37. 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. 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. 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. 40. Best Practices • Use conditional breakpoints • A block of JavaScript code • Hit count • Use Console logging with Ti.API functions
  41. 41. Blain Hamon & Max Stepanov @blainhamon @maxstepanovbhamon@appcelerator.com mstepanov@appcelerator.com

×