High-Performance Client-Side Report Generation for eCat

Project Title

High-Performance Client-Side Report Generation for eCat

Short Summary

Created a custom JavaScript reporting library powered by Stimulsoft to move report generation from backend-heavy processing to fast client-side rendering. The system uses cached client data, mapping files, dynamic data sources, and reusable templates stored in S3 to generate reports in PDF, Excel, Word, Blob, or Stimulsoft Viewer formats.

Overview

Report generation is an important part of the eCat ecosystem. Users need to generate technical reports, schedules, equipment details, summaries, and other business documents from the data available inside the application.

Earlier, report generation depended heavily on backend processing. Every time a user requested a report, the backend had to collect data, process calculations, prepare the report structure, bind data with templates, and return the final output. As the size and complexity of reports increased, this approach became slow and inefficient.

To solve this, we created a custom client-side reporting system using Stimulsoft Reports.JS. Instead of depending on the backend for every report-generation step, the new system uses data already available on the client side, applies mapping rules, prepares the required report data, binds it with Stimulsoft templates, and generates the final report directly from the browser.

The result was a much faster and more flexible reporting experience.

The Problem

The existing reporting process was slow because too much responsibility lived on the backend.

Every report request required backend services to perform heavy processing before the user could view or download the report. This created several issues:

• Report generation took a long time.

• Backend services had to repeatedly process data that was already available on the client.

• Large reports increased server load.

• Users had to wait even for reports that could be generated from cached application data.

• Adding new report formats or templates required more backend dependency.

• Frontend teams had limited control over report rendering and user experience.

• The system was harder to reuse across different application areas.

The main goal was to make report generation faster, more reusable, and less dependent on backend processing.

The Solution

We moved the reporting workflow to the client side by creating a reusable reporting library powered by Stimulsoft.

The new system takes advantage of data that is already available in the frontend application. Instead of sending everything back to the backend for processing, the client-side reporting library uses cached data, mapping files, report templates, and data source definitions to generate the final report.

This approach allowed reports to be created much closer to where the data already exists.

The library supports:

• Client-side report generation

• Stimulsoft template rendering

• Mapping-based data transformation

• Multiple report output formats

• Report preview inside Stimulsoft Viewer

• PDF, Word, Excel, multi-page Excel, Blob, and print support

• Reusable React component usage

• Function-based usage for backend or non-UI environments

• Template and mapping storage through S3

How It Works

The reporting system follows a configuration and template-driven approach.

Report templates and mapping files are stored in an S3 bucket. When a report needs to be generated, the system uses the relevant template, gathers the required data sources, applies mappings, transforms the available client-side data into the structure expected by the report, and then binds that data with the Stimulsoft template.

The RenderReports module plays a central role in this process. It efficiently connects transformed report data with Stimulsoft templates and produces the requested output format.

This makes report generation flexible because the same reporting engine can support different templates, different data sources, and different output formats without creating separate report-generation systems for each use case.

Architecture

The reporting solution was designed as a reusable JavaScript library that works in both frontend and backend environments.

Frontend Usage

For frontend applications, the library exposes a React component that can be directly embedded into the UI. This allows product teams to trigger report generation, show loading states, preview reports, and let users download the report in the required format.

Function-Based Usage

The library also exposes function-based APIs. These can be used in backend or non-UI environments when a team needs to generate a report, return a Blob, or produce report output without rendering a React component.

This dual-environment support made the library more flexible. Teams were not locked into only one usage pattern.

Storage Layer

Report templates and mapping files are stored in S3. This provides a centralized location for managing report assets and makes it easier to update templates or mappings without tightly coupling them to application releases.

Reporting Engine

Stimulsoft is used as the core reporting engine. It handles the rendering, formatting, previewing, and exporting of reports into the desired output formats.

Key Features

Client-Side Report Generation

Reports are generated using cached client-side data, reducing dependency on backend processing and improving performance.

Template-Based Rendering

The system uses Stimulsoft templates to keep report layout separate from application logic.

Mapping-Driven Data Binding

Mapping files define how application data should be transformed and connected to report templates.

RenderReports Module

A dedicated rendering module binds prepared data with Stimulsoft templates and produces the report in the requested format.

Multiple Export Formats

Users can generate reports as PDF, Word, Excel, multi-page Excel, Blob, print output, or view them directly in Stimulsoft Viewer.

React Component Support

Frontend teams can use the reporting system as a ready-to-use React component inside the application.

Function API Support

Backend or non-UI consumers can use exposed functions to generate reports programmatically.

S3-Based Template and Mapping Management

Templates and mappings are stored in S3, making the system easier to manage, update, and scale across teams.

Reusable Library Design

The reporting system is packaged as a shared JavaScript library so multiple applications or modules can use the same reporting foundation.

Challenges

One of the biggest challenges was shifting a backend-heavy process to the client side without losing accuracy or flexibility.

Reports depend on correctly structured data, precise calculations, template compatibility, and format-specific behavior. The system had to make sure that cached client data could be transformed reliably into the shape expected by Stimulsoft templates.

Another challenge was creating a library that worked for different consumers. Some teams needed a ready-to-use frontend component, while others needed a function that could generate a Blob or report output programmatically. Supporting both environments made the library more powerful but also required careful design.

Managing templates and mappings through S3 also introduced the need for a clean asset strategy, so templates could evolve independently while remaining compatible with the reporting engine.

Impact

The client-side reporting system significantly improved the report-generation experience.

Key outcomes included:

• Report generation became much faster.

• Backend processing load was reduced.

• Cached client-side data was reused efficiently.

• Users could generate reports in multiple formats.

• Frontend teams gained more control over report behavior and presentation.

• Report templates and mappings became easier to manage through S3.

• The same library could be used in both UI and non-UI environments.

• New report types could be added with less backend dependency.

• The reporting experience became more scalable and reusable across eCat.

Final Result

The project transformed reporting from a slow backend-dependent process into a fast, flexible, client-side reporting system.

By using Stimulsoft, cached client data, mapping files, S3-hosted templates, and a reusable rendering module, the library made report generation faster and easier to integrate. It gave teams a single reporting foundation that could generate reports in different formats, work inside React applications, and also support backend-style programmatic usage when needed.