WebBr 2013: Apps Mobile Multiplataforma e OpenSource com Sencha Touch e Phonegap
Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch
-
Upload
axel-buerkle -
Category
Mobile
-
view
1.083 -
download
1
description
Transcript of Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch
![Page 1: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/1.jpg)
Building Cross-Platform Mobile Apps
with PhoneGap and Sencha Touch
Axel Buerkle
![Page 2: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/2.jpg)
Agenda
• Approaches to mobile app development
• Tools and frameworks
Sencha Touch
PhoneGap
• Demos
![Page 3: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/3.jpg)
Mobile App Development Approaches
Mobile app
Nativeapp
Hybrid app
Webapp
![Page 4: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/4.jpg)
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
![Page 5: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/5.jpg)
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
![Page 6: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/6.jpg)
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
![Page 7: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/7.jpg)
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
![Page 8: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/8.jpg)
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
![Page 9: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/9.jpg)
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
![Page 10: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/10.jpg)
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
![Page 11: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/11.jpg)
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
![Page 12: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/12.jpg)
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
![Page 13: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/13.jpg)
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
![Page 14: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/14.jpg)
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 …
![Page 15: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/15.jpg)
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
![Page 16: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/16.jpg)
Sencha Touch Demo
![Page 17: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/17.jpg)
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
…
![Page 18: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/18.jpg)
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)
![Page 19: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/19.jpg)
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”
![Page 20: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/20.jpg)
Demo PhoneGap Demo
![Page 21: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/21.jpg)
Limitations
• Heavyweight data processing better done in native
code (not JavaScript)
• JavaScript cannot do background processing
Web Workers
![Page 22: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/22.jpg)
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
![Page 23: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/23.jpg)
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
![Page 24: Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch](https://reader031.fdocuments.in/reader031/viewer/2022013102/554963b5b4c9056e598b45b2/html5/thumbnails/24.jpg)
Questions?
Axel Buerkle
Technology Research Analyst
ONLINE BUSINESS SYSTEMS
200-115 Bannatyne Ave., Winnipeg MB R3B 0R3
[email protected] | Direct Line: 204.982.7850
www.obsglobal.com
Explore | Innovate | Lead