RPG III to React: Modernizing Wholesale Distribution Without Re-keying Legacy Business Logic

The $3.6 trillion technical debt crisis isn't found in modern SaaS startups; it’s buried in the fixed-format RPG III codebases powering 80% of wholesale distribution centers today. For these enterprises, the gap between an AS/400 "green screen" and a modern web interface isn't just a UI problem—it's an existential risk. Every time a veteran developer retires, a piece of the company’s institutional memory vanishes, leaving behind a black box of business logic that no one dares to touch.

The traditional answer has always been the "Big Bang" rewrite: a multi-year, multi-million dollar gamble that 70% of the time results in failure or massive timeline overruns. But in the high-volume world of wholesale distribution, you don't have 24 months to wait for a new system that might not even work on Day 1. You need a way to move from RPG III to React without the manual archaeology of digging through undocumented source code.

TL;DR: Modernizing wholesale distribution from RPG III to React no longer requires a risky "Big Bang" rewrite; Visual Reverse Engineering allows teams to extract business logic and UI patterns directly from user workflows, reducing migration time by 70%.

The RPG III to React Bottleneck: Why Manual Rewrites Fail#

Wholesale distribution relies on high-speed data entry. A seasoned warehouse clerk can process an order in an RPG III environment faster than most people can navigate a modern website because the logic is baked into their muscle memory and the system's terminal shortcuts.

When organizations attempt to move from RPG III to React using traditional manual methods, they hit three walls:

1. •The Documentation Gap: 67% of legacy systems lack up-to-date documentation. The "source of truth" isn't the code; it's the behavior of the system under load.
2. •The Logic Leak: Business rules—like complex tiered pricing, tax exemptions, and inventory allocation—are often buried in thousands of lines of monolithic RPG code. Re-keying this into React and Node.js manually leads to inevitable bugs.
3. •The Resource War: You need developers who understand both fixed-format RPG and modern functional React. That Venn diagram is nearly two separate circles.

⚠️ Warning: Attempting to modernize by simply "reading the code" often fails because legacy systems frequently contain "dead logic" that is no longer used but still exists in the source, leading to bloated and confusing modern implementations.

Visual Reverse Engineering: A New Path for Wholesale Distribution#

At Replay, we’ve pioneered a different approach. Instead of starting with the code, we start with the workflow. By recording real user interactions within your legacy environment, Replay’s Visual Reverse Engineering platform captures the state, the data transitions, and the UI requirements.

This allows you to move from RPG III to React by treating the legacy system as a "black box" that reveals its secrets through usage. We transform video recordings into documented React components and API contracts.

Comparing Modernization Strategies#

Moving from Black Box to Documented Codebase#

The goal of moving from RPG III to React isn't just to have a prettier screen. It's to create a maintainable, scalable architecture. Replay’s AI Automation Suite analyzes the recorded flows to generate "Blueprints." These Blueprints serve as the bridge between the old world and the new.

For a wholesale distributor, this means the complex "Order Entry" screen—which might have taken 40 hours to manually document and prototype—can now be extracted and converted into a functional React component in under 4 hours.

Step 1: Workflow Recording#

Instead of interviewing developers who may have left the company a decade ago, you record a power user performing a standard task, such as "Allocate Backordered Inventory." Replay captures every field, every validation message, and every state change.

Step 2: Component Extraction#

Replay identifies UI patterns within the green screen and maps them to your modern Design System. If you don't have one, Replay’s "Library" feature helps you build a standardized React component library based on the legacy system's functional requirements.

Step 3: API Contract Generation#

One of the hardest parts of RPG III to React migrations is defining how the modern frontend will talk to the legacy backend (often via an intermediate layer like OpenLegacy or a custom REST wrapper). Replay generates the API contracts based on the data observed during the recording.

typescript
// Example: Generated React Component from an RPG III "Order Inquiry" Screen
// This component was extracted by Replay by analyzing user workflows.

import React, { useState, useEffect } from 'react';
import { DataTable, Button, Badge } from '@/components/ui-library';

interface OrderLineItem {
  lineNo: number;
  itemSKU: string;
  description: string;
  qtyOrdered: number;
  unitPrice: number;
  status: 'SHIPPED' | 'PENDING' | 'BACKORDER';
}

export const LegacyOrderInquiry: React.FC<{ orderId: string }> = ({ orderId }) => {
  const [orderData, setOrderData] = useState<OrderLineItem[]>([]);
  const [loading, setLoading] = useState(true);

  // Business Logic preserved: RPG Status codes mapped to modern UI states
  const getStatusBadge = (status: string) => {
    const statusMap: Record<string, any> = {
      'S': { label: 'SHIPPED', variant: 'success' },
      'P': { label: 'PENDING', variant: 'warning' },
      'B': { label: 'BACKORDER', variant: 'destructive' },
    };
    return <Badge variant={statusMap[status]?.variant}>{statusMap[status]?.label}</Badge>;
  };

  return (
    <div className="p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-xl font-bold mb-4">Order Details: {orderId}</h2>
      <DataTable 
        data={orderData}
        columns={[
          { header: 'Line #', accessor: 'lineNo' },
          { header: 'SKU', accessor: 'itemSKU' },
          { header: 'Description', accessor: 'description' },
          { header: 'Qty', accessor: 'qtyOrdered' },
          { header: 'Status', cell: (row) => getStatusBadge(row.status) }
        ]}
      />
      <div className="mt-4 flex gap-2">
        <Button onClick={() => window.print()}>Print Pick Ticket</Button>
        <Button variant="outline">Modify Order</Button>
      </div>
    </div>
  );
};

