Go to JAKALA website

FFW is now part of JAKALA’s group.

Sandwich

Copenhagen

Odense

Denmark.

Berlin

Hamburg

Düsseldorf

Germany.

Paris

France.

Dnipro

Mykolaiv

Ukraine.

Chisinau

Moldova.

Sofia

Bulgaria.

Hanoi

Vietnam.

Boise

USA.

Romania.

Austria.

Home

About

Work

Services

Insights

Contact

English

Dansk

Français

Deutsch

English UK

Have you heard of micro-frontends lately? The idea behind MFEs is to think about a website or a web app as a composition of features which are owned by independent teams. It is an architectural style where independently deliverable front-end applications are composed into a greater whole. Learn how MFEs work specifically and get to know the main advantages of using them: team scalability, reusability and technology agnoticism.
Micro-front ends - called MFE for short - is not a new approach, nor is the only good one that developers and teams should use in order to create maintainable and scalable front-end applications. However, it is a way of work that can bring benefits to an organisation, if used correctly, and if it is based on the needs of the projects.
MFE is a code for segment of an application. In addition, we have a micro-frontend framework that is responsible for managing the loading and unloading of micro-frontends, as well as any operations such as I/O (input/output), routing between the micro-frontends, global configurations and so on.
Let´s dive a bit into one of the most widely used approaches nowadays - Single-page applications, also known as SPAs. SPAs mean that the whole source code is loaded and then APIs and databases are used to connect to and then render content on the client-side.
An example structure of such an application would look something like this:

If you look at the Back-end and DevOps part - you can see that they usually have structure that allows them to scale independently with strong boundaries on what they are delivering and then become absolutely autonomous when delivering and deploying their services.

When a company grows and its teams expand as well, they have to identify the areas that have to be cultivated in their organisation. Usually, a team will take a monolith structure and split it into multiple micro-services and create a dedicated infrastructure.
But what do you do on the front-end side? It becomes very challenging to scale and maintain when you have multiple distributed teams working on the same codebase. This creates communication issues for managing different parts of the UI, interdependency between teams, etc.
<h4>Scaling our applications with Micro-frontends</h4>

As explained earlier - we take our monolith structure and break it into multiple APIs driven by multiple containers, which creates our infrastructure that is dedicated for certain micro-services. The same can be done for the micro-frontend.
Introducing MFEs bring autonomy within a business domain, responsibility of the teams for each domain (or sub-domain) they are working on, and last but not least, capability of introducing improvements and new features to certain MFE without affecting the entire structure and application.
<h4>Main benefits of micro-frontends</h4>
Team scalability which means that each team can be set up autonomously and can invent, organise, initiate and deliver without affecting other parts of the application. In this way, a team responsible for one part of the application can deploy independently from another team.
It´s good to know that you should avoid "horizontal" teams that are responsible for the same area in two or more different MFEs. Instead, a more suitable and sustainable approach is vertical. A vertical approach means that a team that works on one micro-frontend is absolutely cross-functional and has all the knowledge to work self-reliantly.
The MFE approach also allows, for example, the platform team, which is responsible for the structure that wraps the micro-frontends, to be more focused on long-term goals, performances, routing, etc.

The micro-frontend teams are more customer-centric based. They are interested more in how to convert and engage the customer better, and improve the subdomain that they are working on. The second benefit and advantage of this approach is reusability. We can take any part, such as the navigation component, and reuse it whenever we want to as long as we follow the MFE standard. The same is valid for other parts as well. A good way to have reusable components all across the different micro-frontends is to create a shared component library that you can maintain separately and use whenever needed. It will be very helpful for the teams if this is planned at the early stage and all pros and cons are taken into consideration before deciding on the best approach. The third advantage of the MFE approach is the technology agnosticism. We can have our structure written in Vanilla JS, and any of our micro-frontends written in React,Vue.js, or whatever is suitable, as long as we maintain the standard of the MFEs.  To summarise the benefits; with micro-frontends we can achieve better team scalability, reusability of the code, self-reliant teams and independent deployments as well as technology agnosticism. It´s important to note that MFEs bring complexity and complexity is not always a desirable feature. There is a lot more to be reviewed regarding our topic, and people have long started to recognise different approaches that work best for their cases and products depending on the infrastructure of the organisation. Are you interested in more information? <a rel="noopener" href="https://ffw.com/en-GB/contact" target="_blank">Connect with us</a> and learn how you can make use of MFEs. *** Radoslav Radoychev is Head of Front End Development in our Gabrovo &amp; Veliko Tarnovo offices, Bulgaria.

MFEs – a solution for scaling development

Thought

How Drupal Manages Content for Your Customers' Entire DX

Accessibility in Action

The 5Cs of digital experience in a post-COVID world

4 Key Trends that will influence Technical Decision Making

Web accessibility raises brand recognition

Dynamic Without Limits: 2022 Next.js

Women in Drupal Awards 2022

3 Reasons That Discovery Is Vital To Your Next Redesign

Multi-Site Approach: Save, Scale, and Build Loyalty

FFW Honored With 2022 Acquia Engage Award

Accessibility. What it is. Why it matters.

What is Personalisation? 

Decoding Technical Jargon

Women in Drupal Award enters second round

Acquia Engage Awards 2023

Meet us at DrupalCon Lille 2023

FFW presents Women in Drupal Award 2023

Expert Tips for Efficient URL Mapping with ChatGPT-3.5

FFW and Clients Celebrate Three Acquia Engage Award Wins

Navigating Key Technical Decisions in a world of complex digital platforms

Artificial Intelligence in Drupal

JAKALA celebrates 24 years of excellence

MVPs - A deep dive into their challenges and potentials 

5 Tips to achieve a 100% performance score on Google Lighthouse with Drupal

MFEs – a solution for scaling development

21 July 2022