Micro Frontends Made Easy

Today we are going to explain it in a very simple way and show how to use it with an example.

André Gardi
Jan 10 · 4 min read

What is it? (Short answer)

Roughly saying, you are just splitting a complex web app in smaller projects and putting it together on a page with iframes.

Iframes are not the only way to do it. We are going to show the most used solutions. But, for now, let’s explore why we should use micro frontends.

Why are companies using it?

It is easier to manage 10 projects of 10 people each than manage one big project of 100 people. The key concept here is scalability. By breaking big projects we get:

  • Separated repositories
  • Independent deployments
  • Faster builds and releases
  • Autonomous teams
  • Easier debugging and maintenance

Break your application by domains

Imagine that you are creating a complex React app for movies stream. You would have many developers but it is still very challenging to manage it. For that reason, you could break the app in four main domains:

  • Movies catalog
  • Video player
  • User's profile
  • Account payments

Now you create one separated React app for each domain and use some resource, like iframes, to composite a page that shows the four apps as one to the user.

If you add a new payment method to the Account payments, you redeploy only its app and not the whole site.

How to do it

Iframes

The simplest way to start. We can use the window postMessage()to communicate between the applications. We are going to use this in our example.

Single SPA

It is a framework to compose applications on the frontend. If you need to start a real-life project today, choose this one:
single-spa.js.org

Frint

Another framework to compose applications on the frontend. More flexible than Single SPA but newer and less popular:
frint.js.org

Web components

It is not a framework but a browser feature and maybe the future of the internet. Here is an article on it:
https://www.webcomponents.org/introduction

Taylor

It uses a different approach by composing the routing page on the backend with node.js. If you like the idea, it is worth to check out:
https://github.com/zalando/tailor

Composing micro frontends in 3 files

Now, we are going to create a minimalist micro frontend integration with 3 files:

  • Products Catalog, a micro frontend made with plain javascript.
  • Shopping Cart, another micro frontend created with Vue.js.
  • Composition, an html file that displays both apps as one page.

The main idea is to have fruits on the products catalog, allowing the user to add then to the shopping cart. PostMessage() is a browser`s resource that will allow us to do the parent/child communication.

Ok, let me see some code now.

composition.html

On line 13 we associate the cart iframe with a constant. On line 14 we set the composition page to listen to the message events and then redirect the same message to the cart iframe.

catalog/index.html

Here we associated the click of all buttons to the addToCartfunction. This will send a message to the parent window, which is the composition page, with the value of the target, which is the fruit name.

cart/index.html

And, finally, our cart in Vue.js. On the beforeMount() we set the cart window to listen to the messages from the parent. The add()method adds 1 to the products data, according to the fruit name.

Git repository

You can check this project on GitHub. We improved the message handling and added some style with bootstrap.

https://github.com/andregardi/micro-frontends-iframe

JavaScript in Plain English

Learn the web's most important programming language.

André Gardi

Written by

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade