• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Codestrong 2012 breakout session   i os internals and best practices
 

Codestrong 2012 breakout session i os internals and best practices

on

  • 597 views

 

Statistics

Views

Total Views
597
Views on SlideShare
597
Embed Views
0

Actions

Likes
1
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Codestrong 2012 breakout session   i os internals and best practices Codestrong 2012 breakout session i os internals and best practices Presentation Transcript

    • iOS Internals and Best Practices Blain Hamon & Max Stepanov Senior Software Engineers Appcelerator, Inc. @blainhamon @maxstepanov bhamon@appcelerator.com mstepanov@appcelerator.com
    • iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
    • iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
    • Ti.API.prehistory • 2009: Versions 0.3-0.8 • Based on web views • Native via JSON service • Drew upon Ti:Desktop
    • Ti.API.today • 2010+: Versions 0.9+ • Built-in Interpreters • Native via JS callbacks • Focused on Mobile
    • iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
    • App To The Future• Native OS Native OS
    • App To The Future• Native OS• OS Abstraction Layer OS Abstraction Layer Native OS
    • App To The Future• Native OS• OS Abstraction Layer• Ti Binding (Kroll) OS Abstraction Layer Ti Binding (Kroll) Native OS
    • 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
    • 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
    • iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
    • 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.
    • Game of ThreadsJS-triggered events: fireEvent(‘foo’);• Still asychronous setTimeout(0,ƒ());• First in, first out queue EventListener Timeout Function
    • Game of Threads User taps buttonExpensive listeners: User taps button User taps button EventListener• Still first in, first out• Delayed responses EventListener EventListener
    • 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
    • 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
    • iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
    • My Little Memory• In global held1 = {foo:5}; namespace
    • My Little Memory• In global held1 = {foo:5}; namespace• In a closure of a foo = (function(){ function var held2=0; return function() {return held2++;}; })();
    • 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);
    • 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();
    • 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();
    • iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
    • 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
    • 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
    • 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()
    • iOS Internals • History • Structure • Responsive Apps • Memory-Light Apps • Fast-Performing Apps • Fast-Drawing Apps
    • Epic View Time • iOS uses OpenGL underneath • Views cache as textures • Opaque textures are faster • Resizing can be expensive • Transparency can be expensive
    • 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
    • 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 }));
    • 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 }));
    • 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 });
    • 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
    • iOS Debugging
    • New in Titanium Titanium 1.7 Titanium 3.0 iOS Simulator Physical Devices
    • 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)!
    • 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
    • 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
    • Best Practices • Use conditional breakpoints • A block of JavaScript code • Hit count • Use Console logging with Ti.API functions
    • Blain Hamon & Max Stepanov @blainhamon @maxstepanovbhamon@appcelerator.com mstepanov@appcelerator.com