💰 ROI Insight: Manual modernization of a single complex enterprise screen typically costs $5,000–$10,000 in developer hours. Replay reduces this cost by 90% by automating the discovery and boilerplate generation phases.

Preserving Business Logic Without "Archaeology"#

The biggest fear in any RPG III to React project is losing the "hidden" logic. In wholesale distribution, this might be a specific calculation that applies a discount only if the customer is in a certain region AND the order is placed before 10:00 AM.

In a manual rewrite, a developer might miss this rule because it's buried in an obscure RPG

member.

With Replay, because we record the actual data going in and coming out, the AI detects these patterns. If the user enters a quantity and the price changes unexpectedly, Replay flags this as a "Business Logic Rule" that needs to be accounted for in the new React application.

Step-by-Step: The Replay Modernization Workflow#

1. •Capture: Record the legacy RPG III screens using the Replay browser extension or desktop recorder.
2. •Analyze: Replay’s AI identifies input fields, buttons, data tables, and hidden state transitions.
3. •Map: Use the Blueprints editor to map legacy fields to modern API endpoints.
4. •Generate: Export production-ready React code, TypeScript interfaces, and E2E tests (Playwright/Cypress).
5. •Audit: Use the Technical Debt Audit feature to identify which parts of the legacy flow are redundant and can be retired.

typescript
// Example: Generated API Contract for RPG III Backend Integration
// This ensures the React frontend and the AS/400 backend stay in sync.

export interface InventoryUpdateRequest {
  /** Map to RPG Field: WHSE_ID (Alpha 2) */
  warehouseId: string;
  /** Map to RPG Field: ITEM_SKU (Alpha 15) */
  sku: string;
  /** Map to RPG Field: ADJ_QTY (Numeric 7,2) */
  adjustmentQuantity: number;
  /** Map to RPG Field: REASON_CD (Alpha 3) */
  reasonCode: 'DMG' | 'RET' | 'INV';
}

export const updateLegacyInventory = async (data: InventoryUpdateRequest) => {
  const response = await fetch('/api/v1/legacy/inventory', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' }
  });
  return response.json();
};

Built for Regulated Environments#

Wholesale distributors in healthcare or government sectors cannot compromise on security. Moving from RPG III to React often introduces new security vulnerabilities that didn't exist in the closed AS/400 ecosystem.

Replay is built with these constraints in mind:

• •SOC2 & HIPAA Ready: Your data extraction process meets the highest security standards.
• •On-Premise Available: For companies with strict data sovereignty requirements, Replay can run entirely within your firewall.
• •PII Masking: Automatically redact sensitive customer information during the recording and extraction process.

💡 Pro Tip: When modernizing, don't just replicate the green screen. Use Replay's "Flows" feature to identify where users are clicking 10 times to do one task, and consolidate those into a single modern React view.

The Future Isn't Rewriting—It's Understanding#

The global technical debt of $3.6 trillion exists because we’ve treated legacy systems as liabilities to be destroyed rather than assets to be understood. The move from RPG III to React is the most common modernization path in the industrial world today.

By using Replay, you stop guessing what your code does and start seeing what your business actually does. You move from "archaeology"—digging through the past—to "architecture"—building for the future.

---

Frequently Asked Questions#

How does Replay handle complex RPG III subfiles?#

Replay’s Visual Reverse Engineering engine recognizes subfile patterns (the legacy version of data tables). It automatically extracts the pagination, sorting, and selection logic used in the green screen and maps it to a modern React

component, preserving the functional behavior while upgrading the UX.

Does Replay require access to our AS/400 source code?#

No. Replay operates on the "presentation layer." By recording the user workflows, we understand the system's inputs, outputs, and state changes. This is ideal for companies that have lost their original source code or have highly customized RPG III environments where the code is too "spaghetti" to parse traditionally.

Can we use the generated React code in our existing CI/CD pipeline?#

Absolutely. Replay generates standard, clean TypeScript and React code that follows modern best practices. There is no "Replay Runtime" or vendor lock-in. Once the code is extracted, it’s yours to own, modify, and deploy using your existing tools.

What is the average time savings for an RPG III to React migration?#

On average, our enterprise partners see a 70% reduction in modernization timelines. Tasks that traditionally take 18–24 months are frequently completed in weeks or months, primarily because the "discovery" and "documentation" phases are automated.

How does Replay ensure business logic isn't lost?#

Replay creates a "Source of Truth" based on video evidence. By generating E2E tests (like Playwright) alongside the React components, Replay allows you to verify that the new system produces the exact same outcomes as the legacy system for any given input.

---

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