Oleksandr T.
2021-04-07
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.
bundles.json { "PaymentService": { "version": 682, "enabled": true }, "SalaryService": { "version": 581, "enabled": true }, "CheckPartnerService": { "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 :)
10 Mobile Application Development Trends To Watch In 2022
NFT Implementation on Enjin: How to Create an NFT on Enjin
Cooperation Models in IT: Which One Should You Choose?
How to Implement Zero Trust Security: Practical Steps
A mobile app is a culture we're used to. Their development was not a bubble, like Bitcoin. Also, this is not a temporary trend, doomed to exhaustion, like the iPhone battery running on iOS 11.
Written by Oksana T.
2022-06-29
What is an NFT, and what are the use cases? How can you create your own NFT and implement an NFT on Enjin?
Written by Artem H.
2022-06-22
How to choose the best IT cooperation model for your software or product development project. This provides a comparison of the available models.
Written by Oksana K.
2022-06-20
How do you implement zero trust security? What are the key steps, challenges, and best practices to implement zero trust within your network architecture?
Written by Ihor D.
2022-06-13
What are the use cases for AI in fintech, and how does AI differ from machine learning? How can you utilize AI and ML to develop your fintech app?
Written by Taras T.
2022-06-07
Find out everything you need to know about top investment management software in one place and choose the perfect tool for your needs.
2022-06-03
What are the key issues to developing an e-learning product? How will you address and solve those challenges? Let’s figure it out.
Written by Dima M.
2022-05-30
What is Geniusee’s Business Continuity Planning? What steps have we taken to implement our BCP? What are the potential concerns and preparedness?
2022-05-27
In this article, we have collected the latest software outsourcing rates by country of IT market in 2022. How to choose an IT outsourcing country?
2022-05-24
Want your app to bring you more outcomes? You should partner with those who know how to improve react app performance. We do and share with you.
Written by Gleb K.
2022-05-20
You don’t have to be a policeman to recognize the types of cybercrimes waiting right for your business. Knowing possible risks eliminates the real ones a lot.
2022-05-16
In some way IT support levels copy the pyramid of basic needs, but for your business. There shouldn’t be any gaps. Learn how we can assist you with that.
Written by Nazariy H.
2022-05-11
You need to know how stablecoins work if you are aimed at riding the wave in financial technologies. Are stablecoins safe? Find in the article.
Written by Sofia K.
2022-05-09
Learn the latest cyber security trends and how you can protect your company, software, and applications from cyber attacks.
2022-05-04
Working with legacy code: is it enough to implement only technical changes to succeed in a long run? What else is needed? Check out in our article.
2022-04-27
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 15 minutes? Say no more....
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 their followers, earn...
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 to all. Target audience:...
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 diet tracking and food...
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 place. Combining...
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 allows shoppers...
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 potentially generated skin...
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 and crucially, the ability...
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 ultimate clients...
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 parts of agriculture.
FactMata is an AI-based platform that identifies and classifies content. Advanced natural language processing learns what different types of deceptive content look like, and then detects...
Tradesmarter is leading in providing white label trading solutions offering a web responsive trading platform that enables top financial companies to unleash a new era of competition, innovation...
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 prices. The brand has...
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 exclusive importer and...
Validify Access is a new innovation discovery platform that showcases only best-in-class and pre-vetted emerging retail technology solutions. Validify helps leading retailers access curated...
NCourage was created to understand the nature of anxiety & stress, the cause of problems with falling asleep, which promotes personal growth, success work and increase productivity....
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 packages for a variable...
DigitalBits™ is an open-source project supporting the adoption of blockchain technology by enterprises. The technology enables enterprises to tokenize assets on the decentralized DigitalBits blockchain;...
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 betting platform.
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 aim to represent all...
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 and education for all...
Due to the high volatility of the cryptocurrency market, a trading company faced with an issue that traders need 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 on helmet screen.
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 media experience to users...
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 from all over the...
PrintBI has the largest and most detailed database of printing companies worldwide, powered by advanced technologies and market intelligence tools.
We will answer you as soon as we determine which of the team members is the most worthy to talk to you :)
CEO
The website uses cookies to improve your experience. Learn more
Tell us how we can help you.