Masaryk University Faculty of Informatics Cross-platform Mobile Application Development Comparison Master’s Thesis Bc. Michal Zopp Brno, Fall 2020 Masaryk University Faculty of Informatics Cross-platform Mobile Application Development Comparison Master’s Thesis Bc. Michal Zopp Brno, Fall 2020 This is where a copy of the official signed thesis assignment and a copy ofthe Statement of an Author is located in the printed version of the document. Declaration Hereby I declare that this paper is my original authorial work, which I have worked out on my own. All sources, references, and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Bc. Michal Zopp Advisor: RNDr. Vít Rusňák, Ph.D. i Acknowledgements I would like to thank my advisor RNDr. Vít Rusňák, Ph.D. for his guidance, friendly approach and valuable advice during the creation of the applications as well as this thesis. I would also like to thank the professors and teachers of this faculty that gave me the broad outlook in the field of computer science. ii Abstract This thesis focuses on comparing mobile application development approaches from development, empirical, and user experience stand- points. It compares NativeScript and React Native frameworks, which are two common JavaScript frameworks for developing cross-platform applications. Finally, it compares these cross-platform development approaches with native development for iOS devices using the Swift programming language. iii Keywords Android, iOS, mobile application, React Native, NativeScript iv Contents 1 Introduction 1 2 SkautIS – Information System of Junák 3 2.1 SkautIS Agendas .......................3 2.2 SkautIS API and Web Services ................4 2.3 Testing Environment .....................6 3 Mobile Application Development 7 3.1 Native Approach .......................7 3.1.1 Native iOS Application Development . .8 3.1.2 Native Android Application Development . 12 3.2 Cross-platform Application Development .......... 16 3.2.1 NativeScript . 16 3.2.2 React Native . 19 4 Current NativeScript Mobile Application 24 4.1 Design ............................. 24 4.1.1 Project Structure . 24 4.1.2 Agendas . 26 4.1.3 State Logic . 27 4.2 Issues ............................. 28 4.2.1 Navigation . 28 4.2.2 Empty State . 29 5 Implementation of the React Native Mobile Application 32 5.1 Design ............................. 32 5.1.1 Project Structure . 33 5.1.2 Agendas . 34 5.1.3 Navigation . 34 5.2 Implementation Details .................... 35 5.2.1 NPM Libraries . 35 5.2.2 API Calls . 36 5.2.3 Empty state and error response . 37 5.3 Future Improvements ..................... 38 5.3.1 Application Reset . 38 5.3.2 Edge API Cases . 39 v 6 Implementation of the Swift Mobile Application 40 6.1 Design ............................. 40 6.1.1 Project Structure . 41 6.1.2 Agendas . 42 6.1.3 Navigation . 42 6.2 Implementation Details .................... 43 6.2.1 Screen Implementation . 43 6.2.2 Charts . 44 6.2.3 API Calls . 45 6.3 XML Parsing Barrier ..................... 46 7 Comparison and User Evaluation 48 7.1 Development Process Comparison .............. 48 7.1.1 Project Preparation . 48 7.1.2 Application Development . 53 7.1.3 Lessons Learned . 57 7.2 Empirical Comparison .................... 59 7.2.1 Project Size . 60 7.2.2 Application Size . 61 7.2.3 Clean Build Time . 63 7.2.4 Clean Start Time . 65 7.2.5 CPU and Memory Usage . 67 7.2.6 Lessons Learned . 70 7.3 Survey ............................. 72 7.3.1 Participants . 72 7.3.2 Survey Structure . 73 7.3.3 Tested Tasks . 74 7.3.4 Overall Evaluation . 79 7.3.5 Lessons Learned . 80 8 Conclusion 82 Bibliography 84 A List of Electronic Attachments 87 B Installation Manual for Developed Applications 88 C Conducted Survey 89 vi D Charts From the Conducted Survey 94 vii 1 Introduction Mobile development has become prevalent in recent years due to an increasing number of mobile users across the globe [1]. Although many corporations and independent projects are trying to enter the mobile operating system market, to bring a better experience to its customers, iOS and Android are the only two market leaders. Together they have 99.45% of mobile operating system market share with 72.92% and 26.53% respectively [2]. It seems that nowadays there is a mobile application available for anything we can think of. Application that calculates how high users can throw their phone (S.M.T.H.1), applica- tion that lets them control a bread slice (I am Bread2) or even a dating application for their pets (My Pet Dating3). These applications may be useless, in their essence. However, it paints the picture that the development process has become more accessible to people as these applications could be created as a joke and not have real-world usage. Junák – Czech Scouting is the largest recognised scout organisation in the Czech Republic. Its roots can be traced back to 1914. Its primary role is to organise and strengthen its community relationships, espe- cially for youth members. Junák also hosts several events throughout the year that are organised on many levels, such as local, regional, nationwide or even worldwide. For members of Junák, there exists an information system which helps them to access and manage important information about the organisation, its members and events. This sys- tem is called skautIS, and it is available at https://www.is.skaut.cz. Furthermore, a recent project Pocket skautIS brings some of its core features right into its members’ mobile devices. The application is available for download in the Google Play and App Store. This thesis aims to compare cross-platform development approaches and native development approach regarding technical specifications and empirical evaluations. Instead of some generic tutorial applica- tion, we have chosen the Pocket skautIS application because it presents many useful features to its users and has an active user base. We will 1. https://play.google.com/store/apps/details?id=com.carrotpop.www. smth&hl=en&gl=US 2. https://apps.apple.com/us/app/i-am-bread/id946903436 3. https://apps.apple.com/us/app/my-pet-dating/id1489555719 1 1. Introduction be comparing the current Native Script cross-platform development approach used for the Pocket skautIS application with another pop- ular cross-platform development approach called React Native. We only focus on Android and iOS platforms (although mentioned cross- platform approaches can build to even more platforms). We have also chosen a pure native development approach for iOS platform using the Swift programming language and native iOS frameworks. These applications need to mimic the user interface and the be- haviour as close as possible to the current Pocket skautIS application in order for us to focus only on the differences. These two new appli- cations need to be implemented first in order for us to compare our experiences with the given development approach thoroughly. We have also conducted a survey that required the participant to install the current Pocket skautIS application and the newly developed ap- plication using React Native on their device. They were given a set of tasks resembling a common application use for the average user and questions surrounding the differences between the applications. In Chapter 2, we will present the current state of skautIS, what it offers to its users and the developers. Details for development ina native environment and the cross-platform development approaches of NativeScript and React Native are described in Chapter 3. Chapter 4 talks about the current Pocket skautIS application in more detail, espe- cially the code design logic used in the project. Next, Chapter 5 states implementation details for the cross-platform application explicitly made for this thesis. Chapter 6 discusses the design and implementa- tion detail for the iOS mobile application developed using the Swift programming language. This thesis’s core is in Chapter 7, where we introduce the development process comparison, our empirical compar- ison between NativeScript, React Native, and native Swift development approaches and the conducted survey. Finally, Chapter 8 concludes this thesis and all of the studied development approaches and gives a recommendation when choosing a mobile application development approach. 2 2 SkautIS – Information System of Junák Junák - Czech Scouting with its 67 000 members is the biggest non- governmental organization for youth education in the Czech Republic. The organization has a hierarchical structure that follows the territorial- administrative arrangement in the Czech Republic. A scout troop is a base educational group. On average, it consists of 15 to 30 mem- bers, but bigger ones are no exception. Several troops form a scout unit that provides management services and facilities to its members. Units are organized in scout districts and scout regions. To simplify the organization management, Junák uses an information system skautIS. Even though anybody can create an account within skautIS, the full access will only be granted after the account is verified by troop or unit leaders. Many of the functionalities within skautIS are only available to users with specific roles that the user’s account has to have in order to access such functionality. In this chapter, we briefly present the skautIS information system and its main agendas. Next, we discuss its web services API (Applica- tion Programming Interface) and the testing version of skautIS, used for the development purposes. 2.1 SkautIS Agendas SkautIS started as a system for simplifying the registration process of Junák’s members over a decade ago and is continuously being developed ever since. Currently, it contains multiple agendas including unit manage- ment, events, quality assessment, grants or benefits and many others. For the purpose of this thesis, we will only talk in more detail about the agendas implemented in the mobile Pocket skautIS application.