MyNote: Multiplatform Reactive Integration System with The Clean Architecture Development Concept

ABSTRACT


INTRODUCTION
In today's digital era, there is a wide range of applications needed.These applications have evolved in terms of their appearance, usability, and operation in line with the advancements in hardware development.As a result, developers are required to create applications that are suitable for these devices.However, during the development process, developers often face technical difficulties such as continuous data access and less flexible and scalable application structures.To overcome these challenges, developers can implement a multiplatform system combined with a reactive paradigm and a clean architecture.Multiplatform applications can provide convenience for users in choosing the platform to be used [1].There are various types of application development architectural styles.While all of these architectures differ somewhat in detail, they are very similar.All of them have the same goal, namely the separation of interests.They all achieve this separation by dividing the software into layers.Each has at least one layer for business rules, and another for interfaces [2].An important feature of Clean Architecture in the client base is that the UI and data source can be changed without any problem.This characteristic allows testing business rules without UI, database, services, or any other external dependency [3].Reactive programming has recently gained popularity as a paradigm that is well-suited for developing event-driven and interactive applications [4].Reactive programming is a programming paradigm that has asynchronous data streams at its core [5].A reactive system is a system that continuously communicates with the environment outside the system and responds to it at a time determined by the environment, not the program itself [6].Reactive streams on the official documentation are initiatives to provide asynchronous stream processing standards with non-blocking backpressure [7].Non-blocking is another term for asynchronous or overlapped processes [8].
MMyNote is a useful app for taking notes, whether for personal use or for collaborating with others.You can personalize the default themes to make your notes stand out and look appealing.The app is compatible with various devices.The goal of this study is to create a preliminary version of MyNote that has not yet been optimized for performance.This will allow us to evaluate its performance and gather raw data on its capabilities.We will conduct load, stress, and spike tests on the server to assess its performance.This study will only focus on discussing the development and analysis concept.MyNote is available on multiple platforms and is created using Progressive Web Apps (PWA) technology, which combines various web technologies to provide users with a superior experience [9].On mobile, it uses Webview, which is an Android system component that enables Android applications to render web pages and communicate with web servers [10].However, it is important to note that there is a risk of security breaches, particularly Cross-site scripting (XSS) attacks, which can occur through HTTP Requests by stealing cookie data, hijacking sessions, and impersonating user data [11].The application of the reactive paradigm in MyNote will use the Functional Reactive Programming (FRP) method in Java, with a framework Spring WebFlux on the server and RxJs on the client.Using a framework allows us to build web applications faster [12].FRP itself is denotative (based on precise, simple, implementation-independent compositional semantics, which precisely determines the meaning of each type and building block (program)) and temporally continuous (has a certain tempo) [13].This study provides comprehensive guidance on how to seamlessly integrate multi-platform applications and reactive programming using the clean architecture development approach in the MyNote app.It can also serve as an excellent reference for implementing this technology stack in production-ready products, based on thorough analysis and research.

Build Application Architecture
In the early stages of developing the MyNote application, an application structure was created with a clean architecture for both the server and client which is more directed towards the application of the dependency rule concept, so the structure will be like one-way traffic.The implementation of clean architecture on the client is combined with the Model View ViewModel (MVVM) structure.MVVM is an architecture adapted for modern User Interface (UI) development platforms where appearance is the responsibility of a designer rather than a classic developer [14], in MVVM, UI is located inside the View layer, and the data layer is inside the Model and ViewModel layer.

Build Application
We use TypeScript programming language with the React.jsand RxJs libraries for the client and Spring WebFlux framework for the server.The data connection between the server and the client uses the Short Polling technique, in Short Polling the client sends regular requests to the server and each request tries to "pull" events or available data.If no events or data are available, the server returns an empty response and the client waits for an interval before sending another polling request [15].Server code testing is carried out by functional Application Program Interface Representational State Transfer (API REST) testing, namely system testing and interface testing on the Postman application.Client code tests are carried out using the system testing method and UI testing.After the development of the server and client is complete, reconfiguration and synchronization between the server and client will be carried out.After reconfiguring, the application will be built using Gradle, Gradle is a build tool that is used as a means of organizational development and project-specific development standards [16].So Gradle is like a framework but it works in the build application process.

Analyze Application
After the system is built locally, the next stage involves performing load tests, stress tests, and spike tests.The load test is conducted using Postman while JMeter is used for stress and spike tests.If the system meets the analysis target which is greater than equals to 10 test cases, the application is then hosted on Google Cloud servers.The server uses a Virtual Private Server (VPS) with e2-small type engine specifications on the Compute Engine.After hosting the application, the server undergoes load, stress, and spike tests using different test cases.The subsequent stage involves creating a Webview on the Android system using Kotlin.

