Framework-Agnostic Design is Crucial in Microfrontend Systems

When working in a microfrontend architecture, one of the challenges we face is maintaining consistency and flexibility across multiple applications. Each microfrontend might use a different framework or even different versions of the same framework. This is where the importance of creating framework-agnostic projects really shines.

Why Framework-Agnostic Projects Matter

• Consistency Across Microfrontends: Core logic like authentication, socket communication, translations (i18n), and application settings remains uniform across all microfrontends.
• Flexibility with Frameworks: Avoid being locked into a specific framework or version, enabling seamless integration with various technologies.
• Simplified Maintenance: Fix bugs or update logic in one place, benefiting all microfrontends instantly.
• Future-Proofing: Prepare your system for future changes, whether it's upgrading frameworks or adopting new ones.

Approach to Framework-Agnostic Projects

In my case, I’ve worked on projects where we needed to support both Vue2 and Vue3. Instead of duplicating logic or building framework-specific implementations, I created utilities and services in TypeScript. These can be consumed by any microfrontend, regardless of its framework. Here are some examples:

1. i18n (Translations)
   • I used a library like i18next for translations, which is independent of any UI framework.
   • It integrates seamlessly with Vue, React, or even vanilla JavaScript.
2. Authentication
   • Built a service for token storage, user validation, and API interactions.
   • Avoided relying on framework-specific tools.
3. Socket Communication
   • Created a framework-agnostic WebSocket layer to handle real-time data.
   • Was not needed to use Socket library for each framework.

Challenges and Solutions

• Compatibility Testing: Ensure your utilities work well with different frameworks.
  • Define clear interfaces for interaction.
  • Test extensively to avoid unexpected issues.
• Initial Effort: Building agnostic solutions requires upfront planning and development.
  • The long-term benefits, however, make this effort worthwhile.

If you’re working in a microfrontend architecture, don’t let frameworks dictate how you structure your core logic. By separating concerns into framework-agnostic projects, you’ll create a robust and scalable system that’s ready for any changes.