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

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 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/