AS/400 RPG to React: Modernizing Utility Billing Systems to Save $3M in Legacy Support

The $3.6 trillion global technical debt isn't just a number on a balance sheet; for utility providers, it’s the "green screen" bottleneck preventing real-time billing and customer self-service. When your core billing logic is trapped in 30-year-old RPG code on an AS/400 (IBM i) system, you aren't just dealing with legacy software—you’re dealing with an existential risk as the last generation of RPG developers enters retirement.

TL;DR: Modernizing utility billing from AS/400 RPG to React no longer requires a multi-year "Big Bang" rewrite; by using Replay’s visual reverse engineering, enterprises can extract business logic directly from user workflows, reducing modernization timelines from 18 months to mere weeks while saving millions in support costs.

The RPG Talent Cliff and the $3M Support Trap#

Utility companies are currently caught in a pincer movement. On one side, regulatory requirements demand more granular data reporting and faster billing cycles. On the other, the AS/400 systems powering these operations are increasingly opaque.

Most utility billing systems built on RPG lack any form of modern documentation. We call this "Software Archaeology." When a senior developer retires, they take the "tribal knowledge" of how a specific late-fee calculation was hardcoded in 1994 with them. The cost of maintaining these systems isn't just the IBM i licensing; it’s the $3M+ spent annually on specialized consultants to keep the lights on and the 70% of legacy rewrites that fail because the original requirements were never documented.

The Hidden Cost of 400 RPG React Projects#

The transition from 400 rpg react is often viewed through the lens of a "total replacement." This is a mistake. The "Big Bang" approach fails because it attempts to replicate decades of edge cases—like complex tiered water usage rates or multi-jurisdictional tax logic—from scratch.

When you attempt a manual 400 rpg react migration, your architects spend the first six months just trying to map the 5250 stream (the green screen protocol) to a modern REST API. Without a source of truth, the new React frontend often misses critical validation steps that were implicitly handled by the AS/400's display files (DSPF).

⚠️ Warning: Most legacy failures occur because the "hidden" business logic—the code that lives in the gaps between the UI and the database—is lost during the translation to modern microservices.

A New Blueprint for 400 RPG React Modernization#

Instead of starting with an empty VS Code window, we start with a recording. Replay allows your subject matter experts (SMEs) to perform standard billing tasks—like generating a final bill for a move-out—while the platform captures the underlying data flows, state changes, and API requirements.

Step 1: Visual Recording of the Legacy Workflow#

The architect records the "Green Screen" session. Replay doesn't just record pixels; it records the state. It sees that when "Field A" is updated, "Field B" triggers a specific RPG program call. This turns the "black box" into a documented flow.

Step 2: Extracting React Components#

Replay’s AI Automation Suite analyzes the recording to generate functional React components that mirror the legacy behavior but utilize modern design system tokens.

Step 3: Generating the API Contract#

One of the hardest parts of a 400 rpg react project is defining how the modern web app talks to the DB2 database. Replay automatically generates the API contracts and Swagger/OpenAPI documentation based on the observed data patterns.

typescript
// Example: Generated React Component from a Replay Extraction
// This component preserves the complex billing logic observed in the AS/400 session
import React, { useState, useEffect } from 'react';
import { BillingGrid, Alert, Button } from '@your-org/design-system';

interface UtilityAccountProps {
  accountId: string;
  legacyCycleCode: string; // Extracted from RPG Program Field 'CYCCODE'
}

export const ModernizedBillingView: React.FC<UtilityAccountProps> = ({ accountId, legacyCycleCode }) => {
  const [billingData, setBillingData] = useState<any>(null);
  const [isProrated, setIsProrated] = useState(false);

  // Logic extracted via Replay: RPG Indicator 44 triggers proration calculation
  const handleProration = (usage: number) => {
    if (legacyCycleCode === 'RES-01' && usage > 500) {
      setIsProrated(true);
      return usage * 1.15; // Preserved legacy multiplier
    }
    return usage;
  };

  return (
    <div className="p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-xl font-bold">Account: {accountId}</h2>
      {isProrated && <Alert type="warning">Prorated Rate Applied (Legacy Logic)</Alert>}
      <BillingGrid data={billingData} onCalculate={handleProration} />
      <Button variant="primary">Submit Adjustment</Button>
    </div>
  );
};

