Your SlideShare is downloading. ×
Codestrong 2012 breakout session   i os internals and best practices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Codestrong 2012 breakout session i os internals and best practices

396
views

Published on


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

No Downloads
Views
Total Views
396
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 buttonUI-triggered event: User taps button EventListener• UI asynchronously triggers event listener• UI is ready for more action while JS EventListener processes.
  • 14. Game of ThreadsJS-triggered events: fireEvent(‘foo’);• Still asychronous setTimeout(0,ƒ());• First in, first out queue EventListener Timeout Function
  • 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. 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. 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. 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 @maxstepanovbhamon@appcelerator.com mstepanov@appcelerator.com