Masaryk University Faculty of Informatics Developing a mobile application using multiplatform frameworks with a native output Bachelor’s Thesis Filip Drgoň Brno, Fall 2017 Masaryk University Faculty of Informatics Developing a mobile application using multiplatform frameworks with a native output Bachelor’s Thesis Filip Drgoň Brno, Fall 2017 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. Filip Drgoň Advisor: RNDr. Jaroslav Škrabálek i Acknowledgement I would like to thank the supervisor of my bachelor’s thesis, RNDr. Jaroslav Škrabálek, for his helpful attitude, valuable insights, and his contribution to my thesis. iii Abstract The objective of this bachelor’s thesis is to research current available options in multiplatform application development, evaluate their qual- ities and shortcomings and present React Native as the currently best available solution. iv Keywords Multiplatform application, React Native, Android, iOS, Javascript, Xamarin, NativeScript, Native application, ... v Contents 1 Introduction 1 1.1 Thesis structure ........................2 2 A mobile application 3 2.1 Defining a mobile application .................3 2.2 Basic requirements of a mobile application ..........3 2.2.1 User interface requirements . .3 2.2.2 Cost-related requirements . .4 2.2.3 Further requirements . .6 2.3 Mobile application development types ............7 2.3.1 Native development . .8 2.3.2 Web development . .9 2.3.3 Hybrid development . 10 2.3.4 Comparison of different methods . 11 3 A multiplatform approach 13 3.1 Multiplatform development types .............. 13 3.2 A native multiplatform application .............. 14 3.2.1 Justifying the native multiplatform approach . 14 3.3 Most notable multiplatform frameworks ........... 14 3.3.1 Xamarin . 14 3.3.2 Ionic 2 . 16 3.3.3 NativeScript . 17 3.3.4 React Native . 18 3.4 A comparison ......................... 20 3.4.1 Developer’s perspective . 20 3.4.2 Pricing perspective . 22 3.4.3 User’s perspective . 23 3.4.4 Conclusion . 24 4 React Native – an in-depth look 25 4.1 JavaScript ........................... 25 4.1.1 About JavaScript . 25 4.1.2 A short look on history . 26 4.1.3 Advantages & shortcomings of JavaScript .... 28 4.1.4 Transpilers . 30 vii 4.2 React ............................. 30 4.2.1 JSX . 32 4.3 Under React Native’s hood .................. 34 5 A demonstrative application 37 5.1 Motivation & problem definition ............... 37 5.2 Analysis & structure design ................. 38 5.3 Implementation ........................ 41 5.3.1 Implementation structure . 43 5.3.2 User scenarios . 45 5.4 Results & What’s next .................... 47 6 Conclusion 49 Bibliography 51 viii List of Tables 2.1 Comparison of the application development methods 12 3.1 Comparing the frameworks from a developer’s perspective 21 3.2 Comparing the frameworks from a pricing perspective 22 3.3 Comparing the frameworks from a user’s perspective 23 ix List of Figures 2.1 Average application price on iOS store, June 2017[3] 5 2.2 Free and paid application distribution on iOS and Android, January 2017[4]. 6 2.3 Architectures of native, hybrid and web applications[5]. 8 3.1 Comparing traditional Xamarin and Xamarin.forms [9] 15 3.2 An example of TypeScript’s strong type enforcing 18 3.3 A schema of Hot Module Reloading in React Native 19 4.1 Netscape’s advocacy on JavaScript’s genesis[26]. 27 4.2 A schema depicting the sources behind JavaScript’s features[28]. 27 4.3 A simplified schema of React’s DOM Reconciliation[33] 31 4.4 A schema of the threading system React Native implements. 34 5.1 A schema of the proposed pricing regions for visitor parking in Brno[36]. 38 5.2 A proposed use case diagram of the resulting application. 39 5.3 A proposed deployment diagram of the resulting application. 40 5.4 A schema of the navigation structure in the resulting application 41 5.5 A screenshot depicting the project structure of the application. 44 5.6 Photographs of the sign in and sign up screens. 45 5.7 Photographs of the map screen and the modal for ticket purchase confirmation. 46 5.8 Screenshots of the settings screen, and the billing screen. 47 xi 1 Introduction Nowadays, smart devices are seeing a steady increase in market share worldwide, having surpassed desktop share only recently (in mid- October 2016) [1]. With this in mind, it is crucial to optimize services heavily both for desktop and smart device usage, as not doing so results in heavy repercussions [2]. While developing an application aimed at the public, it is important to consider developing multiple access points for the application, such as a web interface and native applications specifically for the most popular mobile platforms (namely Google Android and Apple iOS). Focusing on services targeted at mobile devices, these are mainly distributed utilizing either responsive web applications, or native mobile applications. To minimize the expenses and effort required for developing a native application, utilizing multiplatform development comes into play as a valid choice. The goal of this thesis is to present the current options in develop- ing an application utilizing multiplatform development, specifically focusing on tools for developing native applications, for both major platforms, seamlessly and concurrently. The thesis takes into evalu- ation the reusability of code blocks and components for ease-of-use and comfortable development process, resulting in faster, cheaper and easier development process. 1 1. Introduction 1.1 Thesis structure In its first part, the thesis focuses on defining a mobile application & its basic requirements, and comparing different approaches to mobile application development, including their advantages and detrimental effects. In the second part, the thesis aims at establishing a definition of multiplatform mobile application development. Furthermore, the the- sis discusses the multiplatform development types & multiplatform framework types. In the end, a profound comparison of several multi- platform frameworks is made, concluding which one would be best suited for modern multiplatform development. In the next part, the focus of the thesis is to provide an in-depth look on React Native and the technologies utilized with React Native. The thesis further discusses in detail their functionality, advantages, shortcomings and the reasoning behind choosing the technologies for the practical application. Finally, the thesis presents a demonstrative application written in React Native, with the motivation & problem definition, an analy- sis with a structure design, and an implementation showcase with photographs and use cases of the application. An evaluation of the development process is made, with a discussion on possible directions the resulting application could evolve into. 2 2 A mobile application This chapter is focused on defining the term mobile application and discussing the basic needs for developing a mobile application. It will also introduce the different approaches in mobile application develop- ment, and the conveniences and imperfections of each development approach. 2.1 Defining a mobile application The term mobile application is understood to be a type of executable software designed to run on a mobile device, e.g. a smartphone, or a tablet. Mobile applications were generally considered to be small, in- dividual software units with limited functionality. Nowadays, mobile applications are functionally-wise comparative to applications for per- sonal computers. Unlike applications for personal computers, mobile applications are typically obtained from a corresponding application store. 2.2 Basic requirements of a mobile application Depending on the use case, an application’s requirements may dif- fer heavily, with the difference mainly being the required system re- sources & the device’s special functions. 2.2.1 User interface requirements A basic requirement for a mobile application is to be easily usable. An average PC is usually controlled using a keyboard and a mouse, in comparison to an average smart device, which is typically controlled using solely a touch screen spanning only several inches. An over- whelming majority of these devices is controlled using a finger, with the – formerly popular – stylus now being a disfavoured option. The limited screen size of a smart device is the main reason behind the user interface requirements – the control elements need to be suf- ficiently sized, allow for easy usage on a small-diameter device, and be reasonably placed. This would mean that the application’s user 3 2. A mobile application interface needs to conform to the platform specific Human Interface Guidelines1, using native components wherever possible – for exam- ple, a native touch keyboard, native icon set or a native menu. The reasoning behind this requirement is that users are generally already used to using these components, so if they are identical across several applications, the usage of the application feels less confusing. 2.2.2 Cost-related requirements A mobile application developer also has to consider the economic side of developing a mobile application. Financially-wise, mobile appli- cation development has a few characteristics divergent from web or personal computer development. Beneficial to the developer, several platforms limit the ways an application can be distributed – iOS or Windows Phone commonly allow installing an application only through the official store of the platform’s manufacturer2. In effect, it is much harder to obtain an illegal copy of an application as compared to a personal computer. On the other hand, it is typical to pay considerably more for a personal computer application than for a mobile application. This requires the developer to either be capable of selling a great amount of copies3, or use a different monetization method.