Recyclone
Research
Web App | Mobile App | |
Available Devices | Both desktop and mobile device |
Mobile device |
Download | Do not need (functions in browser) |
Required |
Access to Device/System Resources | Limited | Available |
Security | Higher risk of poor security | Must be approved by app store |
Performance Speed | Slower | Faster |
Update | Update themselves | Need further action |
Table 1. Comparison of Web app and Mobile app [1,2]
One of our major requirements was making mobile-friendly application. There are two main approaches to deploy application, Mobile application and Web application. In order to fullfill daily use of customers, we decided to develop application which is deployable to mobile device. As our project is aiming gamified process of recycling, our project requires fast performance and access to device/system resources, such as camera and GPS. To check if customers are properly recycling, our project needs verification system requring better security. Even though Mobile app has some complex aspects to get started with, it can support our essential features better than web app.
There are three main approaches for app development. Native developing is developing app using respective native tech stacks/SDK supporting perfect compatibility with the operating system [3]. Cross-platform developing is making app which as one foundation but runnable to multiple platforms (it is more like translating codebase into targeted platform) [3]. Hybrid app is developed with web development tech and it runs on a device using special native container [4]. Following table compares between those three devleopment.
Native | Cross-Platform | Hybrid | |
Rendering Engine | Native | Native | Browser |
Dev Cost | High | Low | Lowest |
Access to OS | Full access | Partially limited | Limited |
Codebase | One per platform | One with multiple platform | One with multiple platform |
Code Reuse | No code reuse | Code reuse | Code reuse |
UI | Best | Better | Good |
Overall Performance | Fast | Slow | Slow |
Testing | Good but only one platform | Good and easy to debug with one codebase | Not good, better with web |
Table 2. Comparison of App Developments [4,5]
First, we considered that we are working in small team with limited time. So cost-efficiency of development was considered. Native development was risky in that case.
Second, we considered the quality of application. Of course, it should work well but also we seriously considered UI performance. According to category of 'rendering engine', 'access to OS', 'UI', and 'overall performance', Hybrid development was exclude from priority.
Third, scalability was considered due to the requirement we had. Considering this and the above issues, Native development was completely excluded from the option.
To conclude, considering those four aspects, Cross-platform development was chosen as our main app development.
Choosing front-end framework was the hardest comparison and research we had. Flutter vs React Native is one of the most controversial topic among specialists and it is hard to say which one is better. So we had to compare case by case precisely.
Those frameworks are supported by two major IT companies. Flutter is created by Google and React Native is created by Facebook [6].
Both are showing great native performance, in some cases it performs like Native developed app [6].
Both are free and opensource but they are a bit different [6]. React Native is more like opensource relying much on third-party, it can be beneficial in opensource perspect [6]. However, this can cause people to wait both third party and Facebook to fix the bug sometimes [7]. Compared to React Native, Flutter is famous as UI toolkit, it is more like huge box trying to provide every essential stuff [6].
Both can be run on iOS, Andriod, and desktop web [6].
Flutter is using Dart and React Native is using Javascript. Both are object-oriented language [6]. As React Native is using Javascript, it has good integration with back-end using Javascript, Typescript, Graphql. In this case, we already chosen Spring Boot Java as our back-end API so there is no big merit.
It is hard to say what is really popular, so we measured popularity in diverse aspect.
Stack Overflow Voices | Github Contributors |
Google Trends Queries per day | |
Flutter | 68.8% | 13k | 86 |
React Native | 57.9% | 9.1k | 58 |
Table 3. Popularity Stat of Cross-Platform in 2020 [8]
'StackOverflow Voices' represents how many specialists prefer to use Flutter and React Native. 'Github Contributors' presents number of contributors to opernsource project. 'Google Trends Queries per Day' shows frequency of particular query in search.
Size of community is also different. React Native is 3 years older and it has a huge source of JavaScript so it is maintaining huge size of community, however Flutter got more active recently overtaking React Native community [8,9].
Flutter is normally considered as easy-to-learn compared to React Native [6]. Also, Google is making huge effort to beginners, they arranged essential documents and learning souces in one place [10].
Google is trying to dominate the Cross-platform market, they are supporting a lot comparing to React Native [11,12]. Recently there was big update toward flutter 2.0, and it was easy to find that google is looking forward for more future [12]. In 2.0 they tried to cover their weakness related to Progressive web apps (PWAs), Single page apps (SPAs), and Enabling shared code for both mobile apps and web [13]. This was one of the main Flutter's weak point but Google made great improvement in short time.
Immensive support and update is great benefit using Google product, however there is also risk compared to Facebook. It has risk that Google kills their own software so much such as Google trip, In Box.... even though they put great effort, they just killed it when they found other solution[14].
Both Flutter and React Native have wonderful graphical features, but their approaches toward graphic are quite different. Flutter app is easy to recognise that app is made by Flutter [15]. Flutter app views same regardless of OS, some personal effort is required to get rid of its 'Googlised' style. However, it contains wonderful animating UIs and they are easy to implement.
On the other hand, React Native respects host rules, it views different depends on OS. React Native inherits native visual elements and appearance so it looks more native and it looks different depends on the OS [15].
We could have known that both React Native and Flutter can show beautiful performance with nice scalability, however there were few points why we decided to use Flutter.
Firstly, Flutter is beginner friendly, as we mentioned before we have limited times so we need to learn in short time. Also, it provides essential stuff by itself, so we don't have to wander around searching for information and sources.
In addiction, Flutter seems to have better future with nice popularity. It is always beneficial to use trendy tools. There is some risk that Flutter might shut down, but it seems unlikely as Google presented their intention with recent update.
There are many ways to program back-end API. There are many ongoing competition especially regarding 'NodeJs vs Spring Boot' and 'NodeJs vs Python'. In our case, we mainly discussed between NodeJs and Spring Boot. Those two have significant different style.
To be precise, their base is different. Spring Boot is Java framework, while NodeJs is runtime environment of Javascript [17].
NodeJs uses Javascript, as many Javascript community do, NodeJs community is growing rapidly [17].
Spring Boot uses Java, as many Java community do, its community is mature and thriving [17]. Furthermore, it has benefit that it is supported by all devices and operating system [16].
Spring Boot is based on Java, so it has long-term support and maintainability [17].
NodeJs is recent technology, it is not mature enough with some bugs and freqent inconsistent versions [17].
Spring Boot is well-known for its security, it has in-built language security features embedded by java compiler. It also makes itself trustworthy with the machine [16].
On the other hand, NodeJs is new with light and fast performance, but it is less secured than Spring Boot [17].
Spring Boot is multi-threaded, so it can handle multiple tasks concurrently [16].
NodeJs is single threaded, so its system structured the thread to perform efficiently to handle other request as soon as possible [16].
NodeJs is recent technology, so it light with nice scalable environment [16].
Spring Boot has been a while so it is a bit heavy with stable environment [16].
Our app is aimed to make smooth connection between manufacturers and many customers, so our back-end API needs to handle many requests at the same time. Also, we need stable, secured, highly guranteed API because we need solid system of verification and cycle of quest and incentive.
[1] J. Tarud, “Mobile Apps vs Web Apps: What's The Difference?,” Koombea, 04-Dec-2020. [Online]. Available: https://www.koombea.com/blog/difference-between-mobile-apps-and-web-apps/. [Accessed: 10-Dec-2020].
[2] E. Stevens, “What Is The Difference Between A Mobile App And A Web App?,” Mobile Apps vs. Web Apps - What's The Difference?, 03-Apr-2018. [Online]. Available: https://careerfoundry.com/en/blog/web-development/what-is-the-difference-between-a-mobile-app-and-a-web-app/#:~:text=Mobile%20apps%20vs.-,web%20apps,Android%20for%20a%20Samsung%20device.&text=Web%20apps%2C%20on%20the%20other,you're%20viewing%20them%20on. [Accessed: 10-Nov-2020].
[3] M. Bohdan, “Native, Cross-Platform, and Hybrid App Development: What to Choose,” Forbytes, 05-Nov-2020. [Online]. Available: https://forbytes.com/digital-transformation/native-cross-platform-and-hybrid-app-development-what-to-choose/. [Accessed: 10-Nov-2021].
[4] “What Hybrid App Development Framework Should You Use for Your Projects in 2020? Top 3,” Medium, 24-Jun-2020. [Online]. Available: https://medium.com/@OPTASY.com/what-hybrid-app-development-framework-should-you-use-for-your-projects-in-2020-top-3-999662b30cce. [Accessed: 10-Nov-2020].
[5] S. Korolev, “Mobile App Development Approaches Explained,” Blog by Railsware, 22-Oct-2020. [Online]. Available: https://railsware.com/blog/native-vs-hybrid-vs-cross-platform/. [Accessed: 17-Mar-2021].
[6] D. Włodarczyk, “Flutter vs React Native – What to Choose in 2021?,” Droids On Roids, 26-Feb-2021. [Online]. Available: https://www.thedroidsonroids.com/blog/flutter-vs-react-native-what-to-choose-in-2021#f15. [Accessed: 01-Mar-2021].
[7] B. Skuza, “Pros and Cons of React Native Development in 2021,” Droids On Roids, 15-Jan-2021. [Online]. Available: https://www.thedroidsonroids.com/blog/react-native-pros-and-cons. [Accessed: 20-Jan-2021].
[8] “Flutter Vs. React Native in 2021 - Who's The Winner?: Existek Blog,” RSS, 10-Feb-2021. [Online]. Available: https://existek.com/blog/flutter-vs-react-native-in-2021/. [Accessed: 15-Feb-2021].
[9] M. Jablecnik, “How large is Flutter vs React Native community in 2021,” DEV Community, 03-Mar-2021. [Online]. Available: https://dev.to/mjablecnik/how-large-is-flutter-vs-react-native-community-in-2021-2df5. [Accessed: 08-Mar-2021].
[10] “Beautiful native apps in record time,” Flutter. [Online]. Available: https://flutter.dev/. [Accessed: 30-Dec-2020].
[11] A. Mroczkowska, “Flutter in Mobile App Development – Pros & Cons for App Owners,” Droids On Roids, 20-Jan-2021. [Online]. Available: https://www.thedroidsonroids.com/blog/flutter-in-mobile-app-development-pros-and-cons-for-app-owners. [Accessed: 25-Jan-2021].
[12] C. Sells, “What's New in Flutter 2.0,” Medium, 03-Mar-2021. [Online]. Available: https://medium.com/flutter/whats-new-in-flutter-2-0-fe8e95ecc65. [Accessed: 08-Mar-2021].
[13] S. Endicott, “Google could be the unlikely ally that helps bring apps to Windows 10,” Windows Central, 03-Mar-2021. [Online]. Available: https://www.windowscentral.com/googles-flutter-20-could-be-major-win-apps-windows-10. [Accessed: 08-Mar-2021].
[14] S. Lahoti, “Why Google kills its own products,” Packt Hub, 21-Jan-2019. [Online]. Available: https://hub.packtpub.com/why-google-kills-its-own-products/. [Accessed: 08-Mar-2021].
[15] “React Native vs. Flutter: Which One to Choose – NIX United,” NIX United – Custom Software Development Company, 19-Mar-2021. [Online]. Available: https://nix-united.com/blog/flutter-vs-react-native/#:~:text=React%20Native%20is%20a%20mobile,%2C%20Mac%2C%20and%20Web%20application. [Accessed: 21-Mar-2021].
[16] “Node.js vs Springboot Java -Which one to choose and when?: Chapter247,” Chapter247 Infotech, 04-Mar-2021. [Online]. Available: https://www.chapter247.com/blog/node-js-vs-springboot-java-which-one-to-choose-and-when/#:~:text=Spring%20boot%20Java%20is%20an,generating%20server%2Dside%20JS%20applications. [Accessed: 08-Mar-2021].
[17] “Node Js Vs Spring Boot: Choosing The Best Technology,” Inexture, 25-Nov-2020. [Online]. Available: https://www.inexture.com/nodejs-vs-spring-boot-choosing-the-best-technology/. [Accessed: 08-Mar-2021].
created with
WYSIWYG Web Builder .