Probably the most pleasant thing during development is the moment when you realize how you can solve this or that problem. This moment happened to me when, while working on the development of a neobank application, I came to the conclusion that the fact that we are building a monolithic application on the frontend is not the best solution in this case. “We need micro frontends,” I heard distinctly in my head. I realized that I would need to convey to our clients what it is all about and why we should use micro frontends in our project. This is how the article, which is now in front of your eyes was born.
From my own experience I can say that all these years, the frontend developer has been writing monoliths in all the cases, although they understand that this is a bad habit. You divided your code into components, used require or import and defined npm packages in package.json, or spawned git repositories in your project, but nevertheless you still had to write a monolith.
It's time to change the situation.
In this article I will share what are micro frontends, what are main advantages of micro frontends, how micro frontends work, when to use micro frontends, what are the biggest challenges of using micro frontends.
Monolith is an ancient word for a huge block of stone. Although the term is widely used today, the presentation remains the same across all areas. In software engineering, a monolithic model refers to a single, indivisible unit. The concept of monolithic software is that the various components of an application are combined into one program on one platform. Typically, a monolithic application consists of a database, a client user interface, and a server application. All parts of the software are unified and all of its functions are managed in one place. Let's take a look at the structure of monolithic software in detail.
Monolithic architecture is convenient for small teams, which is why many startups take this approach when building an application. The components of monolithic software are interconnected and interdependent, which helps the software to be self-contained. This architecture is the traditional solution for building applications, but some developers consider it to be outdated.
By their very nature, all frontend applications are monolithic - except for micro-frontend applications. The reason is that you are developing using the React library and there are two teams working on it. Both should use the same version of React and keep each other informed of updates, which means that they always resolve conflicts when merging their code. They are not completely independent from each other in the codebase. In fact, they probably use the same repository and the same build system. Front end microservices can save an application from being monolithic! But how can this be? After all, they are for the backend!
1. Limited flexibility. Every small update requires a new deployment. Accordingly, if several teams are working on one project, they will have to wait.
2. Difficulty in introducing new technologies. Introducing a new technology into a monolith means rewriting the whole (large part) of the project.
3. Growing complexity. The more functionality the application has, the more functional blocks it consists of, the more connections between them there are, and accordingly, the more difficult it is to keep track of what is happening.
4. Organizational problems. The more teams work on a project, the more releases have to be implemented, which is fraught with the fact that each release can break an existing application (like a classic white screen). Each team member must use the same version of the libraries and notify everyone of any changes. There is also no complete independence from the codebase, developers would rather use one build system and one repository. It also creates problems for new team members, who will have to study the project before fixing a bug or creating a feature.
All these problems are solved by microservice architecture. Microservices are a development technique that allows you to make independent deliveries of new functionality that cover their part of the platform. At the same time, the release of each microservice does not break the rest. Each microservice should perform one and only one business task. In the backend world, this approach has been used for a long time. But now many people have a question why not do the same in the front-end?
The principle of micro frontend is to make the presentation of a web application as a set of functions that independent teams will be responsible for. Microservice structures will look like a monolith, but for the user to interact with them as with one whole application, you need to create a "wrapper" for them. This level can be called connecting. But this approach is far from ideal and has several disadvantages.
The architecture of micro frontends looks pretty obvious, because similar principles have successfully been applied in the work on backend services for a long time to divide the monolithic frontend into small UI fragments. However, the UI is not exactly like services - it is the interface between the end user and the product, it must be thoughtful and systematic. Moreover, in the era of single page applications, entire applications are launched through a client-side browser. These are no longer simple HTML files, they are complex components that can contain various UI and business logic.
Imagine that I am dividing the structure of a monolithic application vertically, by business function. I will end up with several smaller applications with the same structure as the monolithic application. But if I add a dedicated application on top of these small monolithic applications, then users will interact with it. This added application, in its turn, will integrate the UI of those little apps. Let's call this layer a glue, because it takes the UI elements of each microservice and connects them into a single interface - this is the most direct implementation of the micro frontend.
1. There are N micro frontends.
2. We load each of them.
3. We initialize the micro frontends we need.
4. We mount the micro frontends where we need to.
5. Unmount when needed.
6. Each service will interact with the core.
Unfortunately, there is no definite specification yet for building a micro frontend architecture. Here are perhaps the most affordable and simplest ways and techniques for building micro frontend applications:
Let's go through each of the listed approaches.
IFrame is a long-standing technology that, despite all its irrelevance, makes it possible to build a micro frontend architecture. Using an IFrame, each individual widget can be placed in an IFrame that loads the desired application. With this approach, you are likely to run into the following problems:
I do not recommend building a micro frontend architecture using IFrame. Today, there are other ways to make it easier and more effective.
Zalando has created an entire ecosystem for building a micro frontend architecture, and Tailor.js is part of the ecosystem. The peculiarity of Tailor.js is that it is a package for Node.js, and it is focused on building a micro-front-end architecture with server rendering.
For me, an additional feature of this package is the lack of documentation. I could find live examples of projects only in separate GitHub topics, where ordinary users ask for advice and attach links to their code repositories. If you need server rendering, then this library will definitely come in handy.
The main and, in my opinion, the best approach to building a micro frontend architecture is the single-spa framework. Here are the main reasons why I recommend choosing a single-spa:
Single-spa is a framework that makes it possible to combine different applications, regardless of the library or framework used, into one whole. Under the hood of the single-spa is a set of existing tools along with its own solutions:
Now I come to an interesting question - how do micro-frontends interact with each other?
To understand this, let's figure out what a core is and what functions it should perform.
In simple terms, the core is another application that brings our micro frontends together.
What is the core made of?
The loader allows you to download our micro frontends and mount them in the place we need. To understand what is to be loaded, you can create JSON which will contain the data about the package you need to take.
"version": 682, "enabled": true
"version": 581, "enabled": true
"version": 65, "enabled": false
The router allows us to render our micro frontend depending on where we are now. The general scheme of the route looks like this:
1. Activating a new route;
2. Dismantling the micro frontend that was associated with the old route;
3. Installing a new micro frontend.
Communication between micro frontends can be done as you please. CORS approach can be used as an example.
In the case of SSR (Server-SIde-Rendering), all your microfronts should be turned into fragments and combined in the final HTML page.
Using this architectural approach in small projects and small teams presents more challenges and additional frontend development complexity than benefits. But large projects with distributed teams and huge number of requests, on the other hand, benefit more from building micro frontend applications. That is why today micro frontend architecture is already widely used by many large companies in their web applications:
To make it clearer, below I will call each small monolithic application a micro application, since these are not just microservices, but stand-alone applications - each of them has UI elements and each of them represents a full-fledged business function. As you know, today's front-end ecosystem is very diverse and can be quite complex. And such simple, obvious solutions may turn out to be inappropriate during the implementation of the product.
There is no panacea, but there is an idea to create a common UI library, which would also be an independent micro-application. In this case, all other micro-applications will need to depend on this UI library.
Another option is to create generic CSS variables at the root level. The advantage of this solution is that we get a global custom theme for all applications.
Alternatively, we can make SASS variables and mixins common to all commands. The disadvantages of this approach will be repeated implementation of UI elements and the need to constantly check the design of similar elements in all micro applications.
First, it is possible to limit the scope of the CSS using selectors formed by the name of the micro application. By placing this constraint on the middle tier, you can reduce the overall frontend development time, but at the same time increase the responsibility of the middle tier.
Second, you can force each micro application to become a custom web component. The advantage of this approach is that the browser is responsible for the limitation. However, everything has a price: with Shadow DOM, it is nearly impossible to do server-side rendering. Besides, custom elements are not 100% supported by browsers - especially if you need IE support.
This problem is one of the most common, but it can be solved quite easily. HTML5 is powerful enough to be largely unexplored by most front-end developers. One such feature is custom events, which allows you to share information across micro applications.
Also the pub-sub or T39 implementation can help you. If you need a more subtle global state handler, you can implement a small generic Redux - thus a more reactive architecture.
The solution to the problem is implementation dependent. All major modern frameworks have powerful client-side routing mechanisms using browser history state. The problem is which application is responsible for the current route and when.
My pragmatic approach is to create a generic client router that is only responsible for the top-level routes, and the rest is left to the appropriate micro-applications. Let's say we have a route definition / content /: id. The shared router will resolve the c / content part and the resolved route will be passed to ContentMicroApp. ContentMicroApp is a stand-alone server that will only be called with /: id.
The bonding layer solves problems on the client side, but not on the server side. On the client side, after loading a single HTML, we cannot load individual parts when changing the URL. Hence, we need a mechanism that downloads the fragments asynchronously. The problem is that these fragments can have dependencies, and there should be a possibility for these dependencies to be resolved on the client side. This means that a micro frontend solution must offer a mechanism for loading micro applications and dependency injection.
As a result, having studied all the possible information about micro frontends available on the Internet (and as I mentioned above, the micro frontend is still a problem with the documentation), I was able to convey the correctness of this approach in the case of developing a sufficiently large application for a neobank.
Remember, if you have a regular company website and a small project with a small team working on it, then most likely you don’t need a micro frontend concept. If you have several teams on your project and several interacting views on different domains, then it makes sense to consider this approach. First of all, you need to evaluate the benefits that you will receive in return for the effort and time spent, whether it is worth it or not.
Good luck with micro frontends!
Enjoy this blog?
Please, spread the word :)
Education Technology: A Complete Guide to EdTech
Best Automatic Machine Learning (AutoML) Frameworks in 2022
10 Retail trends 2022-2023 that will be relevant in the coming years
Development of high-load fintech applications
Have you used Automatic Machine Learning technology in your business yet? Read what are the best AutoML frameworks and write to us if you have any questions.
Written by Nazariy H.
What new trends will determine the future of Retail? We have selected the ten most notable trends that will affect business this year.
Written by Oksana T.
Do your system still work on heavy load? Find out all pros and cons of high-load applications and order one now to outstand your competitors with Geniusee.
Written by Taras T.
Get the right technical partner in Poland. Geniusee offers best custom fintech and edtech software development services across Eastern Europe
Written by Yaryna Y.
In this article, we share our knowledge and experience in developing cryptocurrency trading applications.
Written by Pavlo K.
Find out what technological solutions are in greatest demand in retail. Geniusee will help you develop the best go-to-market retail software based on trends.
In this article we will share information about git branching model. The git flow model was released by Vincent Driessen and helps to hotfix problems quickly.
Written by Ihor D.
Buy Now Pay Later (BNPL) solutions are popular alternatives to credit cards. With proper assistance, companies can develop their own BNPL apps.
Have you ever wondered how to keep a user on your website for ages and prevent exit for as long as possible? Here are some tips based on the Geniusee marketing team experience
Written by Sofiia K.
Find out what are the features of finance application development to ensure that your product will hit the market and bring your business to the top
After identifying business needs and problems, don’t wait to figure out which artifacts best suit your developer's requirements.
Written by Yevhen K.
Did you know Airflow can help you automate tasks in your IT workflow and boost your productivity? Here’s a detailed Apache Airflow overview to help you.
Written by Oleg S.
Check out how to provide an efficient incident response to possible cyber threats and malicious activities.
In this article, review ✔MLOps best practices, ✔ Risks & Challenges, ✔Benefits of MLOps solutions that automate and shorten the machine learning cycle.
Written by Sofiia V.
Are FinTech and RegTech the same? Find out the key definitions and technologies involved to understand the difference.
We can either change an existing retail software
solution or develop retail software from scratch that meets your requirements. Let's discover our
successfully implemented projects in the field of e-commerce.
An on-demand video learning platform that has reshaped the learning and development landscape in the global financial services industry. Designed to empower professionals with...
A sports marketing platfrom for athletes and companies that empowers marketing campaigns and brings brands and ambassadors to the next level of cooperation
A digital platform built to merge traditional banking systems with new-age digital assets such as cryptocurrencies and NFTs. The platform allows tracking and managing of children’s...
Android and iOS mobile app with automated payments, add geolocation services, integrate local market stakeholders, and as a result - the product for rapid grocery delivery in...
Meet one of our clients – Drum! This 5-star application is a platform designed for creators. That’s a great tool for people who care about their personal brands to engage with...
Our client, a technology solutions company in MedTech, aims to make the latest technological advances available to millions by providing high-caliber, more affordable solutions...
Our main goal was to develop a digital platform for healthy habits called EinkaufsCHECK. We aimed to create a hybrid app for iOS and Android for the easiest and most accurate...
Our client is a secure, automated platform that streamlines the merchant cash advance process and enables ISOs and lenders to manage their businesses from one centralized, convenient...
For Crave retail Geniusee has developed 2 enterprise mobile applications that solve the double-sided problem for every shopper visiting the fitting room. The Fitting Room application...
Outstanding case in Geniusee portfolio, Pause – mobile app for meditation. iOS application was downloaded 1000+ times on the launch day.
The Ajuma company was founded by a couple after the birth of their child. They wanted to protect their baby from the harmful effects of ultraviolet radiation sunburn and from...
Zedosh is a new digital advertising platform that financially empowers Gen Z. Using Open Banking, we provide insights into their spending behaviour, tips on how to master money...
Revenu is an All in one POS (Point of sale) management system . It uses the latest trends of technology to manage different types of Food & Beverage from scratch up to reaching...
Realm Five develops devices that collect various data, such as soil moisture, rainfall, amount of water in tanks, condition of tractors and their location, etc. from different...
FactMata is an AI-based platform that identifies and classifies content. Advanced natural language processing learns what different types of deceptive content look...
Tradesmarter is leading in providing white label trading solutions offering a web responsive trading platform that enables top financial companies to unleash a new...
Swoon is an online furniture brand with a difference. Their main idea is that everyone should be able to buy beautifully designed and crafted furniture at reasonable...
Frenotec LLC is a motorcycle distribution company eventually grew into the nation’s largest distributor of Brembo motorcycle brake components as well as became the...
Validify Access is a new innovation discovery platform that showcases only best-in-class and pre-vetted emerging retail technology solutions. Validify helps leading...
NCourage was created to understand the nature of anxiety & stress, the cause of problems with falling asleep, which promotes personal growth, success work and...
Wyzoo App is built on artificial intelligence and learning techniques to identify patterns in your customer data.
Tamam on-demand mobile application connects customers with independent local couriers, who acquire goods from any restaurant or shop in a city and also deliver urgent...
DigitalBits™ is an open-source project supporting the adoption of blockchain technology by enterprises. The technology enables enterprises to tokenize assets on the decentralized...
The blockchain based platform - Totalizator. The goal of this R&D project was to validate the possibility of using blockchain technology in order to create an objective...
The Virtual Console is the graphics space that actually allows you to control your light shows during live events. It visually displays a number of so called widgets and...
PoolParty app allows increasing your popularity on Instagram by sharing links to the community of users, that will like, share and follow such links.
My Uber app allows everyone with a car to join the community of uber drivers within a couple of clicks - the company will take care of everything else. My Uber provides support...
This system empowers traders with the possibility to quickly analyze cryptocurrency market information.
This system provides a complete omnidirectional view for armored vehicles crew (transparent walls effect) and the possibility to receive necessary data and interactive tips...
BuzzShow is a video social media network which incorporates the blockchain technology in a reward-based ecosystem. The platform offers full decentralization and a unique social...
ZaZa is an expert in online learning and education abroad that helps its clients to get the highest quality services for quite affordable prices. They bring together native-speakers...
PrintBI has the largest and most detailed database of printing companies worldwide, powered by advanced technologies and...
Tell us how we can help you.