Unified UI App

To provide Unified UI implementation as the container for react and angular apps.

Create a single app, which contains all other apps as micro frontend. Users can access the entire set of available apps from a single unified app. A unified app is a container for all apps which build on react and angular.

Unified App

The following are the features of the app:

The app should support react and angular apps.

The app should carry out authentication and authorization for the user.

The app should display the app to the user based on the roles and allowed actions.

The app should contain a header and sidebar with a primal custom theme.

The app should contain a space to host all other micro frontend apps.

The app should allow users to perform actions on the micro-fronted apps.

Challenges / Problems:

Following are the feedback or problems for the available solutions for the Unified UI App:

1. A custom global communication library (event bus within the browser) needs to be created for all apps and sent messages to each other micro front end. This business workflow hiding in the GCL and no one don’t know what will happen when the button is clicked.
2. Redoing the browser creates UX problems like scrolling within the tab of a particular micro frontend tab, and then switching the tab and coming back to the position in the previous tab will not be in the same place.
3. In the shell, there will be a micro frontend that contains bread crumbs and there is a need for another micro frontend in the bread crumbs. The team that creates the breadcrumbs owns the micro frontend responsibility.
4. There are disadvantages to module federation which will limit certain behaviors aspect of UI, for example, inter navigation of components across multiple apps.
5. Nextjs has a bad architectural design for rendering server-side UI (avoid the next Module Federation plugin). It is a secondary plugin for next js (next module federation )
6. Nextjs uses file-based routing for slugin, you need to have file-based dependency management is the problem.
7. Share the context, viz., a little bit of user token, roles, and menus.
8. Doing module federation is straightforward and shared context is difficult, so we need to be strict about shared context
9. Package integration is a kind of dependency management. Technically not so complex. So that all the team will check in the same repo.

Recommendations:

The following is the recommendation for the Unified UI App:

1. Recommend convincing the client not to re-design the browser. As the shell application is a spa framework so it is more like a browser redesigned.
2. Keep the shell as light as possible.
3. As far as possible avoid sharing the data between components.
4. Keep core business logic in the backend, keep the API
5. Make sure that React apps are not using nextJs, which will not support type script.
6. discourage inter-app communication
7. How to call the app within the shell?
   If it is a reverse proxy we need to reload the entire app using Nginx or serverjs configuration.
8. How to build a header and Footer?
   Are those application needs SEO compliance? If it is client side, this application can expose a method, which can be consumed in the window.
   Mount the angular application, for a given id, and the application will mount on that layout.
   Create a layout, when routing one app to another app and mount on one app. Changing the code to expose the app for mounting (in modules) is the easiest way.
   A lot of app migrations use a reverse proxy, which will reload the entire page
9. Single SPA is a new framework, when we create the shell, angular, and react app, should follow a single SPA API
10. Module federation, expose remotely, and make a web app to expose the bundle. It is a bundle specification implementation.
11. Create a layout as micro frontend as a consumer app for all other apps

Options:

The following are the options available for the solution:

1. Reverse Proxy
2. Single SPA
3. module Federation
4. iframe
5. nextJS Federation
6. Only Code

Comparison Study:

References:

Reverse Proxy:

Not so micro-frontends: Building a Reverse Proxy

Single SPA:

single-spa | single-spa

Blog - ThoughtWorks

iFrame:

Exploring the Different Ways to Implement a Micro Frontend Architecture: From Iframes to API…

Micro frontend using iframes | WaveMaker Docs

Module Federation:

Module Federation | webpack

What Is Webpack Module Federation and Why Does It Matter?

Next JS Module Federation:

Nx, Next.js, and Module Federation

Building React App with Module Federation and NextJS/React

Only Code:

Micro Frontends

5 Different Techniques for Cross Micro Frontend Communication

You Don't Need Another Library to Compose Micro Frontends at Run Time