Artículo original/ Original article Scenarios to use React Native, native code or integrate both technologies Escenarios para utilizar React Native, código nativo o integrar las dos tecnologías C.F. Valarezo1 R. Triviño2 1ThoughtWorks, Quito, Ecuador E-mail: [email protected], [email protected] 2Universidad de las Fuerzas Armadas, Sangolquí, Ecuador E-mail: [email protected] Abstract Resumen Over the last years, different techniques and En los últimos años, diferentes técnicas y frameworks frameworks have risen to provide a solution for han surgido con el fin de proveer una solución para creating a cross-platform application. The goal is to crear aplicaciones cross-platform. El objetivo es develop only one source code that can be deployed to desarrollar un solo código que puede ser desplegado different operating systems and provide a native en diferentes sistemas operativos y proveer una experience. Since 2015, React Native has been experiencia completamente nativa. Desde 2015, React promoted as an option to build mobile applications to Native ha sido promocionado como una opción para write the code once and deploy it to any platform desarrollar aplicaciones móviles con el objetivo de seamlessly. In the current time, there is not other escribir el código una sola vez y desplegarlo en library that promotes native mobile development cualquier plataforma perfectamente. Al momento no using JavaScript. This work makes an experimental hay otra librería JavaScript que permita el desarrollo analysis with an unbiased vision, based on the de aplicaciones móviles nativas. Este trabajo realiza application development experience using React un análisis experimental con una visión imparcial, v2.n1.2020.01 - Native and native code of several mobile applications. basada en la experiencia del desarrollo de It analyses different scenarios to consider a aplicaciones móviles utilizando React Native y código technology or framework to build a mobile nativo. Analiza varios escenarios para elegir application. Conclusions state that the election of analíticamente código nativo, React Native o una native code, React Native, or a mix of both relay on combinación de ambos para desarrollar una time, budget, the experience of the development team, aplicación móvil. Algunas conclusiones encontradas and the features of the application. sostienen que la elección de la tecnología depende de la naturaleza del proyecto, tiempo, presupuesto, https://doi.org/10.36500/nrtt experiencia del equipo de desarrollo y los Index terms−− React Native; iOS; Android; hybrid requerimientos de la aplicación. mobile apps; mobile applications. 698X, DOI 698X, DOI - Palabras clave−− React Native; iOS; Android; hybrid mobile apps; aplicaciones móviles. ISSN N° 2661 ISSN Recibido: 16-11-2019, Aprobado tras revisión: 31/07/2020 Forma sugerida de citación: C. Valarezo y R. Triviño, “Escenarios para utilizar React Native, código nativo o integrar las dos tecnologías”, ÑAWPAY Revista Técnica Tecnológica, vol. 2, no. 1, pp. 1-5, 2020. 1 ÑAWPAY Revista Técnica Tecnológica Vol. 2, No. 1, 2020 same language but have the graphics be rendered 1. INTRODUCTION differently depending on the targeted platform and be real Creating a mobile application often requires the native components. developers to create one for Android and one for iOS, the Facebook call this approach "learn once, write anywhere" two leading operating systems for mobile devices. The which describes what React Native is all about. two applications may have the same layout and logic but According to Facebook official documentation, several components of the user interface (UI) differ and developing a React Native application consists on the applications themselves need to be developed in two building a real mobile application but writing its code different languages. This development process is with JavaScript rather than Swift or Java [6]. gruesome since it is time consuming to create two Additionally, NPM Inc [7] offers a wealth of libraries to applications and it requires two different sets of do different tasks that even include interactions with knowledge. There have been attempts to create hardware. Likewise, in case the project demands it, there techniques, services or frameworks in order to solve this is official documentation that affirms that it is possible to problem, but sometimes these hybrids have not been able include native modules in it [8]. to provide a native feeling of the resulting applications Therefore, the objective of this work is to make an [1]. empirical analysis of how React native or Native code In the last years, different techniques and frameworks should be used in key functional requirements for any have risen in order to provide a solution for this. The goal project like budget, time, knowledge, user experience, is to only develop one service which can either be hardware involved, testing, documentation and others, deployed to different operating systems or provide a versions and releases of SDKs, operating systems and homogeneous and native feeling. However, even though libraries. There were not considered other JavaScript the development cost of hybrid applications are libraries since React Native is the only library to develop significantly lower than natives, the hybrids cannot native mobile applications and integrate with native provide the same native user experience and therefore languages. The rest of the paper is organized as follows. they have not been successful in replacing native Section II describes when to use React native. Section III development. [2] presents guideline of when to use native code. Section IV React, sometimes referred to as React.js, is a JavaScript presents aspect when to use React Native plus native framework developed by Facebook and released as open code and Section V concludes the paper with a summary source in 2013 in order to aid the development of the advances, challenges and problems. community to build interfaces. Facebook were in need of a framework that could solve their problem with complex 2. WHEN TO USE REACT NATIVE user interfaces which had data that changed over time. Tom Occhino, who is an engineer at Facebook, said One of the most remarkable mobile projects already “React wraps an imperative API with a declarative one. developed and delivered by ThoughtWorks Quito React’s real power lies in how it makes you to write included a bridge between React Native and native code. code” [3]. A declarative programming style describes The breaking feature on that hybrid application included: what to do but not how it should be done, resulting in less to display a video on the screen of the mobile device code while an imperative programming style however whilst the camera was recording audio and video from describes how to do it. [4] the person who was using the application. After some At the React.js conference in 2015 Facebook introduced spikes with JavaScript libraries that record audio and their new framework React Native, a framework they video, the bridge between React Native and native code thought would revolutionise the way mobile applications became the only option to continue the project, since are created. When React Native was released, there was none of those JavaScript libraries allowed that particular only support for iOS but since then the support for behaviour. That moment was crucial for the team as there Android has been added and is still expanding. Facebook were two options, either start over the project with native have started to become more opensource and is the code, after three months of development, or bridging approach they have chosen for React Native. Even React Native with native code to avoid start the project though the source is not completely open yet, Facebook again from the beginning. Eventually, the bridge worked attempt to achieve this and contemplates that the on both platforms (iOS and Android) with a seamless community will contribute to improve the framework [6]. integration of JavaScript libraries, Swift & Java classes, The main purpose of React Native is simple, a developer events of the respective operating system and the should not require the knowledge or need to spend involved hardware (camera, storage and microphone). superfluous time in order to create a mobile application The languages Swift and Java were considered since at least two applications need to be developed in respectively for each platform due to the support and order to support both iOS and Android. Since different documentation for mobile development. After that platforms have different looks, feels, and capabilities, particular experience the analysis, based on practical there cannot be an application which is homogeneous on work, to choose carefully on native code, React Native or all operating systems. However, since it is the graphical the bridge between, relies on the following criterion: interface that differs, the development could base on the 2 Scenarios to use React Native, native code or integrate both technologies. ÑAWPAY Revista Técnica Tecnológica complete interaction between the software and the hardware. In fact, there is a likelihood to have side effects 2.1 Budget at some point in the project. An example of a complex In every project, budget is a primarily point to analyze interaction with hardware is, overlapping the mirroring [9]. Thus, consider React Native if the budget is limited, camera with a video whilst the device is recording audio and the application has to be deployed to different and