Modern customers have more requirements for a web app than ever before. With the wide choice of mobile and web applications that exists today, it is not enough for an application to simply fulfill its functions as advertised. It also has to be highly available, scalable, and fast, and updates and new features have to come out regularly, and without a hitch.
For quite some time already, creating a successful modern web application has meant overcoming the limitations of a monolithic backend. One of the most popular approaches for that is using microservices for your backend development. However, these days, more and more often we see that applications can run into serious problems when they have a monolithic frontend too.
With the frontend of many new web apps increasing in size, and with new functionality added all the time, getting rid of the disadvantages that a monolithic frontend presents becomes a burning question. Could micro-frontend architecture be the answer that software development teams need? We have compiled some essential information that might help you understand micro-frontends better.
Check what kind of frontend development services we can offer.
Why microservices?
Although you might be already very familiar with microservices, let's quickly recap the concept to better understand the benefits that come from using this architecture. The main idea behind microservices is developing apps as collections of smaller independent services that communicate with each other to work as a single solution.
There are multiple benefits that you can gain from implementing microservices for your web app. When you have independent components that make up your wider system, it becomes easier to develop, test, and deploy them without the risk of the whole application breaking if something goes wrong. The whole web development process goes quicker too, since you don't have to check the whole monolithic codebase every time you add some new functionality.
Microservices also make scaling up or down easier and less costly, because instead of getting more resources for the whole app, you only need to scale the exact service that needs it.
Get more insights in our article “What is microservices architecture”.
Micro-frontend architecture
Micro-frontend architecture is all about using smaller elements like microservices for your app frontend development. The term itself has been around since 2016 and it keeps gaining more traction. Creating micro-frontends involves splitting your application's frontend into multiple components or even micro apps. These elements will still work as a single application for the end user but they make it possible to work on them separately, with multiple autonomous teams.
One of the popular approaches to micro-frontends, for example, is to create a meta framework with ReactJS, Vue, Angular, etc. that combines a system of single-page applications into one web page. See our React development services to learn more.
As a rule, each team working on different micro-frontends is cross-functional, so they work on everything that a specific service requires to function, from the user interface to the database. Different teams typically concentrate on different parts of the business logic and develop separate features end-to-end. When the application is in use, it is a popular approach not to make all the components load at the same time. Depending on which part of the functionality is in use, different modules or UI components may be loaded at runtime, for instance.
Some typical examples of micro-frontends can be found in popular social networks. The footer and header of a web page are often developed as separate components, and different parts of the page, e.g. a collection of favorite pictures, are built as micro apps. Each of these components would usually have separate codebases, they can have a different tech stack, and multiple teams working on them can even have different release processes. Another option could be to create separate pages of a web application as micro apps.
Micro-frontend architecture gives you more freedom as compared to monolithic frontends. With independent teams working on micro apps, the entire frontend development process can become faster and more efficient, although that depends on whether or not you manage to organize excellent communication between the teams.
Micro-frontend integration approaches
So, the general idea of the micro-frontend concept works is clear, your frontend is divided into smaller, more manageable elements. As a rule, these smaller elements are controlled by a container application that is responsible for rendering common or custom elements of the page where and when it is necessary and addressing global concerns like navigation, authentication, and so on. However, it is possible to achieve this in different ways. Let's take a look at some of the popular approaches that are used to implement micro-frontend architecture.
Rendering micro-frontends
When it comes to rendering micro-frontends on the page, there are multiple methods, but iframes or web components are generally considered popular solutions.
Iframes
Runtime integration using iframes is perhaps the simplest approach. It is comparatively easy to use iframes to build independent sub-elements that, in turn, are used to create a complete page of an app. With iframes, when it comes to styling and global variables you can count on a certain degree of isolation.
However, due to the same isolation capability, iframes are less flexible. You will encounter some additional difficulties if you want to make a fully responsive app, and it can be pretty complicated to integrate separate parts of the application and ensure effective communication for deep-linking or routing. This approach is one of the older ones and doesn't enjoy great popularity among frontend developers these days.
Web components
There is another approach to runtime integration where you define custom web component element types. Then, a container is used to create an instance of these web component HTML elements when necessary and attach it to the web page. This approach is more about using the native capabilities provided by browsers and the web component spec.
Switching page contents
There are also different methods for switching the contents of a web page while interacting with an application.
JavaScript
Using JavaScript for runtime integration can be considered the most widely used approach, and it is also the most flexible. This is done by including multiple micro-frontends into the page via the script tag. When micro-frontends are loaded they expose certain global functions as their entry points and a single container app is used to control which micro-frontends are mounted and rendered, where, and when.
The JavaScript approach gives us more flexibility compared to iframes. It is easier to build integrations between the elements of the app, pass data when micro-frontends are rendered, and so on.
Other options
Although integrating micro-frontends at runtime is typically accepted as a preferable solution, there are other ways to develop a micro-frontend application.
For example, you can use server-side rendering of HTML from multiple elements or templates. The common elements of a web page are included in the index.html file and the HTML content specific to different pages is plugged in via the server-side. This approach is comparatively old and has to meet some specific conditions to be considered a micro-frontend architecture, it all depends on whether you manage to preserve the development teams and codebase’s autonomy.
Building micro-frontends is sometimes also attempted by publishing each micro app as a package and including these packages as library dependencies by the container app. Integrating micro-frontends at build time makes it more difficult to ensure the app elements are loosely coupled, which is why runtime integration is considered a better option.
General principles
No matter which approach you choose to tackle micro-frontends in your web app, there are certain general ideas you might want to keep in mind to achieve the best results:
- Let your teams choose their own stack. Being technology independent is the way to ensure each of your micro apps can fulfill its functions in the best possible way. And to create a neutral interface and hide implementation details your teams can use custom elements.
- Sharing runtime might not be the best idea so make sure to isolate team code. You don't want to depend on global variables or a shared state, even if your teams don't use their own framework.
- Define clear ownership using naming conventions if there is no other option for isolation. Create team prefixes and namespace CSS, events, local storage, etc. to ensure different teams don't interfere with each others' work.
- Browser events are generally a better choice for micro-frontend communication than a global PubSub system. Keeping it simple and opting for native browser features over custom APIs increases the development speed and reduces the number of possible errors.
- Focus on resilience. Even in situations when JavaScript can't be executed, the app should remain useful. Progressive enhancement and universal rendering help to create a resilient web design. Finding ways to improve perceived performance is how you can make your end users happy.
Micro-frontend advantages
Micro-frontend architecture is gaining more and more popularity with time, and there are multiple reasons for that. Now that we understand micro-frontends better, let's see what exactly this frontend architecture can give you.
Faster development
One of the more obvious benefits that come from implementing micro-frontend architecture is the opportunity to develop and deploy the code quicker. When you have multiple teams working on separate parts of the application, each team is independent from other teams so it is not necessary to wait, e.g. with testing, until everyone completes their tasks. Each part of the app has its own codebase and can be developed and deployed independently, which, in turn, shortens the time required to release a new feature or a bug fix.
Another aspect of micro-frontend architecture that shortens the time to market is reusable components. When your code is divided into smaller stand-alone components, it is easy to reuse any of them in, e.g. a different web page or an app that belongs to the same company, instead of having to develop the functionality from scratch every time.
Best tech stack
Each team of developers can choose the best technologies to build the micro app they are working on. The very nature of micro-frontends makes it easier to implement the most cutting-edge technologies as well. You can choose any hot new solution as your micro-frontend framework. Your options are definitely not as limited as with a monolithic app.
Fault isolation
Having a frontend that consists of loosely coupled elements makes the whole web page more robust. Even if one of your microservices fails, it won't mean your customers will experience the whole app becoming unavailable. It is also much easier to determine where exactly the problem is occurring and fix it quickly when you only have to modify and test one small component instead of the whole application.
Thanks to the way micro-frontend architecture works, it is easier to maintain the app over time as well. You can check and update the code elements one by one without taking the whole application offline. Customers value reliable applications and your revenue growth will reflect that.
Scalability
Micro-frontend frameworks are widely accepted as one of the best solutions for building highly scalable apps. With monolithic frontends you need to scale the whole app at once which is not only more complicated but also more expensive since you need more web servers and other resources. Micro-frontends allow you to ensure that scaling happens only with the part of the app that is responsible for the particular business logic that needs more resources at that moment. It is also easier to automate the scaling process so extra resources are almost instantly redistributed once a service doesn't need them anymore.
When do you need micro-frontends?
Although micro-frontends have lots of benefits, you shouldn't think that it is the best solution for any app. Just like microservices for backends, micro-frontends are better suited for apps with a lot of functionality and thousands of end users, when scalability is crucial. If you have a simple app or website with not that many customers or if multiple teams that act independently are not an option for your company, then micro-frontends might not be the best choice for you. Native Android or iOS mobile applications also typically have monolithic frontends so if that is what your team is working on, you might not want to attempt switching to micro-frontends.
There are other things to consider, for example even if you decide to use micro-frontends, you need to carefully plan the total number and size of microservices or different components you will use. When micro elements become too large, it removes most of the value you were aiming at in the first place. And if you have too many components the overhead and costs of maintaining them all will skyrocket.
Micro-frontend code can be written in multiple programming languages and various frameworks are supported, for example, Vue, Angular, React, and so on. So, in theory, the developers can make their own decisions and choose what stack would be best for the specific part of the business logic that each independent team is working on. However, in practice, if multiple technologies are used for the same solution it usually means there are no standards, which eventually could lead to chaos.
Communication between components should also be organized effectively, for example using a standard event bus to deal with incoming and outgoing events. If your micro-frontends are independent but can't communicate with each other, your web app will be unable to perform as it is supposed to.
Conclusion
Micro-frontends could add unnecessary complexity and extra expense to your software development life cycle, so it is important not to opt for this trend just because it is popular. However, micro-frontend architecture can ensure faster updates and improve productivity for your teams so it is worth considering. Just make sure you understand what implementing it will require, not only what benefits you could gain.
