COOL:Ice Migration: Transforming Legacy Screens into Documented React Hooks

The "black box" of Unisys COOL:Ice (COBOL Object Oriented Language: Integrated Computing Environment) represents one of the most stubborn hurdles in enterprise modernization. For decades, these systems have powered mission-critical workflows in financial services and government agencies, but they now exist as a massive contributor to the $3.6 trillion global technical debt. The challenge isn't just the age of the code; it’s the proprietary nature of the web-enablement layers that sit between the mainframe and the browser. When you attempt a coolice migration transforming legacy interfaces into modern web apps, you aren't just moving pixels—you are trying to decipher undocumented business logic buried in 20-year-old HTML templates and proprietary script tags.

Traditional manual rewrites for these systems are notoriously risky. According to Replay's analysis, the average enterprise rewrite timeline is 18 months, and yet 70% of legacy rewrites fail or exceed their original timeline. This failure is often due to the "documentation gap"—67% of legacy systems lack documentation, leaving architects to guess at the original developer's intent.

TL;DR: Migrating COOL:Ice to React is traditionally a high-risk, 18-24 month manual process. By using Replay, enterprises can leverage Visual Reverse Engineering to convert recorded legacy workflows directly into documented React components and hooks. This reduces the time-per-screen from 40 hours to just 4 hours, ensuring 70% time savings while maintaining SOC2 and HIPAA compliance.

---

The Hidden Complexity of COOL:Ice Architectures#

COOL:Ice was designed to provide a web interface for mainframe applications, often using a combination of "Ice-Break" scripts and HTML templates. Over time, these templates become littered with hardcoded business rules, inline styles, and complex state management that doesn't follow modern RESTful or GraphQL patterns.

When beginning a coolice migration transforming legacy systems, architects often realize that the frontend and backend are so tightly coupled that a simple "lift and shift" is impossible. You are forced to choose between two painful options:

1. •The Big Bang Rewrite: Starting from scratch and risking the 70% failure rate.
2. •Screen Scraping: A brittle solution that adds more technical debt.

Visual Reverse Engineering is the third way. It allows you to bypass the source code entirely by capturing the application's behavior at the UI layer.

Video-to-code is the process of using AI-driven visual analysis to convert screen recordings of legacy application workflows into functional, modern codebases, including UI components, state logic, and documentation.

Modernizing Legacy Systems requires a shift from manual mapping to automated extraction.

---

The Replay Methodology: Coolice Migration Transforming Legacy Workflows#

Instead of digging through thousands of lines of Ice-Break scripts, Replay allows your subject matter experts (SMEs) to simply record themselves performing standard business flows. Whether it's a loan application in a bank or a claims process in an insurance firm, Replay captures the DOM changes, network requests, and visual states.

Step 1: Recording the Source of Truth#

In a coolice migration transforming legacy UI, the "Source of Truth" isn't the code—it’s the way the user interacts with the system. Replay records these interactions to create a "Flow." This flow serves as the architectural blueprint for the new React application.

Step 2: Extracting the Design System#

Legacy COOL:Ice screens are often visually inconsistent. Replay’s Library feature identifies recurring UI patterns across different screens and consolidates them into a unified Design System. This ensures that your new React application isn't just a clone of the old one, but a modernized, accessible version of it.

Step 3: Generating Documented React Hooks#

The most difficult part of any migration is the state logic. How does the "Submit" button interact with the "Validate" field? Replay’s AI Automation Suite analyzes the recorded flows to generate custom React hooks that encapsulate this logic.

---

Comparison: Manual Migration vs. Replay Visual Reverse Engineering#

Industry experts recommend evaluating the "Cost of Delay" when choosing a migration path. The following table highlights the radical difference in efficiency when using Replay for a coolice migration transforming legacy project.

---

Implementation: From Legacy HTML to React Hooks#

Let's look at what this looks like in practice. A typical COOL:Ice screen might have a complex form with inter-dependent fields. In the legacy system, this logic is often handled by messy JavaScript or server-side scripts that refresh the page.

The Legacy "Input" Pattern#

In COOL:Ice, you might see something like this:

html
<!-- Legacy COOL:Ice Template Fragment -->
<input type="text" name="ACCT_NUM" onchange="validateAcct(this.value)">
<script>
  function validateAcct(val) {
    if(val.length > 10) {
      document.getElementById('err').innerText = "Too long";
      // Hidden logic that calls an Ice-Break script
    }
  }
</script>

The Modernized React Hook (Generated by Replay)#

When Replay processes a recording of this interaction, it identifies the validation intent and the state transition. It then generates a clean, documented React hook. This is a critical part of a coolice migration transforming legacy logic into maintainable code.

typescript
/**
 * Generated by Replay AI - COOL:Ice Migration Module
 * Flow: Account Validation Workflow
 * Source Screen: ACCT_MGR_01
 */

import { useState, useCallback } from 'react';

interface UseAccountValidation {
  accountNumber: string;
  error: string | null;
  setAccountNumber: (val: string) => void;
  isValid: boolean;
}

