Building Cross-Platform Mobile Apps

with PhoneGap and Sencha Touch

Axel Buerkle

Agenda

• Approaches to mobile app development

• Tools and frameworks

Sencha Touch

PhoneGap

• Demos

Mobile App Development Approaches

Mobile app

Nativeapp

Hybrid app

Webapp

Native Mobile App

• Written in the native programming language for the

mobile device

iOS: Objective-C

Android: Java

Windows Phone 8: .NET

BlackBerry 10: C/C++

• Platform specific, i.e. iPhone apps don’t run on Android

devices

• Distributed through the app store

Mobile app

Nativeapp

Hybrid app

Webapp

Mobile Web App

• Typically written in HTML, CSS and JavaScript

• Made available through a web server (not distributed

through the app store)

• Runs in mobile device’s browser

Device independent

• Usually requires a data connection

Mobile app

Nativeapp

Hybrid app

Webapp

Hybrid Mobile App

• Mostly written in HTML, CSS and JavaScript

• Cross-platform (one code-base can target several

mobile platforms)

• Can be enriched with native code (e.g. to provide

access to hardware features)

• Can be distributed like native apps

Mobile app

Nativeapp

Hybrid app

Webapp

Native Mobile Apps

• Advantages

Full access to device specific features

Best possible performance and UI responsiveness

Native look-and-feel

Mobile app

Nativeapp

Hybrid app

Webapp

Native Mobile Apps

• Disadvantages

Individual implementation for each platform

Little code reuse

Developers need different skill sets for each

platform

Dedicated hardware needed (Mac for iOS

development, Windows PC for Windows Phone)

Mobile app

Nativeapp

Hybrid app

Webapp

Mobile Web Apps

• Advantages

Development based on well-known technologies

Target wide range of devices with limited effort

Can be published and updated immediately

Avoids review process of app store

Review process can sometimes be lengthy and

unpredictable

Mobile app

Nativeapp

Hybrid app

Webapp

Mobile Web Apps

• Disadvantages

Limited or no access to device specific features

(camera, contacts list, notifications, GPS, etc.)

Inferior performance and UI responsiveness

Lack of native look-and-feel

Can be imitated with some effort and the right

tools

Mobile app

Nativeapp

Hybrid app

Webapp

Hybrid Mobile Apps

• Advantages

Combines advantages of web and native apps

Target different platforms with limited effort

Full access to device specific features

Mobile app

Nativeapp

Hybrid app

Webapp

Hybrid Mobile Apps

• Disadvantages

Developers still have to be familiar with different

technologies

Possible performance and UI responsiveness issues

Possible risk of app store rejection

Rejection based on functionality of the app

rather than on the tools it was built with

App should do more than what a web site does

Mobile app

Nativeapp

Hybrid app

Webapp

When to Choose the Hybrid Approach?

• Willing to compromise on UX for speed to market and

cross platform support

• Only have access to web developers

• App store upload is a requirement

• There is code than can be re-used, e.g. a mobile web

site

• Budget / timeframe does not allow individual native

solutions

Tools for Building Cross-plattform Apps

• PhoneGap (aka Cordova)

• Sencha Touch

• Titanium

• Xamarin

• jQuery Mobile

• Corona

• Motorola RhoMobile

• Maqetta

• Ignite UI

• Kendo UI

• AppBuilder (Icenium)

• Marmalade SDK

• Brightcove AppCloud

• App Machine

• App Gyver Steroids

• Many more …

What is Sencha Touch?

• Performance-optimized HTML5 framework for building

mobile apps

• Complete set of mobile UI components

• Various built-in themes

• Built-in MVC system

• PhoneGap integration

• Free commercial license

Sencha Touch Demo

What is PhoneGap?

• Multiplatform development framework

• Open-source (Apache 2.0 License)

• Build applications using JavaScript, HTML and CSS

Instead of having to use less-known languages such

as Objective-C

…

Why PhoneGap?

• Build for large number of platforms

iOS (6 or higher, Xcode 4.5+)

Android (2.2, 2.3, 4.x)

Amazon Fire OS

BlackBerry 10

Windows Phone 7 + 8

Windows 8

Tizen

Firefox OS

WebOS, Symbian, Bada (PhoneGap < 2.7.0)

Why PhoneGap?

• Build iOS apps without a

Mac

PhoneGap Build

• Allows access to

underlying hardware such

as accelerometer or GPS

• Invoke native code from

JavaScript

“Plugins”

Demo PhoneGap Demo

Limitations

• Heavyweight data processing better done in native

code (not JavaScript)

• JavaScript cannot do background processing

Web Workers

Testing Cross-Platform Applications

• Cloud-based, e.g. Xamarin Test Cloud

• Framework-specific tools, e.g. App Inspector for Sencha(Chrome Extension)

• Appium

Open source test automation framework for native and hybrid apps

Supports iOS, Android, Firefox OS

No need to recompile app or modify it

Write tests using Java, Objective-C, JavaScript, PHP, Python, Ruby, C#, Clojure, or Perl

Gappium for PhoneGap / Cordova apps

Summary

• Different approaches to writing mobile apps

• Great tools for cross-platform development available

• Native is not always “better”

• Understand your requirements

• Testing hybrid apps still a challenge

Questions?

Axel Buerkle

Technology Research Analyst

ONLINE BUSINESS SYSTEMS

200-115 Bannatyne Ave., Winnipeg MB R3B 0R3

abuerkle@obsglobal.com | Direct Line: 204.982.7850

www.obsglobal.com

Explore | Innovate | Lead