Building Blocks: Utilizing Component-Based Software Engineering in Developing Cross-Platform Mobile Applications
Total Page:16
File Type:pdf, Size:1020Kb
KTH Computer Science and Communication Building Blocks: Utilizing Component-Based Software Engineering in Developing Cross-Platform Mobile Applications Master of Science Thesis Interactive Media Technology at KTH Royal Institute of Technology By Oskar Andersson ([email protected]) Supervisor at KTH: Vasiliki Tsaknaki Supervisors at Ericsson Research: Michal Koziuk & Johan Sjöberg Acknowledgements I would like to thank Stefan Ålund and Ericsson Research for the opportunity to work with this thesis. In particular, I have to thank my supervisors, Michal Koziuk & Johan Sjöberg, for their help and support during my time there. I would also like to thank my supervisor at KTH, Vasiliki Tsaknaki, for her constructive criticism and valuable feedback. Thank you! Oskar Andersson October 3 2014, Stockholm 2 Abstract Contemporary approaches to cross-platform mobile application development, such as hybrid apps from PhoneGap and generated native apps from Xamarin, show promise in reducing development time towards Android, iOS and other platforms. At the same time, studies show that there are various problems associated with these approaches, including suffering user experiences and codebases that are difficult to maintain and test properly. In this thesis, a novel prototype framework called Building Blocks was developed with the purpose of investigating the feasibility of utilizing component-based software engineering in solving this problem. The prototype was developed towards Android along with a web interface that allowed users to assemble an Android app using software components. The report concludes that component-based software engineering can be – and already is – utilized successfully to improve cross-platform mobile app development with special regards to user experience. Qualitative data indicate that Building Blocks as a concept is flexible and shows promise for mobile app development in which functionality is often reused, such as enterprise apps. Rapid prototyping using the web-based visual editing tool was another promising area. However, future use of Building Blocks would require further work on the prototype to improve its ease of use. 3 Table of contents LIST OF FIGURES ......................................................................................................................... 5 DEFINITIONS ............................................................................................................................... 6 1. INTRODUCTION ....................................................................................................................... 7 1.1 Problem background ....................................................................................................... 7 1.2 Purpose ........................................................................................................................... 8 1.3 Delimitations ................................................................................................................... 9 1.4 Problem definition ........................................................................................................... 9 2. BACKGROUND ....................................................................................................................... 10 2.1 Web apps ...................................................................................................................... 10 2.2 Hybrid apps ................................................................................................................... 12 2.3 Cross-platform mobile app development ...................................................................... 13 2.4 Component-based software engineering ...................................................................... 14 3. METHODOLOGY .................................................................................................................... 17 3.1 Literature study ............................................................................................................. 17 3.2 State of the art analysis ................................................................................................ 17 3.3 Prototype framework ..................................................................................................... 17 3.4 Qualitative evaluation of the prototype .......................................................................... 18 4. STATE OF THE ART ANALYSIS ................................................................................................. 19 4.1 Enterprise products ....................................................................................................... 19 4.2 Research projects ......................................................................................................... 21 5. PROPOSED FRAMEWORK: BUILDING BLOCKS ......................................................................... 24 5.1 Guidelines ..................................................................................................................... 24 5.2 Proposed framework architecture ................................................................................. 24 5.3 Prototype architecture ................................................................................................... 25 6. RESULTS .............................................................................................................................. 33 6.1 Building Blocks .............................................................................................................. 33 6.2 Qualitative study ........................................................................................................... 34 7. RESULT ANALYSIS ................................................................................................................. 38 7.1 Method discussion ........................................................................................................ 38 7.2 Result discussion .......................................................................................................... 38 7.3 Differences to existing approaches ............................................................................... 40 8. CONCLUSION ........................................................................................................................ 41 8.1 Answer to the research question .................................................................................. 41 8.2 Future research ............................................................................................................. 41 REFERENCES ........................................................................................................................... 42 APPENDIX ................................................................................................................................. 46 Interview questions ............................................................................................................. 46 4 List of figures FIGURE 1. A JAVASCRIPT EXAMPLE FOR ACCESSING A NATIVE ACCELEROMETER IN A HYBRID APP (APACHE CORDOVA API DOCUMENTATION, N.D.). .................................................................................... 12 FIGURE 2. SHOWCASES WHAT TECHNOLOGIES COULD BE USED WHERE IN A HYBRID APP (TRAEG, 2013). ...... 13 FIGURE 3. A WEB COMPONENT SEARCH ENGINE (POLYMER, 2014). ........................................................... 15 FIGURE 4. A SCREENSHOT FROM THE COMPONENT EXPLORER OF THE 2008 CBSE AND VISUAL COMPONENT COMPOSITION STUDY (WULF, PIPEK AND WUN, 2008). ............................................................... 15 FIGURE 5. CROSS-PLATFORM APP DEVELOPMENT PRODUCTS. .................................................................... 21 FIGURE 6. CROSS-PLATFORM APP DEVELOPMENT RESEARCH PROJECTS. .................................................... 23 FIGURE 7. A THEORETICAL OVERVIEW OF BUILDING BLOCKS WITH TWO PLATFORMS. ................................... 24 FIGURE 8. A SIMPLIFIED OVERVIEW OF THE BUILDING BLOCKS ARCHITECTURE. ............................................ 25 FIGURE 9. INITIAL VIEW WHERE ONE CAN SEARCH FOR AND ADD BLOCKS TO THE APP. .................................. 27 FIGURE 10. SECOND VIEW. HERE ONE CAN CUSTOMIZE THE EVENTS AND METHODS OF EACH BLOCK. .............. 27 FIGURE 11. AVAILABLE EVENT WITH NO REGISTERED METHOD. ..................................................................... 28 FIGURE 12. EVENT WITH A METHOD CALLED “STARTNEWCOMPONENTSCREEN” REGISTERED TO IT. ................ 28 FIGURE 13. A METHOD CALLED “GETFRIENDNAME” WITH A STRING PARAMETER “USERID”. “FISKBOKLOGIN” IS THE BLOCK FROM WHICH THIS METHOD ORIGINATES. .................................................................. 28 FIGURE 14. THIRD AND LAST VIEW. THE SOURCE CODE (JSON) OF THE APP COMPOSITION IS SHOWN. ............ 29 FIGURE 15. A SIMPLIFIED OVERVIEW OF THE BUILDING BLOCKS ANDROID RUNTIME. ...................................... 30 FIGURE 16. A CLASS DIAGRAM OF THE FISKBOK LOGIN BLOCK. FISKBOKLOGINMODEL IS THE BASE MODEL CLASS WITH PUBLIC METHODS. THE FISKBOKMODEL OBJECT REFERENCE IS RETRIEVED FROM THE (NOT SEEN HERE) BINDER CLASS. ..................................................................................................... 31 5 Definitions Throughout this thesis a number of technical key terms will be used. Here are the definitions that will be used throughout the report. Cross-platform mobile Development of software that aims to target development several