Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]
•
3 likes•2,364 views
Slides of my keynote at the Mobile! 2016 workshop, co-located with SPLASH 2016 , Amsterdam. This keynote talk provides a state-of-the-art overview of the development strategies and technologies for developing mobile apps, each of them with its own advantages and drawbacks. In this context, the use of web technologies is discussed as a promising investment for moving forward one of the most intriguing challenges in the world of mobile apps: its fragmentation with respect to mobile platforms (e.g., Android, Apple iOS, Windows Phone). A discussion of research challenges, and thus opportunities, close the talk.
Recommended
Recommended
More Related Content
What's hot
What's hot (10)
Viewers also liked
Viewers also liked (20)
Similar to Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]
Similar to Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote] (20)
More from Ivano Malavolta
More from Ivano Malavolta (20)
Recently uploaded
Recently uploaded (20)
Beyond Native Apps: Web Technologies to the Rescue! [SPLASH 2016 - Mobile! keynote]
- 1. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Assistant professor Vrije Universiteit Amsterdam Beyond Native Apps: Web Technologies to the Rescue! VRIJE UNIVERSITEIT AMSTERDAM
- 2. VRIJE UNIVERSITEIT AMSTERDAM iOS developer Who’s speaking? 2009 Android developer2010 Cross-platform developer2011 Instructor on mobile apps development for 5 years 2012 VRIJE UNIVERSITEIT AMSTERDAM 2014 2016 Assistant professor at the GREEN LAB Empirical research on mobile apps
- 3. VRIJE UNIVERSITEIT AMSTERDAM Roadmap Questions Mobile development strategies Who’s speaking? Web-based hybrid apps Progressive web apps Research opportunities
- 5. VRIJE UNIVERSITEIT AMSTERDAM • 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 01010101010101101010 1010101011011010 010101010101011101 010101010101011010 PLATFORM APIs
- 7. VRIJE UNIVERSITEIT AMSTERDAM NATIVE APP 01010101010101101010 1010101011011010 010101010101011101 010101010101011010 PLATFORM APIs Native Development strategies BROWSER <html> <head> <script src=” ...” /> </head> <body> ... Web
- 8. VRIJE UNIVERSITEIT AMSTERDAM • 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
- 9. VRIJE UNIVERSITEIT AMSTERDAM BROWSER <html> <head> <script src=” ...” /> </head> <body> ... NATIVE WRAPPER <html> <head> <script src=” ...” /> </head> <body> ... PLATFORM APIs NATIVE APP 01010101010101101010 1010101011011010 010101010101011101 010101010101011010 PLATFORM APIs Native Web Hybrid Web-based hybrid apps
- 10. VRIJE UNIVERSITEIT AMSTERDAM Web-based hybrid mobile apps Single code base Bridge API
- 11. VRIJE UNIVERSITEIT AMSTERDAM 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
- 12. VRIJE UNIVERSITEIT AMSTERDAM Where are hybrid mobile apps? What is the difference between hybrid and native mobile apps as perceived by end users? Developer End 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
- 13. VRIJE UNIVERSITEIT AMSTERDAM 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
- 14. VRIJE UNIVERSITEIT AMSTERDAM Where are hybrid mobile apps? Data-intensive mobile apps Apps with closer interaction with the Android platform Winners, in line with informal claims
- 15. VRIJE UNIVERSITEIT AMSTERDAM 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
- 16. VRIJE UNIVERSITEIT AMSTERDAM BROWSER <html> <head> <script src=” ...” /> </head> <body> ... NATIVE WRAPPER <html> <head> <script src=” ...” /> </head> <body> ... PLATFORM APIs NATIVE APP 01010101010101101010 1010101011011010 010101010101011101 010101010101011010 PLATFORM APIs Native Web Hybrid Progressive web apps Progressive BROWSER <html> <head> <script src=” ...” /> </head> <body> ... Service workers
- 17. VRIJE UNIVERSITEIT AMSTERDAM The journey of a PWA 1. The user accesses the website as usual https://goo.gl/KIZydg
- 18. VRIJE UNIVERSITEIT AMSTERDAM 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
- 19. VRIJE UNIVERSITEIT AMSTERDAM 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
- 20. VRIJE UNIVERSITEIT AMSTERDAM 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
- 21. VRIJE UNIVERSITEIT AMSTERDAM Components of a PWA HTTPS Web Manifest Service workers { "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" }, ... }], ... }
- 22. VRIJE UNIVERSITEIT AMSTERDAM 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
- 23. VRIJE UNIVERSITEIT AMSTERDAM Offline-first experience App Service 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); }); ); });
- 24. VRIJE UNIVERSITEIT AMSTERDAM 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
- 25. VRIJE UNIVERSITEIT AMSTERDAM Roadmap Questions Mobile development strategies Who’s speaking? Web-based hybrid apps Progressive web apps Research opportunities
- 26. VRIJE UNIVERSITEIT AMSTERDAM Investigate 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
- 27. VRIJE UNIVERSITEIT AMSTERDAM PWAs not investigated yet PWAs have been advertised as: • performance boosters • network savers • providers of better UX However… VRIJE UNIVERSITEIT AMSTERDAM Offline-first experience App Service 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
- 28. VRIJE UNIVERSITEIT AMSTERDAM • 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?
- 29. VRIJE UNIVERSITEIT AMSTERDAM 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?
- 30. VRIJE UNIVERSITEIT AMSTERDAM • 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
- 31. VRIJE UNIVERSITEIT AMSTERDAM Where 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
- 32. VRIJE UNIVERSITEIT AMSTERDAM 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
- 33. VRIJE UNIVERSITEIT AMSTERDAM Conclusions VRIJE UNIVERSITEIT AMSTERDAM Fragmentation Objective -C code Swift code XCode Java code C++ code Eclipse C# code C++ code Visual Studio JS code VRIJE UNIVERSITEIT AMSTERDAM 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 VRIJE UNIVERSITEIT AMSTERDAM BROWSER <html> <head> <script src=” ...” /> </head> <body> ... NATIVE WRAPPER <html> <head> <script src=” ...” /> </head> <body> ... PLATFORM APIs NATIVE APP 01010101010101101010 1010101011011010 010101010101011101 010101010101011010 PLATFORM APIs Native Web Hybrid Progressive web apps Progressive BROWSER <html> <head> <script src=” ...” /> </head> <body> ... Service workers VRIJE UNIVERSITEIT AMSTERDAM Investigate 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
- 34. Contact Ivano Malavolta | Assistant professor Vrije Universiteit Amsterdam iivanoo i.malavolta@vu.nl www.ivanomalavolta.com
- 35. VRIJE UNIVERSITEIT AMSTERDAM References Ivano Malavolta. Web-based hybrid mobile apps: state of the practice and research opportunities. International Conference on Mobile Software Engineering and Systems (MOBILESoft), Austin, Texas, USA, May 14-22, 2016, pp. 241–242. M.E.Joorabchi,A.Mesbah,andP.Kruchten. Real Challenges in Mobile App Development. In ESEM, 2013. 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. [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 Play Store. IEEE International conference on Mobile Services (MS), IEEE, 2015.