Communication between frameworks

Communication Between Frameworks

In modern front-end development, it is increasingly common for multiple frameworks to coexist. Data transfer and interaction between different frameworks have become a critical issue. Whether it's React, Vue, or Angular, each has its own state management mechanism, but cross-framework communication requires special handling.

Communication Based on Custom Events

Custom Events are a browser-native solution for cross-framework communication. By creating and dispatching custom events, components from different frameworks can listen and respond to these events.

// Dispatching an event in Framework A
const event = new CustomEvent('frameworkEvent', {
  detail: { message: 'Hello from Framework A' }
});
document.dispatchEvent(event);

// Listening to the event in Framework B
document.addEventListener('frameworkEvent', (e) => {
  console.log(e.detail.message); // Output: Hello from Framework A
});

This method is straightforward, but attention must be paid to event naming conflicts. It is recommended to add prefixes to event names, such as react:userUpdate or vue:dataChange.

Using PostMessage for Cross-Window Communication

When frameworks run in different windows or iframes, the window.postMessage API can be used for secure communication.

// Parent window sending a message
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage(
  { type: 'update', payload: { count: 42 } },
  'https://child-origin.com'
);

// Child window receiving the message
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://parent-origin.com') return;
  if (event.data.type === 'update') {
    console.log('Received:', event.data.payload);
  }
});

This approach supports cross-origin communication but requires strict validation of message sources to prevent security vulnerabilities.

Shared State Management

By creating a shared state object, multiple frameworks can access and modify the same data source. State management libraries like Redux or Vuex can be adapted to different frameworks.

// Shared store.js
const store = {
  state: { count: 0 },
  subscribers: [],
  subscribe(callback) {
    this.subscribers.push(callback);
  },
  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.subscribers.forEach(cb => cb(this.state));
  }
};

// Usage in a React component
import store from './store';

function ReactCounter() {
  const [state, setState] = useState(store.state);
  
  useEffect(() => {
    store.subscribe(newState => setState(newState));
  }, []);

  return <div>{state.count}</div>;
}

// Usage in a Vue component
import store from './store';

export default {
  data() {
    return { count: store.state.count };
  },
  created() {
    store.subscribe(newState => {
      this.count = newState.count;
    });
  }
}

Web Components as a Bridge

Web Components are framework-agnostic and can encapsulate specific functionalities while exposing interfaces for different frameworks to call.

// Defining a Web Component
class SharedComponent extends HTMLElement {
  constructor() {
    super();
    this._data = { value: '' };
  }

  set data(newValue) {
    this._data = newValue;
    this.dispatchEvent(new CustomEvent('data-change', { detail: this._data }));
  }

  get data() {
    return this._data;
  }
}

customElements.define('shared-component', SharedComponent);

// Usage in React
function ReactWrapper() {
  const ref = useRef();

  useEffect(() => {
    const component = ref.current;
    component.data = { value: 'React Data' };
    component.addEventListener('data-change', (e) => {
      console.log('React received:', e.detail);
    });
  }, []);

  return <shared-component ref={ref} />;
}

// Usage in Vue
<template>
  <shared-component ref="sharedComp" />
</template>

<script>
export default {
  mounted() {
    this.$refs.sharedComp.data = { value: 'Vue Data' };
    this.$refs.sharedComp.addEventListener('data-change', (e) => {
      console.log('Vue received:', e.detail);
    });
  }
}
</script>

Proxy-Based Reactive Bridging

Using JavaScript's Proxy object, a reactive bridge can be created to automatically synchronize data changes between different frameworks.

// Creating a reactive bridge
function createReactiveBridge() {
  const data = { value: null };
  const callbacks = [];

  const proxy = new Proxy(data, {
    set(target, prop, value) {
      target[prop] = value;
      callbacks.forEach(cb => cb(target));
      return true;
    }
  });

  return {
    data: proxy,
    subscribe(callback) {
      callbacks.push(callback);
      return () => {
        const index = callbacks.indexOf(callback);
        if (index > -1) callbacks.splice(index, 1);
      };
    }
  };
}

// Example usage
const bridge = createReactiveBridge();

// Framework A sets data
bridge.data.value = 'Initial Value';

