The document discusses various approaches to mobile app development, including native, web, and hybrid apps, highlighting their respective advantages and disadvantages. It emphasizes the role of tools like PhoneGap and Sencha Touch in cross-platform development, enabling developers to build applications using familiar web technologies. Ultimately, it underscores the importance of understanding requirements when choosing an approach for mobile app development.

1. Building Cross-Platform Mobile Apps
with PhoneGap and Sencha Touch
Axel Buerkle

2. Agenda
• Approaches to mobile app development
• Tools and frameworks
 Sencha Touch
 PhoneGap
• Demos

3. Mobile App Development Approaches
Mobile
app
Native
app
Hybrid
app
Web
app

4. 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
Native
app
Hybrid
app
Web
app

5. 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
Native
app
Hybrid
app
Web
app

6. 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
Native
app
Hybrid
app
Web
app

7. Native Mobile Apps
• Advantages
 Full access to device specific features
 Best possible performance and UI responsiveness
 Native look-and-feel
Mobile
app
Native
app
Hybrid
app
Web
app

8. 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
Native
app
Hybrid
app
Web
app

9. 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
Native
app
Hybrid
app
Web
app

10. 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
Native
app
Hybrid
app
Web
app

11. 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
Native
app
Hybrid
app
Web
app

12. 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
Native
app
Hybrid
app
Web
app

13. 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

14. 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 …

15. 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

16. Sencha Touch Demo

17. 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
…

18. 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)

19. 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”

20. Demo PhoneGap Demo

21. Limitations
• Heavyweight data processing better done in native
code (not JavaScript)
• JavaScript cannot do background processing
 Web Workers

22. 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

23. 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

24. 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