EFFECTS ON PERFORMANCE AND USABILITY FOR CROSS-PLATFORM APPLICATION DEVELOPMENT USING REACT NATIVE

Undergraduate

ABSTRACT

A big problem with mobile application development is that the mobile market is divided amongst several platforms. Because of this, development time gets longer, more development skills are needed and the application gets harder to maintain. A solution to this is cross-platform development, which allows you to develop an application for several platforms at the same time. Since September 2015 the cross-platform framework React Native, created by Facebook, has been available for public use. This thesis evaluates React Native, for both Android and iOS, in regards to performance, platform code sharing as well as look and feel. An application was developed for both platforms, one version using the native language and one version using React Native. The different versions were compared through automated test scenarios to evaluate performance, manual code review for platform code sharing and with a user study to evaluate the look and feel. The results show promise as the user study shows that the React Native versions of the application have similar user experiences as their native counterparts without significantly affecting performance. The results also show that for the specified application about 75% of the React Native code could be used for both platforms, while it was easy to add platform-specific code.

 

INTRODUCTION

Mobile application development has become a big area within the software development industry. Meanwhile the user base is spread out over mobile phones that use different operating systems. To cover a large extent of the market you have to develop the application for more than one platform. Developing an application in more than one language is time consuming and therefore also costly. This has exerted the need for developing applications targeting many OS’s at once. Instead of writing several applications there are so called cross-platform development techniques which allows for the development of an application that works on more than one OS. There are many frameworks that use existing web technologies to create apps that work on many platforms. However, depending on the application, it can be hard to achieve a native feeling when actual native components are not used. Facebook has developed a new framework, called React Native, which uses native scripting to create actual native components. It allows development of mobile applications, using concepts derived from the web framework ReactJS, and create them in a similar way to how web applications are developed using ReactJS. Since it creates actual native components it needs some platform-specific code, but it is possible to share a significant amount of code between platforms.

 

MOTIVATION

The purpose of this thesis is to evaluate Facebook’s new framework React Native. The React Native framework promises the concept “Learn once, write everywhere” which means that once the developer has learned the React Native framework he or she will be able to apply it everywhere, i.e. to multiple platforms. It also means that building native-specific applications is required, however when the same framework is used for all applications, structures and code can be reused which greatly decreases the time consumption of developing subsequent applications after the first one. Furthermore, developers familiar with the ReactJS web framework should be able to quickly start developing Android and iOS applications without prior knowledge in the native languages Java and Swift respectively. This is because of the similarities between the React Native framework and the ReactJS web framework. Instead of having the need for competence within Web, Android and iOS development a company could reduce this to only needing React developers, which could be valuable.

Research into the effects on application development has been done for cross-platform frameworks such as Xamarin and PhoneGap. The result showed that in some instances cross-platform development can have negative influences on performance metrics such as CPU and memory usage, the look and feel of the application, or both. Therefore, a new crossplatform framework such as React Native needs to be evaluated to determine if the advantages of the framework make up for potential drawbacks in performance and in the look and feel of the developed application. When using React Native it is important to be aware of its advantages and disadvantages to be able to decide if the framework will suit the development needs of the intended application.

RESEARCH QUESTIONS

The focus of this report is to answer the questions pertained in this section.

1. Is the performance of a React Native application better or worse than the same application developed in a native language?

    2. How much of the codebase written using React Native can be used for both iOS and     Android?

  3. Can an application created using React Native achieve the same look and feel as a native application?

AIM

The aim of this thesis is to evaluate the cross-platform framework React Native. Furthermore, the aim is to develop an application using React Native and develop the same application in the native languages for Android and iOS in order to be able to compare the React Native app to their native counterparts.