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!