Chapter 2 - Sample Project Architecture

In this chapter, we will outline the architectural foundation of our sample project, following a mix of Custom Dynamic Loading and Service-Oriented Architecture (SOA) patterns. This approach will provide a robust framework for our custom solution, which consists of a container application designed to dynamically load and render three distinct micro-frontends. Each micro-frontend is built with a different modern JavaScript framework, showcasing the flexibility and scalability of the micro-frontend architecture.

We will build the following apps:

• Container App (container-app)
• Microfrontend1 (built with React)
• Microfrontend2 (built with Svelte)
• Microfrontend3 (built with Vue)

And this is a very high-level diagram of the overall architecture:

The Container App (container-app)

The container app serves as the orchestrator for the entire application. It is responsible for managing the lifecycle of each micro-frontend, including their loading, rendering, and unmounting processes. This app will be developed using Vue.js, chosen for its reactivity and comprehensive tooling which facilitate easy integration of dynamic modules. The container app's primary responsibilities include:

• Dynamic Module Loading: It uses JavaScript's dynamic import feature to load micro-frontends on demand.
• Routing: Handles client-side routing, which directs users to different parts of the application without reloading the page.
• State Management: Manages any shared state that might be needed across different micro-frontends, such as user authentication data.

Microfrontend1 (Built with React)

Microfrontend1 is a React-based application that demonstrates how a popular library like React can be utilized within a micro-frontend architecture. This module will focus on showcasing interactive UI components that leverage React’s state and lifecycle features. Key characteristics include:

• Scoped Interaction: It handles user interactions within its scope, maintaining a self-contained environment for its state and logic.
• Independence: Deployed independently, it encapsulates all necessary dependencies that don’t conflict with the container app or other micro-frontends.

Microfrontend2 (Built with Svelte)

Microfrontend2 utilizes Svelte, a compiler-based framework that excels in building high-performance UI components with less boilerplate code. This module will illustrate how Svelte’s innovative approach to compiling away the framework can be advantageous in a micro-frontend setup, particularly for achieving faster load times and smoother transitions. It will:

• Compile-time Magic: Leverage Svelte’s compile-time enhancements to reduce runtime overhead.
• Reactivity: Implement Svelte’s reactive programming model to handle state changes efficiently.

Microfrontend3 (Built with Vue)

The third micro-frontend is built using Vue.js, providing a cohesive experience by utilizing Vue’s ecosystem for managing both the local component state and interactions with the global state managed by the container app. This setup will demonstrate:

• Single File Components: Use Vue’s Single File Components for clear separation of template, script, and style.
• Ecosystem Integration: Integrate with Vue’s ecosystem tools like Vuex for state management and Vue Router for component-level routing within the micro-frontend.

Integration Strategy

The architecture uses a combination of Webpack and Module Federation for JavaScript code, ensuring each micro-frontend is a standalone application that can be developed, tested, and deployed independently:

• Module Federation: Allows sharing of libraries and components across different micro-frontends without reloading them multiple times in the browser.
• Isolation and Namespace: Each micro-frontend will maintain its namespace, avoiding global conflicts and encouraging better maintainability.

Conclusion

The architecture described in this chapter provides a robust framework for developing a scalable and maintainable micro-frontend application. By leveraging different frameworks and technologies, we demonstrate the flexibility of the micro-frontend approach, catering to varied technical needs and preferences. This setup not only facilitates independent development and deployment but also ensures that the overall application remains cohesive and performant.