Uppsala universitets logotyp UPTEC IT 21005 Examensarbete 30 hp April 30, 2021 An evaluation of Mobile Cross-platform Development using React Native and Native Android Anton Carlsson Tysk Emil Kling Civilingenjörsprogrammet i informationsteknologi Civilingenjörsprogrammet i informationsteknologi Uppsala universitets logotyp An evaluation of Mobile Cross-platform Development using React Native and Native Android Anton Carlsson Tysk Emil Kling Abstract Instead of developing the same mobile application multiple times for different platforms, Android and iOS, there are frameworks which allow the developer to deploy an application to several platforms using the same code base. One of these frameworks is React Native, a JavaScript framework for developing mobile applications for both Android and iOS. Native Android applications are developed using Java or Kotlin. This paper evaluates React Native by comparing it to an Android application written in Java. The evaluation is done by developing an application in each of the two technologies and comparing performance. The performance is evaluated by measuring frame rate during an animation and the average time to solve computational tasks. To get accurate measurements a tool called Systrace is used. The results show that for graphical animations, applications developed using React Native have similar performance as natively developed Android applications. At the same time, React Native is not very good at pure computational tasks where natively developed Android applications perform better. Teknisk-naturvetenskapliga fakulteten, Uppsala universitet. Utgivningsort Uppsala/Visby. Handledare: Förnamn Efternamn, Ämnesgranskare: Förnamn Efternamn, Examinator: Förnamn Efternamn Teknisk-naturvetenskapliga fakulteten Uppsala universitet, Utgivningsort Uppsala/Visby Ämnesgranskare: Sven-Olof Nyström Examinator: Lars-Åke Norden Sammanfattning Istället för att utveckla en mobilapplikation till Android och en till iOS kan man utnyttja olika verktyg för att utveckla flera applikationer samtidigt med en och samma kodbas. Ett sådant verktyg är multiplattform-ramverket React Native. Detta examensarbete jämför prestandan på en applikation utvecklad i React Native med en Android-applikation utvecklad i Java. Jäm- förelsen sker genom att mäta bildhastigheten under animationer och genom att mäta den genomsnittliga tiden det tar för applikationerna att utföra olika beräkningsuppgifter. Resultaten visar att applikationerna har liknande prestanda när det kommer till animeringar. Java-applikationen presterar genomgående bättre i testerna som avser beräkningsuppgifter. Slutsatsen är att React Native presterar tillräckligt bra för att vara ett rimligt verktyg för multiplattform-utveckling till mobilapplikationer. Acknowledgement We would like to begin this thesis to give a well deserved thank you to ev- eryone who supported and helped us during this theses. Thank you Sven-Olof for giving us guidance through this journey. Also thank you the people at Consid AB who believed in us and allowed us to do this research. Last but not least we would like to give a big thank you to all of our friends and family for all the support. This one is for you. Anton Carlsson Tysk and Emil Kling Contents 1 Introduction 5 1.1 Cross-platform development . .5 1.2 Cross-platform development for mobile devices . .5 1.2.1 Cross-platform Native Applications . .6 1.2.2 Cross-platform Mobile Web Applications . .6 1.2.3 Cross-platform Hybrid Applications . .7 1.3 Purpose . .7 1.3.1 Problem statement . .7 1.3.2 Future work . .8 2 Background 8 2.1 Android . .8 2.1.1 Java . .8 2.1.2 XML . .9 2.1.3 Android Studio . .9 2.2 React Native . .9 2.2.1 JavaScript . 10 2.2.2 Components . 10 2.2.3 Rendering components . 10 2.2.4 Native modules . 13 2.2.5 Frame rate . 13 3 Method 13 3.1 Building the application . 14 3.2 Testing the UI view . 14 3.3 Testing the calculation view . 16 4 Implementation 20 4.1 UI test view . 20 4.1.1 Native . 20 4.1.2 React Native . 21 4.2 Calculation test view . 21 4.2.1 Fibonacci sequence . 22 4.2.2 Matrix multiplication . 22 4.2.3 Binary search tree insertion . 23 4.2.4 Array reverse . 25 5 Results 26 5.1 UI test . 27 5.2 Calculation test . 31 5.2.1 Fibonacci sequence . 31 5.2.2 Matrix multiplication . 33 5.2.3 Binary search tree insertion . 35 5.2.4 Array reverse . 38 6 Discussion 40 6.1 UI test . 40 6.2 Calculation test . 40 7 Related work 42 7.1 Other cross-platform frameworks . 46 8 Conclusion 46 A Appendix 52 A.1 Animation frame rate . 52 A.2 Fibonacci sequence . 53 A.3 Matrix multiplication . 54 A.4 Binary search tree insertion . 55 A.5 Array reverse . 58 1 INTRODUCTION 1 Introduction In February 2017 Apple iOS and Android OS owned 97 percent of the mobile phone and tablet OS market share, according to NetMarketShare [21]. As the majority of mobile users are spread across two operating systems, it is not a surprise that many companies and developers mainly target the platforms running these operating systems. In order to give the majority of users access to a mobile application, it has to be supported on the Android and Apple operating systems. To develop the application separately for each operating system is an expensive approach as it requires developers with experience of different programming languages and technologies. Native Android ap- plications are written in Java or Kotlin using Android’s frameworks while native applications for iOS are written in Objective-C or Swift using Apple’s frameworks. Instead of writing the same logic in two different programming languages one solution could be to use a cross-platform framework that al- lows the developer to write the logic once and publish the application for several platforms. 1.1 Cross-platform development A piece of software that is implemented to run on more than one platform is called a cross-platform software. It can either be compiled to run on several platforms, or written using an interpreted language, or compiled to bytecode and executed using a common interpreter such as a JVM (Java Virtual Machine) [7]. The Linux Information Project give three definitions of the term platform: hardware based, operating system based and one which is a combination of the other two [27]. This report refers to the second definition when reasoning about platforms, which states that a platform refers to the type of operating system running on a computer or device. 1.2 Cross-platform development for mobile devices Many tools have been developed to ease the mobile cross-platform develop- ment [5, 17]. Cross-platform applications can be divided into three categories, namely Native Applications, Mobile Web Applications and Hybrid Applica- tions. The common purpose of these types of applications is to be able to reuse as much written code as possible for two or more platforms. 5 1 INTRODUCTION 1.2.1 Cross-platform Native Applications An application is considered to be a native application if it is written in a language supported by the native SDK (Software Development Kit). For Android this means coding in Java or Kotlin and for iOS it means coding in Objective-C or Swift. Native applications can also be created by using a so called cross-platform SDK. A cross-platform SDK creates a new API that is build on top of one or multiple native SDKs and can thus target multiple platforms from a new unified API. This cross-platform API makes it possible to build native ap- plications in languages that are not supported by the native SDK [25]. 1.2.2 Cross-platform Mobile Web Applications A mobile web application is an application that is designed to be accessed on a phone or tablet, and is running completely in a web browser. Mobile Web applications are developed using technologies such as HTML, HTML5, CSS and JavaScript. Before the standardisation of HTML5 in 2014 [23], web applications had no access to device-specific hardware like the mobile phone camera or GPS, making it hard to build web applications that resemble native applications in terms of functionality. HTML5 provides an API which makes it possible for the developer to access a large amount of features connected to specific devices and hardware, for example push notifications, audio and location. However, there are still tasks a web application can not perform. Mobile web applications are limited to the supported features of the current web browser in use. For instance, Chrome and Firefox browsers can make the device vibrate while Safari can not. The performance of a web application is dependent on DOM interactions as well as how heavy the application is in terms of UI (User Interface). The DOM (Document Object Model) is an object based representation of the structure and content of a web page where each object becomes a node in a tree structure. All nodes can be accessed through the tree and the content can be modified or deleted or a new child node can be added. Interactions with the DOM, such as adding or deleting content, can affect performance since these changes will require a re-render of the web page. 6 1 INTRODUCTION Mobile web applications are easy to develop and accessible on any device by navigating to an URL through the web browser, but lack the look and feel of a native application, along with limited access to device specific fea- tures [14, 20, 30, 8, 19]. 1.2.3 Cross-platform Hybrid Applications A mobile hybrid application is a combination of a web application and a native application. The web part of the application is typically built using HTML, CSS and JavaScript and is locally rendered using the mobile’s built in browser. The native part of the application is often written in JavaScript and mapped to a Native language using a framework which handles the implementation details.