JALA Web: The Performance Revamp

For shrimp farmers, time and data are everything. JALA Web was built to be their "digital assistant," helping them monitor pond conditions from anywhere at any time. But as we added more features and the data grew, we hit a major wall: performance degradation.

The platform is used daily to track dashboards, charts, and reports. Imagine the frustration of a farmer trying to log critical data, only to be held back by slow loading times. This wasn't just a minor inconvenience; it was a bottleneck for their daily productivity.

The Challenge We Faced

Originally, JALA Web relied on a combination of Laravel and Vue.js. The main issue? All our components were bundled into one massive JavaScript file. Every time a user opened the app, their browser had to download this "giant" file first, making the initial load feel heavy and sluggish.

After running several Lighthouse audits, the results confirmed my fears—performance scores were low on the most visited pages. It was clear that we needed a change, but we couldn't just stop everything to rebuild from scratch.

To validate the feasibility of a frontend migration, I developed a decoupled prototype using Next.js, replicating the core functionality of the current homepage. By hooking into the existing API infrastructure, I was able to isolate the frontend performance variables. This research yielded a dramatic improvement in metrics, proving that moving away from the monolithic Laravel-Blade-Vue bundle would effectively resolve our current bottlenecks.

Framework Selection & Strategic Rationale

While I initially considered two framework options Next.js and Nuxt.js, I chose to focus my research specifically on Next.js. This decision was based on their similar architectural philosophies and Next.js’s proven track record for superior performance. Furthermore, the React.js ecosystem offers a vastly more abundant selection of open-source libraries and community support.

A decisive factor in this choice was my parallel development of a custom UI Design System built with React.js. By leveraging this design system, I can ensure total UI consistency across the platform while significantly accelerating development cycles in subsequent phases.

Why Next.js?

To test my theory, I built a small prototype using Next.js. The results were night and day. After deep-diving into the research, I decided that moving to Next.js was the right path for a few simple reasons:

Incremental Migration: We didn't have to break the stable Laravel backend. We could move the heavy pages one by one, keeping the rest of the system running smoothly.
Blazing Speed: Next.js gave us the flexibility to choose exactly how data is loaded (SSR or SSG) for each page, ensuring everything stayed snappy.
A Mature Ecosystem: Since I was already developing a custom UI Design System using React, switching to Next.js allowed us to maintain total visual consistency while significantly speeding up our development cycles.

Our Strategy: Evolution, Not Revolution

Instead of a high-risk "big bang" rewrite, I proposed an Incremental Adoption strategy.

Laravel stayed as our reliable "brain" (Backend API), while Next.js took over as the new "face" for high-impact pages. While this hybrid approach added some architectural complexity, it was a calculated trade-off. It allowed us to deliver real improvements quickly without risking the stability of the entire system.

Impact

Once we rolled out Phase 1 (focusing on the financial features), the transformation was immediate:

Performance Surge: Lighthouse scores on migrated pages jumped from a struggling 30 to a solid 90+.
Lighter & Faster: The JavaScript bundle size was slashed. Now, the app remains responsive even on low-spec devices used by operators in the field.
Rock-Solid Reliability: By implementing better state management, we ensured that user data is securely preserved during navigation—no more losing progress while moving between pages.

Perbandingan pengujian menggunakan lighthouse (1) (1).png

Final Thoughts