Are you starting out with Titanium to develop cross platform apps? When creating mobile applications using Titanium, the first 80% of functionality works fine, it's the last 20% that will trip you up. In this talk you will learn some of the golden rules that a team of five developers discovered when porting their hybrid web application over to Titanium, to run on both iOS and Android. Learn how to get around some common speed bumps and accelerate your own app development.

1. Get there together
10 Golden Rules For
Outstanding Titanium Apps

2. @sugrue www.jamessugrue.ie
Lead Architect / Growth Hacker
Author of Beginning Backbone.js
James Sugrue
Using Titanium since 2010

3. Carma Carpooling
Founded in early 2007, Carma is the world’s
first social transportation network.

4. Choose a match
& get in touch
Tap ‘Start Trip’ &
log your journey
Tap ‘End Trip’ &
share the Carma
How the App Works

5. Native to Native to Hybrid to Native
2010 2012 2013 2014

6. Replace your tables
with list views
1

7. The Trouble With Tables
TableViews for tabular data seems natural
!
As row count increases, performance suffers
!
Use ListView for a performance boost
!

8. ListView !== TableView
!
!
Templates for each ‘row’ bound to a data object
!
Overall list events: no row events
!
Use lazy loading so that the template
compilation doesn’t slow down your app
!
http://www.shockoe.com/blog/titanium-tableview-listview-retrospective/

9. Beware of
the single thread
2

10. The Most Frustrating User Experience
Customers will not accept your excuses for an unresponsive app
!

11. Keep Your App Moving
Ensure that multiple clicks does not mean multiple invocation
Always keep the user informed, even if they have to wait
1
_.defer for UI blocking operations
_.throttle to prevent duplicate actions2
Use activity indicators when necessary
3
4
Try out graviton.TaskManager from Ronald Treur

12. Obsess over
memory management
3

13. Don’t Leave It Until The End
Some developers assume there’s no need to worry about memory
management in JavaScript
!
!
!
!

14. Some Quick Tips
Keep event listeners at a minimum
Use call-backs instead of global event listeners.
!
!
!
1
2 Create a module to manage global state
3 Dispose objects when you are finished with them.

15. Use require statements
only when needed
4

16. Modules: A Delicate Balancing Act
It is tempting to add all require statements at the top of each Alloy
controller.
!
!

