The Framework Nobody Wrote Down: Taking a Backbone App to React

Описание и применение

Миграция старого Backbone‑приложения на React с сохранением данных и маршрутизации через "strangler fig". Используется Webpack/Vite, обновление Backbone, монтирование React в Backbone‑виды и совместное использование моделей.

Задача

Legacy Backbone apps contain custom frameworks—global singletons, event buses, navigation controllers, view cleanup, template build steps, AJAX hooks, and jQuery plugins—that are hard to maintain and hinder modernization.

Результат

The migration successfully replaced a custom Backbone‑centric framework with React, modern bundling, and standard practices, eliminating legacy dependencies and improving maintainability.

Рабочий процесс

• 1. Inventory custom framework components (singleton, event bus, navigation, cleanup, template build, AJAX hooks, jQuery plugins).
• 2. Move to a modern bundler (Webpack or Vite) to handle AMD modules and bundle Handlebars templates.
• 3. Upgrade Backbone to 1.4+ and replace legacy patterns (e.g., this.options, model.on).
• 4. Implement a strangler fig migration: keep Backbone views, mount React components inside them with createRoot, and unmount on remove.
• 5. Share Backbone models with React via useSyncExternalStore so both frameworks see the same data.
• 6. Replace navigation controller with React Router or similar, gradually removing Backbone Router.
• 7. Remove or replace global AJAX hooks with fetch/axios interceptors.
• 8. Delete unused jQuery plugins and Handlebars templates.
• 9. Add tests for new React components and gradually replace Backbone tests (if any).

Доказательства

Backbone gave you models, views, a router and events, and left the rest to you.

Источник

Running Backbone and React together: a Backbone view hosts a React root, creating it in render and unmounting it in remove; a Backbone model is read by React through useSyncExternalStore, so both frameworks see the same data; then views are replaced one at a time until React owns routing

Источник

The rest of the Backbone app doesn't notice anything changed. It still creates a CartView and calls render() and remove() as before.

Источник

If the app is stable, rarely changes and the people who look after it are happy, leaving it alone is a perfectly fair choice.

Источник