Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

10 Golden Rules For Outstanding Titanium Apps

6,489 views

Published on

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.

Published in: Technology

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

×