Classic ASP to Modern TypeScript: A Video-First Extraction Strategy

Classic ASP is the "undead" of the enterprise. Despite being officially deprecated for over a decade, it remains the silent engine behind multi-billion dollar workflows in financial services, insurance, and government. The problem isn't just the age of the code; it’s that the original authors retired years ago, the documentation is non-existent, and the business logic is inextricably tangled with the presentation layer.

Traditional "Big Bang" rewrites of these systems are a death march. With a 70% failure rate and an average timeline of 18–24 months, most organizations choose to live with the technical debt rather than risk a catastrophic migration. But technical debt is a tax that compounds. With global technical debt reaching $3.6 trillion, the "wait and see" approach is no longer viable.

The solution isn't to spend six months on "code archaeology"—reading through thousands of lines of VBScript and spaghetti HTML. The solution is to use the application's behavior as the source of truth.

TL;DR: Modernizing Classic ASP to TypeScript no longer requires manual code archaeology; by using video-first extraction, teams can record user workflows and automatically generate documented React components and API contracts, reducing migration time by 70%.

The High Cost of "Code Archaeology"#

Most legacy modernization projects begin with a discovery phase. Architects sit with dusty repos, trying to figure out what a specific

file does. They find calls to COM+ components that no longer have source code. They find business logic hidden inside blocks that span 4,000 lines.

This manual process is why 67% of legacy systems lack documentation. It’s too expensive to document after the fact.

The manual approach takes an average of 40 hours per screen to analyze, document, and recreate. Using Replay, that time is slashed to 4 hours. We shift the focus from "what does the code say?" to "what does the application do?"

Why Classic ASP to TypeScript is a Unique Challenge#

Classic ASP (VBScript) is inherently procedural. TypeScript is structured, type-safe, and usually component-based (when used with React or Vue). The gap between these two is not just a language change; it's a paradigm shift.

1. •State Management: ASP relies on
   text

   Session
   and
   text

   Application
   objects. Modern TS apps use Redux, Context, or Zustand.
2. •The "Spaghetti" Factor: In ASP, database queries, UI rendering, and business logic often live in the same file.
3. •Lack of Types: VBScript is loosely typed. Moving to TypeScript requires defining interfaces for data that has been "invisible" for twenty years.

⚠️ Warning: Attempting to use LLMs to simply "convert" ASP files to TypeScript often results in hallucinated logic and broken dependencies because the LLM lacks the context of the external COM+ objects and database schemas.

The Video-First Extraction Strategy#

Instead of looking at the code, we look at the execution. By recording a real user workflow—submitting a claim, processing a trade, or updating a patient record—we capture the exact state transitions, API calls (or lack thereof), and UI behaviors.

Replay uses this recording as the "Source of Truth." It extracts the visual layer into modern React components and the logic into clean TypeScript functions.

Step 1: Workflow Capture#

A subject matter expert (SME) performs the task in the legacy system while Replay records the session. This isn't just a screen recording; it's a capture of the DOM, the network requests, and the data flow.

Step 2: Visual Reverse Engineering#

Replay analyzes the recording and identifies UI patterns. It maps legacy HTML tables and nested divs into a modern, reusable Design System. If your legacy system uses a specific "Save" logic, Replay identifies the trigger and the payload.

Step 3: Generating the TypeScript Scaffold#

The platform generates a documented React component. Below is an example of what an extracted component looks like when moving from a legacy ASP form to a modern TypeScript implementation.

typescript
// Generated by Replay from Legacy 'ClaimEntry.asp'
import React, { useState, useEffect } from 'react';
import { Button, Input, Card, Alert } from '@/components/ui';

interface ClaimData {
  claimId: string;
  policyNumber: string;
  incidentDate: string;
  claimAmount: number;
  status: 'Pending' | 'Approved' | 'Denied';
}

/**
 * @description Migrated from ClaimEntry.asp. 
 * Preserves legacy validation logic for policy number formats.
 */
