We have an HR Management Product NeoHRM and wanted to build a feature that captures the culture of the firm and helps build the community around knowledge management related to core DNA of the firm through Q&A.
Further, the idea was to measure the participation of employees into the knowledge management process and identify people who advance the capabilities of the firm with their problem-solving approach. We were considering open source forums since the focus of our value was in measuring the interactions and establishing a feedback loop to the employee, so third-party product with custom measurement index would suffice.
Design Challenge :
Embed open source product developed with Ruby on Rails into our React application.
The EXISTING system design:
- Open source product is hosted as a sub-domain
- User logs into the HRM management product.
- Navigates to the UI to find himself landing into the discussion panel as a completely new link.
Problems with this approach:
- Multiple redirects for user tokens between both the products which increased the loading time and had a bad user experience. Need to reduce the loading time of screens.
- Between these redirections, user sees a blank screen and has no clue about what’s going on. Remove screen transition gaps for better user experience.
The PROPOSED system design:
- Both the products should be hosted under the same domain.
- No code integration. The interaction between both products will happen through event and data exchanges.
- The open source product is hosted in a docker on the independent EC2 instance
What are we solving for:
- Combining two products as one through a micro front end approach
- Faster and seamless interactions between the wrapper and embedded product
- Designing Event bus to communicate across micro front ends.
How we solved the problems:
Problem no. 1: The micro front end approach
iFrames to render embedded product:
Product Screenshot on left where section highlighted will embed the UI on the right as a micro front end. The problem with embedding this micro frontend was we had 2 headers, one of each product. It was decided to hide the wrapper header and show those options in the left navigation when the micro frontend is embedded.
Steps to follow:
1. Read the current Route(URL)
2. Based on the route(URL) of the page, when it matches with the micro frontend specific link, the wrapper header is not shown and the UI is altered to show the header options is left navigation.
The wrapper product screenshot showing area which will embed the micro front end.
Problem no. 2: The loading time
Convert redirects to XHR request: