Microfrontends — bringing JavaScript frameworks together (React, Angular, Vue etc)

React, Angular, Vue, Ember, Backbone, Stencil, Preact…. in fact there’s probably another one being released right now!

Chris Kitson
Jun 22, 2019 · 4 min read
Image for post
Image for post

Like most things in life, a variety of choices informs a toxic culture of mine is better than yours and you’re wrong and I’m right.

Since technology advancements have got us in this mess, is there any chance it could get us out of it as well?

Enter Microfrontends…

Introduction to Microfrontends

Modern UI development regardless of your framework has became all about component composition: you adapt to a framework’s way of doing things by following their patterns and conventions to create components usually underpinned by some sort of data model usually in the form of a service or state object.

For example: Angular has a strong opinion on how everything should be architected in the frontend. React although it only deals with components has a huge ecosystem backing it driven by a community of React-centric developers.

Microfrontends have gathered huge momentum recently as away of allowing multiple teams to work on a single UI using multiple frameworks, but could it really change the landscape of UI development?

In this article, I am going to spend some time looking at the SDLC (software development lifecycle) and the advantages of adopting such an architecture.

Where’s the problem?

The current trend in UI development, is to build a feature-rich and powerful browser application (single page application) using a chosen framework.

Development results in building lots of little components which are then bundled together in some sort of build process using something like webpack or rollup.

Over time the UI layer often developed by separate or multiple teams, grows and gets more difficult to maintain creating a huge monolithic frontend.

Image for post
Image for post
Monolithic frontend SDLC
Image for post
Image for post
Monolithic frontends deployment architecture

Reversing the microservice anti-pattern:

Microfrontends looks at removing that monolithic build step, and results in completely decoupled services that can be independently built and deployed:

Image for post
Image for post
Microfrontend SDLC
Image for post
Image for post
Microfrontend deployment architecture

Now our UI architecture has all the qualities of traditional microservices:

  • Highly maintainable and testable
  • Loosely coupled
  • Independently deployable
  • Organised around business capabilities

How could this bring the big frameworks together?

Since we have decoupled our UI components into many microfrontends, we no longer have to dictate which framework each component uses.

The below illustration shows how we could potentially have different application teams using different technologies to create their independently built and released microfrontend:

Image for post
Image for post
SDLC using multiple frameworks

There are several ways to solve this using technologies but let me illustrate one example:

  1. Develop: Three teams using a different JavaScript framework for each microfrontend
  2. Build: Wrapping their microfrontend components as web components and building their project as a JavaScript file
  3. Release: A single JavaScript file is released inside a docker container served using Ngnix

Once we have released our microfrontends, we should compose them together in a single UI layer. The communication between the microfrontends should be handled by the composition layer which should have a well defined contract.

Image for post
Image for post
Deployment architecture using multiple frameworks

From a user perspective they access a single application, but the developer’s ability to solve a problem is no longer limited by what single framework the application uses.

Could this be the end of those religious debates of Angular v React v Vue?
I choose all of them!

Thank you for taking the time to read my article.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store