Contrary to native fanboys’ beliefs, PhoneGap is definitely a player in the cross-platform mobile development space. Designed properly, you can have an elegant and performant cross-platform mobile app created with PhoneGap. We’ll take a deep dive into the PhoneGap approach to cross-platform mobile development, as well as briefly touch upon native development and other technologies’ cross-platform solutions and when each one may be appropriate to use.

1. Cross-Platform Mobile
Development with PhoneGap
by: Vince Bullinger
Mobile March
3/20/2014

2. About Me
● Vince Bullinger (“vbullinger” everywhere)
● Married (5/08), live in St. Paul, WPI grad (‘04)
● Daughter Zina born 7/4/2011
● Been a consultant/developer since 2005
● Always looking to improve skills

3. or 11:45AM-12:45PM - Robert Half, US Bancorp Center, Mpls

4. Agenda
● Compare native, X-platform development
● Why should I care about X-platform?
● PhoneGap vs Xamarin, Appcelerator
● Getting started with PhoneGap
● PhoneGap protips, tools

5. X-Platform Pros
● Write once, run on multiple major platforms
● One team/IDE/Skillset
● Can save a LOT of money
● Usually in more well-known languages
○ Easy to find talent
○ More support (varying)
○ Reuse code from other projects

6. X-Platform Cons
● Doesn’t always perform as well (varying)
○ Not specialized for particular device (duh)
○ Doesn’t always provide native experience
● Varying device feature support
○ Some device features may not be supported
○ Can vary by device
○ Can vary by framework
● May take a while to catch up to native updates
● Different appearances/capabilities/OSes

7. UI Differences
Source:
Apple
Source: javatechig.com

8. Different Capabilities
● Devices have different:
○ Hardware
○ Features
○ Screen ratios
○ Sizes
○ Screen resolutions
● Use feature detection
● Have fallback functionality

9. OS-Specific Considerations
● Multi-tasking
● Security
● Database

10. Test Psychotically
● Have a real, defined testing strategy
● Iterative, frequent
● QA knowledgeable on each device
● Test on actual device, not just emulator

11. Why Should I Care?
● Want to pick best mobile strategies
● Developers don’t want to code native*
○ 36% want HTML5
○ 32% want cross-platform
○ 15% want native only
* Survey by KendoUI

12. Cross-Platform Relevance
“The market for cross-platform mobile
development tools exceeds $1.6 billion
right now, and is expected to reach $8.2
billion by 2016.”
- Smiths Points Analytics

13. Native or X-Platform?
● Choose native when:
○ Need 100% native experience all the time
○ Accessing all device features
○ Only targeting one platform
○ Money is no issue
● Choose cross-platform when:
○ Don’t need to access obscure device features
○ You’re ready for some serious testing strategies
○ Have a restricted budget

14. PhoneGap
• Free, open-source framework
• Build “native” apps for multiple platforms
• Built using HTML, CSS, JavaScript
– Large communities :)
• API allows access to device features
– Accelerometer
– Camera
– Microphone
– File system
– A few more

15. How PhoneGap Works

16. PhoneGap Cons
• API support varies
• HTML, CSS, JavaScript only
• Not really native apps…
• Serious apps obviously not native
• Big apps can have slow startup
• Shouldn’t be used for complicated apps
– Shell that connects to web server for real work
– Won’t be consistent if using all native functionality

17. When To Use?
● Your web developers can PhoneGap now
● Small budget
● Uncomplicated app
● First foray into mobile development
● It is not best for large/complicated apps
○ Your app probably doesn’t fall under those categories
● Won’t have native look and feel
○ Not native apps
○ Localized mobile website with basic device API

18. • C# code
– Lambdas
– Generics
– LINQ
– All your other stuff...
• Compiles to native binary
– IL + JIT (Android)
– ARM binary + AOT (iOS)
Xamarin

19. How Xamarin Works
Quasi stolen from http://xamarin.com/how-it-works

20. Xamarin Cons
● Still need separate UIs
○ Good thing?
○ Needs to be a factor in architecture
decisions
● Separate device APIs
○ Xamarin.Mobile
■ Contacts
■ Camera
■ Geolocation
● Basic Xamarin Studio is free, useless

21. When to Use?
● Want as close to native as possible
● .Net shop
● Got some money to spend

22. Titanium
• Build apps using JavaScript
– Like PhoneGap
• Compiles to 100% real app
– Like Xamarin
– Unlike PhoneGap
• Cross-platform UIs
– Unlike Xamarin
• Robust JavaScript access to native APIs
• Titanium Studio is free

23. How Titanium Works
+
+

24. Titanium Cons

25. Making UIs Identical
• Don’t do it
• It’s dumb
• Rely on native look and feel

26. When to Use?
● Your team is/can be strong w/web development
● Familiar with Eclipse
● PhoneGap won’t do
○ Too complicated
○ Not enough device support
○ Need high-quality app with native look and feel
● Enough money to open pocket book
● Ready to sacrifice a bit of UI control
○ Rely on native look and feel
○ Lowest common denominator

27. PhoneGap History
● Started at 2008 iPhoneDevCamp by Nitobi
○ quickly added Android, Blackberry support
● ‘09 Web 2.0 Expo Launchpad Peoples' Choice
● Adobe acquires Nitobi in 2011
● PhoneGap now part of Cordova
○ PhoneGap: open source
○ Cordova: proprietary
● PhoneGap’s aim:
○ Fulfill W3C specifications
○ Until browsers do

28. Getting Started
● IDEs
● APIs
● Emulating
● Building

29. IDEs
● Whatever you want!
● IDEs usually have plugins
● Have a Mac? Use XCode
● IBM Worklight - Eclipse plugin
○ Mobile websites, hybrid or native apps
○ Very PhoneGap-friendly
● AppBuilder (formerly Icenium)
○ Most PhoneGap-centric IDE
○ Part of Telerik Platform
○ Visual Studio plugin

31. DEMO

32. PhoneGap APIs
● navigator.*
○ accelerometer
○ compass
○ contacts
○ device.capture.capture[Audio|Image|Video]
○ geolocation
○ network
● window.requestFileSystem
● alert - native!
● Almost always asynchronous

34. Emulation

35. DEMO

36. Building PhoneGap Native Apps

37. Building PhoneGap Native Apps

38. Building PhoneGap Native Apps

39. Building PhoneGap Native Apps
● Download SDK for every device
● I’ll check back in next week
… or...

40. ● Let PhoneGap build service compile it
Building PhoneGap Native Apps

41. DEMO

42. ● Create web apps optimized for mobile
○ Touch optimized (buttons)
○ Uses responsive layout (inputs/labels)
○ Elements automatically adapt to device sizes
○ Supports range of platforms, devices
● Progressive enhancement
○ Always display basic content
○ Show richer display to powerful browsers
● Themeable - themeroller.jquerymobile.com
jQuery Mobile

43. ● Ajaxified navigation
○ Hijacks links
○ Get linked url behind scenes
○ Append to DOM
○ Then smoothly transition
○ Supports back button, prefetching, caching
● jQuery Mobile alternatives
○ Sencha Touch
○ Dojo Mobile
○ Kendo UI
jQuery Mobile

44. Demo

45. References
● This presentation: bit.ly/PhoneGapMM
● Speaker rate: http://bit.ly/1j71KDY
● http://phonegap.com
● http://xamarin.com
● http://appcelerator.com
● http://jquerymobile.com/
● http://www.phonegapessentials.com/
● http://build.phonegap.com
● http://techmasters-tc.com/