web-based hybrid mobile apps: state of the...
TRANSCRIPT
![Page 1: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/1.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Ivano Malavolta
Assistant professor, Vrije Universiteit Amsterdam
Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities
Austin, 17th May 2016
VRIJEUNIVERSITEITAMSTERDAM
![Page 2: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/2.jpg)
VRIJEUNIVERSITEITAMSTERDAM
RoadmapQ
ue
stio
ns
Web-based hybrid mobile apps
Who is speaking?
Hybrid apps in the Google Play store
Interactive session with Apache Cordova
Research opportunities and discussion
![Page 3: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/3.jpg)
VRIJEUNIVERSITEITAMSTERDAM
iOS developer
About me
2009
Android developer2010
Started PhD2008
Model-driven Engineering applied to software architecture
Had to design a course on mobile apps development
Cross-platform developer2011
Course started2012
Research on mobile-enabled systems
(performance + security + sustainability)TODAYVRIJE
UNIVERSITEITAMSTERDAM
Started doing research on mobile apps2014
![Page 4: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/4.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Roadmap
Web-based hybrid mobile apps
Who is speaking?
Hybrid apps in the Google Play store
Interactive session with Apache Cordova
Research opportunities and discussion
![Page 5: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/5.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Mobile strategy =
How much it will cost you to develop your app?
How much time?
How much effort?
How much money?
Developing a mobile strategy
![Page 6: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/6.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Mobile design and development IS NOT CHEAP
htt
p:/
/w
ww
.slid
esh
are
.ne
t/fl
ing
/n
ati
ve-v
-hy
bri
d-v
-we
b
Bursting the first myth
![Page 7: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/7.jpg)
VRIJEUNIVERSITEITAMSTERDAM
BROWSER
<html><head><script src=” ...” /></head><body>...
NATIVE WRAPPER<html><head><script src=” ...” /></head><body>...
PLATFORM APIs
NATIVE APP
010101010101011010101010101011011010010101010101011101010101010101011010
PLATFORM APIs
Native Web Hybrid
Native VS web VS hybrid
![Page 8: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/8.jpg)
VRIJEUNIVERSITEITAMSTERDAM
http://bit.ly/GWOaP1
• Lets you create apps with rich user interfaces and/or heavy graphics
• Development time
• Development cost
• Ongoing maintenance• No portability (apps cannot be deployed on
other platforms)
PROS
CONS
Native
NATIVE APP
010101010101011010101010101011011010010101010101011101010101010101011010
PLATFORM APIs
![Page 9: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/9.jpg)
VRIJEUNIVERSITEITAMSTERDAM
FRAGMENTATIONà a native mobile app is written from scratch for each platform
Main issue
Objective-C
code
Swiftcode
XCode
Javacode
C++code
Eclipse
C#code
C++cod
e
Visual Studio
JScod
e
![Page 10: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/10.jpg)
VRIJEUNIVERSITEITAMSTERDAM
http://www.ea.com/it/ipad/nfshttp://www.whatsapp.com/
Examples of native apps
![Page 11: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/11.jpg)
VRIJEUNIVERSITEITAMSTERDAM
• Offers fast development, simple maintenance, and full application portability
• One mobile web app works on any platform
• Can’t handle heavy graphics
• Can’t access low level features– (e.g., camera)
Web
PROS
CONS
http://bit.ly/GWOaP1
BROWSER
<html><head><script src=” ...” /></head><body>...
![Page 12: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/12.jpg)
VRIJEUNIVERSITEITAMSTERDAM
http://asidemag.comhttp://amazon.com
Examples of mobile web apps
![Page 13: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/13.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Hybrid
• cross-platform portability
• reuse of existing knowledge of web developers
• simpler and less expensive development processes
• restricted access to hardware features • decrease in performance
• variations on user experience
PROS
CONS
NATIVE WRAPPER<html><head><script src=” ...” /></head><body>...
PLATFORM APIs
![Page 14: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/14.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Recurrent architecture:
– apps are developed using standard web technologies
– on top of a hybrid development framework• providing a native wrapper and a generic JavaScript API that bridges all the
service requests to the corresponding platform API
Web-based hybrid mobile apps
Single code base
![Page 15: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/15.jpg)
VRIJEUNIVERSITEITAMSTERDAM
https://play.google.com/store/apps/details?id=com.rormix&hl=ithttp://sworkit.com
Examples of hybrid apps
![Page 16: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/16.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Comparison
![Page 17: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/17.jpg)
VRIJEUNIVERSITEITAMSTERDAM
http://goo.gl/KOdxh
Another perspective
![Page 18: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/18.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Mobile web seems to be the only long-term commercially viable content platform for mobile devices
FRAGMENTATION
THE WEB
USER EXPECTATIONS
WEB UBIQUITY
My vision
![Page 19: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/19.jpg)
VRIJEUNIVERSITEITAMSTERDAM
When you go native there are too many platforms to be supported
FRAGMENTATION
My vision
![Page 20: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/20.jpg)
VRIJEUNIVERSITEITAMSTERDAM
The only medium for information and services that lasts from over 15 years
The web is an advanced technology– webGL
– Local storage management
– Positioning & mapping
– Real-time data– Push, ...
THE WEB
My vision
![Page 21: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/21.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Users expect things to just work
à they don’t care about what platform they haveà they simply expect that your app will be available
for their device
à YOU HAVE TO BE CROSS-PLATFORM
USER EXPECTATIONS
My vision
![Page 22: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/22.jpg)
VRIJEUNIVERSITEITAMSTERDAM
The web is the only platform that
• works across devices
• apps share the same set of standards
• the same app can work also on a desktop
WEB UBIQUITY
My vision
![Page 23: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/23.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Mobile app technologies are constantly moving targets...
- new OSs, new versions of OSs, new UI patterns, new frameworks, etc.
Choosing between native vs web vs hybrid depends on a lot of factors, such as
– Which type of app are you creating?– When do you need it?
– What are your skills?
Wrap up
![Page 24: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/24.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Roadmap
Web-based hybrid mobile apps
Who is speaking?
Hybrid apps in the Google Play store
Interactive session with Apache Cordova
Research opportunities and discussion
![Page 25: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/25.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Two empirical studies
What is the difference between hybrid and native mobile apps as perceived by end users?
DeveloperEnd users
creates download
& use
App
STUDY 1 STUDY 2
Are hybrid mobile apps published in the Google Play Store? What are their main traits?S1
S2
![Page 26: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/26.jpg)
VRIJEUNIVERSITEITAMSTERDAM
We analysed hybrid mobile apps
• in their actual context of use
• with a reproducible empirical strategy
– well-defined empirical protocol
– dataset comprising 11,917 real apps
and 3,041,315 user reviews
– dedicated analysis process and tool
Design of the study
Complete replication packages:
• http://cs.gssi.infn.it/ms_2015• http://cs.gssi.infn.it/hybrid googleplay analysis Analysis tool : http://github.com/GabMar/ApkCategoryChecker
![Page 27: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/27.jpg)
VRIJEUNIVERSITEITAMSTERDAMData extraction
Classified apps(hybrid vs native)
Hybrid appsclassifier
Reviewsanalyzer
top-500 most popular free apps for each category of the Google Play Store
~11k app binaries
50 pages (~255) of reviews for each app
~3M userreviews
app scores
Apps and reviewsmining
perceived value: 0.5users sentiment: 0.6#reviews: 243performance: 0.6bugginess: 0.1size: 3,456 kb
![Page 28: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/28.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Where are hybrid mobile apps?
Data-intensive mobile apps[2]
Apps with closer interactionwith the Android platform
Winners, in line withinformal claims
![Page 29: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/29.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Results – study 1
![Page 30: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/30.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Results – study 1
![Page 31: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/31.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Results – study 1
![Page 32: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/32.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Results – study 1
![Page 33: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/33.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Results – study 2
![Page 34: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/34.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Results – study 2
![Page 35: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/35.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Results – study 2
![Page 36: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/36.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Results – study 2
![Page 37: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/37.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Results – study 2
![Page 38: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/38.jpg)
VRIJEUNIVERSITEITAMSTERDAM
• 3.73 % hybrid apps (445 over 11917)
– Top: Apache Cordova (258) and Appcelerator Titanium (116)
• Developers reuse JavaScript frameworks already existing in thedesktop web arena
– also MVC frameworks like Angular and Backbone
• Hybrid apps request the same permissions of native apps
• End users value hybrid and native apps similarly
• Hybrid may be good for data-intensive apps, whereas it performs poorly when dealing with low-level, platform-specific features
• In some categories, native apps are perceived as better with respect to performance and bugginess
Wrap up
![Page 39: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/39.jpg)
VRIJEUNIVERSITEITAMSTERDAM
References
Ivano Malavolta, Stefano Ruberto, Valerio Terragni, Tommaso Soru, ‘Hybrid Mobile Apps in the Google Play Store: an Exploratory Investigation’. International Conference on Mobile Software Engineering and Systems (MOBILESoft), ACM, 2015.
Ivano Malavolta, Stefano Ruberto, Valerio Terragni, Tommaso Soru, "End Users' Perception of Hybrid Mobile Apps in the Google Play Store”. Mobile Services (MS), 2015 IEEE International Conference on. IEEE, 2015.
![Page 40: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/40.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Roadmap
Web-based hybrid mobile apps
Who is speaking?
Hybrid apps in the Google Play store
Interactive session with Apache Cordova
Research opportunities and discussion
![Page 41: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/41.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Adobe/Nitobi donated the PhoneGap codebase to the Apache foundation
à wider audience and contributors
à transparent governance
Better documentation
à easier contributions for companies
Apache Licensing
There was only one problem....
trademark ambiguity à CORDOVA
PhoneGap VS Cordova
PhoneGap is a distribution of Apache Cordova
![Page 42: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/42.jpg)
VRIJEUNIVERSITEITAMSTERDAM
The UI layer is a web browser– 100% width
– 100% height
Headless web browser– No URL bar
– No decorations
– No zooming
– No text selection
Intuition
![Page 43: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/43.jpg)
VRIJEUNIVERSITEITAMSTERDAM
How does Cordova work?
![Page 44: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/44.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Cordova architecture
![Page 45: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/45.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Cordova APIs
![Page 46: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/46.jpg)
VRIJEUNIVERSITEITAMSTERDAM
When Cordova APIs are not enough…
Sometimes Cordova is not enough as is for our purposes:
– unsupported feature
– heavyweight data processing is faster in native code
• ex. images manipulation
– background processing is better handled natively
• ex. files sync
à You can develop a Cordova plugin
![Page 47: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/47.jpg)
VRIJEUNIVERSITEITAMSTERDAM
![Page 48: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/48.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Jboss Hybrid Mobile Tools
http://docs.jboss.org/tools/4.1.x.Final/en/User_Guide/html/chap-Hybrid_Mobile_Tools_and_CordovaSim.html
![Page 49: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/49.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Example of Cordova API usage (1)
var options = { enableHighAccuracy: true,maximumAge: 3000, timeout: 5000
};
navigator.geolocation.getCurrentPosition(win, fail, options);
function win(pos) {var el = ‘<div>Latitude: ‘ + pos.coords.latitude + '</div>’;el += ‘<div>Longitude: ‘ + pos.coords.longitude + '</div>’;el += ‘<div>timestamp: ‘ + pos.timestamp + '</div>’;$(‘#block’).html(el);
}
function fail(err) {console.log(err.code);
}
http://i0.wp.com/www.phonegap.co.in/wp-content/uploads/2015/07/device_axes.jpg
![Page 50: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/50.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Example of Cordova API usage (2)
var options = { frequency: 3000 };var watchID = navigator.accelerometer.watchAcceleration(win, fail, options);
function win(acc) {if((acc.x === 0) && (acc.y === 0) && (acc.z === 9.81)) {
console.log('I am on a table');stop();
} else {console.log('Please, leave me on the table');
}}
function fail() {alert('error');
}
function stop() {if(watchID) {
navigator.accelerometer.clearWatch(watchID);watchID = null;
}}
http://i0.wp.com/www.phonegap.co.in/wp-content/uploads/2015/07/device_axes.jpg
![Page 51: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/51.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Interactive session
1. Create a new Apache Cordova app
2. Install the Geolocation and Camera plugins
3. Call the Nestoria REST API for getting a list of apartment listings
– http://www.nestoria.co.uk/help/api
4. Develop a simple view for showing the apartments
5. Develop a simple view for adding a listing
The source code of this session is available here: http://github.com/iivanoo/mobileSoft2016_interactiveSession
![Page 52: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/52.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Roadmap
Web-based hybrid mobile apps
Who is speaking?
Hybrid apps in the Google Play store
Interactive session with Apache Cordova
Research opportunities and discussion
![Page 53: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/53.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Cross-platform studies
RESEARCH INSTRUMENT
Cross-platform studies considering at least the three most popular app stores
- Google Play
- Apple iTunes
- Windows Phone
What are the traits of hybrid apps on different platforms?
How the actual users perceive hybrid apps on different platforms?
![Page 54: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/54.jpg)
VRIJEUNIVERSITEITAMSTERDAMInvestigate on extra-functional properties
A. I. Wasserman. Software Engineering Issues for Mobile Application Development. In Proceedings of the FSE/SDP Workshop on Future of Software Engineering Research, pages 397–400, 2010.
MobileSoft 2016
![Page 55: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/55.jpg)
VRIJEUNIVERSITEITAMSTERDAMPerformance issues?
RESEARCH INSTRUMENT
(cross-platform) large-scale studies
on apps already published in the app stores
Are there recurrent design and code antipatternsimpacting the performance of hybrid mobile apps?
Do best practices for the desktop web apply here?
![Page 56: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/56.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Testing
M.E.Joorabchi,A.Mesbah,andP.Kruchten. Real Challenges in Mobile App Development. In ESEM, 2013.
![Page 57: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/57.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Behavioural consistency VS HCI guidelines
M.E.Joorabchi,A.Mesbah,andP.Kruchten. Real Challenges in Mobile App Development. In ESEM, 2013.
![Page 58: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/58.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Conclusions
![Page 59: Web-based Hybrid Mobile Apps: State of the …mobilesoftconf.org/2016/wp-content/uploads/2016/05/...Web-based Hybrid Mobile Apps: State of the Practice and Research Opportunities Austin,](https://reader036.vdocuments.site/reader036/viewer/2022070720/5ee12fd6ad6a402d666c27ee/html5/thumbnails/59.jpg)
ContactIvano Malavolta |
Assistant professorVrije Universiteit Amsterdam
iivanoo
www.ivanomalavolta.com