View
1.143
Download
5
Category
Preview:
DESCRIPTION
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.
Citation preview
Cross-Platform Mobile Development with PhoneGap
by: Vince BullingerMobile March
3/20/2014
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
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● Getting started with PhoneGap● PhoneGap protips, tools
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
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
UI Differences
Source:Apple
Source: javatechig.com
Different Capabilities
● Devices have different:○ Hardware○ Features○ Screen ratios○ Sizes○ Screen resolutions
● Use feature detection● Have fallback functionality
OS-Specific Considerations
● Multi-tasking● Security● Database
Test Psychotically
● Have a real, defined testing strategy● Iterative, frequent● QA knowledgeable on each device● Test on actual device, not just emulator
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
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
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
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
How PhoneGap Works
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
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
• C# code– Lambdas– Generics– LINQ– All your other stuff...
• Compiles to native binary– IL + JIT (Android)– ARM binary + AOT (iOS)
Xamarin
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
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
• Cross-platform UIs– Unlike Xamarin
• Robust JavaScript access to native APIs• Titanium Studio is free
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○ 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
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
Getting Started
● IDEs● APIs● Emulating● Building
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
DEMO
PhoneGap APIs
● navigator.*○ accelerometer○ compass○ contacts○ device.capture.capture[Audio|Image|Video]○ geolocation○ network
● window.requestFileSystem● alert - native!● Almost always asynchronous
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 itBuilding PhoneGap Native Apps
DEMO
● 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
● 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
Demo
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/
Recommended