RESULTS AND DISCUSSION
Previous studies have implemented Clean Architecture [17], Reactive Programming [18], and Multiplatform concepts separately, using independent experimental programs and methods, systems, libraries, and frameworks.However, in this study, we have implemented all three concepts in one complex experimental application called MyNote.The application has been built using specific programming languages, Java and Typescript, and specific libraries and frameworks, WebFlux and RxJs.The purpose of this application is to analyze the performance of Reactive Programming on the server side.Although the application lacks performance on the server side, it was built to gain a better understanding of performance in a reactive system that is built with the WebFlux framework.The knowledge gained from this study is combined to serve as a reference for developing production systems.

Clean Architecture
The client structure has been updated to follow the clean architecture principles of MVVM and it was a success.The changes made were minor but made sure that the dependency rules remained intact.The client structure includes five components -model, use case, adapter, configuration, and view.The model component, also known as the Entities layer, holds objects that define business rules.The use case component, known as the Use Cases layer, applies these business rules through application logic functions or methods on the client.The adapter component, also known as the Adapter layer, transforms data and implements gateway functions from the use case layer to the outer layer.The configuration component, located outside the View layer, along with the adapter component, acts as the Model (M) in the MVVM architecture and includes client configuration libraries like the Redux library.Lastly, the view component is responsible for displaying application graphics and acts as the View View Model (VVM) layer in the MVVM architecture.The container sub-component represents the View (V) layer, while the view controller represents the View ViewModel (VVM) layer.
The infrastructure of the application server has been carefully crafted following the principles of clean architecture.Object streams, namely Mono for data 0..1 and Flux for data 0..N, have been utilized from the Reactor Core library of the Spring Webflux framework to achieve this remarkable feat.The Java module, consisting of four modules -Entities, Use Case, Adapter, and Application -has been implemented to enforce the dependency rule.These four modules have been built with the help of Gradle build tools.The Entities module defines the business rules object, including the main, repository, and storage model.The Use Case module implements business rules by employing application business logic, inner converter between the main model, application storage method, application security method for authentication object, and entity logics.The Adapter module acts as a gateway and boundaries between applications and the external layer, interacting with the database and incorporating the Spring Data library (version 3.0.3(Spring Data Commons) and version 3.0.5 (Spring Data R2DBC)).Lastly, the Application module houses all libraries, drivers, and configurations, including security, database, error handling, and router configurations.The Reactor Core library on each layer has a different version to ensure flexibility and scalability, guaranteeing that all necessary resources are available and the software is built and deployed on the server based on this module.After a thorough examination of the business policies governing the structure of this endeavor, it can be confidently asserted that the implementation of clean architecture has been a resounding success.The framework is designed in such a way that the outgoing layers are responsible for enforcing specific business regulations, while the general layers handle the implementation of broader business policies.The layers are interconnected in a one-way manner, with the upper layer having no direct connection with the lower layer, but the lower layer is connected to the upper layer.Moreover, the library's implementation ascertains that any changes made in the lower layer do not impact the upper layer, while the lower layer accommodates any changes effectively.The architecture is meticulously organized, making it simple to read.Additionally, it is scalable, as the addition or removal of multiple features does not require any modifications to the existing structure.The code is uncomplicated to maintain, and the structure is flexible, allowing it to adjust swiftly to any modifications.However, the build size is substantial because of the independent libraries in each layer and the necessity to separate functions.

Multiplatform
The MyNote application is a multi-platform tool that can be accessed via an internet connection and a web browser.Android users can access the application through a web browser or an Android application (.apk) using Webview technology.To create this application, We utilized the Android Studio Dolphin (version: 2021.3.1 Patch 1) and Kotlin (version: 213-1.7.20-release-for-android-studio-AS6777.52),along with 12 GB RAM, 2 core CPU, 4 vCPUs, 2.30GHz, and Intel(R) Core(TM) i5-6198DU CPU.They also used Gradle plugins and dependencies to facilitate the development build process.To ensure that MyNote Webview smoothly on Android, several steps must be taken.These include granting internet permission, using the 'NoActionBar' theme for the activity, enabled DOM storage and Javascript feature in Webview settings to enable storage and Javascript access.The Javascript feature is optional depending on the use of Javascript.To run MyNote, Android version 5.0 (Lolipop) or newer is required, with Android version S_V2 (Android 12) being the optimal target system.
Our analysis of the MyNote Webview application revealed several advantages and disadvantages.The advantages include fast development time, small application size, and ease of implementation.However, the application requires an internet connection, which impairs the user experience in offline mode.Additionally, the application load time is slow and demands substantial resources due to the use of the default browser in Webview.

