From PowerBuilder to TypeScript: A Data-Driven Approach to Legacy UI Migration

PowerBuilder is the "Hotel California" of enterprise software: you can check in your business logic, but it never seems to leave. For decades, PowerBuilder (PB) was the gold standard for rapid application development in financial services, healthcare, and government. Today, those same systems represent a massive portion of the $3.6 trillion global technical debt. They are black boxes—undocumented, tightly coupled, and increasingly impossible to maintain.

The traditional response to a legacy PowerBuilder application is a "Big Bang" rewrite. However, the data is sobering: 70% of legacy rewrites fail or significantly exceed their timelines. When you attempt to move from PowerBuilder to a modern TypeScript/React architecture, you aren't just changing languages; you are attempting to perform digital archaeology on 30 years of undocumented "spaghetti" code.

TL;DR: Modernizing from PowerBuilder to TypeScript fails when treated as a manual rewrite; success requires Visual Reverse Engineering to extract UI patterns and business logic directly from user workflows, reducing migration time by 70%.

The Death of the Manual Rewrite#

Most Enterprise Architects approach a PowerBuilder migration by trying to read the

(PowerBuilder Library) files. This is a mistake. PowerBuilder’s "DataWindow" technology—while revolutionary in the 90s—blurs the lines between data access, business logic, and UI representation. Attempting to manually map these to modern Clean Architecture or Hexagonal Architecture is a 24-month suicide mission.

The average enterprise rewrite takes 18 months, and 67% of these systems lack any meaningful documentation. In a manual migration, a single complex screen can take upwards of 40 hours to analyze, document, and recreate in React.

Comparison of Migration Strategies#

⚠️ Warning: The biggest risk in PowerBuilder migrations isn't the code—it's the "tribal knowledge" held by users who have spent 20 years navigating undocumented edge cases that exist only in the UI layer.

Why "Archaeology" Fails#

When you move from PowerBuilder to TypeScript, you usually start by hiring consultants to "understand the system." They spend months digging through legacy scripts, trying to figure out why a specific checkbox triggers a cascading update in a hidden DataWindow. This is archaeology, and it is expensive.

The future of modernization isn't rewriting from scratch—it's understanding what you already have by observing it in motion. This is where Replay changes the equation. Instead of reading dead code, Replay uses Visual Reverse Engineering to record real user workflows. It treats the running application as the "Source of Truth."

By recording a user performing a task in the legacy PB app, Replay captures the visual state, the data inputs, and the resulting outputs. It then uses AI to transform that recording into documented React components and TypeScript interfaces.

The Replay Methodology: 4 Hours vs. 40 Hours#

In a standard migration, the "Discovery Phase" is a black hole for budget. With Replay, we move from "Black Box" to "Documented Codebase" in days.

Step 1: Visual Recording#

Instead of reading

files, developers or BAs record their screens while navigating the PowerBuilder application. Replay captures the DOM (if web-based) or the visual layout and interaction patterns. This creates a "Video as Source of Truth" for the entire engineering team.

Step 2: Component Extraction#

Replay’s AI Automation Suite analyzes the recording. It identifies UI patterns—grids, forms, navigation elements—and maps them to a centralized Library (Design System). This ensures that the new TypeScript frontend isn't just a clone, but a modernized, accessible version of the original.

Step 3: Logic Mapping & Blueprinting#

The Blueprints (Editor) feature allows architects to see the underlying "Flows." If a PowerBuilder button triggers a complex stored procedure, Replay helps document that transition, generating API contracts that the new TypeScript frontend will need to consume.

Step 4: Code Generation#

Replay generates clean, idiomatic React and TypeScript code. It doesn't produce "spaghetti" output; it produces components that follow your organization's specific coding standards.

💰 ROI Insight: Manual screen recreation takes ~40 hours per complex enterprise screen. Replay reduces this to ~4 hours, representing a 90% reduction in UI development time and a 70% overall project time saving.

Preserving Business Logic: From PowerScript to TypeScript#

The most difficult part of moving from PowerBuilder to a modern stack is the PowerScript logic embedded in events (like

, , or ).

Here is an example of how a legacy PowerBuilder logic block is reimagined as a modern, type-safe TypeScript component through the Replay extraction process.

Legacy PowerScript (The "Black Box")#

powerscript
// Typical PowerBuilder DataWindow Logic
IF dw_1.GetItemString(row, "status") = "A" THEN
    dw_1.Modify("status.Color='255'")
    ll_result = f_calculate_tax(dw_1.GetItemNumber(row, "amount"))
    dw_1.SetItem(row, "tax_total", ll_result)
END IF

Generated TypeScript Component (The Replay Output)#

typescript
import React, { useState, useEffect } from 'react';
import { Button, Input, Card } from '@/components/ui';
import { calculateTax } from '@/api/taxService';

interface LegacyMigrationProps {
  initialData: {
    status: string;
    amount: number;
  };
}

/**
 * Extracted from PowerBuilder 'AccountSummary' Screen
 * Workflow: Tax Calculation on Status Active
 */
