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
Native
app
Hybrid
app
Web
app
Native Mobile App
• Written in the native programming language for the
mobile device
 iOS: Objective-C
 Android: Java
 ...
Mobile Web App
• Typically written in HTML, CSS and JavaScript
• Made available through a web server (not distributed
thro...
Hybrid Mobile App
• Mostly written in HTML, CSS and JavaScript
• Cross-platform (one code-base can target several
mobile p...
Native Mobile Apps
• Advantages
 Full access to device specific features
 Best possible performance and UI responsivenes...
Native Mobile Apps
• Disadvantages
 Individual implementation for each platform
 Little code reuse
 Developers need dif...
Mobile Web Apps
• Advantages
 Development based on well-known technologies
 Target wide range of devices with limited ef...
Mobile Web Apps
• Disadvantages
 Limited or no access to device specific features
(camera, contacts list, notifications, ...
Hybrid Mobile Apps
• Advantages
 Combines advantages of web and native apps
 Target different platforms with limited eff...
Hybrid Mobile Apps
• Disadvantages
 Developers still have to be familiar with different
technologies
 Possible performan...
When to Choose the Hybrid Approach?
• Willing to compromise on UX for speed to market and
cross platform support
• Only ha...
Tools for Building Cross-plattform Apps
• PhoneGap (aka Cordova)
• Sencha Touch
• Titanium
• Xamarin
• jQuery Mobile
• Cor...
What is Sencha Touch?
• Performance-optimized HTML5 framework for building
mobile apps
• Complete set of mobile UI compone...
Sencha Touch Demo
What is PhoneGap?
• Multiplatform development framework
• Open-source (Apache 2.0 License)
• Build applications using Java...
Why PhoneGap?
• Build for large number of platforms
 iOS (6 or higher, Xcode 4.5+)
 Android (2.2, 2.3, 4.x)
 Amazon Fir...
Why PhoneGap?
• Build iOS apps without a
Mac
 PhoneGap Build
• Allows access to
underlying hardware such
as accelerometer...
Demo PhoneGap Demo
Limitations
• Heavyweight data processing better done in native
code (not JavaScript)
• JavaScript cannot do background pr...
Testing Cross-Platform Applications
• Cloud-based, e.g. Xamarin Test Cloud
• Framework-specific tools, e.g. App Inspector ...
Summary
• Different approaches to
writing mobile apps
• Great tools for cross-
platform development
available
• Native is ...
Questions?
Axel Buerkle
Technology Research Analyst
ONLINE BUSINESS SYSTEMS
200-115 Bannatyne Ave., Winnipeg MB R3B 0R3
ab...
Upcoming SlideShare
Loading in …5
×

Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch

1,161
-1

Published on

When it comes to developing cross-platform mobile applications you can choose from a myriad of frameworks. In this presentation we will take a look at two of the most popular mobile frameworks: Sencha Touch and PhoneGap. This combination of tools allows you to write native looking apps that work on iOS, Android, BlackBerry, and Windows Phone.

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

No Downloads
Views
Total Views
1,161
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch

  1. 1. Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch Axel Buerkle
  2. 2. Agenda • Approaches to mobile app development • Tools and frameworks  Sencha Touch  PhoneGap • Demos
  3. 3. Mobile App Development Approaches Mobile app Native app Hybrid app Web app
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. Sencha Touch Demo
  17. 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. 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. 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. 20. Demo PhoneGap Demo
  21. 21. Limitations • Heavyweight data processing better done in native code (not JavaScript) • JavaScript cannot do background processing  Web Workers
  22. 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. 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. 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

×