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

说明与用途

使用“strangler fig”方法将遗留 Backbone 应用迁移到 React，保留数据和路由。使用 Webpack/Vite、升级 Backbone、在 Backbone 视图中挂载 React 并共享模型。

问题

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.

来源