Cross-Platform Development of Smartphone Applications an Evaluation of React Native
Total Page:16
File Type:pdf, Size:1020Kb
UPTEC STS16 029 Examensarbete 30 hp Juni 2016 Cross-platform development of smartphone applications An evaluation of React Native Martin Furuskog Stuart Wemyss Abstract Cross-platform development of smartphone applications Martin Furuskog & Stuart Wemyss Teknisk- naturvetenskaplig fakultet UTH-enheten During the last ten years the market for smartphones has grown drastically. Because of the current state of the market with different operating systems many smartphone Besöksadress: applications need to be developed for several platforms. With this thesis, the goal was Ångströmlaboratoriet Lägerhyddsvägen 1 ultimately to contribute to the understanding of cross-platform development as a way Hus 4, Plan 0 of developing smartphone applications. React Native has been evaluated as a framework with which development is done for both Android and iOS using the same Postadress: code. To study React Native as a framework, a smartphone application for Android Box 536 751 21 Uppsala and iOS was developed at an Uppsala based IT-company with expertise in web services, smartphone applications, and online gaming. Furthermore, performance tests Telefon: and user tests were conducted in which React Native was compared to native 018 – 471 30 03 applications and applications developed using Xamarin (similar cross-platform Telefax: development framework owned by Microsoft). It was evident that using the same 018 – 471 30 00 code for both Android and iOS was time saving. However, the performance tests results showed that applications developed with React Native did not perform as well Hemsida: as the native and Xamarin versions. Leading to the conclusion that choice of http://www.teknat.uu.se/student framework when developing cross-platform applications need to take into consideration performance, development time, and programming language preference. Handledare: Emil Paulsson Ämnesgranskare: Martin Jacobsson Examinator: Elísabet Andrésdóttir ISSN: 1650-8319, UPTEC STS16 029 Populärvetenskaplig sammanfattning Denna rapport är del av ett examensarbete av Martin Furuskog och Stuart Wemyss på Civilingenjörsprogrammet System i Teknik och Samhälle vid Uppsala universitet. Arbetet är utfört i samband med utvecklingen av en smartphone-applikation på det Uppsala-baserade företaget Interactive Solutions. Marknaden för smartphones har vuxit väldigt mycket under det senaste årtiondet. Från att ha haft en relativt liten målgrupp har smartphones blivit en stor del av många människors dagliga liv. Så som marknaden ser ut idag finns flera betydande operativsystem och för företag som Interactive Solutions är det i många fall viktigt att deras applikationer finns tillgängliga för fler än ett av dessa. Det är dock dyrt och tidskrävande att utveckla separata applikationer för mer än ett operativsystem. Stora besparingar skulle därför kunna göras om utveckling kunde ske till flera operativsystem simultant. Under 2015 släppte Facebook ramverket React Native. Det är baserat på React, deras verktyg för webbutveckling, och möjliggör utveckling av smartphone-applikationer med programmeringsspråket JavaScript. Till en början fanns endast stöd för iOS. Men i och med att stöd för Android släpptes under september 2015 blev det också möjligt att använda samma kod för både Android och iOS. React Native skulle således kunna vara till stor nytta för företag som vill utveckla applikationer för båda operativsystemen men vill undvika separat utveckling. Denna rapport syftar till att utvärdera React Native som verktyg för utveckling av smartphone-applikationer för Android och iOS. Förutom under utvecklingen av applikationen på Interactive Solutions har detta även gjorts i samband med mindre applikationer som utvecklats med React Native men också separat till Android och iOS samt med Xamarin (ett ramverk liknande React Native). Med dessa applikationer har prestanda- och användartester utförts tillsammans med ytterligare jämförelser. Resultaten visar att för bästa prestanda bör applikationer utvecklas separat för de båda operativsystemen. Ju mer komplex en applikation är desto större tycks skillnaden i prestanda vara. Det är dock också tydligt att tid sparas genom att utveckla med React Native. Val av tillvägagångssätt bör därför baseras på applikationens komplexitet, prioritet av prestanda, tidsram för utveckling samt språkpreferenser då de olika tillvägagångssätten innebär olika programmeringsspråk. Table of Contents 1. Introduction ....................................................................................................................... 6 1.1. Problem statement and purpose ................................................................................... 6 1.2. Scope and delimitations ................................................................................................ 7 1.3. Disposition ..................................................................................................................... 7 2. Background ....................................................................................................................... 8 2.1. Smartphone applications ............................................................................................... 8 2.2. Cross-platform approaches ........................................................................................... 8 2.2.1. Web approach ....................................................................................................... 8 2.2.2. Hybrid approach (web and native) ........................................................................ 9 2.2.3. Cross-compilation approach ................................................................................ 10 2.2.4. Interpreted approach ........................................................................................... 11 2.3. Cross-platform tools .................................................................................................... 13 2.3.1. React Native ........................................................................................................ 13 2.3.2. Xamarin Platform ................................................................................................. 14 2.4. Related research ......................................................................................................... 14 3. Method .............................................................................................................................. 18 3.1. “Hello, World!” .............................................................................................................. 18 3.2. Performance evaluation .............................................................................................. 18 3.2.1. Performance measures ....................................................................................... 18 3.2.2. Measurement environment .................................................................................. 19 3.2.3. Bubble sort .......................................................................................................... 19 3.3. Native user experience ................................................................................................ 20 3.3.1. Application design ............................................................................................... 21 3.3.2. User testing with interviews ................................................................................. 21 3.4. Real-life case ............................................................................................................... 22 4. Results and analysis ....................................................................................................... 24 4.1. “Hello, World!” .............................................................................................................. 24 4.1.1. Native Android setup ........................................................................................... 24 4.1.2. Native Android implementation ........................................................................... 25 4.1.3. Native iOS setup .................................................................................................. 26 4.1.4. Native iOS implementation .................................................................................. 26 4.1.5. React Native setup .............................................................................................. 27 4.1.6. React Native implementation .............................................................................. 29 4.1.7. Xamarin setup ..................................................................................................... 30 4.1.8. Xamarin.Forms implementation .......................................................................... 31 4.1.9. Setup and development comparison ................................................................... 32 4.1.10. Application size comparison ................................................................................ 32 4.2. Performance evaluation .............................................................................................. 33 4.2.1. Android ................................................................................................................ 34 4.2.2. iOS ....................................................................................................................... 35 4.3. Native user experience ...............................................................................................