Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Get there together
10 Golden Rules For
Outstanding Titanium Apps
@sugrue www.jamessugrue.ie
Lead Architect / Growth Hacker
Author of Beginning Backbone.js
James Sugrue
Using Titanium sinc...
Carma Carpooling
Founded in early 2007, Carma is the world’s
first social transportation network.
Choose a match
& get in touch
Tap ‘Start Trip’ &
log your journey
Tap ‘End Trip’ &
share the Carma
How the App Works
Native to Native to Hybrid to Native
2010 2012 2013 2014
Replace your tables
with list views
1
The Trouble With Tables
TableViews for tabular data seems natural
!
As row count increases, performance suffers
!
Use List...
ListView !== TableView
!
!
Templates for each ‘row’ bound to a data object
!
Overall list events: no row events
!
Use lazy...
Beware of
the single thread
2
The Most Frustrating User Experience
Customers will not accept your excuses for an unresponsive app
!


Keep Your App Moving
Ensure that multiple clicks does not mean multiple invocation
Always keep the user informed, even if ...
Obsess over
memory management
3
Don’t Leave It Until The End
Some developers assume there’s no need to worry about memory
management in JavaScript
!
!
!
!...
Some Quick Tips
Keep event listeners at a minimum
Use call-backs instead of global event listeners.
!
!
!


1
2 Create a m...
Use require statements
only when needed
4
Modules: A Delicate Balancing Act
It is tempting to add all require statements at the top of each Alloy
controller.
!
!


Lazy Loading Modules
Ensure that you only require essential modules at the beginning
!


