JALA Mobile App: Migration from React Native to Flutter

The App's performance is currently inconsitent, especially on low-end device. And not to mention the signal problem.

Imagine when you having to waiting over 2 minutes just to open the app, or nearly a minute just to input and save data. These response times are making the app almost unusable for people with older or cheaper phones.

This graph provides a clear breakdown of the performance challenges we are currently facing across different hardware tiers. By comparing Low-end and Mid-end devices, we can see exactly where the bottlenecks are impacting our users.

Performance Analysis by Test Case

• Pencatatan Pakan (Feed Input): There is a noticeable gap here, with low-end devices taking 42 seconds compared to 33 seconds on mid-end hardware. While mid-end is faster, both figures are significantly above the ideal threshold for a simple data entry task.
• Pencatatan Kualitas Air (Water Quality Input): Interestingly, the hardware gap closes here, but the latency remains extremely high at 62 seconds (low-end) and 60 seconds (mid-end). This suggests the bottleneck isn't just hardware-dependent but likely stems from heavy processing logic or "bridge" congestion within the current React Native architecture.
• Initial App Launch: This is the most critical issue highlighted by the data. A startup time of 130 seconds (over 2 minutes) on low-end devices is a major barrier to user retention. Even at 64 seconds for mid-end devices, the launch process is far too slow for a modern mobile experience.

The Problem with React Native

The primary issue stems from React Native’s Bridge Architecture. Because React Native is not compiled into native machine code, it relies on a "bridge" to communicate between the JavaScript code and the device's native components.

• Communication Bottlenecks: On devices with limited CPU and RAM, this bridge becomes a major bottleneck, especially when the app handles complex UI rendering or heavy data processing.
• Rendering Delays: Because the app must constantly translate instructions across the bridge, the UI often feels sluggish or unresponsive.
• Resource Intensity: React Native requires significant system resources to maintain both the JavaScript environment and the native UI, which often leads to the high recovery times and instability we've observed.

Why We Are Choosing Flutter

To address these limitations, the team is initiating a phased rewrite using Flutter, starting with "Jala App Lite". We have selected Flutter for several key technical reasons:

• Direct Hardware Communication: Unlike React Native, Flutter does not use a JavaScript bridge. It compiles directly to native machine code, allowing the app to talk to the hardware instantly.
• Self-Contained Rendering: Flutter uses its own rendering engine (Skia/Impeller) to draw every pixel. This ensures that the UI remains smooth and visually consistent, even on low-end devices where the native OS might be struggling.
• Performance Goals: Our target is to reduce load times by approximately 75% compared to the React Native version.
• Development Efficiency: Flutter allows us to maximize our existing development resources while achieving much higher performance and stability for complex features.

The Impact: Performance and Reliability Gains

The migration to Flutter has delivered a transformative improvement in both technical metrics and user satisfaction, as validated by Flashlight score testing:

• Massive Speed Gains: The score for the Initial App Launch jumped from a low 55 to 98, indicating a near-instant startup experience.
• Optimized Workflows: Performance scores for Feed Logging rose from 64 to 99, while Water Quality Logging increased from 78 to 95.
• High User Satisfaction: Beta testing results indicate that 85% of users are satisfied with the new performance and interface.