Reactive Programming
The client has successfully implemented reactive programming to process request and response data from adapters at the ViewModel layer.The implementation of reactive programming is using asynchronous and synchronize.The pooling technique is utilized for request profiles (requests that retrieve user profile data) using the GET method.The request profile is the main object pooling and triggers other requests (chains effect), which affect the display and performance.To handle continuous changes in appearance, data validation and are conducted and in this state reactive programming has been implemented with some transformation data.Security filters have 2 conditions, if the path request is public access will be granted to all requests, and if the path request is private access will be restricted to only a few people, It can be done with an access token, if the access token has been outdated, it will be refresed automatically to new ones.So the view will be automatically updated without a refresh page.On the server side, the reactive concept is applied in the system and programming itself.The system uses threads on each request automatically scalable with the help of Netty Server and the database side uses a connection pool with a value of 50.That means up to 50 connections to the database can be opened concurrently.and the programming side uses functional programming that is almost the same as client-reactive programming.Regarding the MyNote client system, there have been various analyses conducted on the use of reactive structures.One of these analyses suggests that the mapping function can be combined with Promise and async functions when retrieving data within the function.The decision to use Redux and similar libraries depends on whether you want to distribute data efficiently, not on the endpoint (next value), and calling the function (subscribe) without using input does not use pure functions.As a result, changes to the function's outcome depend on external variables.By using reactive structures, the code can be tidied up instead of using general functions, leading to a successful implementation of the reactive system.However, there are some potential drawbacks to consider.Too many processes display data, which must be validated and compared with previous data, making it less efficient.Additionally, too many data requests are sent to the server at one time due to the chain effect, making processing heavier.Despite these challenges, there are several advantages to using reactive programming on the client of the MyNote application, including neater and easier-to-read code arrangement, efficient use of code, and a clearer data processing flow.
The process of analyzing load tests, stress tests, and spike tests is divided into two significant phases: pre-hosting and hosting.The evaluation of the test results is based on two crucial factors: response time and success rate.Server behavior is also taken into account while presenting the analysis findings.To conduct the load test, we utilized the Postman application version v9.31.28, while for the stress test and spike test, we used the JMeter application version 5.6.These tests were carried out on two different devices.The first device, a local device, had 12 GB RAM and 2 core CPUs, 4 vCPUs, 2.30GHz, Intel(R) Core(TM) i5-6198DU CPU.The second device was a VPS hosting device e2-small, which had 2GB RAM and 1 core CPU, 0.5 GHZ, with the default machine configuration.The analysis of the test results was conducted rigorously, comparing the results obtained from both devices.The comparison was based on the response time and success rate, along with the server behavior observed during the tests.The results obtained from the analysis were highly informative and helped us to identify the areas that required improvement.In the process of making POST requests, there are two possibilities: the response rates may either increase or decrease with a ratio of 1:5 or 20%:80%.Upon conducting the tests on both the local and server, it was observed that all response rates on the local side had decreased by 100%.On the other hand, the Collab Note Server response rate increased, leading to an overall response rate decrease of 77% on the server side.These findings indicate that external factors such as the internet and server environment have a significant impact on the response rate, as concluded through the analysis of the local response rate.Similarly, when making GET requests, response rates may either increase or decrease with a ratio of 2:3 or 40%:60%.Again, all response rates on the local side decreased by 100%, while the Collab Note Server and Theme response rates increased on the server side, resulting in a 33% decrease in overall response rate.However, it should be noted that GET collab note requests on the server experienced a decrease in response rate with a final average result of 936ms for requests 1-53, but an increase in response rate with a final average result of 1,770ms for requests > 53.In contrast, GET theme requests on the server showed a continuously decreasing response rate, with a starting response rate of 127,750ms.From these findings, it can again be concluded that external factors play a major role in affecting response rate.However, the results are considered insufficient for drawing conclusive implications.The graph on the left shows normal request data with 1,000 to 5,000,000 iterations, indicating that all requests were successful without any errors.The response rate is normal, the maximum response rate always stays up, and the minimum response rate is also normal.However, for requests exceeding 1,000,000 iterations, the minimum response rate is not as accurate since it uses an estimated lower limit,

Figure 4 .
Figure 4. POST and GET Load Test

Figure 5 .
Figure 5.The Difference Between Normal Request and Multi-User Request in Local