Micro-frontends: Building front-ends with microservices
--
Dialectica’s technology team explains why micro-frontends are a solution worth considering for any developer looking to break large codebases into smaller ones and thus enhance team efficiency.
Web applications have been traditionally designed as a single codebase and deployed as a single piece of software. However, large monolithic codebases are difficult to maintain, deploy and extend as even for minor updates the whole code base needs to be re-deployed and this can easily and too often result in issues with cross dependencies. These problems not only cause lack of scalability and flexibility, but also development efficiency decreases, especially if your team grows in size.
To enhance the efficiency of your frontend development projects, you need a solution that provides your team with smaller and more discrete codebases, which helps developers to update the codebase easily and deploy modules independently, without causing any conflict to the rest of the web application. Enter Micro-frontends, an application development approach where you can split the frontend codebase into manageable pieces and reduce cross dependencies significantly.
In this post, you will find more information about micro-frontends and their benefits, as well as discover three different methods of building frontends with microservices to reduce the complexity of the product and increase the effectiveness and efficiency of your team.
What are Micro-frontends?
Micro-frontends refer to a new development approach where web application front-ends are composed of semi-independent fragments and allow you to break large-scale workflow systems into smaller components. As a result, you can enjoy benefits similar to those of microservices, including maintainable codebase and independent releases.
What are the benefits of using Micro-frontends?
- Micro-frontends enable you to break codes into smaller and more manageable pieces, resulting in a smaller and more manageable codebase. In this way, you can understand the codes easily and further develop the functionality of the web application conveniently.
- If you are building multiple web applications with similar workflows, you can extract common elements, rather than creating them from scratch every time. In this way, micro-frontend shortens the development time significantly.
- With micro-frontends splitting codes into smaller parts, more development teams can work simultaneously, even on large and complex products. This enables you to scale the teams effectively, which is a very important factor for building web applications with complicated workflows. With micro frontends breaking up large-scale workflow systems into smaller components, the team members can create, update, and implement changing business processes easily.
- Micro-frontends allow you to update specific modules without causing any conflict with the rest of the web application. Through a simplified process, you can enjoy more flexibility and introduce new changes and features without any hassle.
- Micro-frontends provide you with a continuous delivery pipeline for building, testing, and deploying the modules all the way to production independently. You don’t have to worry about the status of another code in the same web application.
How to build frontends with microservices
Based on research we have done towards building our next generation platform here in Dialectica, we have concluded in the following methods based on industry best practices:
1. Build-time integration
Build-time integration allows you to integrate components at the build-time, while keeping a fully decoupled build pipeline for each module. In this case, you don’t have to worry about the issue of the release pipelines of different front-ends not being decoupled from each other.
With the right tool, you can integrate micro-frontends at the runtime easily. For example, you can use Bit to build and integrate independent components to your web application. It keeps your codebases and release pipelines completely decoupled from each other.
Build-time integration enables you to leverage components and enjoy several key benefits, including easy collaboration and code reusability. This enables your development team to avoid any issues with building and releasing changes to their modules independently.
2. Run-time integration via iFrames
One of the easiest ways to build micro-frontends is using iFrames. They allow you to easily build a web page out of multiple sub-web pages that are independent of each other. Additionally, they isolate global variables and styling efficiently, so you will never have to worry about conflicts.
Let’s think about a scenario where you are building an eCommerce web application. You need to build a new web page out of three independent sub-web pages: product catalog, order item, and user profile. All you have to do is define a constant, called microFrontendsByRoute, and include all the routes of the sub-web pages. Then you can display them in an iFrame easily. The code will look similar to this:
3. Run-time integration via components
By using web components, you can integrate micro-frontends into the run-time easily. It’s one of the most flexible approaches.
Let’s think about the eCommerce web application that you are building. To follow the approach of “Run-time integration via components,” you have to include all the independent sub-web pages using the <script> tag. Then you have to define a component, called webComponentsByRoute, which will include the routes of the sub-web pages. As a next step, you will have to create webComponentType, root, and webComponent constants. Finally, you will need to append the child of webComponent constant to the root constant. The code will look like this:
Wrapping Up
Micro-frontends help you to break large codebases into smaller and more manageable pieces. It can reduce cross dependencies significantly and enable you to scale your development team efficiently. Due to the modular structure of the micro-frontend, the team members can create and update codes conveniently, while a problem with one feature doesn’t affect the rest of the application.
In that way developers can avoid extra hassles and it is also easier for them to scale up the application once its user base starts to grow rapidly. By offering modularity and flexibility, micro-frontends simplify the process of coping up with the changing business requirements of web applications.
As it happens, micro-frontends are great but they are not the only sharp arrow in the quiver of our technology team here at Dialectica. We employ several cutting edge tools and techniques that enable us to be agile, as well as learn and grow as professionals.