export const AccountSummaryModernized: React.FC<LegacyMigrationProps> = ({ initialData }) => {
  const [status, setStatus] = useState(initialData.status);
  const [taxTotal, setTaxTotal] = useState<number>(0);

  // Replay identified this business logic during the 'Record' phase
  const handleTaxUpdate = async (amount: number) => {
    if (status === 'A') {
      const result = await calculateTax(amount);
      setTaxTotal(result);
    }
  };

  return (
    <Card className="p-4">
      <div style={{ color: status === 'A' ? 'red' : 'black' }}>
        Status: {status}
      </div>
      <Input 
        type="number" 
        onChange={(e) => handleTaxUpdate(Number(e.target.value))} 
        placeholder="Enter Amount"
      />
      <div>Tax Total: {taxTotal}</div>
    </Card>
  );
};

💡 Pro Tip: Don't try to migrate 1:1. Use Replay's Technical Debt Audit to identify screens that are no longer used by your staff. Most legacy systems have 30% "ghost" features that don't need to be migrated.

Solving the Documentation Gap#

67% of legacy systems have no documentation. When the original developers retire, the system becomes a liability. Replay solves this by generating documentation automatically during the extraction process.

The platform generates:

• •API Contracts: Defining exactly what data the frontend expects.
• •E2E Tests: Using the recorded video as the baseline for Playwright or Cypress tests.
• •Architecture Flows: Visualizing how data moves through the system.

This is critical for industries like Financial Services and Healthcare, where compliance and audit trails are non-negotiable. Replay is built for these regulated environments, offering SOC2 compliance, HIPAA-readiness, and On-Premise deployment options to ensure your legacy data never leaves your secure perimeter.

A Step-by-Step Guide to Modernization with Replay#

Step 1: Inventory & Audit#

Use Replay to catalog every screen in your PowerBuilder application. The platform will flag duplicate UI patterns, allowing you to create a unified React component library rather than 500 slightly different versions of the same form.

Step 2: Workflow Recording#

Assign subject matter experts (SMEs) to record their daily tasks. Replay captures the "happy path" and the "edge cases" that are often missed in requirements gathering.

Step 3: Blueprinting the Future#

In the Replay Blueprints editor, map the legacy inputs to your new microservices or GraphQL resolvers. Replay generates the TypeScript interfaces required to bridge the gap.

Step 4: Automated Extraction#

Run the Replay AI Suite to generate the React components. Review the code in the platform, customize the styling to match your new design system, and export directly to your Git repository.

Step 5: Validation#

Compare the new React screen side-by-side with the original PowerBuilder recording. Replay’s E2E test generation ensures that the business logic remains consistent across the migration.

typescript
// Example: Generated API Contract from Replay extraction
// Target: PowerBuilder 'dw_customer_detail' DataWindow
export interface CustomerDetailContract {
  id: string;
  legalName: string; // Mapped from 'nm_legal'
  taxId: string;     // Mapped from 'id_tax_no'
  creditLimit: number;
  lastUpdated: string;
  isComplianceVerified: boolean;
}

export const fetchCustomerDetails = async (id: string): Promise<CustomerDetailContract> => {
  // Logic extracted from observed legacy API calls
  const response = await fetch(`/api/legacy/customers/${id}`);
  return response.json();
};

Addressing Common Concerns#

"Our PowerBuilder app is too customized for AI to understand."#

Replay doesn't just "guess" code. It uses Visual Reverse Engineering. By observing the actual execution of the application—how it handles clicks, how it renders data, and how it communicates with the backend—it captures the intent of the software. Customizations are actually easier to capture this way than by reading obfuscated PowerScript.

"We need to keep our data on-premise."#

Many of our clients in Government and Telecom have strict data sovereignty requirements. Replay offers an On-Premise version of the platform, ensuring that your source code and recordings never leave your internal network.

"Can we migrate incrementally?"#

Yes. This is the "Strangler Fig" pattern. Replay allows you to modernize one flow at a time. You can record the "Claims Processing" flow, extract it to React, and host it within your legacy environment or a new portal while the rest of the PowerBuilder app continues to run.

Frequently Asked Questions#

How long does legacy extraction take?#

While a manual rewrite of a 100-screen application can take 18-24 months, Replay typically reduces this to 2-4 months. Individual screen extraction and documentation take approximately 4 hours per screen, including review and refactoring.

What about business logic preservation?#

Replay captures business logic by observing state changes and network requests during user workflows. While complex server-side stored procedures still need to be managed, the UI-side logic (validation, conditional formatting, and navigation) is extracted and converted into type-safe TypeScript.

Does Replay support PowerBuilder versions older than 12.0?#

Yes. Because Replay uses visual reverse engineering and interaction recording, it is agnostic to the specific version of PowerBuilder. As long as the application can be run and interacted with, Replay can document and extract it.

How does this impact our technical debt?#

Replay directly addresses the $3.6 trillion technical debt problem by converting "Black Box" legacy systems into modern, documented, and modular codebases. By generating clean React components and TypeScript interfaces, it ensures that you aren't just creating "new debt" with the migration.

---

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