Last active
January 15, 2024 10:40
-
-
Save sriram15690/fb615715f73d14e820d53c7d2a0b6f71 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment