RPG to TypeScript: A Data-Driven Approach to Midrange System Modernization

The average RPG developer is 58 years old. In five years, the institutional knowledge powering your core financial or manufacturing systems will be hitting the golf course, leaving behind millions of lines of fixed-format RPG code that no one under the age of 40 can read, let alone maintain. This isn't just a talent gap; it's a systemic risk contributing to the $3.6 trillion global technical debt crisis.

When enterprises attempt to bridge the gap from RPG to TypeScript, they usually fall into the "Big Bang" trap. They spend 18 months and millions of dollars trying to document a system that hasn't seen a fresh README since 1998. The result? 70% of these legacy rewrites fail or exceed their timelines, often because the business logic is buried so deep in "spaghetti" indicators and subfiles that it’s effectively a black box.

The future of modernization isn't archaeology—it’s observation.

TL;DR: Modernizing RPG to TypeScript succeeds only when you shift from manual code analysis to visual reverse engineering, reducing migration timelines from years to weeks by using user workflows as the source of truth.

The RPG to TypeScript Gap: Why Traditional Migration Fails#

The distance between a 5250 "green screen" and a modern React/TypeScript SPA is more than just a UI update. It’s a fundamental paradigm shift. RPG is procedural, often state-heavy, and relies on indicators (*IN03, *INLR) and fixed-length data structures. TypeScript is functional, asynchronous, and type-safe.

Most firms try to bridge this with manual "Screen-to-Code" translation. An analyst sits with a user, watches them use the AS/400, takes notes, and then a developer tries to recreate that logic in a modern stack.

Manual documentation is the primary bottleneck. Statistics show that 67% of legacy systems lack any meaningful documentation. When you ask a developer to manually audit an RPG screen, it takes an average of 40 hours per screen to map the fields, validation logic, and hidden subfile behaviors. Replay reduces this to 4 hours per screen.

The Archaeology Trap: Stop Digging, Start Recording#

The "Code Archaeology" phase is where modernization projects go to die. Teams spend months trying to understand why

triggers a specific calculation. In many cases, the original developers are gone, and the code has been patched so many times that the source files are a minefield of "dead" logic that still runs in production.

Instead of trying to parse legacy code that was never meant to be read by modern eyes, we use Visual Reverse Engineering.

By recording a real user performing a workflow—say, processing a warehouse pick-list or an insurance claim—Replay captures the exact state transitions, API requirements, and data structures required to replicate that functionality in TypeScript. You aren't guessing what the code does; you are documenting what the system actually performs.

💰 ROI Insight: By moving from manual "archaeology" to automated extraction, enterprise teams see an average of 70% time savings. What used to take 18 months now takes 18 days.

Technical Implementation: Mapping RPG Patterns to TypeScript#

To move from RPG to TypeScript effectively, you must map legacy patterns to modern equivalents. Here is how we handle the transition of a standard RPG Subfile (the legacy equivalent of a data table) into a modern React component.

Step 1: Capturing the Flow#

First, we record the user interaction. Replay monitors the network traffic and the UI state changes. It identifies that when a user hits "Enter" on a specific row, the system calls a specific program (e.g.,

) and returns a fixed-width data string.

Step 2: Generating the API Contract#

RPG systems often communicate via DB2 or Program Calls (PCML). Replay extracts these interactions and generates a clean TypeScript interface.

typescript
// Generated from Replay Visual Extraction
// Source: RPG Program 'ORD_ENTRY' Subfile Logic

export interface OrderLineItem {
  lineId: string;       // RPG: L01ID
  partNumber: string;   // RPG: L01PN
  quantity: number;     // RPG: L01QTY
  unitPrice: number;    // RPG: L01PRC
  extendedPrice: number; // RPG: L01EXT
}

export interface OrderState {
  orderHeader: {
    customerId: string;
    orderDate: string;
  };
  items: OrderLineItem[];
  indicators: {
    isLocked: boolean;  // Mapping *IN34
    hasErrors: boolean; // Mapping *IN99
  };
}

Step 3: Extracting Business Logic into React Components#

The legacy "Green Screen" logic is procedural. We transform this into a declarative React component. Instead of managing indicators manually, we use state hooks that were automatically derived from the observed user behavior.

tsx
import React, { useState, useEffect } from 'react';
import { OrderLineItem, OrderState } from './types';

