Cross Platform Mobile Applications

1. Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohit.ghatol@synerzip.com rohitsghatol@gmail.com

2. Introduction Rohit Ghatol • Project Manager @ Synerzip • Associate Architect @ QuickOffice Inc • GTUG Manager • Certified Scrum Master • Corporate Trainer (Agile and Technical) • Was part of OpenSocial at Google

3. Topics • Overview • Understanding Mobile Apps • Cross Platform Mobile App Development • Pure HTML/JavaScript – PhoneGap • Interpreted JavaScript – Titanium • Native Mobile App Development • Hybrid Mobile App Development • Comparison between PhoneGap Vs Titanium • Conclusion • Q & A

4. Overview The process of developing Applications for various mobile platform using common source code with little or no change to the common source. This presentation focuses on Comparing two frameworks each taking a different approach to solve the above problem. We will Compare PhoneGapVsTitanium .

5. Understanding Mobile Apps

6. Reaching Mobile Users

7. 1. Mobile Features Mostly Feature Sub Set Complete Feature Set

8. 2. Tablet Features Almost Complete Feature Set Complete Feature Set

9. 3. User Interaction Touch based Accelerometer Traditional Compass

10. e.gLayar Application

11. 4. Location aware Can be Location Aware but approximate Location Aware and highly accurate

12. 5. Sensors Handy Camera and Voice Recording Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger

13. e.g Shopping Applications Scan a product’s barcode to know if it has the lowest price. If not, then navigate to a store which has the lowest price

14. 6. Push Notifications Push Notification Notifying the User proactively

15. Challenges in building Mobile Applications

16. 1. OS Fragmentation Windows 7 Fragmentation

17. 2. Multiple Teams/Product Windows 7 Multiple Teams/Products

18. 3. Uniform User Experience Windows 7 Uniform User Experience

19. 4. Feature Fragmentation Feature Fragmentation

20. Types of Mobile App Dev • Native Mobile Apps • Cross Platform Mobile Apps • Hybrid partly Native partly Cross Platform

21. Native Mobile Apps When To When Not To Performance is not the main criteria More or less Replicates Web Apps with few device feature Standard Restful Widget based apps Many Platforms • High Performance Apps • Heavy on OS and Device Features • Complex N/W comm. • Canvas based Apps • Only Few Platforms

22. Cross Platform Mobile Apps When To When Not To High Performance Apps Heavy on OS and Device Features Complex N/W comm. Canvas based Apps Only Few Platforms • Performance is not the main criteria • More or less Replicates Web Apps with few device feature • Standard Restful • Widget based apps • Many Platforms

23. Cross Platform Mobile Apps When To When Not To • Time to market is critical • Saving Cost is critical

24. Hybrid Mobile Apps When To Why To • Fairly Simple UI • Complex Backend • Quite few platforms • E.gShareFile • Recommended way - PhoneGap Plugin • Some parts of app are common • Rest parts are different • Use Cross Platform to develop common part • Use Native to develop the weight lifting parts

25. Cross Platform Mobile App Development

26. Cross Platform Strategies Cross Platform Source Code Common Platform e.gWebKit Mapping to Native Titanium Mobile PhoneGap

27. Common Platform Approach

28. Modern Browsers All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs

29. WebViews All of these smart phones supports using these modern browsers as embedded views (aka WebViews)

30. JavaScript to native and back All these browser engine (most common being webkit) support Javascript to talk to native code and back Native Code (Java/C++/ObjC) HTML/Javascript JSON packets

31. Hybrid Applications HTML/Javascript application loads Google Maps and talks to the native code to gain access to GPS location Native Code (Java/C++/ObjC) HTML/Javascript GPS Location

32. Possibilities • Limitless Possibilities • Expose Camera, Accelerometer, GPS, any of the phones sensors to javascript • Instead of just building Browsed Based applications augment with more phone features

33. Development • HTML/CSS Application uses Common API exposing device features

34. Development • Sample code

35. Mapping to Native

36. Concept • Common API set is provided by framework • Application is written using this common api set • HTML/CSS may be supported or may not be supported. Titanium prefers native UI instead of HTML/CSS UI, Rhodes prefers HTML/CSS UI • Phone Features are access liked common api set (this is similar to that in PhoneGap)

37. Development • Two API Sets • One for UI * (Specific to Titanium Mobile) • Create Windows • Create Dialogs • ……. • One for Phone Features • Same as PhoneGap • Access Camera • Access GPS • ……

38. Development UI API Set

39. Development UI API Set

40. Issues • Common API set across platforms is always minimum • E.g IPhone as a widget, which Android not have • Fragmentation of the API itself. • What is platform specific and not part of Common API comes in Platform specific api?

41. Mobile App Dev Frameworks Common Platform Mapping to Native Titanium Mobile Rhodes Mobile • PhoneGap

42. Compare Screens (IPhone) PhoneGap Titanium Mobile

43. Compare Screens (Android) PhoneGap Titanium Mobile

44. Open Source BSD License MIT License

45. PhoneGap • Only platform to support 6 Platforms

46. PhoneGap • Standards based and extended

48. PhoneGap Features

49. PhoneGapPrerequistes • Need to be acquainted with Android, IOS, BlackBerry, WebOS • Need to be expert at HTML/Javascript or framework like GWT • Need to be acquainted with JavaScript libraries like • Jquery • script.aculo.us • Prototype • Etc • Or Ajax framework like GWT • Need different project for each platform, inject PhoneGap code in each project • PhoneGap has no IDE, use Eclipse for Android and Xcode for IPhone

50. Demo Screens - IPhone