export const useAccountValidation = (initialValue: string = ''): UseAccountValidation => {
  const [accountNumber, setAccount] = useState(initialValue);
  const [error, setError] = useState<string | null>(null);

  const setAccountNumber = useCallback((val: string) => {
    setAccount(val);
    
    // Extracted Business Logic: Max length 10
    if (val.length > 10) {
      setError("Account number cannot exceed 10 characters.");
    } else {
      setError(null);
    }
  }, []);

  return {
    accountNumber,
    error,
    setAccountNumber,
    isValid: !error && accountNumber.length > 0
  };
};

This hook is now part of your new Component Library, fully decoupled from the legacy mainframe protocols. You can find more about Building Component Libraries from Legacy UI on our blog.

---

Scaling the Migration with Replay Flows and Blueprints#

The real power of a coolice migration transforming legacy systems comes when you scale from one screen to five hundred. Replay’s Flows feature allows architects to map out the entire application topology.

Visual Reverse Engineering doesn't just look at one page; it looks at the transitions. If a user clicks "Next" and the application navigates from

to , Replay identifies the data being passed in the session and replicates that state management in the React Router or state provider.

Managing Complex State in React#

According to Replay's analysis, the biggest bottleneck in migration is data mapping. Replay's Blueprints (the platform's editor) allows developers to visually map legacy data fields to modern TypeScript interfaces.

typescript
// Replay-Generated Blueprint Mapping
export interface UserProfileMapping {
  /** Map to legacy 'U_NAME_FL' */
  fullName: string;
  /** Map to legacy 'U_ID_INT' */
  id: number;
  /** Map to legacy 'U_ROLE_CD' */
  role: 'ADMIN' | 'USER' | 'GUEST';
}

export const ProfileComponent: React.FC<{ data: UserProfileMapping }> = ({ data }) => {
  return (
    <div className="p-4 border rounded shadow">
      <h3>{data.fullName}</h3>
      <p>ID: {data.id}</p>
      <span className="badge">{data.role}</span>
    </div>
  );
};

By automating this mapping, Replay ensures that the coolice migration transforming legacy data remains consistent, preventing the common "data drift" that occurs during manual rewrites.

---

Security and Compliance in Regulated Industries#

Most COOL:Ice systems reside in highly regulated environments like Financial Services, Healthcare, and Government. A "cloud-only" migration tool is often a non-starter for these organizations.

Replay is built for these environments. It is SOC2 and HIPAA-ready, and for organizations with the strictest data sovereignty requirements, On-Premise deployment is available. This ensures that sensitive customer data recorded during the "Flow" capture never leaves your secure network.

When performing a coolice migration transforming legacy systems in these sectors, the ability to generate a full audit trail of how logic was extracted from the legacy UI to the new React code is invaluable for compliance officers.

---

Why "Video-to-Code" is the Future of Enterprise Architecture#

The traditional method of reading old code to write new code is fundamentally flawed because it assumes the old code is correct. In reality, legacy systems are full of "dead code" and workarounds for limitations that no longer exist.

Visual Reverse Engineering focuses on the desired outcome of the software. By observing the UI, Replay captures the "as-is" state of the business process, which is often different from the "as-documented" state.

Replay bridges the gap between the legacy world and the modern web. It allows enterprises to reclaim their agility without the catastrophic risk of a failed rewrite. With the global technical debt reaching $3.6 trillion, the ability to accelerate migration by 70% isn't just a luxury—it's a competitive necessity.

---

Frequently Asked Questions#

How does Replay handle proprietary COOL:Ice scripts that aren't visible in the browser?#

Replay utilizes Visual Reverse Engineering to observe the effects of those scripts on the UI and the network layer. By analyzing the inputs and the resulting DOM changes/API calls, Replay can reconstruct the functional logic in React hooks without needing to parse the original Ice-Break or COBOL source code.

Can Replay help with the CSS and styling during a coolice migration transforming legacy project?#

Yes. Replay’s Library feature automatically extracts CSS properties from the legacy UI and maps them to a modern, standardized Design System. It identifies common patterns (like button styles, typography, and spacing) and generates clean Tailwind or CSS-in-JS code, allowing you to modernize the look and feel while keeping the functionality intact.

Is Replay compatible with mainframe-backed web applications?#

Absolutely. Replay is agnostic to the backend. Whether your legacy UI is powered by COOL:Ice on a Unisys mainframe, or a JSP/ASP.NET legacy stack, Replay focuses on the frontend delivery layer. It records the interaction patterns to generate the modern React frontend, which can then be connected to your modernized APIs.

What is the learning curve for a team using Replay for the first time?#

Because Replay is designed for Enterprise Architects and Senior Developers, it integrates into existing workflows. SMEs can start recording flows immediately with no training. Developers typically spend a few days familiarizing themselves with the Blueprint editor and the generated React patterns, but the 70% time savings usually begin within the first two weeks of a project.

---

Ready to modernize without rewriting? Book a pilot with Replay