Bridging the Documentation Gap#

67% of legacy systems lack any form of documentation. In the utility sector, this is a compliance nightmare. When an auditor asks why a specific customer was charged a certain rate, "that's how the RPG code does it" is no longer an acceptable answer.

Replay transforms the 400 rpg react journey by creating a "Living Documentation" library. Every screen recorded becomes a "Blueprint."

• •Technical Debt Audit: Automatically identify which parts of the RPG monolith are redundant.
• •E2E Test Generation: Replay generates Cypress or Playwright tests that ensure the new React frontend matches the legacy system's output exactly.
• •Design System Integration: Instead of "looking like an old app," the generated React components are mapped to your modern corporate design system (Library).

💡 Pro Tip: Don't try to modernize the whole system at once. Use the "Strangler Fig" pattern. Use Replay to extract the "Customer Billing Inquiry" screen first. Deploy it in React, proxy the requests back to the AS/400, and move to the next screen.

Real-World Implementation: The "Move-In/Move-Out" Workflow#

Let’s look at a common utility pain point: the Move-In/Move-Out (MIMO) process. In a traditional AS/400 environment, this requires navigating through 12 different screens, from credit checks to meter reading entries.

Manual modernization of this flow usually takes 6 months of requirements gathering. With Replay, the process looks like this:

1. •Record: An operator performs 5 MIMO transactions in the legacy system.
2. •Analyze: Replay identifies the common denominators across all 12 screens.
3. •Consolidate: The 12 "Green Screens" are consolidated into a single, multi-step React form.
4. •Deploy: The React frontend is deployed, talking to the existing RPG programs via a secure API gateway.

💰 ROI Insight: By reducing the MIMO process from 12 screens to 1 React form, one utility provider reduced CSR training time by 60% and eliminated $1.2M in annual operational overhead.

Technical Implementation: Mapping State to Components#

The core of a successful 400 rpg react migration is state management. The AS/400 is stateful; the web is stateless. Replay handles this "impedance mismatch" by generating a state-mapping layer.

typescript
// Replay Generated State Mapper
// Maps legacy 5250 buffer positions to modern React State
export const useLegacyStateBridge = (buffer: string) => {
  return {
    customerName: buffer.substring(10, 40).trim(),
    accountBalance: parseFloat(buffer.substring(41, 50)) / 100,
    isOverdue: buffer.charAt(51) === 'Y',
    serviceType: mapServiceCode(buffer.substring(52, 54))
  };
};

const mapServiceCode = (code: string) => {
  const codes: Record<string, string> = {
    'EL': 'Electric',
    'WA': 'Water',
    'GA': 'Gas'
  };
  return codes[code] || 'Other';
};

Security and Compliance in Regulated Industries#

For utility providers, security is non-negotiable. Moving from 400 rpg react means moving data from a highly secure, air-gapped environment to a web-based architecture.

Replay is built for these regulated environments:

• •SOC2 & HIPAA Ready: Data handled during the extraction process is encrypted and anonymized.
• •On-Premise Availability: For government-owned utilities, Replay can run entirely within your firewall.
• •No Data Persistence: Replay records the logic, not the sensitive PII (Personally Identifiable Information).

Frequently Asked Questions#

How long does a 400 rpg react extraction take?#

While a manual rewrite of a single complex billing screen can take 40+ hours of engineering time, Replay reduces this to approximately 4 hours. A complete utility billing module with 20-30 screens can typically be visually reverse-engineered and documented within 4 to 6 weeks.

Does Replay replace our existing developers?#

No. Replay acts as a "Force Multiplier" for your existing team. It frees your senior architects from the "archaeology" phase of modernization, allowing them to focus on building new features in React rather than deciphering legacy RPG indicators.

What about business logic preservation?#

This is Replay's core strength. Because we use the video of a real user workflow as the "source of truth," we capture the logic as it actually executes, not as it was documented 20 years ago. This ensures 1:1 parity between the legacy AS/400 system and the new React application.

Can we modernize incrementally?#

Absolutely. Replay supports the "Strangler Fig" approach. You can modernize high-value screens (like customer-facing portals) while keeping the heavy-duty batch processing on the AS/400, ensuring business continuity without the risk of a "Big Bang" failure.

---

Ready to modernize without rewriting? Book a pilot with Replay - see your legacy screen extracted live during the call.