17. Lazy Loading Modules
Ensure that you only require essential modules at the beginning
!
1 var event = require("/tracking/tracking_event"),
analytics = require("/tracking/tracking_manager");
or
3
Use require(“<path>”).<function> inline with your code
!
require("facebook/facebook_manager").getFacebookId();
Store your module reference within the function
!
2
function loginFacebook(fbManager) {
var eventTracker = require(“/tracking/tracking_event");

18. Embrace native modules
5

19. Writing native modules is not cheating
Use your Objective-C/Swift/Java skills

20. Multiple Layer Scroller

21. Be Careful Crossing That Bridge
Reacting to every scroll event was really slow

23. Use fonts
rather than images
6

24. Slim Down Your App With Icon Fonts
Don’t overload your app with images

25. Choose Your Icons http://fontastic.me

26. Add Font To Project
1
2 Update app.tss
//
// Icon Font
// -------------------------------------------------
".icon": {
font: {
fontFamily: "splinico"
}
}
!
".icon-camera": {
text: "a"
}
!
".icon-facebook": {
text: "f"
}
!
".icon-envelope": {
text: "b"
}

27. Use Your Font
3
<Button id="btnSignupWithFacebook" class="btn btn-
fb-blue btn-lg col-abs-11”>
<Label class="icon icon-facebook btn-icon”/>
<View class="btn-vr"/>
<Label class="lbl-large btn-text"
text=“L(‘widget_home_btn_signup_facebook')">
</Label>
</Button>

28. Get consistent styling
with app.tss
7

29. Keep Your Designer Happy
Keep all your common app styles in one place
!
!
!
Use this image: http://upload.wikimedia.org/wikipedia/commons/3/3e/
RedBikeLane.JPG

30. Keep Your Designer Happy
Keep all your common app styles in one place: app.tss
!
!
!
!
!
"Label":{
font: {
fontFamily: 'Helvetica Neue Light',
fontSize: '14dp',
},
color: '#333333'
}
"Button":{
font: {
fontFamily: 'HelveticaNeue-Light',
fontSize: '14dp'
},
height: '44dp',
width: '100%'
}
"TableView":{
backgroundColor: 'transparent',
width: '100%',
height: Ti.UI.FILL
}

31. Wriststrap
https://github.com/TNuzzi/wriststrap

32. Ti UX Patterns
http://www.uxmobilepatterns.com/

33. Use TiShadow
for Rapid Development
8

34. Speed Up Development Exponentially
How much time do you waste in the cycle of building and deploying?
!
What about installing updated builds on all test devices?

35. You Have To See It to Believe It
1
titanium build -p android -T device --shadow

36. HAPPY
BIRTHDAY
DAVID

37. Start with Android
9

38. Cross Platform Development Is Difficult
The greatest appeal of Titanium is cross platform
!
With Titanium, iOS support has always been superior

39. 3
Lessons Learned The Hard Way
Use density pixels to gracefully handle varying resolutions
!
When adding events remember to use singletap for Android
click for iOS
! !
!
!
! if (OS_ANDROID) {!
! ! textfield.addEventListener("singletap", textfield.clearError);!
! }!
! else {!
! ! textfield.addEventListener("click", textfield.clearError);!
! }!
!
!
!
!
!

40. Making Android More Appealing
!
Use Genymotion as your emulator
!
!
!
!
!
!
1
2 Ensure every developer has at least two phones
3 Utilise tishadow to easily deploy to all devices in real time

41. Go for the latest
OS features
10

42. Push Your App to Be Cutting Edge
Never limit yourself to the lowest common denominator

44. "The reasonable man
adapts himself to the
conditions that surround
him... The unreasonable
man adapts surrounding
conditions to himself... All
progress depends on the
unreasonable man.”
!
- George Bernard Shaw
Be Unreasonable

45. Get Involved in the Titanium Community
Don’t be afraid to submit a pull request
Ask Ingo for what you need

46. @ronaldtreur
Credits
Keeping Your App Responsive
@davidbankier
TiShadow
@skypanther
Memory Management
@acktie
@dawsontoth
TandemScroll
wriststrap

47. Get there together
Carma Prize
Your chance to make it big

48. What is the Carma Prize?
$1 million to Carma employee who enables +1,000 daily carpool trips
$1 million to 3rd party developer who enables +10,000 daily carpool trips
$500,000 to start-ups to take on the challenge

50. What is the problem?
The average annual cost of driving a sedan in the US = $9,122
The average passenger vehicle emits 5.1 tons of CO2 per year,
making our car culture responsible for 33% of US emissions
The typical American spends a whole week
and wastes 19 gallons of fuel sitting in traffic every year
Most of us drive to work alone, i.e. with three empty seats!

51. Highways full of “riderless cars”
A road can be 100% full, but with only 25% capacity used.
!
Once we know who the commuters are, and where they are going,
the game changes entirely.

52. Carma - a better way to commute
Save up to 75% on the cost of driving
Reduce your carbon footprint and fuel dependency
Get access to carpool/HOV lanes and get your free time back
Spend more time with your neighbours and colleagues

53. Paul | Sean
Open APIs for real-time carpool verification
Open APIs for real-time carpool matching
Open APIs for building occupancy-based apps
The Carma API
api.carmacarpool.com

54. Inspiration
api.carmacarpool.com
Plug-in for concerts / events
System for sport teams/arenas
Competition for “school-pools” for kids / moms & dads
Ride Board for large campus / colleges
Systems for large employers
App for connected vehicles - Automotive companies
App to open parking garages / toll barriers when carpool comes

55. $1 million
Third party developer
+10,000 daily carpool trips
Get there together

56. $1 million
Carma employee
+1,000 daily carpool trips
Get there together

57. $500K
Accelerator program
funding for startups
Get there together

58. The Carma Prize
$1 million to Carma employee who enables +1,000 daily carpool trips
$1 million to 3rd party developer who enables +10,000 daily carpool trips
$500,000 to start-ups to take on the challenge
www.carmacarpool.com/prize

59. @TeamCarma
www.carmacarpool.com