// Framework B listens for changes
bridge.subscribe((newData) => {
  console.log('Data updated:', newData);
});

URL-Based State Sharing

Simple state sharing can be achieved through URL parameters or hashes, suitable for scenarios where browser history needs to be preserved.

// Updating URL state
function updateUrlState(state) {
  const url = new URL(window.location);
  url.searchParams.set('sharedState', JSON.stringify(state));
  window.history.pushState({}, '', url);
}

// Listening for URL changes
window.addEventListener('popstate', () => {
  const url = new URL(window.location);
  const state = url.searchParams.get('sharedState');
  if (state) {
    const parsedState = JSON.parse(state);
    console.log('State from URL:', parsedState);
  }
});

// Initial read
const initialUrl = new URL(window.location);
const initialState = initialUrl.searchParams.get('sharedState');
if (initialState) {
  console.log('Initial state:', JSON.parse(initialState));
}

Performance Considerations and Optimization

Cross-framework communication can introduce performance overhead, especially in high-frequency update scenarios. The following optimization strategies can be adopted:

1. Throttling high-frequency events

import { throttle } from 'lodash';

document.addEventListener('frameworkEvent', throttle((e) => {
  // Processing logic
}, 100));

2. Batch updates

let batchQueue = [];
let isBatching = false;

function batchUpdate(callback) {
  if (!isBatching) {
    isBatching = true;
    requestAnimationFrame(() => {
      callback();
      isBatching = false;
      batchQueue = [];
    });
  }
  batchQueue.push(callback);
}

3. Using Web Workers for complex computations

// Main thread
const worker = new Worker('shared-worker.js');
worker.postMessage({ type: 'calculate', data: largeDataSet });

worker.onmessage = (e) => {
  if (e.data.type === 'result') {
    // Update UI
  }
};

// shared-worker.js
self.onmessage = (e) => {
  if (e.data.type === 'calculate') {
    const result = heavyComputation(e.data.data);
    self.postMessage({ type: 'result', data: result });
  }
};

Security Considerations

The following security factors must be considered during cross-framework communication:

1. Validating message sources

window.addEventListener('message', (event) => {
  const allowedOrigins = ['https://trusted-domain.com'];
  if (!allowedOrigins.includes(event.origin)) return;
  // Process the message
});

2. Data sanitization

function sanitizeInput(input) {
  if (typeof input !== 'object') return input;
  const safeInput = {};
  for (const key in input) {
    if (Object.hasOwnProperty.call(input, key)) {
      safeInput[key] = DOMPurify.sanitize(input[key]);
    }
  }
  return safeInput;
}

3. Using Content Security Policy

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' https://trusted-cdn.com;
               connect-src 'self'">

Practical Application Scenarios

1. Communication in micro-frontend architecture

// Main application
window.microFrontendBridge = {
  sharedState: {},
  setState: function(newState) {
    this.sharedState = { ...this.sharedState, ...newState };
    window.dispatchEvent(new CustomEvent('micro-frontend-update', {
      detail: this.sharedState
    }));
  }
};

// Sub-application
window.addEventListener('micro-frontend-update', (e) => {
  // Update sub-application state
});

2. Third-party component integration

// Third-party component API
class ThirdPartyWidget {
  constructor(elementId, options) {
    this.element = document.getElementById(elementId);
    this.options = options;
    this.init();
  }

  init() {
    // Initialization logic
    this.element.addEventListener('widget-event', (e) => {
      this.options.onEvent(e.detail);
    });
  }

  update(data) {
    // Update component
  }
}

// Usage in a framework
new ThirdPartyWidget('widget-container', {
  onEvent: (data) => {
    // Handle the event
  }
});

3. Communication during progressive migration

// Legacy code (jQuery)
$(document).on('legacy:update', function(e, data) {
  $('#legacy-element').text(data.text);
});

// New code (React)
function triggerLegacyUpdate(text) {
  $(document).trigger('legacy:update', [{ text }]);
}

function ModernComponent() {
  const handleClick = () => {
    triggerLegacyUpdate('New Text from React');
  };

  return <button onClick={handleClick}>Update Legacy</button>;
}