/**
 * Migrated Order Entry Component
 * Logic extracted via Replay Visual Reverse Engineering
 */
export const OrderEntry: React.FC<{ orderId: string }> = ({ orderId }) => {
  const [order, setOrder] = useState<OrderState | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  // Replay captured the validation logic:
  // If QTY > 1000, trigger warning (Legacy Indicator *IN42)
  const validateQuantity = (qty: number) => {
    return qty <= 1000;
  };

  useEffect(() => {
    // Replay generated the API wrapper for the legacy IBM i call
    fetchOrderFromLegacy(orderId).then(data => {
      setOrder(data);
      setIsLoading(false);
    });
  }, [orderId]);

  if (isLoading) return <Spinner />;

  return (
    <div className="modern-form">
      <h2>Order #{orderId}</h2>
      {order?.items.map(item => (
        <OrderRow 
          key={item.lineId} 
          item={item} 
          isValid={validateQuantity(item.quantity)}
        />
      ))}
    </div>
  );
};

⚠️ Warning: Never attempt a direct line-by-line translation of RPG to TypeScript. RPG is record-oriented; TypeScript is object-oriented. Focus on the intent of the workflow, not the syntax of the legacy program.

The 5-Step Data-Driven Modernization Path#

Using Replay, we follow a structured path that eliminates the guesswork of legacy migration.

Step 1: Workflow Recording#

Record subject matter experts (SMEs) as they navigate the legacy system. Replay captures every field, every validation, and every hidden state change. This becomes the "Video as source of truth."

Step 2: Schema Extraction#

Replay’s AI Automation Suite analyzes the recording to generate the TypeScript types and API contracts. This solves the "Documentation Gap" (67% of systems) instantly.

Step 3: Component Generation#

Using the Replay Library, the platform generates functional React components that match the extracted business logic. This isn't generic boilerplate; it's a 1:1 functional match of your legacy business rules.

Step 4: Technical Debt Audit#

Before going live, Replay performs a Technical Debt Audit. It identifies logic in the legacy system that was never triggered during the recording—often revealing redundant code that doesn't need to be migrated, further shrinking the project scope.

Step 5: E2E Test Generation#

Replay generates Playwright or Cypress E2E tests based on the original recording. This ensures that the new TypeScript application behaves exactly like the RPG system it’s replacing.

Why Regulated Industries Choose This Path#

For Financial Services, Healthcare, and Government, a "failed rewrite" isn't just a budget issue—it's a compliance disaster. These industries rely on RPG because it is incredibly stable.

Replay is built for these high-stakes environments. With SOC2 compliance, HIPAA-ready protocols, and an On-Premise deployment option, you can modernize your IBM i workloads without your data ever leaving your secure perimeter.

• •Financial Services: Migrating core banking ledgers from RPG to microservices.
• •Manufacturing: Moving AS/400 inventory systems to modern cloud-native TypeScript apps.
• •Telecom: Transforming legacy billing systems into React-based customer portals.

💡 Pro Tip: Focus your first "Replay Pilot" on a high-value, low-complexity screen, like a customer look-up or a simple data entry form. This proves the ROI in days rather than months.

Frequently Asked Questions#

How does Replay handle complex RPG business logic?#

Replay doesn't just look at the code; it looks at the inputs and outputs. By observing how the system responds to various user inputs, Replay maps the business logic (e.g., tax calculations, discount tiers) into documented TypeScript functions. If the logic is never used in the recording, it's flagged for audit, ensuring you only migrate what matters.

Does this require changes to our IBM i backend?#

No. Replay works by observing the frontend interaction and the communication layer. You can continue running your legacy backend while you build out the modern TypeScript frontend, using a "Strangler Fig" approach to slowly replace backend services over time.

How long does it take to see results?#

While a manual rewrite takes 18-24 months, a Replay-led modernization usually produces a functional, documented React component in a matter of days. Most enterprises can migrate an entire module in 2-8 weeks.

What about "spaghetti code" in the RPG source?#

Spaghetti code is the biggest hurdle in manual rewrites. Replay bypasses this by focusing on the observable behavior. It doesn't matter how messy the internal RPG indicators are; Replay captures the final result—the data that actually reaches the user—and uses that to define the new system.

---

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