DOCSLIB.ORG

Comparing Modifiability of React Native and Two Native Codebases

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Comparing Modifiability of React Native and Two Native Codebases Linköping University | Department of Computer Science Master thesis, 30 ECTS | Datateknik 2017 | LIU-IDA/LITH-EX-A--17/025--SE Comparing modifiability of React Native and two native codebases Robin Abrahamsson David Berntsen Supervisor : Lena Buffoni Examiner : Ola Leifler Linköpings universitet SE–581 83 Linköping +46 13 28 10 00 , www.liu.se Upphovsrätt Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under 25 år från publiceringsdatum under förutsättning att inga extraordinära omständigheter uppstår. Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns lösningar av teknisk och admin- istrativ art. Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sam- manhang som är kränkande för upphovsmannenslitterära eller konstnärliga anseende eller egenart. För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/. Copyright The publishers will keep this document online on the Internet – or its possible replacement – for a period of 25 years starting from the date of publication barring exceptional circum- stances. The online availability of the document implies permanent permission for anyone to read, to download, or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the con- sent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility. According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement. For additional information about the Linköping Uni- versity Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its www home page: http://www.ep.liu.se/. c Robin Abrahamsson David Berntsen Abstract Creating native mobile application on multiple platforms generate a lot of duplicate code. This thesis has evaluated if the code quality attribute modifiability improves when migrating to React Native. One Android and one iOS codebase existed for an application and a third codebase was developed with React Native. The measurements of the code- bases were based on the SQMMA-model. The metrics for the model were collected with static analyzers created specifically for this project. The results created consists of graphs that show the modifiability for some specific components over time and graphs that show the stability of the platforms. These graphs show that when measuring code metrics on applications over time it is better to do this on a large codebase that has been developed for some time. When calculating a modifiability value the sum of the metrics and the average value of the metrics between files should be used and it is shown that the React Native platform seems to be more stable than native. Acknowledgments We would like to thank our supervisor Lena Buffoni and examiner Ola Leifler, both from Linköping University, for all the feedback and help throughout our entire thesis. Helping us to stay on the right path and get the best result possible. Thanks to our opponents Ludvig Helén and Petra Öhlin for reviewing our thesis multiple times and giving valuable feed- back to improve the thesis. We would like to thank Valtech AB for providing applications, supervision and a place to do our work. v Contents Abstract iii Acknowledgments iv Contents vi List of Figures viii List of Tables ix 1 Introduction 1 1.1 Motivation . 1 1.2 Aim............................................ 2 1.3 Research Questions . 2 1.4 Delimitations . 2 2 Theory 3 2.1 Mobile Applications . 3 2.2 Cross-platform Tools . 4 2.3 Cost of Software Development . 7 2.4 Code Metrics . 7 2.5 International Standards . 11 2.6 Maintainability . 11 2.7 Modifiability . 13 2.8 Quality Models . 13 2.9 Static Analysis . 16 2.10 Case Study . 16 2.11 Related Work . 16 3 Method 19 3.1 Description of Research Method . 19 3.2 Components and Files . 24 4 Results 29 4.1 Releases . 29 4.2 Modifiability . 33 5 Discussion 41 5.1 Method . 41 5.2 Results . 43 5.3 The Work in a Wider Context . 45 6 Conclusion 47 6.1 Future Work . 47 vi Bibliography 49 List of Figures 3.1 The start page of the application, showing navbar and list view. 25 3.2 Navbar example with hamburger menu, title and search button. 26 3.3 Menu example of menu sliding in from the left, with menu items and a separator. 27 3.4 Example of a horizontal list view that has to be scrolled to show all content. 28 4.1 iOS release data . 30 4.2 Android release data . 31 4.3 React Native release data . 33 4.4 Navbar component data from native and React Native applications over time . 35 4.5 Menu component data from native and React Native applications over time . 36 4.6 List view component data from native and React Native applications over time . 38 4.7 Migrated application data from native and React Native applications over time . 40 viii List of Tables 1.1 Worldwide market share by operating system in 2014 . 1 1.2 United States market share by operating system in 2015 . 1 2.1 SQMMA - Computation formulas . 14 2.2 QMOOD - Computation formulas . 15 3.1 Metrics extracted from the static analyzers . 22 3.2 Metrics, tools and source . 22 3.3 Metrics calculations . 22 4.1 iOS API changes over time and releases . 29 4.2 Average iOS API changes per version . 29 4.3 Android API changes over time and releases . 31 4.4 React Native API changes over time and releases . 32 4.5 The maximum and minimum modifiability values for the Navbar component. 34 4.6 The maximum and minimum modifiability values for the Menu component. 36 4.7 The maximum and minimum modifiability values for the List view component. 37 4.8 The maximum and minimum modifiability values for the all components. 39 ix 1 Introduction There are over 2 billion smartphones in the world with different operating systems on them [57]. Android had a significant market share of all the platforms that were sold to end users worldwide in 2014, as can seen in Table 1.1. Even though Android had a vast vast majority of the market share in the world, in the United States Android doesn’t have the same kind of dominance. In 2015 Android only had 52.4% of the market share in the United States, as can be seen in Table 1.2. So if a company wants to be available and competetive on the entire market and have applications on all platforms they must either create a native application for each platform, create hybrid applications for the same platforms or a web application that is usable by every platform. Depending on which route one decides to go, it comes with some pros and cons. Operating system 2014 Units 2014 Market Share (%) Android 1,004,675 80.7 iOS 191,426 15.4 Windows 35,133 2.8 BlackBerry 7,911 0.6 Other OS 5,745 0.5 Table 1.1: Worldwide market share by operating system in 2014 [27] Operating system Mar-15 Market Share (%) Jun-15 Market Share (%) Android 52.4 51.6 iOS 42.6 44.1 Windows 3.3 2.9 BlackBerry 1.6 1.2 Symbian 0.1 0.1 Table 1.2: United States market share by operating system in 2015 [15] 1.1 Motivation Creating native mobile applications on multiple platforms generates a lot of duplicate code, especially for the basic functionality and business logic. Due to differences in syntax, lan- guage, test suites and packages in the different platforms, reusability and sharing of code is not really possible. This increases the amount of hours needed to release, maintain and test applications for multiple platforms which leads to a higher development and maintenance cost. React Native1 is a project started by Facebook which addresses the problem in an in- teresting way. It gives the possibility have one codebase for multiple applications with the possibility to still use platform specific components. 1https://github.com/facebook/react-native 1 1.2. Aim The work for this thesis has been done at the company Valtech which is an IT-consultant firm located in Stockholm. For many customers Valtech creates web services and often com- panies also want to have mobile applications for both Android and iOS. To have only one codebase instead of two would require less work and people. If it would be possible to have only one codebase for both applications it would be important to know if it gives any ad- vantages to switch from the native codebases to a cross-platform codebase and how much investment would be necessary. 1.2 Aim This thesis is exploratory, which means that it investigates a new area. The aim is to evaluate if certain quality attribute can be improved when migrating code from native codebases to a cross platform tool like React Native. Specifically the modifiability quality attribute, presented in the ISO/IEC 25010 standard [36] is looked at.
Load more