export const ClaimEntryForm: React.FC<{ initialId?: string }> = ({ initialId }) => {
  const [formData, setFormData] = useState<Partial<ClaimData>>({});
  const [loading, setLoading] = useState(false);

  // Replay identified this legacy validation logic from the client-side VBScript
  const validatePolicy = (num: string) => {
    const pattern = /^[A-Z]{2}-\d{6}$/;
    return pattern.test(num);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validatePolicy(formData.policyNumber || '')) {
      alert("Invalid Policy Format - Must match AA-123456");
      return;
    }
    
    // API Contract generated by Replay based on recorded network traffic
    setLoading(true);
    try {
      const response = await fetch('/api/v1/claims/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });
      // Handle response...
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card className="p-6">
      <form onSubmit={handleSubmit} className="space-y-4">
        <Input 
          label="Policy Number"
          value={formData.policyNumber || ''}
          onChange={(e) => setFormData({...formData, policyNumber: e.target.value})}
        />
        {/* Additional fields extracted from recording... */}
        <Button type="submit" disabled={loading}>
          {loading ? 'Processing...' : 'Submit Claim'}
        </Button>
      </form>
    </Card>
  );
};

Bridging the Data Gap: API Contract Generation#

One of the biggest hurdles in Classic ASP modernization is the backend. Most ASP apps talk directly to SQL Server via ADO (ActiveX Data Objects). When you move to a modern frontend, you need a REST or GraphQL API.

Replay’s AI Automation Suite observes the data moving between the legacy server and the browser during your recording. It then generates:

1. •OpenAPI (Swagger) Specs: Defining exactly what the new backend needs to support.
2. •E2E Tests: Ensuring the new TypeScript component behaves exactly like the old ASP page.
3. •Technical Debt Audit: Identifying which parts of the legacy logic are redundant or dead code.

💰 ROI Insight: By automating the generation of API contracts and UI components, enterprise teams typically see a 70% reduction in "Time to First Demo." What used to take a quarter now takes a sprint.

From Black Box to Documented Codebase#

The "Black Box" problem is the primary driver of modernization anxiety. If you don't know what's inside the box, you're afraid to break it. Replay turns the black box into a transparent, documented library.

The Replay Library (Design System)#

As you record different screens in your Classic ASP application, Replay identifies recurring UI patterns. It might find 50 different versions of a "Date Picker" or "Data Grid." Instead of migrating 50 different components, Replay helps you consolidate them into a single, high-quality React component in your new Design System.

The Flows (Architecture Mapping)#

Modernizing isn't just about screens; it's about the journey. Replay maps the "Flows"—the sequence of pages a user visits to complete a transaction. This visual architecture map allows VPs of Engineering to see the entire scope of the migration in a single view, rather than getting lost in a file directory.

💡 Pro Tip: Start your modernization with the most "stable" workflows. These are the processes that haven't changed in years. Use Replay to extract these first to build momentum and prove the ROI to stakeholders.

Case Study: Financial Services Migration#

A Tier-1 bank had a legacy internal portal for wire transfers built in Classic ASP.

• •The Problem: The system was 22 years old. Only two developers understood the codebase. They needed to move to a SOC2-compliant, modern TypeScript/React stack.
• •The Old Way: Estimated 14 months and $1.2M.
• •The Replay Way:
  • •Recorded 12 core workflows (Wire initiation, Approval, Audit Log, etc.).
  • •Replay extracted 45 unique React components and generated 12 API contracts.
  • •Total time to production-ready frontend: 9 weeks.
  • •Total cost savings: $850,000.

Implementation Detail: Handling Legacy Logic#

When extracting from Classic ASP, you often encounter complex server-side logic that must be preserved. Replay’s Blueprints (Editor) allow you to inspect the extracted logic and refine it.

typescript
// Example: Preserving complex legacy calculation logic
// Replay extracted this from a 500-line VBScript block in 'PremiumCalc.asp'

export const calculateRiskPremium = (age: number, coverageAmount: number, regionCode: string): number => {
  let baseRate = 0.05;
  
  // Legacy Rule #402: Regional adjustment for high-risk zones
  if (['NY', 'FL', 'CA'].includes(regionCode)) {
    baseRate += 0.02;
  }

  // Legacy Rule #105: Age-based multiplier
  const ageFactor = age > 50 ? 1.5 : 1.0;

  return (coverageAmount * baseRate) * ageFactor;
};

By extracting this logic into a pure TypeScript function, you can now write unit tests against it—something that was nearly impossible in the original ASP environment.

Built for Regulated Environments#

We understand that Classic ASP systems often live in the most sensitive parts of the business. Whether it's HIPAA-protected patient data or SOC2-regulated financial data, "sending code to the cloud" is often a non-starter.

Replay is built for these constraints:

• •On-Premise Available: Run the extraction engine within your own VPC.
• •SOC2 & HIPAA Ready: Your data and source code remain yours.
• •PII Masking: Replay automatically masks sensitive user data during the recording process, ensuring that only the structural and logical metadata is used for reverse engineering.

Frequently Asked Questions#

How long does legacy extraction take?#

While a manual rewrite takes 18–24 months, a Replay-led extraction typically takes 2–8 weeks depending on the complexity of the workflows. Most teams see their first modernized screens within the first 48 hours of a pilot.

What about business logic preservation?#

Replay captures the inputs, outputs, and state changes of your application. While it generates modern code, it preserves the underlying business rules by observing how the application handles data. You can then refine this logic in the Replay Blueprint editor.

Does Replay replace my developers?#

No. Replay is a "force multiplier." It removes the "grunt work" of manual transcription and documentation (the 40 hours per screen), allowing your senior architects to focus on high-level system design and performance optimization.

Can Replay handle "Spaghetti Code"?#

Yes. Because Replay focuses on the behavior of the application (the DOM and network layer) rather than just the source code, it isn't "confused" by messy VBScript. If the application works for the user, Replay can extract it.

---

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