Presentation from Day 3 at OSDC 2011 (Canberra)

1. An introduction
to Titanium
Enough to get you into trouble

2. Graham Weldon
PHP developer for 11 years
CakePHP core contributor
Open source public speaker
Love developing/teaching
@predominant
http://grahamweldon.com
http://cakedc.com

3. The rise of mobile
Making, distributing and selling mobiles apps can be
a lucrative business
Well designed, available apps are sought after
Users prefer a service or product if it comes with a
mobile counterpart
Mobile
Available
Accessible
Offline

4. Mobile history
PDA’s
Original Netbooks
Symbian (Nokia domination)
iMode (Success in Japan)
WAP
Java ME
Android, iOS, Windows Phone, Meego, and more

5. Building for mobile
Google Android
Java
Apple iOS
Objective C
Windows Phone
.NET platform (C#, primarily)
Blackberry
Java

6. Abstraction Layers

7. An abstraction layer is a way of
hiding the implementation
details of a particular set of
functionality.

8. What is an
abstraction layer?

9. Why use an
abstraction layer?
Simpler maintenance
Only working with business logic and custom code
One codebase, many platforms
Quicker development
Re-use existing knowledge
Less re-training

10. I’m convinced!
What can I use?
NimbleKit (iOS)
Adobe PhoneGap (Web container)
Adobe Flex / Flash
Appcelerator Titanium (Compiled to native)
Corona (Lua)
Rhomobile
Web
jQuery Mobile
Sencha Touch
Custom

11. Appcelerator Titanium

12. Appcelerator Titanium

14. Wait... Free?
The platform and studio environment cost nothing
You have all the tools you need to build applications
Its also Open Source! http://github.com/appcelerator
Whats the catch?
Appcelerator is a company for profit
Support
Premium modules / extensions
Custom development

15. Take advantage of
existing skills
Web Developers
Use Javascript
Learn and extend their knowledge
Benefit their web skills
Only the Titanium specific calls are different

16. Key advantages
Write once
Deploy everywhere
Cut down on maintenance
Simplify deployment to new platforms

17. The Titanium Platform

18. Titanium Studio
Build apps
Debug
Profile
Code hinting
Easy device testing
Easy deployment

19. How does it work?
Pre-Compiler
Optimise, Analyse code
Find and resolve dependencies
Front End Compiler
Convert to native code
Package in JS engine for other stuff
Platform Compiler
Compiled with native tools
Xcode + iOS SDK, Java + Android SDK

20. What does that mean?
Its optimising your code
Converting what it can to native device code
Anything it can’t gets run through the JS Engine
Makes it super fast
Makes it super portable no matter the code

21. Javascript!

23. A perfect match
Titanium is
View driven
Event based
Perfect for Javascript
Layered view hierarchy
Similar to iOS

24. Organising and
building your app

25. Resources
The resources folder
Holds all the important stuff
Code
Assets
Platform specific whatsits

26. Platforms
Sometimes platforms have
differences
You need to occasionally
provide a different
implementation
Maybe some images for just that
platform

27. iPhone folder
appicon.png
Icon for home screen
*-Landscape.png
Landscape splash image
*-Portrait.png
Portrait splash image
Default.png
Standard resolution
Default@2x.png
Double resolution (iPhone4+)

28. and of course... Android

29. app.js
Code Context
Separate context to keep things
tidy and manageable
‘myVar’ in app.js
Not accessible in win1.js
Use globals sparingly
win1.js

30. But I want global
data, configs, etc..
Define configuration files
Use the Titanium Include
Ti.include(...);
Separate different information
Only include what you need

31. UI Structure

32. Tabbed Layout
Very common
iOS Examples: Twitter app, Foursquare, Commbank,
Phone
One window per tab
Tab windows can open sub-windows
Naturally they get a “< back” option
Easy to use and understand
No effort required!

36. Doh! Platform differences
iOS has tabs at the bottom
Android has tabs at the top
iOS has a title by default for tabGroups
Android doesn’t have a title for tabGroups
More than likely your creative director wants everything
to look the same on all platforms
Disregarding previous user epxerience on specific
platforms.

38. There are workarounds!

40. Custom Interfaces
Possible.
But requires some real work.

41. Manage your UI
Interface stacking
Order, and backtracking

43. Exciting! But scary...

44. Titanium makes it easy

45. Ti.Accelerometer
addEventListener
removeEventListener
fireEvent
Simulate accelerometer events

46. Ti.Geolocation
Quick and easy Geo
Current Position
forwardGeocoder
Address -> Coords
reverseGeocoder
Coords -> Address
Add/remove listeners

47. Ti.Map
Common interface for all
devices
Simple map integration
Use with information from
Ti.Geolocation
Add custom pins / locations
Switch map types
Satellite / Standard / Hybrid

48. Ti.Analytics
Monitor events
Report on them later
Gather info about behaviour
Improve your application
Challenge users

49. Ti.Contacts
Access the Address Book
Works on all devices
One interface
Integrate contacts
Simplify information sharing
Read only on Android :(

50. Ti.Database
A simple to use database
SQL compliant
Install and update DBs
Store local data
Great for offline storage
Sync later

51. Ti.Filesystem
Read files
Write files
iOS restricted to sandbox
(everyone is...)
Android allows access to
external media

52. Ti.Facebook
Simple Facebook integration
REST API (Deprecated)
Graph API
Login
Store authorization
Simple configuration
Works everywhere

53. Ti.Gesture
Track gestures
add event listeners
customise your app UX
Events
shake
orientation change

54. Ti.Network
Protocols
TCP
HTTP
Bonjour
Implement any protocol you
like on TCP
Connect your app
Create a server

55. Ti.XML
Easy to use parser
Produce XML too
Makes consuming services easy
Includes things like
rss
atom
oData

56. Yahoo! YQL
My personal favourite
Grab data from anywhere on
the internet
Query using XPATH
Scrape websites (responsibly)
http://developer.yahoo.com/yql/

57. Commercial
Components
There are a heap on the
marketplace
Some are reasonably priced
Great way to get things done
quickly
You can sell your own
components on the marketplace
http://www.appcelerator.com/products/open-mobile-marketplace/

58. Also check
Github
Search repos for ‘Titanium’
Currently 706 results
Components
Full projects
http://goo.gl/R69Ck

59. JSS

60. JSS: CSS style rules
Not much information about it
But very easy to use
app.js
app.jss
Set almost any property
Always clean before running your app!

61. app.js
app.jss

62. app.js
app.jss

63. Building your app
Multiple platform support

64. Optionally select
a template

66. < insert coding montage >

67. Thats it! Thanks!
Graham Weldon
http://grahamweldon.com
@predominant
Cake Development Corporation
http://cakedc.com
@cakedc