Micro frontend

• Intro: https://www.aplyca.com/en/blog/micro-frontends-what-are-they-and-when-to-use-them
• Good interview questions, telling things like how to handle styling etc: https://www.interviewquestionspdf.com/2023/10/24-micro-frontend-interview-questions.html

Pros

1. Reduce dependency between teams.
2. Technology independent
3. If one of the modules fails, the others will continue to function.
4. Reducing the initial loading time

Implement for contact manager app

To create a microfrontend for a contact manager application with two pages (one to display contact and the other to edit contact) using web components, you can follow these steps:

1. Breakdown into Microfrontends: Identify the components that will make up each page. For instance, you may have a “Contact Display” microfrontend and an “Edit Contact” microfrontend.

2. Define Web Components: Create reusable web components for each part of the pages, such as a <contact-display> component and an <edit-contact> component.

3. Component Architecture:

   • Each microfrontend should be self-contained and independent.
   • Define the interfaces (props/events) for communication between microfrontends.

4. Routing:

   • Implement a router to manage navigation between the two pages.
   • You can use a router library like vaadin-router or lit-route.

5. Integration:

   • Integrate the microfrontends into your main application.
   • Use HTML imports, custom elements, or module bundlers like Webpack for integration.

6. Data Management:

   • Implement a data management strategy to handle contact data.
   • Use services or state management libraries (e.g., Redux, MobX) for sharing data between microfrontends.

7. Styling:

   • Apply consistent styling across microfrontends using CSS variables or scoped styles.

8. Testing:

   • Write unit tests for each web component to ensure they function correctly in isolation.
   • Perform integration testing to verify communication between microfrontends.

9. Deployment:

   • Deploy each microfrontend independently to enable independent updates.
   • Use containerization (e.g., Docker) or serverless architecture for scalable deployment.

10. Monitoring and Maintenance:

    • Implement monitoring and logging to track the performance and errors of each microfrontend.
    • Regularly update and maintain each microfrontend to ensure compatibility and security.

By following these steps, you can create a microfrontend architecture for your contact manager application with two pages using web components.