How does Garfish implement communication and state sharing between the main application and sub-applications?

Garfish provides multiple communication mechanisms to support data sharing and interaction between the main application and sub-applications, as well as between sub-applications themselves.

Communication Methods

1. Props Passing

• Use Cases: Main application passing configuration, user info, and other static data to sub-applications
• Characteristics: One-way data flow, simple and direct
• Example:

javascript
// Main application configuration
{
  name: 'sub-app',
  entry: '//localhost:3001',
  props: {
    userInfo: { name: 'John', role: 'admin' },
    theme: 'dark',
    apiConfig: { baseUrl: '/api' }
  }
}

// Sub-application receiving
export function mount(props) {
  const { userInfo, theme, apiConfig } = props;
  // Use the passed data
}

2. Event Bus

• Use Cases: Cross-application event notifications and responses
• Characteristics: Decouples application dependencies, supports one-to-many communication
• Example:

javascript
// Publish event
Garfish.channel.emit('user-login', { userId: 123 });

// Subscribe to event
Garfish.channel.on('user-login', (data) => {
  console.log('User login:', data.userId);
});

// Unsubscribe
Garfish.channel.off('user-login', handler);

3. Shared State

• Use Cases: Business state that needs to be shared across applications
• Characteristics: Centralized management, reactive updates
• Example:

javascript
// Define shared state
Garfish.registerShared({
  name: 'userStore',
  store: {
    state: { user: null },
    mutations: {
      setUser(state, user) {
        state.user = user;
      }
    }
  }
});

// Sub-application usage
export function mount(props) {
  const userStore = props.shared.userStore;
  userStore.mutations.setUser({ name: 'John' });
}

4. Custom Communication Protocol

• Use Cases: Complex business interaction logic
• Characteristics: Flexible customization to meet specific needs
• Example:

javascript
// Define communication interface
Garfish.defineInterface('auth', {
  login(credentials) {
    return fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials)
    });
  },
  logout() {
    return fetch('/api/logout');
  }
});

// Sub-application call
export function mount(props) {
  props.auth.login({ username, password });
}

State Management Best Practices

1. State Layering

• Global State: User info, theme, permissions, etc.
• Application-Level State: Internal state of sub-applications
• Component-Level State: Internal state of components

2. State Isolation

• Avoid directly accessing other applications' state
• Pass data through communication mechanisms
• Maintain application independence

3. State Synchronization

• Use event mechanisms to sync state changes
• Implement state change notifications
• Avoid state inconsistency issues

4. State Persistence

• Use localStorage or sessionStorage
• Implement cross-session state retention
• Consider state recovery mechanisms

Communication Security Considerations

1. Data Validation

• Validate the format and content of received data
• Prevent malicious data injection
• Implement data validation mechanisms

2. Access Control

• Restrict access to sensitive data
• Implement role-based access control
• Audit communication logs

3. Error Handling

• Comprehensive error catching and handling
• Provide friendly error messages
• Implement fallback solutions

Performance Optimization

1. Reduce Communication Frequency

• Merge multiple communication requests
• Use batch updates
• Implement debouncing and throttling

2. Data Caching

• Cache frequently used data
• Reduce duplicate requests
• Implement cache invalidation strategies

3. Asynchronous Communication

• Use asynchronous methods for communication
• Avoid blocking the main thread
• Optimize user experience

Through reasonable use of communication mechanisms, efficient collaboration and data sharing between micro-frontend applications can be achieved.