1. Create new service alongside legacy
2. Route new features to modern service
3. Gradually migrate existing features
4. Eventually retire legacy system

// Legacy API returns old format
const legacyResponse = await legacyApi.getUser(id);
// { usr_id: 1, usr_nm: 'John', usr_email: 'john@example.com' }

// Transform to modern format
const modernUser = {
  id: legacyResponse.usr_id,
  name: legacyResponse.usr_nm,
  email: legacyResponse.usr_email
};

// ES5 → ES6+
// var → const/let
var name = 'John';  // ❌
const name = 'John'; // ✅

// function → arrow
function add(a, b) { return a + b; }  // Old
const add = (a, b) => a + b;          // Modern

// Callback → Promise → Async/Await
// Callback
getData(function(err, data) { ... });
// Promise
getData().then(data => ...).catch(err => ...);
// Async/Await
const data = await getData();

// jQuery
$('.button').click(function() { ... });
$('#result').html(data);

// Vanilla JS
document.querySelector('.button').addEventListener('click', () => { ... });
document.getElementById('result').innerHTML = data;

// Class Component
class Counter extends Component {
  state = { count: 0 };
  componentDidMount() { ... }
  render() { return <div>{this.state.count}</div>; }
}

// Functional + Hooks
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => { ... }, []);
  return <div>{count}</div>;
}