Micro Frontends: the future of frontends

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.

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.

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.

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.

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.