Micro Frontend: A Guide to the Possibilities of Alternative Technology

The development of applications and software solutions is becoming increasingly dynamic with each passing day. Web applications are becoming more robust with more features. Traditional development processes and methods struggle to cope with the growing size and complexity of web applications. Hence, an alternative has emerged, asserting itself as the dominant technology for developing larger web applications - micro frontend.

Micro frontend is a term that first appeared in the ThoughtWorks Technology Radar guide in 2016. The guide deals with software development trends and innovations that attract the attention of industry experts. As web applications grew, frontend applications became increasingly important and took on some of the roles of backend services. In 2017, the ThoughtWorks Technology Radar recommended a single-spa for implementing micro frontends, after which this architecture was recommended by more and more developers and architects.

In late 2020, Zack Jackson released his Module Federation add-on for webpack, completely changing the view of micro frontends and taking everything to a higher level. Module Federation allows you to include a component you or another team developed in your project. Companies started adopting Module Federation to transition from monolithic applications to micro frontend architecture.

Micro frontends are inspired by microservices, a popular way of designing large backend applications. Microservices divide the backend into different parts, each with a clear purpose and function. This makes the backend more scalable, agile, and resilient. Micro frontends do the same for frontend application development, dividing the web application into smaller, independent units or sets of features. Each unit can be developed separately, giving frontend teams more freedom and productivity in their work.

Micro frontends have two fundamental principles. The first is independent development, where teams can work on their own micro frontend modules, each with a clear purpose and function. The advantages include faster updates, smoother workflows, and better issue analysis. The second is module autonomy, where modules can operate independently of other application parts. The advantages include better error tolerance, scalability, and technology choice. 

When it comes to types, we are talking about project organization and folder structure. There are typically three types of projects that use micro frontends. The first is a mono repository where all projects are in one repository with subfolders. The advantages include sharing common modules, easier collaboration, and tools, while potential challenges include complexity, release issues, and implementation.

The second is multi-repositories, where each project is in a separate repository. Advantages include isolation, decentralized development, and scalability, while potential challenges include integration and dependencies on different versions.

The third type would be a combination that tries to find a balance between mono and multi-repositories, also known as a meta-repository. The advantages of a meta-repository are that teams can develop their part of the application in separate repositories, with the main repository responsible for integration. 

Pros and Cons

Applications based on micro frontend architecture have several significant advantages over monolithic applications: They allow teams to work independently and creatively on different modules, reduce team dependencies, and speed up development cycles. They only load the necessary modules, saving resources and improving performance. They are also easier to maintain and more resilient to bugs.

Micro frontends allow different teams to work on different parts of the application, using different technologies, development frameworks, and implementation strategies. This improves scalability, performance, and maintainability. Micro frontends also enable faster delivery of new features and updates while fixing bugs.

However, they come with some compromises and challenges. Micro frontends can introduce complexity and overhead in terms of communication, integration, testing, and consistency. They can increase the risk of application duplication, fragmentation, and inconsistency. Therefore, micro frontends should be used selectively when they provide clear advantages and align with business goals and requirements. 

Each application or micro frontend part can use a different framework, such as React, Angular, and Vue!

Micro Frontend as a Good Solution

Micro frontend is a good solution in several scenarios. When the application is large, complex, and monolithic, it is difficult to make changes or add new features without affecting other parts of the overall solution. Then, the use of micro frontends is recommended. It is also recommended when the application has multiple teams due to the required autonomy and flexibility in choosing tools, technologies, and processes and when it needs to support different platforms, devices, or user segments. Similar scenarios occur when the application needs quick and frequent versioning.

React is a good option for developing micro frontends, mainly because of its fast rendering and virtual DOM. Its component-based architecture fits well with the modular nature of micro frontends. A major advantage of React is its flexibility in using new versions and libraries. This flexibility makes maintenance easier, allowing teams to update React components within the micro frontend application without affecting the entire solution. It is worth noting that React has a rich ecosystem of libraries, tools, and solutions that can aid in development. 

Angular is an excellent choice for building micro frontend applications. Angular has patterns and procedures to facilitate application creation. Since version 12, Angular supports Webpack 5 Module Federation, making it easier to create micro frontend applications. Vue.js is a simple and flexible JavaScript framework that integrates well into existing micro frontend solutions and projects under development. It has a component-based architecture that fits the modular design of micro frontends. Any framework that supports web components can be used for micro frontend applications. Svelte, Lit, and Stencil are some of the frameworks that enable the creation of web components that are then integrated into existing or new solutions.

Micro frontend is an excellent solution for developing scalable, modular web applications that are easy to maintain. With their help, you can split the codebase into smaller, independent parts that different teams can reuse and develop. They allow the use of the best technologies for each part of the application without worrying about compatibility issues. However, due to performance, security, and communication costs, the pros and cons of this approach should be carefully weighed to determine if it meets the needs and goals of the software solution. Micro frontend is like Lego bricks: you can build whatever you want with it.