The Flutter Framework: Analysis in a Mobile Enterprise Environment
Total Page:16
File Type:pdf, Size:1020Kb
POLITECNICO DI TORINO Master’s Degree in Computer Engineering Master’s Degree Thesis The Flutter Framework: Analysis in a Mobile Enterprise Environment Supervisors Candidate Prof. Giovanni MALNATI Daniele PALUMBO Ing. Fabio FERRERO July 2021 Abstract In the mobile field there are mainly two operating systems, Android from Google and iOS from Apple. To release applications on both it is necessary to develop separate codes in the respective languages of the two operating systems. Over the years, many companies created frameworks for cross-platform development of mobile applications that allow the same code to be used on multiple operating systems. Unfortunately, the advantages of having a single codebase are often balanced by the limitations that a framework introduces mainly regarding performance and integration with the mobile operating system. For this reason it is necessary to analyze a new framework when it is released to evaluate its effectiveness and in this thesis I analyze the Flutter framework. Flutter is a framework released by Google in 2018 that experienced a rapid growth in popularity in recent years. Flutter proposes a declarative approach to UI programming and promises both a performance equivalent to the native execution, and graphics which are indistinguishable from native ones. Flutter is written in Dart and is a cross-platform framework based on a compiled approach. It uses a custom engine to render each element on the screen within a 2D Skia canvas. Flutter’s entire rendering pipeline is implemented directly by the framework and is independent of the native components of the underlying operating system. It therefore differs from other cross-platform frameworks such as React Native or Ionic. Dart is a procedural language with functional aspects released in 2011. Furthermore, Dart is a language that supports both compiled and interpreted execution. This allows Flutter to have a fast and dynamic development environment, offering features such as the Hot reload. Subsequently, the code can be compiled into machine code and executed without the overhead of interpretation. In this work I study Flutter focusing on the needs of an enterprise work envi- ronment, where it is necessary to rely on tested and effective systems. My work begins by analyzing what is the state of the art in cross-platform development and what approaches exist to create a single codebase. I also include in the analysis the other best known frameworks on the market. Next, I focus my thesis on the technical aspect of Flutter, analyzing the techniques for building the UI and the mechanisms for managing data and the internal state. In addition, I expand my work analyzing Dart and the whole development environment. One of the main objectives of this thesis is to analyze the execution performance of Dart and the Flutter framework in different contexts. The results obtained show that Flutter performance values are two to three times lower than native results. The deterioration in performance remains constant with increasing complexity. However, in very simple cases the Flutter results are identical to native ones. On the other hand, compared to React Native, Flutter achieves better results both in resource usage and average FPS (Frames Per Second), making applications written in Flutter effectively indistinguishable from native applications. Moreover, the documentation of Dart and Flutter is complete and well detailed and the developer community has grown rapidly thanks to the open-source approach. From my analysis I obtained positive results on the effectiveness of Flutter as a valid alternative to native development. ii i Acknowledgements Scrivo questi ringraziamenti l’ultima sera prima di consegnare questa tesi. Mi sento che ho completato la prima parte del percorso che ho iniziato tanti anni fa. Questi 3 anni a Torino sono stati incredibili e per questo voglio ringraziare tutte le persone che mi sono state vicino. Sono davvero contento di aver preso la decisione di partire. Tante cose sono cambiate nella mia vita e ho avuto la libertà di fare le scelte che sentivo più giuste. Voglio però con tutto il cuore dedicare questi ringraziamenti alla mia mamma Cristina. Quando sono partito per Torino mamma aveva già scoperto di avere il cancro. Nonostante questo, dal primo momento ha appoggiato la mia scelta di partire. Mi ha sempre incentivato a dare il meglio e non vedeva l’ora di vedermi laureato. Mi diceva che era orgogliosa di me per come ero cresciuto, riferendosi al me stesso del primo anno di ingegneria a Roma che l’università l’aveva mollata. Fino a quando hai potuto sei stata accanto a me e mi hai dato forza e voglia di fare. Sento di non aver disatteso le aspettative e ho fatto tesoro di tutto quello che mi hai detto negli anni mamma. Oggi concludo questo percorso di studi e vorrei tu fossi qui per vedermi e festeggiare con me. Ringrazio il mio papà Biagio, Gino per gli amici, che insieme a mamma non hanno fatto mancare mai nulla a me e mio fratello. Ci avete dato la possibilità di studiare e di diventare gli adulti che vogliamo. Mi avete dato tanta fiducia quando ne ho avuto bisogno. Ti voglio bene papà. Ringrazio mio fratello Davide che è la persona più spensierata che conosco, ti voglio bene perché sei sempre pronto a ridere e scherzare, o a parlare dei razzi per Marte, o per cantare Shinzo So Sasayego. Ti voglio bene fratellino e sono sicuro che arriverà anche per te il momento di festeggiare la laurea. Ringrazio la mia Giulia che è stata con me nella parte più difficile di questo percorso. Sei entrata nella mia vita come una compagna di corso e ora sei la scoperta più bella che ho fatto qui a Torino. Devo ringraziarti sicuramente per avermi supportato nei momenti peggiori, quando inizio a lamentarmi di tutto e borbotto. Ma ti ringrazio anche per le possibilità che ci stiamo costruendo insieme e che mi danno fiducia per il futuro. Voglio ringraziare i miei amici di Roma che anche vivendo lontano mi hanno ii fatto sentire a casa ogni volta che stavo con loro, come se in realtà non fossi mai partito. E’ anche grazie a voi che Ostia per me rimane un posto speciale. Infine lascio un ringraziamento e un saluto a tutte le persone che hanno condiviso con me questi anni e che, ognuno a modo suo, hanno contribuito a rendere speciale la mia magistrale. “Nel dubbio spegni e riaccendi” Primo informatico della storia iii Table of Contents List of Tables vii List of Figures viii 1 Introduction 1 2 State of the art in cross-platform frameworks 4 2.1 Goal and scenario...........................4 2.2 Cross-platform approaches....................... 10 2.2.1 Hybrid approach through WebViews............. 11 2.2.2 Interpreted approach...................... 12 2.2.3 Web app approach....................... 12 2.2.4 Compiled approach....................... 13 2.3 Cross-platform frameworks....................... 14 3 Flutter framework analysis 19 3.1 Flutter architectural overview..................... 19 3.2 User interface and UI development.................. 21 3.2.1 Reactive and declarative approach............... 21 3.2.2 Building complex layouts.................... 25 3.2.3 Assets management....................... 31 3.3 Flutter navigation and routing..................... 33 3.4 Data and backend............................ 36 3.4.1 State management....................... 36 3.4.2 Data persistence........................ 41 3.4.3 Internationalization....................... 44 3.5 Platform integration.......................... 45 3.5.1 Supported platforms...................... 48 3.5.2 Flutter wearable support.................... 49 v 4 Flutter for Enterprise mobile app development 52 4.1 Development environment and tools.................. 52 4.1.1 Dart language.......................... 52 4.1.2 Editors for Dart and Flutter.................. 55 4.1.3 Test suite............................ 57 4.1.4 Code Analysis and Linting in Flutter and Dart....... 59 4.2 Flutter performances.......................... 60 4.2.1 Rendering speed........................ 62 4.2.2 Computation speed....................... 70 4.3 Development time............................ 72 4.4 Migration to Flutter.......................... 74 5 Implementation of a real case scenario 81 5.1 Simple case: user personal information section............ 81 5.2 Advanced case: personal financial management section....... 88 6 Results 96 6.1 Flutter advantages and disadvantages................. 96 6.2 Development experience........................ 101 7 Conclusions and future work 103 Bibliography 105 vi List of Tables 4.1 Performance for the execution of the same Android application made of a list of a thousand elements in Kotlin, Flutter and React Native. 64 4.2 Performance for the execution of the same iOS application made of a list of a thousand elements in Swift, Flutter and React Native... 64 4.3 Performance for the execution of the same Android application made of a grid of 200 animated images in Kotlin, Flutter and React Native. 66 4.4 Performance for the execution of the same iOS application made of a grid of 200 animated images in Swift, Flutter and React Native.. 66 4.5 Table with CPU usage comparison obtained with several iterations on Matilda Olsson’s test application made of a simple list page, a Home page and a navigation bar.................... 68 4.6 The table shows the distribution of programming languages in the Ebay Motors team project. The code in Dart is shared between Android and iOS applications...................... 72 4.7 Performance comparison for the same development tasks between a Flutter app and a React native app made by Gabriel Basilio Brito[19] 73 4.8 Performance comparison for the same development tasks between a Flutter app and a React native app performed by the channel Smart Code App[20].............................. 74 vii List of Figures 2.1 The figure shows some noticeable graphical differences between the most common components of the graphical interface in iOS and Android..................................7 2.2 The figure shows the same version of Google’s Gmail application on iOS - left - and on Android - right.