Miikka Oksanen Cross-platform UI Development: React vs Svelte Metropolia University of Applied Sciences Bachelor of Engineering Information and Communication Technology Bachelor’s Thesis 20 May 2021 Abstract Author: Miikka Oksanen Title: Cross-platform UI Development: React vs Svelte Number of Pages: 79 pages Date: 20 May 2021 Degree: Bachelor of Engineering Degree Programme: Information and Communication Technology Professional Major: Software Engineering Instructors: Simo Silander, Senior Lecturer Tommi Lundell, R&D Squad Group Leader at Nokia Petteri Hiisilä, Senior Interaction Designer at Nokia This thesis is part of a project done for Nokia. The goal was to gain insights about four UI frameworks - React, Svelte, React Native and Svelte Native - that will be used for determining which of the two native UI frameworks would be a better base for Nokia’s own native UI framework. Nokia’s native UI framework will be used to build customer applications for smartphones. Each of the four frameworks was used to implement a front-end application GeoHub. The implementation processes were conducted with the purpose of gaining information about the development experience that the UI frameworks offer. Each GeoHub version (excluding GeoHub Svelte Native) was developed to the point that they could be considered completed. The development experiences that the frameworks provided during the implementation of each GeoHub version were compared through five development experience attributes. React and React Native came out on top of their counterparts in this comparison. A major reason why Svelte and Svelte Native did not score as well as their counterparts was due to their immaturity. Thus, it was suggested that the progress of those technologies should be monitored. It was also discovered that the amount of code that could be reused between web and the native implementations of GeoHub was low. The reason for this was deemed to be the extensive use of third party npm packages and the difference in display sizes between desktop and smartphone displays. Keywords: cross-platform UI development, React, React Native, Svelte, Svelte Native Tiivistelmä Tekijä: Miikka Oksanen Otsikko: Järjestelmäriippumaton käyttöliittymäkehitys: React vs. Svelte Sivumäärä: 79 sivua Aika: 20.5.2021 Tutkinto: Insinööri (AMK) Tutkinto-ohjelma: Tieto- ja viestintätekniikka Ammatillinen pääaine: Ohjelmistotuotanto Ohjaajat: Lehtori Simo Silander R&D tiimin johtaja (Nokia) Tommi Lundell Vuorovaikutussuunnitelija (Nokia) Petteri Hiisilä Tämä opinnäytetyö on osa Nokialle tehtyä projektia. Projektin tavoitteena oli kerätä tietoa neljästä käyttöliittymäsovelluskehyksestä (React, Svelte, React Native, Svelte ja Svelte Native). Tätä tietoa käytetään apuna päättämään, kumpaa kahdesta natiivista sovelluskehyksestä (React Native, Svelte Native) kannattaa käyttää perustana Nokian omassa natiivissa sovelluskehyksessä. Nokian natiivia sovelluskehystä tullaan käyttämään asiakkaille suunnattujen älypuhelinsovellusten kehittämisessä. Kullakin sovelluskehyksellä toteutettiin GeoHub-käyttöliittymäsovellus. Näiden prosessien tavoitteena oli kerätä tietoa kunkin sovelluskehyksen tarjoamasta kehittämiskokemuksesta. Kolme neljästä GeoHub-sovelluksesta saatiin kehitetyiksi hyväksyttävään tilaan. ”Svelte Native”:lla kehitettyä sovellusta ei saatu valmiiksi. Sovelluskehyksien tarjoamia kehittämiskokemuksia vertailtiin viidessä osa- alueessa. React ja React Native pärjäsivät vastaosiaan paremmin vertailussa. Suuri syy, miksi Svelte ja Svelte Native eivät pärjänneet vertailussa, perustui niiden uutuuteen. Täten ehdotettiin, että näiden teknologioiden kehitystä olisi seurattava. Todettiin myös, että kierrätettävän koodin määrä verkko- ja natiivitoteutuksien välillä oli alhainen. Syyksi nähtiin laaja kolmannen osapuolen npm-pakkauksien käyttö sekä näyttökokojen eroavaisuus pöytäkone- ja älypuhelinnäytöissä. Avainsanat: järjestelmäriippumattomien käyttöliittymien kehitys, React, React Native, Svelte, Svelte Native Contents List of Abbreviations 1 Introduction 1 2 Cross-platform UI Development 1 2.1 Definition 2 2.1.1 Cross-platform Software 2 2.1.2 UI and Its Development 3 2.2 Benefits of Using Cross-platform UI Frameworks 6 2.3 Problems Related to Cross-platform UI Development 7 3 React - Reigning King of UI Frameworks 11 3.1 History of React 11 3.2 Concepts 12 3.2.1 React Components 13 3.2.2 Virtual DOM 14 3.3 Syntax 16 4 React Native - Smartphone Servant of React 20 4.1 Origin Story 20 4.2 Adding “Native” to React 22 4.3 Syntax 23 5 Svelte - Odd Challenger 26 5.1 Performant Svelte 26 5.2 Not Your Traditional Web UI Framework 29 5.3 Reactive UIs with Svelte 30 5.4 Syntax 31 5.4.1 Reactive Statements with “$” Label 32 5.4.2 Value Bindings 33 6 Svelte Native - Work in Progress 34 6.1 Svelte Native and NativeScript 34 6.2 Syntax 36 7 Development Process 40 7.1 Development Environment and Version Control 40 7.2 Application Idea 41 7.3 Designing GeoHub 42 7.4 GeoHub 44 7.4.1 Use Cases 44 7.4.2 GeoHub UI in Screenshots 47 7.5 Implementation Processes 54 7.5.1 Evaluating Official Framework Documentation 55 7.5.2 Utilizing npm Packages 59 7.5.3 Framework Setup 60 7.5.4 Interactive Map with Leaflet 61 7.5.5 Reverse Engineering Nokia’s React components 62 7.5.6 Material Design UI Component Libraries 63 7.5.7 Working with React and Svelte 66 7.5.8 Working with React Native and Svelte Native 68 8 Conclusion and Future Plans 69 References 74 List of Abbreviations UI: User interface. A two-way interaction layer between humans and machines. HTML: HyperText Markup Language. A text-based markup language for defining web page structures. CSS: Cascading Style Sheets. A text-based style sheet language for altering the appearance of a structure defined in a markup language. XML: Extensible Markup Language. A standardized, text-based markup language for writing human- and machine-readable documents. API: Application programming interface. A collection of related interfaces that defines how one can interact with the software or hardware that owns it. DOM: Document Object Model. A data representation of the structure and contents defined in a HTML or XML file. APK: Android package. An installation file containing a single Android application. AST: Abstract syntax tree. A data structure representing source code structure which is commonly used by compilers for analysing semantic correctness of source code. npm: Node package manager. A collection of JavaScript software tools that automate the process of installing, removing and updating JavaScript software packages. IDE: Integrated development environment. Software that provides tools for efficient software development. 1 1 Introduction Nokia is looking to create a mobile-app development framework to support their existing web app framework. The framework will be used to create mobile applications that support the presentation of Nokia’s products to potential customers. Additionally, the framework should either work with Nokia’s existing web application framework which was built using React or be good enough to warrant the modification of their web framework. This is because the mobile framework would also be used to make smartphone application versions of existing Nokia web applications. The task was to evaluate two native UI frameworks, React Native and Svelte Native, as potential candidates to act as a base for Nokia’s smartphone UI development framework. Consequently, the web UI frameworks React and Svelte needed to be examined as well as the native UI frameworks are based on them. The focus was to be on the developer experience these technologies provide. An ambitious plan was made to evaluate the frameworks. It consisted of building four similar applications, two web applications with React and Svelte and two smartphone applications with React Native and Svelte Native. During this process, the pros and cons of the technologies would be documented. Once completed, convincing arguments could be presented with documentation to back them up. 2 Cross-platform UI Development Before introducing each of the UI frameworks, it is good to have an understanding on where and how they can be used. This chapter also introduces more precise definitions for some of the more ambiguous terms used in the thesis. 2 2.1 Definition The term “cross-platform UI development” means the development of UIs that work on multiple platforms [1]. To properly define the term, it needs to be broken down into two parts: Cross-platform software and UI development. 2.1.1 Cross-platform Software Cross-platform software, by definition, refers to a piece of software that has been implemented in a way where it will work on multiple computing platforms. A computing platform is simply an environment where software can be run. Operating systems, web browsers and hardware are all examples of computing platforms. A single computing device typically contains multiple layers of computing platforms. For example, a piece of hardware runs an operating system which in turn runs a web browser. [1.] There are many ways to write cross-platform software. In the early days, developers implemented separate versions for each computing platform. This way of development was costly and slow as each version required developers that had knowledge of the inner workings of the underlying platform. Nowadays the process is much more efficient due to connecting interfaces that abstract the difference between computing platforms. [1.] In this thesis, the platforms in the term cross-platform are narrowed down to smartphone operating