Strategies for evolving legacy systems towards design patterns

Strategy for Evolving Legacy Systems with Design Patterns

Legacy systems often suffer from bloated code, convoluted logic, and technical debt. JavaScript design patterns offer a set of proven solutions that enable gradual system refactoring without breaking existing functionality. From simple factory patterns to complex observer patterns, each pattern provides an elegant solution path for specific problems.

Identifying Code Smells and Pattern Matching

Before transforming a legacy system, it's essential to identify "bad smells" in the code. For instance, singleton patterns are suitable for rampant global states, while promise or observer patterns can refactor callback hell scenarios. The following legacy code snippet demonstrates high coupling between modules:

// Legacy code example
function processOrder(order) {
  const db = require('./db');
  const logger = require('./logger');
  const notifier = require('./notifier');
  
  db.save(order);
  logger.log(order);
  notifier.sendEmail(order.user);
}

This hard-coded dependency can be refactored using the Dependency Injection pattern:

// Refactored version
function createOrderProcessor({ db, logger, notifier }) {
  return {
    process(order) {
      db.save(order);
      logger.log(order);
      notifier.sendEmail(order.user);
    }
  };
}

Incremental Refactoring Strategy

Wrapper Pattern Transition

For core modules that cannot be directly modified, the wrapper pattern can serve as an intermediate layer:

class LegacySystemWrapper {
  constructor(legacyApi) {
    this.legacy = legacyApi;
  }
  
  modernMethod(params) {
    // Parameter conversion
    const legacyParams = this._convertParams(params);
    // Call legacy method
    const result = this.legacy.deprecatedMethod(legacyParams);
    // Result processing
    return this._parseResult(result);
  }
}

Strategy Pattern for Conditional Branches

When dealing with complex conditional logic, the strategy pattern can significantly improve maintainability:

// Before refactoring
function calculatePrice(userType, price) {
  if (userType === 'vip') {
    return price * 0.8;
  } else if (userType === 'svip') {
    return price * 0.7;
  }
  return price;
}

// After refactoring
const priceStrategies = {
  vip: price => price * 0.8,
  svip: price => price * 0.7,
  default: price => price
};

function calculatePrice(userType, price) {
  const strategy = priceStrategies[userType] || priceStrategies.default;
  return strategy(price);
}

Combining Design Patterns

Real-world projects often require combining multiple patterns. For example, implementing a pluggable middleware system:

class MiddlewareSystem {
  constructor() {
    this.middlewares = [];
  }

  use(middleware) {
    this.middlewares.push(middleware);
  }

  execute(context) {
    const chain = this.middlewares.reduceRight(
      (next, middleware) => () => middleware(context, next),
      () => Promise.resolve()
    );
    return chain();
  }
}

// Usage example
const system = new MiddlewareSystem();
system.use(async (ctx, next) => {
  console.log('Middleware 1 start');
  await next();
  console.log('Middleware 1 end');
});

Test-Driven Refactoring

Comprehensive test cases are essential for safe refactoring when introducing design patterns. For the price strategy example:

describe('Price Calculation', () => {
  it('should apply vip discount', () => {
    expect(calculatePrice('vip', 100)).toBe(80);
  });
  
  it('should apply default price', () => {
    expect(calculatePrice('normal', 100)).toBe(100);
  });
});

Performance and Pattern Trade-offs

Certain design patterns may introduce performance overhead. For example, the factory pattern, which frequently creates objects, can be optimized with an object pool:

class ObjectPool {
  constructor(createFn) {
    this.createFn = createFn;
    this.pool = [];
  }
  
  acquire() {
    return this.pool.pop() || this.createFn();
  }
  
  release(obj) {
    this.pool.push(obj);
  }
}

// Usage example
const pool = new ObjectPool(() => new ExpensiveObject());
const obj = pool.acquire();
// Release after use
pool.release(obj);

Pattern Evolution Roadmap

1. Phase 1: Unify interfaces using the adapter pattern
2. Phase 2: Replace conditional branches with the strategy pattern
3. Phase 3: Introduce the observer pattern to decouple event handling
4. Phase 4: Dynamically extend functionality with the decorator pattern
5. Phase 5: Handle tree structures using the composite pattern

Each phase should be accompanied by corresponding test coverage and performance benchmarks to ensure the system remains functional throughout the evolution process.