Backbone React Bridge

An enterprise middleware library that seamlessly integrates modern standalone React Micro-Frontends into legacy Backbone/Marionette architectures.

Architecture Pattern: "The Strangler Fig"

This library implements a decoupled Web Component bridge.

• React applications define themselves as native HTML5 Custom Elements.
• Backbone applications render these elements in their templates and use this bridge to automatically serialize Backbone.Model and Backbone.Collection data into HTML string attributes.
• React components receive these string attributes, parse them back into JSON objects, and render natively.

Installation

```bash npm install @mdasifkt/backbone-react-bridge

## 1. For the React Application

In your React MFE project, use the `defineWebComponent` helper to automatically wrap your root React component.

```javascript
// src/main.jsx
import { defineWebComponent } from '@mdasifkt/backbone-react-bridge';
import MyReactComponent from './App.jsx';

defineWebComponent('react-my-component', MyReactComponent, {
  // These HTML attributes will be auto-parsed as JSON into React Props
  attributes: ['user-data', 'theme-mode'],

  // These React callback props will auto-dispatch DOM CustomEvents
  events: ['onSaveProfile']
});

2. For the Legacy Backbone Host

In your Backbone legacy application, extend from ReactBridgeView to automatically sync your Backbone Models/Collections to the DOM attributes.

// src/views.js
import { ReactBridgeView } from '@mdasifkt/backbone-react-bridge/backbone';

export const MyLegacyView = ReactBridgeView.extend({
  // The name of the HTML tag the React App registered
  componentTag: 'react-my-component',

  // Map your Backbone data to the HTML attributes expected by React
  reactProps() {
    return {
      'theme-mode': 'dark',
      'user-data': this.model.toJSON()
    };
  },

  // Map DOM CustomEvents thrown by React back to Backbone methods!
  reactEvents: {
    'onSaveProfile': 'handleReactSave'
  },

  handleReactSave(eventDetail) {
    // React just called 'onSaveProfile(data)'. 
    // The data is passed cleanly into this Backbone method.
    this.model.set(eventDetail);
    this.model.save();
  }
});
\`\`\`