Cross-Platform Mobile
Development with PhoneGap
by: Vince Bullinger
Mobile March
3/20/2014
About Me
● Vince Bullinger (“vbullinger” everywhere)
● Married (5/08), live in St. Paul, WPI grad (‘04)
● Daughter Zina bo...
or 11:45AM-12:45PM - Robert Half, US Bancorp Center, Mpls
Agenda
● Compare native, X-platform development
● Why should I care about X-platform?
● PhoneGap vs Xamarin, Appcelerator
...
X-Platform Pros
● Write once, run on multiple major platforms
● One team/IDE/Skillset
● Can save a LOT of money
● Usually ...
X-Platform Cons
● Doesn’t always perform as well (varying)
○ Not specialized for particular device (duh)
○ Doesn’t always ...
UI Differences
Source:
Apple
Source: javatechig.com
Different Capabilities
● Devices have different:
○ Hardware
○ Features
○ Screen ratios
○ Sizes
○ Screen resolutions
● Use ...
OS-Specific Considerations
● Multi-tasking
● Security
● Database
Test Psychotically
● Have a real, defined testing strategy
● Iterative, frequent
● QA knowledgeable on each device
● Test ...
Why Should I Care?
● Want to pick best mobile strategies
● Developers don’t want to code native*
○ 36% want HTML5
○ 32% wa...
Cross-Platform Relevance
“The market for cross-platform mobile
development tools exceeds $1.6 billion
right now, and is ex...
Native or X-Platform?
● Choose native when:
○ Need 100% native experience all the time
○ Accessing all device features
○ O...
PhoneGap
• Free, open-source framework
• Build “native” apps for multiple platforms
• Built using HTML, CSS, JavaScript
– ...
How PhoneGap Works
PhoneGap Cons
• API support varies
• HTML, CSS, JavaScript only
• Not really native apps…
• Serious apps obviously not nat...
When To Use?
● Your web developers can PhoneGap now
● Small budget
● Uncomplicated app
● First foray into mobile developme...
• C# code
– Lambdas
– Generics
– LINQ
– All your other stuff...
• Compiles to native binary
– IL + JIT (Android)
– ARM bin...
How Xamarin Works
Quasi stolen from http://xamarin.com/how-it-works
Xamarin Cons
● Still need separate UIs
○ Good thing?
○ Needs to be a factor in architecture
decisions
● Separate device AP...
When to Use?
● Want as close to native as possible
● .Net shop
● Got some money to spend
Titanium
• Build apps using JavaScript
– Like PhoneGap
• Compiles to 100% real app
– Like Xamarin
– Unlike PhoneGap
• Cros...
How Titanium Works
+
+
Titanium Cons
Making UIs Identical
• Don’t do it
• It’s dumb
• Rely on native look and feel
When to Use?
● Your team is/can be strong w/web development
● Familiar with Eclipse
● PhoneGap won’t do
○ Too complicated
...
PhoneGap History
● Started at 2008 iPhoneDevCamp by Nitobi
○ quickly added Android, Blackberry support
● ‘09 Web 2.0 Expo ...
Getting Started
● IDEs
● APIs
● Emulating
● Building
IDEs
● Whatever you want!
● IDEs usually have plugins
● Have a Mac? Use XCode
● IBM Worklight - Eclipse plugin
○ Mobile we...
DEMO
PhoneGap APIs
● navigator.*
○ accelerometer
○ compass
○ contacts
○ device.capture.capture[Audio|Image|Video]
○ geolocation...
Emulation
DEMO
Building PhoneGap Native Apps
Building PhoneGap Native Apps
Building PhoneGap Native Apps
Building PhoneGap Native Apps
● Download SDK for every device
● I’ll check back in next week
… or...
● Let PhoneGap build service compile it
Building PhoneGap Native Apps
DEMO
● Create web apps optimized for mobile
○ Touch optimized (buttons)
○ Uses responsive layout (inputs/labels)
○ Elements aut...
● Ajaxified navigation
○ Hijacks links
○ Get linked url behind scenes
○ Append to DOM
○ Then smoothly transition
○ Support...
Demo
References
● This presentation: bit.ly/PhoneGapMM
● Speaker rate: http://bit.ly/1j71KDY
● http://phonegap.com
● http://xam...
Cross-Platform Mobile Development with PhoneGap-Vince Bullinger
Cross-Platform Mobile Development with PhoneGap-Vince Bullinger
Upcoming SlideShare
Loading in...5
×

Cross-Platform Mobile Development with PhoneGap-Vince Bullinger

1,220

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,220
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Cross-Platform Mobile Development with PhoneGap-Vince Bullinger"

  1. 1. Cross-Platform Mobile Development with PhoneGap by: Vince Bullinger Mobile March 3/20/2014
  2. 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. 3. or 11:45AM-12:45PM - Robert Half, US Bancorp Center, Mpls
  4. 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. 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. 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. 7. UI Differences Source: Apple Source: javatechig.com
  8. 8. Different Capabilities ● Devices have different: ○ Hardware ○ Features ○ Screen ratios ○ Sizes ○ Screen resolutions ● Use feature detection ● Have fallback functionality
  9. 9. OS-Specific Considerations ● Multi-tasking ● Security ● Database
  10. 10. Test Psychotically ● Have a real, defined testing strategy ● Iterative, frequent ● QA knowledgeable on each device ● Test on actual device, not just emulator
  11. 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. 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. 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. 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. 15. How PhoneGap Works
  16. 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. 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. 18. • C# code – Lambdas – Generics – LINQ – All your other stuff... • Compiles to native binary – IL + JIT (Android) – ARM binary + AOT (iOS) Xamarin
  19. 19. How Xamarin Works Quasi stolen from http://xamarin.com/how-it-works
  20. 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. 21. When to Use? ● Want as close to native as possible ● .Net shop ● Got some money to spend
  22. 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. 23. How Titanium Works + +
  24. 24. Titanium Cons
  25. 25. Making UIs Identical • Don’t do it • It’s dumb • Rely on native look and feel
  26. 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. 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. 28. Getting Started ● IDEs ● APIs ● Emulating ● Building
  29. 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
  30. 30. DEMO
  31. 31. PhoneGap APIs ● navigator.* ○ accelerometer ○ compass ○ contacts ○ device.capture.capture[Audio|Image|Video] ○ geolocation ○ network ● window.requestFileSystem ● alert - native! ● Almost always asynchronous
  32. 32. Emulation
  33. 33. DEMO
  34. 34. Building PhoneGap Native Apps
  35. 35. Building PhoneGap Native Apps
  36. 36. Building PhoneGap Native Apps
  37. 37. Building PhoneGap Native Apps ● Download SDK for every device ● I’ll check back in next week … or...
  38. 38. ● Let PhoneGap build service compile it Building PhoneGap Native Apps
  39. 39. DEMO
  40. 40. ● 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
  41. 41. ● 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
  42. 42. Demo
  43. 43. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×