best practices in mobile development
TRANSCRIPT
WELCOME TO TITANIUM WEEK!
Day Five: Titanium Mobile Best Practices
Kevin WhinneryBoydlee Pollentine
Rick Blalock
Titanium Mobile Best Practices
KEVIN WHINNERY
DIRECTOR OFDEVELOPER RELATIONS
APPCELERATOR
• Architecture Principles
• Resource management
• Custom Components
• Titanium Cookbook
• Q&A
Agenda
Baseline Best Practices
• Titanium APIs are low level (not Obj-C low level, but still)
• Common question is “how do I structure my app”?
• MVC or MVVM is fine – Appc unlikely to adopt a high level framework here
• More important – separation of concerns
Titanium App Architecture
• You probably already know this, but…
• Since Titanium is all JavaScript, it’s easy to break
• Generally, we have a few buckets:– UI Components (Construction and
Behavior)
– Services (Database, Network, Geolocation)
–Model Objects
Separation of Concerns
Help organize this separation with CommonJS modules
• Standard in the JavaScript community
• Advantages over Ti.include and the “module pattern”:– Secure by default
– Control public/private interface
– No ungainly management of large JavaScript namespaces
CommonJS Modules
CommonJS Module Guide on the Wiki: http://bit.ly/ti-modules-guide
Obligatory TODO List
• Component-oriented UI
• Separation of concerns
• Well-defined interfaces–What if I switched data stores?
– As long as I maintain my data store interface, I can swap out the underlying implementation if I want
TODO List Highlights
Resource Management
Typically, Memory Management
• Native UI that provides memory management (tabs, scrollable)
• When windows are closed
• When a reference to a proxy goes out of scope, and is garbage collected
When Does Titanium Clean Up?
What does that mean for you?
• When possible, use native UI components that intelligently manage memory
• Closing windows will clean up associated UI resources
• Forcing cleanup of unneeded objects
Weapons Against Leaks
/** Most of the time, this will do* the trick…*/
var v = Ti.UI.createView();v = null;
Forcing Clean-Up
/** But don’t forget about * global listeners!*/var f = function() {…};Ti.App.addEventListener(‘foo’,f);Ti.App.removeEventListener(‘foo’,f);
Forcing Clean-Up
Custom Components
• Ti.* objects are often “proxies” for native objects which do native stuff
• When you say view.setBackgroundColor(), that triggers special magic in native land
• Most of the time that’s fine, but proxies don’t ‘play by the rules’ of JavaScript
Oversimplifying Proxy Objects
• Often we want to ‘subclass’ views like in the Todo list
• Where we run into problems is adding members to proxies
• If that becomes necessary, then we need to employ a wrapping JavaScript object
Extending Proxies
Custom Component Wrapper
…but more on that Friday.
BOYDLEE POLLENTINE
AUTHOR
APPCELERATOR TITANIUM SMARTPHONE APP DEVELOPMENT COOKBOOK
Any Questions?
Thank You!