Sandwich

Copenhagen

Odense

Denmark.

Berlin

Hamburg

Düsseldorf

Germany.

Paris

Strasbourg

France.

Dnipro

Mykolaiv

Ukraine.

Chisinau

Moldova.

Sofia

Veliko Tarnovo

Gabrovo 

Plovdiv

Bulgaria.

Hanoi

Vietnam.

Boise

New Jersey

USA.

Bukarest

Romania.

Vienna

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 organization, 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 organization. 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, organize, 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 summarize 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 recognize different approaches that work best for their cases and products depending on the infrastructure of the organization.
Are you interested in more information? <a href="https://ffwagency.com/contact-us">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

FFW Awarded 'Top Workplace USA' Honor

How we killed the website replatform

Open-source software: A CMO’s competitive advantage

7 Things to Think About Before Starting a New Drupal Project

How to redesign your digital presence in 2020

CCPA vs. GDPR

What Personalization is not

Projects no longer in office? How to lead a remote project management team

How to keep your sales team productive during a crisis

Lead a remote marketing team and improve communication

10 things to try when leading a remote design and creative team

Trust. Transparency. Adaptability

37 best practices for leading remote teams

Covid-19 and online banking: Your website = #1 branch

Future-proof and remote-proof your site with continuous development

Free learning resources to consider while stuck at home

Drupal community raises $500,000 in record time

Building Platforms for Millions with NBC Sports Digital

Acquia DXP: Solve silos. Create winning experiences

Better Drupal Page Building with Acquia Site Studio

WomenLift Health: A strong web presence during COVID-19

Scale your content operations with Acquia Drupal Cloud

Acquia Marketing Cloud: A 360 view of your customers

Headless CMS 101

VENN and FFW develop high experience digital platform

Life Returns To Normalcy, Here's Why Business Never Will

KPIs: Benchmarks for Digital Success

Better data quality through automated testing

Supporting the Empowerment of Women in Tech

She believed she could, so she did

How Best of Breed Can Build a Better Customer Experience

How to Make Your Next Website Redesign as Painless as Possible

Calming Content Chaos with Contentful

How Drupal Manages Content for Your Customers' Entire DX

How to Set up a Good User Research Interview

It's a New Year...But Are You Feeling Stuck?

Drupal 8: End-of-Life on November 2, 2021

Flip the Narrative on Accessibility

Why It Makes Sense (and Cents) to Incorporate Accessibility Best Practices

FFW Partners with Digital Asset Mgt Provider, MediaValet

Accessibility in Action

How to Build Your Digital Estate Strategy to Scale

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

FFW Awarded 'Top Digital Agency' Honor

FFW Adds to World-Leading Acquia Expertise

Investing in the Health of Remote (and In-Person) Teams

4 Key Trends that will influence Technical Decision Making

How WebOps Moves Your Mission Forward

How to Build a University Website That Actually Works

About asteroids, ice cream and lots of good talks

Supporting the Next Generation of Tech

Web accessibility raises brand recognition

Dynamic Without Limits: 2022 Next.js Event Recap

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 a DXP?

How Higher Ed Can Improve Analytics Governance with GA4

What is Continuous Development?

Drupal 9 end-of-life – not the end of the world

What is Personalization?

FFW & IES Abroad Honored with Webby Award For Best Website Structure

Decoding Technical Jargon

Contentful Storylines: The future of content storytelling

Unlocking the Power of Vertical Slicing

How to Optimize Personalization On a Website

Acquia Engage Awards 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

Navigating Headless: Is It Right for Your Next Web Project?

Artificial Intelligence in Drupal

JAKALA celebrates 24 years of excellence

MVPs - A deep dive into their challenges and potentials 

MFEs – a solution for scaling development

July 21st, 2022