Studi Komparasi Maintainability Antara Aplikasi yang Dikembangkan dengan Framework Flutter dan React Native

Muhammad Deta Aditya, Meredita Susanty

Abstract


Setiap tahunnya, jumlah pengguna aplikasi seluler terus bertambah. Hal ini menyebabkan pengembang aplikasi seluler dituntut untuk mengembangkan produknya dengan cepat. Framework antarmuka pengguna lintas platform Flutter dan React Native menjadi sangat populer karena kemampuannya untuk dikompilasi ke berbagai jenis sistem operasi perangkat seluler. Namun, di antara kedua framework tersebut, belum diketahui manakah yang memiliki maintainability yang lebih baik. Tahap perawatan perangkat lunak merupakan tahap yang memakan paling banyak waktu, tenaga, dan usaha. Sehingga, penting untuk mengetahui framework mana yang basis kodenya lebih mudah dirawat. Pada penelitian ini, aplikasi media komunikasi untuk taman kanak-kanak dengan kompleksitas use-case yang beragam digunakan sebagai bahan untuk membandingkan maintainability Flutter dan React Native. Basis kode yang dikembangkan masing-masing diukur menggunakan A Code Quality Metrics Model for React-Based Web Applications. Hasil penelitian menunjukkan bahwa basis kode yang ditulis menggunakan Flutter memiliki maintainability lebih tinggi dibandingkan React Native. Faktor yang mempengaruhinya adalah bahasa pemrograman yang digunakannya, yaitu Dart untuk Flutter dan JavaScript untuk React Native, serta cara penulisan komponen yang berbeda antara Flutter dan React Native

 

Mobile phone users are increasing every year. This demands mobile application developers to speed up their development time. Flutter and React Native, which are cross-platform user interface framework, become more popular due to their ability to compile to any mobile operating system. But, it is not yet known which of the two frameworks have the better maintainability. Maintenance is a step in software development process that consumes most of the development effort. So, it is important to know which framework produces the more maintainable code base. In this research, a communication media application for kindergarten with diverse use case complexity is used for comparing maintainability between Flutter and React Native. Each code base are measured using A Code Quality Metrics Model for React-Based Web Applications. The result is code base that are developed using Flutter has more maintainability than React Native. The influencing factors are programming languages used, which are Dart for Flutter and JavaScript for React, as well as how components in each frameworks are written.


Keywords


maintainability; code quality; mobile application; comparative study; flutter; react native

References


Anatomy of a Compiler and The Tokenizer. (n.d.). Retrieved May 21, 2022, from https://www.cs.man.ac.uk/~pjj/farrell/comp3.html

Arif. (2021, July 23). Aplikasi CERIA Bantu Belajar Daring Lebih Efektif. https://channel-indonesia.com/pendidikan/2021/07/23/aplikasi-ceria-bantu-belajar-daring-lebih-efektif/

Components and Props – React. (n.d.). Retrieved December 28, 2021, from https://reactjs.org/docs/components-and-props.html

Dehaghani, S. M. H., & Hajrahimi, N. (2013). Which factors affect software projects maintenance cost more? Acta Informatica Medica, 21(1), 63–66. https://doi.org/10.5455/aim.2012.21.63-66

Differentiate between ephemeral state and app state | Flutter. (n.d.). Retrieved December 28, 2021, from https://docs.flutter.dev/development/data-and-backend/state-mgmt/ephemeral-vs-app

Effective Dart | Dart. (n.d.). Retrieved May 21, 2022, from https://dart.dev/guides/language/effective-dart

FAQ - Flutter. (n.d.). Retrieved October 19, 2020, from https://flutter.dev/docs/resources/faq#why-did-flutter-choose-to-use-dart

GitHub - facebook/react-native: A framework for building native applications using React. (n.d.). Retrieved December 28, 2021, from https://github.com/facebook/react-native

GitHub - flutter/flutter: Flutter makes it easy and fast to build beautiful apps for mobile and beyond. (n.d.). Retrieved December 28, 2021, from https://github.com/flutter/flutter

GitHub - ionic-team/ionic-framework: A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript. (n.d.). Retrieved December 28, 2021, from https://github.com/ionic-team/ionic-framework

GitHub - xamarin/Xamarin.Forms: Xamarin.Forms Official Home. (n.d.). Retrieved December 28, 2021, from https://github.com/xamarin/Xamarin.Forms

