Embedding OpenSource Product into Our React HRM Product

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:

Constraints:

  • 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.

Wrapper Product

 

Micro Frontend

The wrapper product screenshot showing area which will embed the micro front end.

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 the 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. WebHooks are set up in the micro product which is triggered for different types of events. Link to setup Webhooks.

Source: www.medium.com

Leave a Reply

Your email address will not be published. Required fields are marked *