Recommended publications
  • Netsuite for Mobile
    NetSuite for Mobile September 9, 2020 2020.2 Copyright © 2005, 2020, Oracle and/or its affiliates. All rights reserved. This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited. The information contained herein is subject to change without notice and is not warranted to be error- free. If you find any errors, please report them to us in writing. If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government, then the following notice is applicable: U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are "commercial computer software" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs. No other rights are granted to the U.S. Government. This software or hardware is developed for general use in a variety of information management applications.
    [Show full text]
  • THINC: a Virtual and Remote Display Architecture for Desktop Computing and Mobile Devices
    THINC: A Virtual and Remote Display Architecture for Desktop Computing and Mobile Devices Ricardo A. Baratto Submitted in partial fulfillment of the requirements for the degree of Doctor of Philosophy in the Graduate School of Arts and Sciences COLUMBIA UNIVERSITY 2011 c 2011 Ricardo A. Baratto This work may be used in accordance with Creative Commons, Attribution-NonCommercial-NoDerivs License. For more information about that license, see http://creativecommons.org/licenses/by-nc-nd/3.0/. For other uses, please contact the author. ABSTRACT THINC: A Virtual and Remote Display Architecture for Desktop Computing and Mobile Devices Ricardo A. Baratto THINC is a new virtual and remote display architecture for desktop computing. It has been designed to address the limitations and performance shortcomings of existing remote display technology, and to provide a building block around which novel desktop architectures can be built. THINC is architected around the notion of a virtual display device driver, a software-only component that behaves like a traditional device driver, but instead of managing specific hardware, enables desktop input and output to be intercepted, manipulated, and redirected at will. On top of this architecture, THINC introduces a simple, low-level, device-independent representation of display changes, and a number of novel optimizations and techniques to perform efficient interception and redirection of display output. This dissertation presents the design and implementation of THINC. It also intro- duces a number of novel systems which build upon THINC's architecture to provide new and improved desktop computing services. The contributions of this dissertation are as follows: • A high performance remote display system for LAN and WAN environments.
    [Show full text]
  • Haxe Game Development Essentials
    F re e S a m p le Community Experience Distilled Haxe Game Development Essentials Create games on multiple platforms from a single codebase using Haxe and the HaxeFlixel engine Jeremy McCurdy In this package, you will find: The author biography A preview chapter from the book, Chapter 1 'Getting Started' A synopsis of the book’s content More information on Haxe Game Development Essentials About the Author Jeremy McCurdy is a game developer who has been making games using ActionScript, C#, and Haxe for over four years. He has developed games targeted at iOS, Android, Windows, OS X, Flash, and HTML5. He has worked on games that have had millions of gameplay sessions, and has built games for many major North American television networks. He is the games technical lead at REDspace, an award-winning interactive studio that has worked for some of the world's largest brands. They are located in Nova Scotia, Canada, and have been building awesome experiences for 15 years. Preface Developing games that can reach a wide audience can often be a serious challenge. A big part of the problem is fi guring out how to make a game that will work on a wide range of hardware and operating systems. This is where Haxe comes in. Over the course of this book, we'll look at getting started with Haxe and the HaxeFlixel game engine, build a side-scrolling shooter game that covers the core features you need to know, and prepare the game for deployment to multiple platforms. After completing this book, you will have the skills you need to start producing your own cross-platform Haxe-driven games! What this book covers Chapter 1, Getting Started, explains setting up the Haxe and HaxeFlixel development environment and doing a quick Hello World example to ensure that everything is working.
    [Show full text]
  • Rich Internet Applications
    Rich Internet Applications (RIAs) A Comparison Between Adobe Flex, JavaFX and Microsoft Silverlight Master of Science Thesis in the Programme Software Engineering and Technology CARL-DAVID GRANBÄCK Department of Computer Science and Engineering CHALMERS UNIVERSITY OF TECHNOLOGY UNIVERSITY OF GOTHENBURG Göteborg, Sweden, October 2009 The Author grants to Chalmers University of Technology and University of Gothenburg the non-exclusive right to publish the Work electronically and in a non-commercial purpose make it accessible on the Internet. The Author warrants that he/she is the author to the Work, and warrants that the Work does not contain text, pictures or other material that violates copyright law. The Author shall, when transferring the rights of the Work to a third party (for example a publisher or a company), acknowledge the third party about this agreement. If the Author has signed a copyright agreement with a third party regarding the Work, the Author warrants hereby that he/she has obtained any necessary permission from this third party to let Chalmers University of Technology and University of Gothenburg store the Work electronically and make it accessible on the Internet. Rich Internet Applications (RIAs) A Comparison Between Adobe Flex, JavaFX and Microsoft Silverlight CARL-DAVID GRANBÄCK © CARL-DAVID GRANBÄCK, October 2009. Examiner: BJÖRN VON SYDOW Department of Computer Science and Engineering Chalmers University of Technology SE-412 96 Göteborg Sweden Telephone + 46 (0)31-772 1000 Department of Computer Science and Engineering Göteborg, Sweden, October 2009 Abstract This Master's thesis report describes and compares the three Rich Internet Application !RIA" frameworks Adobe Flex, JavaFX and Microsoft Silverlight.
    [Show full text]
  • What Is React Native? by High School Technology Services Myhsts.Org
    What is React Native? By High School Technology Services myhsts.org React Native • React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS. Abstracting React from the DOM DOM • Just to get things straight - DOM stands for Document Object Model and is an abstraction of a structured text. For web developers, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM. Cont.. Virtual DOM to abstract react Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions. • Each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created • This is where things get interesting. Updating the browser’s DOM is a three-step process in React. • Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
    [Show full text]
  • Middleware in Action 2007
    Technology Assessment from Ken North Computing, LLC Middleware in Action Industrial Strength Data Access May 2007 Middleware in Action: Industrial Strength Data Access Table of Contents 1.0 Introduction ............................................................................................................. 2 Mature Technology .........................................................................................................3 Scalability, Interoperability, High Availability ...................................................................5 Components, XML and Services-Oriented Architecture..................................................6 Best-of-Breed Middleware...............................................................................................7 Pay Now or Pay Later .....................................................................................................7 2.0 Architectures for Distributed Computing.................................................................. 8 2.1 Leveraging Infrastructure ........................................................................................ 8 2.2 Multi-Tier, N-Tier Architecture ................................................................................. 9 2.3 Persistence, Client-Server Databases, Distributed Data ....................................... 10 Client-Server SQL Processing ......................................................................................10 Client Libraries ..............................................................................................................
    [Show full text]
  • Framework Overview with UML Diagrams
    Framework Overview with UML Diagrams Learn to Build Robust, Scalable and Maintainable Applications using PureMVC Framework Overview This document discusses the classes and interfaces of the PureMVC framework; illustrating their roles, responsibilities and collaborations with simple UML (Unified Modeling Language) diagrams. The PureMVC framework has a very narrow goal. That is to help you separate your application’s coding concerns into three discrete tiers; Model, View and Controller. In this implementation of the classic MVC design meta-pattern, the application tiers are represented by three Singletons (a class where only one instance may be created). A fourth Singleton, the Façade, simplifies development by providing a single interface for communications throughout the application. The Model caches named references to Proxies, which expose an API for manipulating the Data Model (including data retrieved from remote services). The View primarily caches named references to Mediators, which adapt and steward the View Components that make up the user interface. The Controller maintains named mappings to Command classes, which are stateless, and only created when needed. The Façade initializes and caches the Core actors (Model, View and Controller), and provides a single place to access all of their public methods. AUTHOR: Cliff Hall <[email protected]> LAST MODIFIED: 3/05/2008 Façade and Core The Façade class makes it possible for the Proxies, Mediators and Commands that make up most of our final application to talk to each other in a loosely coupled way, without having to import or work directly with the Core framework actors. When we create a concrete Façade implementation for our application, we are able to use the Core actors ‘out of the box’, incidental to our interaction with the Façade, minimizing the amount of API knowledge the developer needs to have to be successful with the framework.
    [Show full text]
  • A Survey on Potential Privacy Leaks of GPS Information in Android Applications
    UNLV Theses, Dissertations, Professional Papers, and Capstones May 2015 A Survey on Potential Privacy Leaks of GPS Information in Android Applications Srinivas Kalyan Yellanki University of Nevada, Las Vegas Follow this and additional works at: https://digitalscholarship.unlv.edu/thesesdissertations Part of the Library and Information Science Commons Repository Citation Yellanki, Srinivas Kalyan, "A Survey on Potential Privacy Leaks of GPS Information in Android Applications" (2015). UNLV Theses, Dissertations, Professional Papers, and Capstones. 2449. http://dx.doi.org/10.34917/7646102 This Thesis is protected by copyright and/or related rights. It has been brought to you by Digital Scholarship@UNLV with permission from the rights-holder(s). You are free to use this Thesis in any way that is permitted by the copyright and related rights legislation that applies to your use. For other uses you need to obtain permission from the rights-holder(s) directly, unless additional rights are indicated by a Creative Commons license in the record and/ or on the work itself. This Thesis has been accepted for inclusion in UNLV Theses, Dissertations, Professional Papers, and Capstones by an authorized administrator of Digital Scholarship@UNLV. For more information, please contact [email protected]. A SURVEY ON POTENTIAL PRIVACY LEAKS OF GPS INFORMATION IN ANDROID APPLICATIONS By Srinivas Kalyan Yellanki Bachelor of Technology, Information Technology Jawaharlal Nehru Technological University, India 2013 A thesis submitted in partial fulfillment
    [Show full text]
  • Actionscript 3.0 from the Ground up Tour
    Adobe Presents Colin Moock’s ActionScript 3.0 From the Ground Up Tour Materials provided by O’Reilly Media, Inc. Welcome Key Learning Welcome to the ActionScript 3.0: From the Ground Up Tour! In collaboration with Colin Moock, FITC Design and Technology The following table lists some of today’s most important concepts. Events, O’Reilly, and participating academic institutions around the world, Adobe is thrilled to bring you this world-class day of training. Following the tradition of Flex Camp (http://flex.org/camp/) and the onAIR bus tour (http://onair.adobe.com/), this Concept Example lecture is an important part of Adobe’s ongoing initiative to bring knowledge to the development community. Classes are blueprints for objects. class VirtualPet { At Adobe, we understand that a tool is only useful when you know how to use it. And we’re committed to helping you gain that knowledge. So sit back, get ready for a high-paced day of learning, and most of all have fun! } Objects (or instances) are the things in a program, new VirtualPet() Links and Resources such as a number, a car, a button, a point in time The entire set of notes for today’s lecture are available at: Some classes are built into ActionScript, others are MovieClip, TextField, Sound, String custom-made. http://moock.org/lectures/groundUpAS3 A package contains a class so its name doesn’t package zoo { The code for the virtual zoo application can be obtained at: conflict with other names. class VirtualPet { http://moock.org/eas3/examples/moock_eas3_examples/virtualzoo_final } For a prose version of today’s lecture in book form, see Colin Moock’s Essential ActionScript 3.0 (O’Reilly, 2007).
    [Show full text]
  • Building a Hybrid Application Using React Native
    BUILDING A HYBRID APPLICATION USING REACT NATIVE LAB-University of Applied Sciences Bachelor of Engineering Information Technology Spring 2020 Pauli Sairanen Abstract Author(s) Type of publication Published Sairanen, Pauli Bachelor’s thesis Spring 2020 Number of pages 60 Title of publication Building a hybrid application using React Native Name of Degree Bachelor of Information Technology Abstract The objective of this thesis was to create a hybrid application that could be used at various events organized by the customer. The subgoals of the thesis were formed based on the requirements the customer had for the application. Research was done in order to demonstrate the different technologies used in mobile development as well as pros and cons of using either native, web or hybrid technologies for development. React Native was used as the development platform in this thesis. Further research was conducted in order to gain a better understanding of the operating principles of React Native and React, as well as other technologies required in the development process. The process of creating a hybrid application consisted of different work phases. The purpose of each phase was to implement the required features for the application in an organized manner. As a result, a working hybrid application was created according to the requirements specifications. The application was released on Google Play store and used at the event organized by the customer. Keywords React, React Native, hybrid application, mobile development, JavaScript Tiivistelmä Tekijä(t) Julkaisun laji Valmistumisaika Sairanen, Pauli Opinnäytetyö, AMK Kevät 2020 Sivumäärä 60 Työn nimi Building a hybrid application using React Native Tutkinto Insinööri (AMK) Tiivistelmä Opinnäytetyön tarkoituksena oli luoda hybridimobiilisovellus, jota voidaan käyttää erilaisissa asiakkaan järjestämissä tilaisuuksissa.
    [Show full text]
  • Slideshowpro for Flash Customization Guide
    SlideShowPro for Flash Customization Guide (Version 1.8.x) Contents Introduction.......................................................................................................................................................................................3 Customization.basics....................................................................................................................................................................4 How.to:.SlideShowPro.for.Flash.Button.Packs..................................................................................................................5 How.to:.Custom.navigation.buttons...................................................................................................................................... 7 How.to:.Embed.SWF.in.a.separate.HTML.document.....................................................................................................9 How.to:.External.navigation.....................................................................................................................................................12 How.To:.Change.default.English.text....................................................................................................................................13 How.to:.Prevent.XML.caching................................................................................................................................................. 14 How.to:.Dynamically.assign.an.XML.file..............................................................................................................................15
    [Show full text]
  • Tizen 2.4 Compliance Specification for Mobile Profile
    Tizen® 2.4 Compliance Specification for Mobile Profile Version 1.0 Copyright© 2014, 2015 Samsung Electronics Co., Ltd. Copyright© 2014, 2015 Intel Corporation Linux is a registered trademark of Linus Torvalds. Tizen® is a registered trademark of The Linux Foundation. ARM is a registered trademark of ARM Holdings Plc. Intel® is a registered trademark of Intel Corporation in the U.S. and/or other countries * Other names and brands may be claimed as the property of others. Revision History Revision Date Author Reason for Changes Tizen 2.2.1 Compliance Specification for 11 Nov. 2013 Tizen TSG Official release Mobile Profile, v1.0 Tizen 2.3 Compliance Specification for 14 Nov 2014 Tizen TSG Official release Mobile Profile, 1.0 Tizen 2.3.1 Compliance Specification for 22 Sep 2015 Tizen TSG Official release Mobile Profile, 1.0 Tizen 2.4 Compliance Specification for 22 Oct 2015 Tizen TSG Official release Mobile Profile, 1.0 Glossary Term Definition Application Binary Interface, the runtime interface between a binary software ABI program and the underlying operating system. Application Programming Interface, the interface between software API components, including methods, data structures and processes. Compliance Certified for full conformance, which was verified by testing. Conformance How well the implementation follows a specification. Cascading Style Sheets, a simple mechanism for adding style such as fonts, CSS colors, and spacing to web documents. Document Object Model, a platform and language-neutral interface that will DOM allow programs and scripts to dynamically access and update the content, structure and style of documents. DTV Digital Television, a target of the TV Profile.
    [Show full text]