Hunter-Zinck, H., De Siqueira, A. F., Vásquez, V. N., Barnes, R., & Martinez, C. C. (2021). Ten simple rules on writing clean and reliable open-source scientific software. PLOS Computational Biology, 17(11), e1009481. https://doi.org/10.1371/JOURNAL.PCBI.1009481

Introduction to declarative UI - Flutter. (n.d.). Retrieved October 19, 2020, from https://flutter.dev/docs/get-started/flutter-for/declarative

Introduction to declarative UI | Flutter. (n.d.). Retrieved December 28, 2021, from https://docs.flutter.dev/get-started/flutter-for/declarative

Introduction to widgets - Flutter. (n.d.). Retrieved October 19, 2020, from https://flutter.dev/docs/development/ui/widgets-intro

Introduction to widgets | Flutter. (n.d.). Retrieved December 28, 2021, from https://docs.flutter.dev/development/ui/widgets-intro

ISO - ISO/IEC 25010:2011 - Systems and software engineering — Systems and software Quality Requirements and Evaluation (SQuaRE) — System and software quality models. (n.d.). Retrieved May 21, 2022, from https://www.iso.org/standard/35733.html

J.Clement. (2019). Annual number of mobile app downloads worldwide 2020. Statista. https://www.statista.com/statistics/271644/worldwide-free-and-paid-mobile-app-store-downloads/

Jagiełło, J. (2019). PERFORMANCE COMPARISON BETWEEN REACT NATIVE AND FLUTTER. UMEA University.

Jang, K. ae, & Kim, W. J. (2021). A method of activity-based software maintenance cost estimation for package software. Journal of Supercomputing, 77(8), 8151–8171. https://doi.org/10.1007/s11227-020-03610-6

JavaScript Environment · React Native. (n.d.). Retrieved December 28, 2021, from https://reactnative.dev/docs/javascript-environment

Lin, Y., Li, M., Yang, C., & Yin, C. (2017). A code quality metrics model for react-based web applications. Lecture Notes in Computer Science (Including Subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics), 10363 LNAI, 215–226. https://doi.org/10.1007/978-3-319-63315-2_19

Maintainability = productivity | SonarQube. (n.d.). Retrieved May 21, 2022, from https://www.sonarqube.org/features/maintainability/

Martin, R. C. (2008). Clean Code: A Handbook of Agile Software Craftsmanship (1st ed.). Prentice Hall PTR.

Rachow, P., Schroder, S., & Riebisch, M. (2018). Missing clean code acceptance and support in practice - An empirical study. Proceedings - 25th Australasian Software Engineering Conference, ASWEC 2018, 131–140. https://doi.org/10.1109/ASWEC.2018.00026

Rahul Raj, C. P., & Tolety, S. B. (2012). A study on approaches to build cross-platform mobile applications and criteria to select appropriate approach. 2012 Annual IEEE India Conference, INDICON 2012, 625–629. https://doi.org/10.1109/INDCON.2012.6420693

Ren, Y., Xing, T., Chen, X., & Chai, X. (2011). Research on software maintenance cost of influence factor analysis and estimation method. 2011 3rd International Workshop on Intelligent Systems and Applications, ISA 2011 - Proceedings. https://doi.org/10.1109/ISA.2011.5873461

S.O’Dea. (2020, October). Mobile OS market share 2021. https://www.statista.com/statistics/272698/global-market-share-held-by-mobile-operating-systems-since-2009/

Singh, C., Sharma, N., & Kumar, N. (2019). Analysis of software maintenance cost affecting factors and estimation models. International Journal of Scientific and Technology Research, 8(9), 276–281.

Sommerville, I. (2016). Software Engineering Tenth Edition. Pearson.

State and Lifecycle – React. (n.d.). Retrieved December 28, 2021, from https://reactjs.org/docs/state-and-lifecycle.html

Transpiler. (n.d.). Retrieved May 21, 2022, from https://devopedia.org/transpiler

Wu, W. (2018). React Native vs Flutter, Cross-platforms mobile application frameworks.




DOI: https://doi.org/10.31294/inf.v9i2.12885

Refbacks

  • There are currently no refbacks.


Copyright (c) 2022 Muhammad Deta Aditya, Meredita Susanty

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Index by:

 
 Published LPPM Universitas Bina Sarana Informatika with supported by Relawan Jurnal Indonesia

Jl. Kramat Raya No.98, Kwitang, Kec. Senen, Jakarta Pusat, DKI Jakarta 10450, Indonesia
Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License