Implementing Micro-Frontend using ReactJS

4 min readAug 30, 2020

First of all: What is MicroFrontend?

Well, the term is not new, actually start begin used in the end of 2016 by ThoughtWorks Technology Radar, the concept is very simple, is extend or use the concept of “micro-services” from backend in frontend applications, this is not crazy if we think about how frontend grown up in the last ten years, sounds like a lot of time, but is not, in this article I will be talking about Web frontends (HTML / CSS / Javascript and sub types).

Micro frontend could be defined by this

Micro frontends is an architectural style where independently deliverable frontend applications are composed into a greater whole. — Cam Jackson

In other words, frontend applications grow so fast and so complex that the necessity of a new web app architecture was need it.

How It’s works?

As I said before, the way micro-frontend is implemented is based on the concept of micro-services, so you must split your app in multiple parts, the best way to do that is applying the concepts of Domain Driven Design, that means that you have to think in your app based on your domain, in frontend case, take a look of the sections, even if all the web-app has only one propose, you will see not all the components are strongly related, of course in some cases one components depends of another one, but is not always the common scenario, some sections could just consume another API from server and display it on the screen while in the same time, another one allows you to chat with a person.

bellow here you can compare the old way (monolith) and the new approach

Even if micro-frontend approach use a container to show all the sections the advantage to do this is the same of micro-services, teams can work improving the web-app and not entering in conflict to touch “the same code” because there is no same code, teams only work in the section they need to improve.

Get back to the title

I develop a library using react, is called “µFront” (very smart, isn’t?), this component allows you to render a section in your app, of course, nothing is pure magic you have to follow some steps to do this, basically the sections of your app must be rendered applying another strategy, let me show you what I mean.

For now your app must divided by two types

The Container
The Sections

Making a proper Container

To do this, you minimum need to use the library µFront.

Imagine the µFront component is just another div, that means it cans adapt its size according the space you give to it, and the section that will be rendered there can dispose that size. You just only need to add this line in your code

import React, { Component } from 'react'

import { Ufront } from 'ufront'

class Example extends Component {
  render() {
    return <UFront host="SECTION HOST" name="SECTION NAME"/>
  }
}

But what are those parameters?

host: is needed to search the section, its call the service that must dispose the script with the section and then rendered
name: is how your section is identified, this name is important because µFront use it to render the component.

Creating a Section

Actually is not so hard you can develop a section using a react template or if you want it I made one for examples, as I said a section is just a react application the only three considerations to create a section are:

When building the project it must just generate one script file
Rendering the component must be by a method like this example

import React from "react";
import ReactDOM from "react-dom";
import App from "./App"; if (!document.getElementById("MicroSection-container")) {      ReactDOM.render(<App />, document.getElementById("root"));
} window.renderMicroSection = (containerId) => {          ReactDOM.render(<App />, document.getElementById(containerId));
} window.unmountMicroSection = (containerId) => {      ReactDOM.unmountComponentAtNode(document.getElementById(containerId));
}

this is necessary because you could render your section stand-alone or in another container, and the µFront use the second method, remember the name that µFront ask you before, in this example the section name is MicroSection, that means µFront append the “-container” suffix to a internal HTML component and then render the section using the method, see how the method name is renderMicroSection, once again, the name tell µFront that there is some method with the section name and the prefix “render”, that is why the name of you section is so important and must be unique.

And the last step is very easy, obviously you must provide an endpoint to consume and get the script file generated in the first consideration.

If you want to know about this or want to contribute, here are all the links