Embedding OpenSource Product into Our React HRM Product

We have an HR Management Product NeoHRM and wanted to build an interesting feature that captures the culture of the firm and helps build a community around knowledge management related to the 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 and intellectual skills. We were considering open source forums, since 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 loading time of screens.
• Between these redirections user sees a blank screen and has no clue about whats going on. Remove screen transition gaps for better user experience.

The PROPOSED system design:

Constraints:

• Both the products should be hosted under the same domain.
• No code integration. Interaction between both products will happen through events and data exchanges.
• The open-source product is hosted in a docker on an independent EC2 instance

What are we solving for:

• Combining two products as one through a micro front end approach
• Faster and seamless interactions between 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

On the left is the wrapper product screenshot showing are which will embed the micro frontend(Right Image)

Problem no. 2: The loading time

Convert redirects to XHR request:

These redirects can simply be converted to XHR requests to get the user token and then the final link is opened in the embedded micro frontend using iframe.

In our case since both the products are hosted under the same domain so CORS issues are not to be tackled.

Problem no. 3: Designing Event bus to communicate across micro front ends.

Both the wrapper and the micro frontend had to communicate based on events and exchange data.

For two way communication between the wrapper and micro frontend, REST APIs and Webhooks are used.

1. Micro frontend REST APIs are used to send data from the wrapper product. List of APIs here.

2. Web Hooks are setup in the micro product which are triggered for different types of events. Link to setup Webhooks.