1 var event = require("/tracking/...
Embrace native modules
5
Writing native modules is not cheating
Use your Objective-C/Swift/Java skills




Multiple Layer Scroller
Be Careful Crossing That Bridge
Reacting to every scroll event was really slow
Use fonts
rather than images
6
Slim Down Your App With Icon Fonts
Don’t overload your app with images
Choose Your Icons http://fontastic.me
Add Font To Project
1
2 Update app.tss
//	
// Icon Font	
// -------------------------------------------------
".icon": {	
...
Use Your Font
3
<Button id="btnSignupWithFacebook" class="btn btn-	 	
	 	 	 fb-blue btn-lg col-abs-11”>	
	 <Label class="i...
Get consistent styling
with app.tss
7
Keep Your Designer Happy
Keep all your common app styles in one place
!
!
!
Use this image: http://upload.wikimedia.org/wi...
Keep Your Designer Happy
Keep all your common app styles in one place: app.tss
!
!
!
!
!
"Label":{	
font: {	
fontFamily: '...
Wriststrap
https://github.com/TNuzzi/wriststrap
Ti UX Patterns
http://www.uxmobilepatterns.com/
Use TiShadow
for Rapid Development
8
Speed Up Development Exponentially
How much time do you waste in the cycle of building and deploying?
!
What about install...
You Have To See It to Believe It
1
titanium build -p android -T device --shadow
HAPPY
BIRTHDAY 

DAVID
Start with Android
9
Cross Platform Development Is Difficult
The greatest appeal of Titanium is cross platform
!
With Titanium, iOS support has a...
3
Lessons Learned The Hard Way
Use density pixels to gracefully handle varying resolutions
!
When adding events remember t...
Making Android More Appealing
!
Use Genymotion as your emulator
!
!
!
!
!
!
1
2 Ensure every developer has at least two ph...
Go for the latest
OS features
10
Push Your App to Be Cutting Edge
Never limit yourself to the lowest common denominator
"The reasonable man
adapts himself to the
conditions that surround
him... The unreasonable
man adapts surrounding
conditio...
Get Involved in the Titanium Community
Don’t be afraid to submit a pull request
Ask Ingo for what you need
@ronaldtreur
Credits
Keeping Your App Responsive
@davidbankier
TiShadow
@skypanther
Memory Management
@acktie
@dawsontoth
...
Get there together
Carma Prize
Your chance to make it big
What is the Carma Prize?
$1 million to Carma employee who enables +1,000 daily carpool trips
$1 million to 3rd party devel...
What is the problem?
The average annual cost of driving a sedan in the US = $9,122
The average passenger vehicle emits 5.1...
Highways full of “riderless cars”
A road can be 100% full, but with only 25% capacity used.
!
Once we know who the commute...
Carma - a better way to commute
Save up to 75% on the cost of driving
Reduce your carbon footprint and fuel dependency
Get...
Paul | Sean
Open APIs for real-time carpool verification
Open APIs for real-time carpool matching
Open APIs for building o...
Inspiration
api.carmacarpool.com
Plug-in for concerts / events
System for sport teams/arenas
Competition for “school-pools...
$1 million
Third party developer
+10,000 daily carpool trips
Get there together
$1 million
Carma employee
+1,000 daily carpool trips
Get there together
$500K
Accelerator program
funding for startups
Get there together
The Carma Prize
$1 million to Carma employee who enables +1,000 daily carpool trips
$1 million to 3rd party developer who ...
@TeamCarma
www.carmacarpool.com
 10 Golden Rules For Outstanding Titanium Apps
 10 Golden Rules For Outstanding Titanium Apps
 10 Golden Rules For Outstanding Titanium Apps
Nächste SlideShare
Wird geladen in …5
×

10 Golden Rules For Outstanding Titanium Apps

7.199 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie

10 Golden Rules For Outstanding Titanium Apps

  1. 1. Get there together 10 Golden Rules For Outstanding Titanium Apps
  2. 2. @sugrue www.jamessugrue.ie Lead Architect / Growth Hacker Author of Beginning Backbone.js James Sugrue Using Titanium since 2010
  3. 3. Carma Carpooling Founded in early 2007, Carma is the world’s first social transportation network.
  4. 4. Choose a match & get in touch Tap ‘Start Trip’ & log your journey Tap ‘End Trip’ & share the Carma How the App Works
  5. 5. Native to Native to Hybrid to Native 2010 2012 2013 2014
  6. 6. Replace your tables with list views 1
  7. 7. The Trouble With Tables TableViews for tabular data seems natural ! As row count increases, performance suffers ! Use ListView for a performance boost !
  8. 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. 9. Beware of the single thread 2
  10. 10. The Most Frustrating User Experience Customers will not accept your excuses for an unresponsive app ! 

  11. 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. 12. Obsess over memory management 3
  13. 13. Don’t Leave It Until The End Some developers assume there’s no need to worry about memory management in JavaScript ! ! ! ! 

  14. 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. 15. Use require statements only when needed 4
  16. 16. Modules: A Delicate Balancing Act It is tempting to add all require statements at the top of each Alloy controller. ! ! 

  17. 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. 18. Embrace native modules 5
  19. 19. Writing native modules is not cheating Use your Objective-C/Swift/Java skills 
 

  20. 20. Multiple Layer Scroller
  21. 21. Be Careful Crossing That Bridge Reacting to every scroll event was really slow
  22. 22. Use fonts rather than images 6
  23. 23. Slim Down Your App With Icon Fonts Don’t overload your app with images
  24. 24. Choose Your Icons http://fontastic.me
  25. 25. 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" }
  26. 26. 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>
  27. 27. Get consistent styling with app.tss 7
  28. 28. 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
  29. 29. 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 }
  30. 30. Wriststrap https://github.com/TNuzzi/wriststrap
  31. 31. Ti UX Patterns http://www.uxmobilepatterns.com/
  32. 32. Use TiShadow for Rapid Development 8
  33. 33. 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? 

  34. 34. You Have To See It to Believe It 1 titanium build -p android -T device --shadow
  35. 35. HAPPY BIRTHDAY 
 DAVID
  36. 36. Start with Android 9
  37. 37. Cross Platform Development Is Difficult The greatest appeal of Titanium is cross platform ! With Titanium, iOS support has always been superior

  38. 38. 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);! ! }! ! ! ! ! !
  39. 39. 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
  40. 40. Go for the latest OS features 10
  41. 41. Push Your App to Be Cutting Edge Never limit yourself to the lowest common denominator
  42. 42. "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
  43. 43. Get Involved in the Titanium Community Don’t be afraid to submit a pull request Ask Ingo for what you need
  44. 44. @ronaldtreur Credits Keeping Your App Responsive @davidbankier TiShadow @skypanther Memory Management @acktie @dawsontoth TandemScroll wriststrap
  45. 45. Get there together Carma Prize Your chance to make it big
  46. 46. 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
  47. 47. 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!
  48. 48. 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.
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. $1 million Third party developer +10,000 daily carpool trips Get there together
  53. 53. $1 million Carma employee +1,000 daily carpool trips Get there together
  54. 54. $500K Accelerator program funding for startups Get there together
  55. 55. 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
  56. 56. @TeamCarma www.carmacarpool.com

×