beyond native apps: web technologies to the rescue! [splash 2016 - mobile! keynote]

VRIJEUNIVERSITEITAMSTERDAM

Ivano Malavolta

Assistant professor

Vrije Universiteit Amsterdam

Beyond Native Apps:

Web Technologies to the Rescue!

Amsterdam, 31 October 2016



iOS developer

Who’s speaking?

2009

Android developer2010

Cross-platform developer2011

Instructor on mobile apps development

for 5 years2012


2014

2016 Assistant professor at

the GREEN LAB

Empirical research on mobile apps


RoadmapQ

ue

stio

ns

Mobile development strategies

Who’s speaking?

Web-based hybrid apps

Progressive web apps

Research opportunities


NATIVE APP

010101010101011010101010101011011010010101010101011101010101010101011010

PLATFORM APIs

Native

Development strategies


• 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


Fragmentation

Objective-C

code

Swiftcode

XCode

Javacode

C++code

Eclipse

C#code

C++code

Visual Studio

JScode


NATIVE APP

010101010101011010101010101011011010010101010101011101010101010101011010

PLATFORM APIs

Native

Development strategies

BROWSER

<html><head><script src=” ...” /></head><body>...

Web


• 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


BROWSER


NATIVE WRAPPER


PLATFORM APIs

NATIVE APP

010101010101011010101010101011011010010101010101011101010101010101011010

PLATFORM APIs

Native Web

Hybrid



Web-based hybrid mobile apps

Single code base

Bridge API


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


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


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


Where are hybrid mobile apps?

Data-intensive mobile apps

Apps with closer interactionwith the Android platform

Winners, in line withinformal claims



• 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


BROWSER


NATIVE WRAPPER


PLATFORM APIs

NATIVE APP

010101010101011010101010101011011010010101010101011101010101010101011010

PLATFORM APIs

Native Web

Hybrid


Progressive

BROWSER<html><head><script src=” ...” /></head><body>...

Service workers


The journey of a PWA

1. The user accesses the website as usual

https://goo.gl/KIZydg




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






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



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"

}, ...}],

...}


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


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);

}););

});



• 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


Service workers


RoadmapQ

ue

stio

ns

Mobile development strategies

Who’s speaking?



Research opportunities

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

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


• 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?


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?


• 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


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


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

VRIJEUNIVERSITEITAMSTERDAMConclusions

VRIJEUNIVERSITEITAMSTERDAMFragmentation

Objective-C

code

Swiftcode

XCode

Javacode

C++code

Eclipse

C#code

C++code

Visual Studio

JScode


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


BROWSER


NATIVE WRAPPER


PLATFORM APIs

NATIVE APP

010101010101011010101010101011011010010101010101011101010101010101011010

PLATFORM APIs

Native Web

Hybrid


Progressive


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

ContactIvano Malavolta |

Assistant professorVrije Universiteit Amsterdam

iivanoo

[email protected]

www.ivanomalavolta.com


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.

beyond native apps: web technologies to the rescue! [splash 2016 - mobile! keynote]

Technology