Micro Frontends: the future of frontends

Date
28 March 2022
Category

Frontend

Good frontend development isn’t easy. Making frontend development scalable so that multiple teams can work on complex projects simultaneously, is even harder. This blog explains what Micro Frontend development is, how it works, and the benefits of using it to develop websites and applications.

micro frontends | iO

Today, frontend development begins with the development environment and architecture that form the basis for creating new applications. Micro frontends aren’t just responsible for a particular task. They perform every step needed to complete development functions, from frontend to backend and databases, as you can see in the illustration below.

micro frontends | iO

What is a Micro Frontend?

Micro Frontend development uses agile methods to enable different teams of developers to work autonomously on small parts of the code for a website or application.

“Micro Frontend development is a method of working with different teams of developers autonomously on a small part of the code for a website or application.”

Clear communication between teams is important when developing large scale new projects. During Micro Frontend development, teams work on their own feature, separate from the overall application, independent of the other team’s code. Smooth integration of new code when it’s ready for the production environment, and join the current application is essential. After integration the new feature should be able to communicate with other features in the application. The new feature should also be accessible without the application, through the browser. Routing features is a challenge that can be overcome in several ways:

  1. Composition

  2. Application shell and routing

  3. Communication

1. Composition

Composition is the bringing together of various frontend applications with the main application or to put it another way, it's about the proper integration of the various individual components. In frontend development, composition takes place in the server or in the browser. In server-based composition, the entire application is contained in an html page. The Micro Frontend is a tag in that application. Such a tag, along with JavaScript and CSS code, is required to run the application from the server. Tools to do this include NGINX, Tailor and custom solutions with NodeJS. Client-side (browser) composition often involves iframes, HTML links or uses frontend code written in plain JavaScript or in popular frameworks React, Angular and Vue inside the web component. The use of web components is preferred here because they are a standard part of the browser’s own API.

2. Application shell and routing

Routing is another important challenge when working with Micro Frontends. The main issue here is how the micro application is positioned in relation to the main application and how it can be accessed. The application shell is the main application in which all the Micro Frontends run and takes care of all connections between the micro applications, but also the global settings and the overview.

micro frontend | iO
Image source: https://developer.chrome.com/blog/app-shell/

Framework
Another way to properly manage routing and connections is to develop your own application shell. You can do this using a framework such as Angular or Vue. The Single-SPA framework is another great application shell solution. It can integrate Micro Frontend apps written in Angular, Vue or React into its shell.

How about a bigger digital presence?

Gone are the days when a website was enough for a proper, digital presence. Our experts happily assist in bringing about a digital ecosystem - optimised and on-brand - fit to serve your business goals.

Laptop shopping data overview

3. Communication

Micro Frontends use different methods of communication but generally they should have as little communication with each other as possible. In Micro Frontends each component should be autonomous. It is important to properly regulate communication between applications as this prevents friction between teams, allowing each team to focus on its own customer.

Data

The best approach to communication is to change as little as possible about who owns the data. Each frontend retains its own data and does not share it with other Micro Frontend apps. It’s common to share the relevant data via a url, but that is not desirable in every Micro Frontend situation. Parent-child traffic (vertical) can be used for this purpose. This is widely used by frameworks such as Angular and Vue. Horizontal traffic (or children communication) is also possible, such as custom events.

Tools for Web Developers

Once an organisation has chosen to set up architecture according to the principle of Micro Frontends, the writing, updating and testing of the code begins. When working with large numbers of developers, there is always a risk of making mistakes because JavaScript has no type safety. For this, TypeScript is very useful. TypeScript is a language widely adopted for new projects that acts as a kind of spell check for functions and classes in TypeScript and JavaScript. There are also other tools to analyse JavaScript (or TypeScript) code, such as ESLint and Prettier.

5 real benefits of developing with Micro Frontends

Developing with Micro Frontends means that you can incrementally update, upgrade or even rewrite parts of the frontend without having to deploy the whole application at once. These agile methods and independent features roll-out means less delay and shorter time-to-market. Micro frontends are easy to scale and migrate, and autonomous teams of developers can work on features simultaneously. The user experience (UX) provided by Micro Frontends is not standardised but is consistent over all devices.

Laura Merlo | iO
About the author
Laura Merlo
Frontend Developer - iO

At iO, the future is both female and front-end with Laura Merlo serving as a prime example. She considers development much like building LEGO, with each brick a part of the puzzle that’s digital. Her goal: to create something complex and have fun doing so.

Related articles

Stay informed. Subscribe to our newsletter

  • Get inspired: our strategists, technologists and creatives share their knowhow and insights.

  • Stay on top: receive relevant content on brand strategy, business transformation, digital ecosystems or data intelligence.

  • Keep up: discover our new cases and stay up to date with our latest developments