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.

An introduction to Titanium


Published on

Presentation from Day 3 at OSDC 2011 (Canberra)

Published in: Technology
  • Be the first to comment

An introduction to Titanium

  1. 1. An introductionto TitaniumEnough to get you into trouble
  2. 2. Graham Weldon PHP developer for 11 years CakePHP core contributor Open source public speaker Love developing/teaching @predominant
  3. 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. 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. 5. Building for mobile Google Android Java Apple iOS Objective C Windows Phone .NET platform (C#, primarily) Blackberry Java
  6. 6. Abstraction Layers
  7. 7. An abstraction layer is a way ofhiding the implementationdetails of a particular set offunctionality.
  8. 8. What is anabstraction layer?
  9. 9. Why use anabstraction 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. 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. 11. Appcelerator Titanium
  12. 12. Appcelerator Titanium
  13. 13. Wait... Free? The platform and studio environment cost nothing You have all the tools you need to build applications Its also Open Source! Whats the catch? Appcelerator is a company for profit Support Premium modules / extensions Custom development
  14. 14. Take advantage ofexisting skills Web Developers Use Javascript Learn and extend their knowledge Benefit their web skills Only the Titanium specific calls are different
  15. 15. Key advantages Write once Deploy everywhere Cut down on maintenance Simplify deployment to new platforms
  16. 16. The Titanium Platform
  17. 17. Titanium Studio Build apps Debug Profile Code hinting Easy device testing Easy deployment
  18. 18. 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
  19. 19. 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
  20. 20. Javascript!
  21. 21. A perfect match Titanium is View driven Event based Perfect for Javascript Layered view hierarchy Similar to iOS
  22. 22. Organising andbuilding your app
  23. 23. Resources The resources folder Holds all the important stuff Code Assets Platform specific whatsits
  24. 24. Platforms Sometimes platforms have differences You need to occasionally provide a different implementation Maybe some images for just that platform
  25. 25. 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+)
  26. 26. and of course... Android
  27. 27. app.js Code Context Separate context to keep things tidy and manageable ‘myVar’ in app.js Not accessible in win1.js Use globals sparinglywin1.js
  28. 28. But I want globaldata, configs, etc.. Define configuration files Use the Titanium Include Ti.include(...); Separate different information Only include what you need
  29. 29. UI Structure
  30. 30. 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!
  31. 31. 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.
  32. 32. There are workarounds!
  33. 33. Custom InterfacesPossible.But requires some real work.
  34. 34. Manage your UIInterface stackingOrder, and backtracking
  35. 35. Exciting! But scary...
  36. 36. Titanium makes it easy
  37. 37. Ti.Accelerometer addEventListener removeEventListener fireEvent Simulate accelerometer events
  38. 38. Ti.Geolocation Quick and easy Geo Current Position forwardGeocoder Address -> Coords reverseGeocoder Coords -> Address Add/remove listeners
  39. 39. 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
  40. 40. Ti.Analytics Monitor events Report on them later Gather info about behaviour Improve your application Challenge users
  41. 41. Ti.Contacts Access the Address Book Works on all devices One interface Integrate contacts Simplify information sharing Read only on Android :(
  42. 42. Ti.Database A simple to use database SQL compliant Install and update DBs Store local data Great for offline storage Sync later
  43. 43. Ti.Filesystem Read files Write files iOS restricted to sandbox (everyone is...) Android allows access to external media
  44. 44. Ti.Facebook Simple Facebook integration REST API (Deprecated) Graph API Login Store authorization Simple configuration Works everywhere
  45. 45. Ti.Gesture Track gestures add event listeners customise your app UX Events shake orientation change
  46. 46. Ti.Network Protocols TCP HTTP Bonjour Implement any protocol you like on TCP Connect your app Create a server
  47. 47. Ti.XML Easy to use parser Produce XML too Makes consuming services easy Includes things like rss atom oData
  48. 48. Yahoo! YQL My personal favourite Grab data from anywhere on the internet Query using XPATH Scrape websites (responsibly)
  49. 49. 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
  50. 50. Also checkGithub Search repos for ‘Titanium’ Currently 706 results Components Full projects
  51. 51. JSS
  52. 52. 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!
  53. 53. app.jsapp.jss
  54. 54. app.jsapp.jss
  55. 55. Building your appMultiple platform support
  56. 56. Optionally selecta template
  57. 57. < insert coding montage >
  58. 58. Thats it! Thanks! Graham Weldon @predominant Cake Development Corporation @cakedc