Micro Frontends: What are They and When to Use Them?

DESARROLLO WEB, OPERACIONES.
iStock-1322139094 1

Many developers have heard of microservices architecture, but less known are micro-frontends. This term first appeared in 2016, in the ThoughtWorks Technology Radar guide, where changes that are thought to be interesting in software development are set out.

In the new web applications being developed today, the frontend is getting bigger and bigger and the backend is becoming less and less important. For these large applications, the traditional monolithic approach does not work, because it becomes quite unwieldy.

Thus, inspired by the microservices model, microfrontend is the answer to modern complex web applications, allowing the application to be divided into smaller modules that act independently.

What are Microfrontends?

Currently, microservices are used to separate the different components of an application, and they work perfectly well in the backend, but what about the frontend?

Microservices are a mode of architecture used to build a distributed application, structuring it as a collection of services. In other words, microservices divide the backend into different services.

Thus, each application function is handled as an independent service, avoiding bottlenecks in the database.

Microfrontends have a similar concept to microservices, i.e. they are the extension of the microservice concept to the frontend world.

The microfrontend is a type of architecture where a web application is divided into different modules or individual functions, implemented autonomously, allowing frontend teams the same level of flexibility and speed that microservices provide to backend teams.

Source:https://harness.io/blog/continuous-delivery/micro-frontends-architecture/

Source:https://harness.io/blog/continuous-delivery/micro-frontends-architecture/

Source: Harness

Its purpose is to eliminate the dependency between work teams, which slows down development and increases the complexity of the digital product.

Modern web applications

Users are very demanding of today's web applications. They must be accessible 24 hours a day, 7 days a week, from anywhere in the world. They must also be usable on any device.

A modern web application is a software hosted on a server, which must follow all modern standards in web development in order to be fully secure, adaptable and scalable, and always satisfying users.

Micro-frontend Architecture

Monolithic frontends

The image shows the different architectures with monolithic frontends.

Micro frontends3

Fuente: Micro-Frontends

The Monolith has a single team to create and maintain a complete application, sharing databases, backend and frontend.

The Front & Back divides the monolithic application in two, also dividing the work team to own its monolithic backend or front end.

With Microservices, the backend architecture evolved to a more scalable architecture, as each microservice belongs to a different work team.

Although the division of the backend is transparent to the user, problems arise when trying to integrate the microservices into the monolithic frontend, which becomes the bottleneck of the application, with the disadvantages of a monolithic system:

  • Too large and complex for anyone to fully understand and make changes quickly and correctly.

  • A change in the frontend code could affect the entire website.

  • Any modification in the frontend code must be re-implemented, increasing the compilation time.

Vertical organization

Micro frontends4

Fuente: Micro-Frontends

Thus comes the vertical organization, with a less complex architecture thanks to microfrontends, which divide the application into small independent functions, each one implemented simultaneously, from the backend to the frontend, by a work team.

This approach has become popular because of the problems with the monolithic approach. The frontend has grown rapidly and with a monolithic architecture, it becomes more difficult to maintain.

With microfrontends, the same scalability, flexibility and adaptability is guaranteed as with the backend microservices architecture. The application created is less cumbersome and more user-friendly. In addition, each micro frontend can be developed with different frameworks. 

Central ideas of micro-frontend:

  • Be technology independent: Each work team has the freedom to adopt the technology stack of its choice, without having to coordinate with other teams.

  • Each team's application code is isolated: No runtime is shared among the different work teams, even when they use the same framework. Therefore, there are no global variables or shared states in the applications.

  • Robust web design: Application functions must be usable. "Universal Rendering" and "Progressive Enhancement" methodologies can be used to improve performance.  

Advantages of microfrontend architecture

  • Independent implementations: With micro frontend architecture, the functions of a monolithic application are separated to become different sub-applications that are implemented independently by different work teams, instead of implementing all functions at once.

  • Higher performance: In a monolithic application, the entire application must always be loaded, even if not all of its parts are used, making its initial load time high. With the micro frontend architecture, a specific module of the application is loaded on demand, thus reducing the initial loading time.

  • Faster implementation: As each function is implemented independently, the development speed is significantly increased. To correct or add something within a function, the entire application does not have to be executed.

  • Reliability: If one of the modules fails, the others will continue to function. This is very important for a large application, because it has multiple independent functions.

When to use micro-frontends?

Microfrontends are suitable for large applications with multiple functions. If it is considered that the project will have scalability problems, the microfrontend architecture should be used.

The best approach is to divide the application into isolated sets of functions and screens, just like a cell phone, which has different applications with different functions. Thus, there is a dialer application for dialing the phone, a contacts application for storing phone numbers, and a messaging application for sending text messages.

Although these applications interact with each other, each one has a very specific purpose, which is why they are implemented as independent applications.

Another example is an administrative system for a university. There will be a page for managing student profiles, one for staff profiles, one for course schedules, one for exam results, etc.

Modyo, micro-frontends and Aplyca

Modyo is a framework with which developers can work in Microfrontend by using the concept of Widgets, which are building blocks for digital products, made with the Modyo platform.

Developers can select from existing templates in the Modyo Widgets library and modify the code if they wish, adapting it to their own needs, then connecting each Microfrontend to the platform.

Additionally, Modyo has a widget creation tool available, which developers can use to build, publish and maintain widgets from within the platform.

Modyo has been one of Aplyca's partners for several years. We are specialists in cloud technology development and consulting, and we help you create optimal digital experiences for your customers. We invite you to learn about our success stories and contact us to discuss your project needs.