microfrontend.txt

Microfrontend Strategy:

The approach involves creating a React Single Page Application (SPA) as the main container, encompassing multiple Microfrontends (MFs). When integrating with an existing JSP-based app, follow these steps:

1. Develop a simple React container app.
2. Embed this app into the JSP application.
3. Ensure functionality is operational.
4. Include the Microfrontends into the React container app.

Routing considerations:

- For a hybrid JSP-React setup, the base layout of the JSP will load, followed by the React App.js. This React component will then handle routing to the required pages.

Data retention during transitions:

- Moving between JSP and React pages may necessitate re-fetching data from the backend, unless using local storage/cookies for data persistence.

Microfrontend organization:

- Consider whether each page or business module should be a Microfrontend.
- Organizing at the business module level may involve a single MF containing multiple pages (e.g., Orders MF with Create Order and List Orders).

Microfrontends composition:

- Microfrontends can contain other Microfrontends, fostering modularity and encapsulation.

Routing mechanisms:

- Utilize both internal and external routers for effective navigation.

Deciding on splitting Microfrontend components:

- Common components not interacting with APIs can be separated into npm modules or shared via GitHub.
- Consider the business module level and follow React component creation practices.

Data interaction between Microfrontends:

- Employ external and internal store concepts to manage data flow.

Updating Microfrontends:

- Options include serverside rendering (deploy every time), Module Federation in Webpack 5, client-side approaches, or using iframes.

Web components and their relevance:

- Consider adopting web components when dealing with multiple technologies, using tools like PolymerJs.
- If all apps are in React, web components may not be necessary.

Importing smaller Microfrontends:

- Use Module Federation for importing Microfrontends, treating them as npm modules.

Further reading:

- Explore various rendering techniques.
- Investigate global store solutions like Microsoft Redux Store (https://github.com/microsoft/redux-micro-frontend).