Legacy Modernizer

Legacy Modernizer - Safe Legacy Code Evolution

🎯 When to Use This Skill

Use when dealing with:

• Code written 5+ years ago
• No tests or documentation
• "Don't touch - it works" code
• Deprecated dependencies
• Security vulnerabilities in old code
• Performance issues in legacy systems

⚡ The Golden Rule of Legacy Code

NEVER refactor without tests! First make it testable, then make it better.

📋 The Safe Modernization Process

Phase 1: UNDERSTAND (Don't Touch Yet!)

WITH MCP Tools:

"Analyze the architecture and dependencies of [legacy module]"
"Document how this legacy code works"

WITHOUT MCP:

1. Map the Territory:

# Find all files related to the feature
grep -r "LegacyClass" --include="*.js" --include="*.py" --include="*.java"

# Trace execution flow
echo "=== LEGACY CODE MAP ===" > legacy_analysis.md
echo "Entry points:" >> legacy_analysis.md
grep -r "main\|init\|start" --include="*.js" >> legacy_analysis.md

# Find dependencies
echo "Dependencies:" >> legacy_analysis.md
grep -r "require\|import\|include" legacy_module/ >> legacy_analysis.md

2. Document Current Behavior:

// Add temporary logging to understand flow
function legacyFunction(data) {
  console.log('[LEGACY TRACE] Input:', JSON.stringify(data));
  // ... existing code ...
  console.log('[LEGACY TRACE] Output:', result);
  return result;
}

Phase 2: PROTECT (Add Safety Net)

WITH MCP (Test Generator):

"Generate characterization tests for this legacy code"

WITHOUT MCP:

Characterization Tests (Capture Current Behavior):

// Not testing if it's "right", just what it currently does
describe('Legacy System - Current Behavior', () => {
  it('should handle normal input as currently implemented', () => {
    const result = legacyFunction({ id: 1, name: 'test' });

    // Capture EXACT current output
    expect(result).toEqual({
      status: 'OK',
      data: 'TEST', // Even if this seems wrong!
      timestamp: expect.any(Number),
    });
  });

  it('should handle null input as currently implemented', () => {
    // Even if it crashes, document it!
    expect(() => legacyFunction(null)).toThrow('Cannot read property');
  });
});

Golden Master Testing:

# Capture current outputs
for input in test_inputs/*; do
  ./legacy_app < "$input" > "golden_masters/$(basename $input).output"
done

# After changes, verify outputs match
for input in test_inputs/*; do
  ./modernized_app < "$input" > temp.output
  diff "golden_masters/$(basename $input).output" temp.output
done

Phase 3: ISOLATE (Strangler Fig Pattern)

Wrap Legacy Code:

// Step 1: Create wrapper (Facade)
class ModernInterface {
  constructor() {
    this.legacy = new LegacySystem();
  }

  async processData(input) {
    // Modern interface
    const legacyFormat = this.convertToLegacyFormat(input);
    const result = this.legacy.oldProcessMethod(legacyFormat);
    return this.convertToModernFormat(result);
  }

  convertToLegacyFormat(modern) {
    // Transform modern input to legacy format
  }

  convertToModernFormat(legacy) {
    // Transform legacy output to modern format
  }
}

Phase 4: MODERNIZE (Incremental Updates)

Safe Modernization Patterns:

1. Branch by Abstraction:

class DataProcessor {
  constructor(useModern = false) {
    this.useModern = useModern;
  }

  process(data) {
    if (this.useModern) {
      return this.modernProcess(data);
    }
    return this.legacyProcess(data);
  }

  legacyProcess(data) {
    // Original implementation
  }

  modernProcess(data) {
    // New implementation
  }
}

2. Parallel Run (Verify Compatibility):

async function processWithVerification(data) {
  const [legacyResult, modernResult] = await Promise.all([
    legacyProcess(data),
    modernProcess(data),
  ]);

  // Compare results
  if (JSON.stringify(legacyResult) !== JSON.stringify(modernResult)) {
    console.error('Results mismatch!', { legacyResult, modernResult });
    // Use legacy result for safety
    return legacyResult;
  }

  // Both match, safe to use modern
  return modernResult;
}

🔧 Common Modernization Tasks

1. Callback Hell → Promises/Async

Before (Legacy):

getData(function (err, data) {
  if (err) return handleError(err);
  processData(data, function (err, result) {
    if (err) return handleError(err);
    saveResult(result, function (err) {
      if (err) return handleError(err);
      done();
    });
  });
});

After (Modern):

async function modernFlow() {
  try {
    const data = await getData();
    const result = await processData(data);
    await saveResult(result);
    done();
  } catch (err) {
    handleError(err);
  }
}

2. Global Variables → Module Pattern

Before (Legacy):

var globalConfig = {};
var globalState = {};

function doSomething() {
  globalState.counter++;
  return globalConfig.prefix + globalState.counter;
}

After (Modern):

class AppModule {
  constructor(config) {
    this.config = config;
    this.state = { counter: 0 };
  }

  doSomething() {
    this.state.counter++;
    return this.config.prefix + this.state.counter;
  }
}

export default AppModule;

3. SQL Injection → Parameterized Queries

Before (Legacy - DANGEROUS):

const query = `SELECT * FROM users WHERE id = ${userId}`;
db.query(query);

After (Modern - SAFE):

const query = 'SELECT * FROM users WHERE id = ?';
db.query(query, [userId]);

4. Old Dependencies → Modern Alternatives

// Mapping old to new
const DEPENDENCY_MAP = {
  request: 'axios', // HTTP client
  async: 'native-promises', // Flow control
  underscore: 'lodash', // Utilities
  bower: 'npm', // Package management
  grunt: 'webpack', // Build tool
  jquery: 'vanilla-js', // DOM manipulation
};

// Safe migration approach:
// 1. Install new alongside old
// 2. Migrate one file at a time
// 3. Run tests after each migration
// 4. Remove old when complete

📊 Modernization Checklist

Security Fixes (Priority 1):

• SQL injection vulnerabilities
• XSS vulnerabilities
• Hardcoded secrets removed
• Outdated crypto replaced
• Input validation added
• HTTPS enforcement

Code Quality (Priority 2):

• Global variables eliminated
• Callbacks → Promises/Async
• Var → Let/Const
• == → ===
• Error handling improved
• Dead code removed

Performance (Priority 3):

• Database queries optimized
• Caching implemented
• Lazy loading added
• Bundle size reduced
• Memory leaks fixed

Developer Experience (Priority 4):

• Tests added (>60% coverage)
• Documentation written
• Linting configured
• Types added (TypeScript/JSDoc)
• CI/CD pipeline setup

🚨 Red Flags in Legacy Code

Watch for these danger signs:

// 🚨 Date handling
new Date('2024-01-01'); // Timezone issues!

// 🚨 Type coercion
if (value == true)
  // Use === instead

  // 🚨 Eval usage
  eval(userInput); // Security nightmare!

// 🚨 Synchronous I/O
const data = fs.readFileSync(); // Blocks everything!

// 🚨 Magic numbers
if (status === 2)
  // What does 2 mean?

  // 🚨 No error handling
  JSON.parse(data); // Will crash on bad input

💡 Migration Strategies by Language

JavaScript → Modern JS:

# Use automated tools first
npx lebab --transform arrow,let,template legacy.js -o modern.js
npx eslint --fix legacy.js

# TypeScript migration
npx tsc --init
mv legacy.js legacy.ts
npx tsc --allowJs --checkJs

Python 2 → Python 3:

# Automated conversion
2to3 -w legacy.py

# Common fixes
print "Hello"     → print("Hello")
xrange()         → range()
unicode()        → str()

jQuery → Vanilla JS:

// jQuery
$('#element').hide();
$('.class').on('click', handler);

// Vanilla
document.getElementById('element').style.display = 'none';
document.querySelectorAll('.class').forEach(el => {
  el.addEventListener('click', handler);
});

📈 Success Metrics

Track modernization progress:

## Legacy Modernization Scorecard

### Week 1 | Week 4 | Week 8

----------|---------|--------
Coverage: 0% | 45% | 78%
Security Issues: 12 | 6 | 1
Tech Debt (hours): 200 | 120 | 40
Build Time: 5min | 3min | 1min
Bundle Size: 2.4MB | 1.2MB | 600KB
Load Time: 4s | 2.5s | 1.2s

🔄 Rollback Strategy

Always have an escape plan:

// Feature flags for safe rollout
if (featureFlags.useModernSystem) {
  return modernImplementation();
} else {
  return legacyImplementation();
}

// Database migrations with rollback
// up.sql
ALTER TABLE users ADD COLUMN email_verified BOOLEAN DEFAULT false;

// down.sql
ALTER TABLE users DROP COLUMN email_verified;

Remember: Legacy code is not bad code - it's proven code that needs careful evolution! 🏛️→🏢