Recyclone

Research

Related Project Review

App name: iRecycle

Main features:
-Compatible with both iOS and Android
-Cover almost everything about recyclable products
-Detailed guide of recycling including location
-Constant update of new information regarding recycling

Points to Learn:
-It concentrates on informing people how to recycle, helpful to beginners
-Updating new information regarding recycling.
-Clearly categorised interface that customers can easily search for information

Technology-Application Type

VS

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.

Technology-App Development

  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.

Technology-FrontEnd Framework

VS

  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.

Supported by

  Those frameworks are supported by two major IT companies. Flutter is created by Google and React Native is created by Facebook [6].

Native Performance

  Both are showing great native performance, in some cases it performs like Native developed app [6].

Free and Opensource

  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].

Sharing Code

  Both can be run on iOS, Andriod, and desktop web [6].

Programming Language

  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.

Popularity

  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].

Difficulty

  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].

Update & Support

  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].

Design and Graphic Capabilities

  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].

Decision

  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.

Technology-BackEnd API

  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.

Type of Program

  To be precise, their base is different. Spring Boot is Java framework, while NodeJs is runtime environment of Javascript [17].

Language

  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].

Maintainability & Support

  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].

Security

  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].

Thread

  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].

Release

  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].

Decision

  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.

References

[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].