Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]
-
Upload
ivano-malavolta -
Category
Technology
-
view
705 -
download
0
Transcript of Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]
![Page 1: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/1.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Ivano Malavolta
Assistant professor
Vrije Universiteit Amsterdam
Beyond Native Apps:
Web Technologies to the Rescue!
Amsterdam, 31 October 2016
VRIJEUNIVERSITEITAMSTERDAM
![Page 2: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/2.jpg)
VRIJEUNIVERSITEITAMSTERDAM
iOS developer
Who’s speaking?
2009
Android developer2010
Cross-platform developer2011
Instructor on mobile apps development
for 5 years2012
VRIJEUNIVERSITEITAMSTERDAM
2014
2016 Assistant professor at
the GREEN LAB
Empirical research on mobile apps
![Page 3: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/3.jpg)
VRIJEUNIVERSITEITAMSTERDAM
RoadmapQ
ue
stio
ns
Mobile development strategies
Who’s speaking?
Web-based hybrid apps
Progressive web apps
Research opportunities
![Page 4: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/4.jpg)
VRIJEUNIVERSITEITAMSTERDAM
NATIVE APP
010101010101011010101010101011011010010101010101011101010101010101011010
PLATFORM APIs
Native
Development strategies
![Page 5: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/5.jpg)
VRIJEUNIVERSITEITAMSTERDAM
• rich user interfaces and heavy graphics• work offline
• visibility via stores
• slow iteration pace (stores mediation)
• no indexing by search engines• FRAGMENTATION
PROS
CONS
Native apps
NATIVE APP
010101010101011010101010101011011010010101010101011101010101010101011010
PLATFORM APIs
![Page 6: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/6.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Fragmentation
Objective-C
code
Swiftcode
XCode
Javacode
C++code
Eclipse
C#code
C++code
Visual Studio
JScode
![Page 7: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/7.jpg)
VRIJEUNIVERSITEITAMSTERDAM
NATIVE APP
010101010101011010101010101011011010010101010101011101010101010101011010
PLATFORM APIs
Native
Development strategies
BROWSER
<html><head><script src=” ...” /></head><body>...
Web
![Page 8: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/8.jpg)
VRIJEUNIVERSITEITAMSTERDAM
• fast development
• simple maintenance and updates• cross-platform
• 2-steps access– they are launched via a browser
• do not work offline
• no background activities– e.g. geofencing
• poor access to system APIs– e.g. push notifications, contacts, etc.
Web apps
PROS
CONS
![Page 9: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/9.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
Web-based hybrid apps
![Page 10: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/10.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Web-based hybrid mobile apps
Single code base
Bridge API
![Page 11: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/11.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Example of API usage
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 12: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/12.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Where are hybrid mobile apps?
What is the difference between hybrid and native mobile apps as perceived by end users?
DeveloperEnd users
creates download
& use
App
STUDY 1[S1]
STUDY 2[S2]
Are hybrid mobile apps published in the Google Play Store? What are their main traits?S1
S2
![Page 13: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/13.jpg)
VRIJEUNIVERSITEITAMSTERDAM
We analysed hybrid mobile apps
• in their actual context of use
• with a reproducible empirical strategy
– 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 14: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/14.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Where are hybrid mobile apps?
Data-intensive mobile apps
Apps with closer interactionwith the Android platform
Winners, in line withinformal claims
![Page 15: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/15.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Web-based hybrid apps
• cross-platform portability
• reuse of existing knowledge of web developers
• simpler and less expensive development process
• inherit some cons of native apps• restricted access to system APIs
• (slight) decrease in performance
PROS
CONS
![Page 16: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/16.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
Progressive web apps
Progressive
BROWSER<html><head><script src=” ...” /></head><body>...
Service workers
![Page 17: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/17.jpg)
VRIJEUNIVERSITEITAMSTERDAM
The journey of a PWA
1. The user accesses the website as usual
https://goo.gl/KIZydg
![Page 18: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/18.jpg)
VRIJEUNIVERSITEITAMSTERDAM
The journey of a PWA
1. The user accesses the website as usual
2. After the 3rd-4th visit, the website asks to be installed
https://goo.gl/KIZydg
![Page 19: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/19.jpg)
VRIJEUNIVERSITEITAMSTERDAM
The journey of a PWA
1. The user accesses the website as usual
2. After the 3rd-4th visit, the website asks to be installed
3. The user can decide to add the app to the home screen
https://goo.gl/KIZydg
![Page 20: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/20.jpg)
VRIJEUNIVERSITEITAMSTERDAM
The journey of a PWA
1. The user accesses the website as usual
2. After the 3rd-4th visit, the website asks to be installed
3. The user can decide to add the app to the home screen
4. From now on, the app is top-level, full-screen, and can receive push notifications
https://goo.gl/KIZydg
![Page 21: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/21.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Components of a PWA
HTTPSWeb
ManifestServiceworkers
{"name": "MyApplication","short_name": "MyApp","scope": "./webApp/","orientation": "portrait","display": "fullscreen","background_color": "#fff","description": "A simple application for testing.","icons": [{
"src": "images/touch/homescreen48.png","sizes": "48x48","type": "image/png"
}, ...}],
...}
![Page 22: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/22.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Service worker
Implemented in JavaScript
Multithreading
→ it runs in a separate thread w.r.t. the main thread
Used for:
• content caching– offline functionality
• push notifications
• background operations
![Page 23: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/23.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Offline-first experience
AppServiceworker
response
response
request
Backend
Offline cache
this.addEventListener('fetch', function(event) {event.respondWith(
caches.match(event.request).then(function(response){return response || fetch(event.request);
}););
});
![Page 24: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/24.jpg)
VRIJEUNIVERSITEITAMSTERDAM
Progressive web apps
• cross-platform portability
• based on Web standards
• offline support + caching
• background operations
• access to system APIs– work in progress
• first access in 2 steps
• no visibility in the stores
• not yet supported by Safari and IE
PROS
CONS
BROWSER<html><head><script src=” ...” /></head><body>...
Service workers
![Page 25: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/25.jpg)
VRIJEUNIVERSITEITAMSTERDAM
RoadmapQ
ue
stio
ns
Mobile development strategies
Who’s speaking?
Web-based hybrid apps
Progressive web apps
Research opportunities
![Page 26: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/26.jpg)
VRIJEUNIVERSITEITAMSTERDAMInvestigate on quality 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 27: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/27.jpg)
VRIJEUNIVERSITEITAMSTERDAMPWAs not investigated yet
PWAs have been advertised as:
• performance boosters
• network savers
• providers of better UX
However…
VRIJEUNIVERSITEITAMSTERDAMOffline-first experience
AppService
worker
response
response
request
Backend
Offline cache
this.addEventListener('fetch', function(event) {event.respondWith(
caches.match(event.request).then(function(response){return response || fetch(event.request);
}););
});
WWW 2016
![Page 28: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/28.jpg)
VRIJEUNIVERSITEITAMSTERDAM
• cache state– eg, cold vs warm vs hot cache
• 2G vs wi-fi
• low-end vs high-end devices
• different browsers
PWAs not investigated yet
… and on energy consumption?
What is the impact of service workers performance?
![Page 29: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/29.jpg)
VRIJEUNIVERSITEITAMSTERDAM
How the actual users perceive mobile apps on different platforms?
Cross-platform studies
Focus on
• difference of ratings across stores (Google Play vs Apple)
• difference of perceptions across user bases– value
– performance
– bugginess
• difference of performance or energy consumption across platforms?
What are the traits of (hybrid) apps on different platforms?
![Page 30: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/30.jpg)
VRIJEUNIVERSITEITAMSTERDAM
• Alexa’s top 1M– http://www.alexa.com/topsites
• Awesome PWA– http://github.com/hemanth/awesome-pwa
• PWA Rocks– https://pwa.rocks
• Alexa’s top 1M
Where can I find web-based mobile apps?
Web apps
Progressive web apps
![Page 31: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/31.jpg)
VRIJEUNIVERSITEITAMSTERDAMWhere can I find web-based mobile
apps?
Hybrid apps
• Existing datasets dedicated to hybrid apps– http://cs.gssi.infn.it/hybrid_googleplay_analysis
• App store mining + hybrid apps identifier
MobileSoft 2015
![Page 32: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/32.jpg)
VRIJEUNIVERSITEITAMSTERDAM
PROBLEM 1: mining app stores returns only the LATEST version of the app
à SOLUTION: find some repo in GitHub with all the past versions of the code
à PROBLEM 2: many toy or dismissed apps
à SOLUTION: search apps that are in BOTH GitHub and app stores!
GitHub + App store mining
ICSME 2016
![Page 33: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/33.jpg)
VRIJEUNIVERSITEITAMSTERDAMConclusions
VRIJEUNIVERSITEITAMSTERDAMFragmentation
Objective-C
code
Swiftcode
XCode
Javacode
C++code
Eclipse
C#code
C++code
Visual Studio
JScode
VRIJEUNIVERSITEITAMSTERDAM
PROBLEM 1: mining app stores returns only the LATEST version of the app
à SOLUTION: find some repo in GitHub with all the past versions of the code
à PROBLEM 2: many toy or dismissed apps
à SOLUTION: search apps that are in BOTH GitHub and app stores!
GitHub + App store mining
ICSME 2016
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
Progressive web apps
Progressive
BROWSER<html><head><script src=” ...” /></head><body>...
Service workers
VRIJEUNIVERSITEITAMSTERDAMInvestigate on quality 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 34: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/34.jpg)
ContactIvano Malavolta |
Assistant professorVrije Universiteit Amsterdam
iivanoo
www.ivanomalavolta.com
![Page 35: Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]](https://reader031.fdocuments.in/reader031/viewer/2022022201/58a27f9a1a28ab891a8b57b7/html5/thumbnails/35.jpg)
VRIJEUNIVERSITEITAMSTERDAM
References
Ivano Malavolta. Web-based hybrid mobile apps: state of the practice andresearch opportunities. International Conference on Mobile SoftwareEngineering and Systems (MOBILESoft), Austin, Texas, USA, May 14-22,2016, pp. 241–242.
M.E.Joorabchi,A.Mesbah,andP.Kruchten. Real Challenges in Mobile AppDevelopment. In ESEM, 2013.
A. I. Wasserman. Software Engineering Issues for Mobile ApplicationDevelopment. In Proceedings of the FSE/SDP Workshop on Future ofSoftware Engineering Research, pages 397–400, 2010.
[S1] 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.
[S2] Ivano Malavolta, Stefano Ruberto, Valerio Terragni, Tommaso Soru.End Users' Perception of Hybrid Mobile Apps in the Google PlayStore. IEEE International conference on Mobile Services (MS), IEEE, 2015.