Composing UI to scale – How Dazn, Vonage, and SmallCase do it.
Micro-frontend architecture has gained a lot of popularity lately, and rightly so. This frontend architecture breaks down a frontend monolith into smaller, decoupled, and easily manageable micro-frontends. Much like we have microservices at the backend.
The decomposed micro-frontends provide an extremely cost-effective way for growing organizations to develop web applications and scale quickly. However, companies often don’t start with a micro-frontend architecture right away.
When the frontend codebase is small, it’s easier to make all the changes and upgrades while providing a consistent user experience. However, as this frontend monolith starts to bloat, even a small upgrade becomes a mammoth task. On top of that, the user experience also gets compromised and stark differences develop among various interfaces.
Using a micro-frontend architecture will not only help you get rid of these issues but also bring in a whole array of other advantages to the frontend build. Faster development, autonomous teams, independent deployment, easier automation, improved flexibility, etc. are the other observable benefits. You can learn more about these in our detailed article on the micro-frontend architecture.
In this article, we want to share some real examples of how various organizations choose to compose the different micro-frontends based on their specific requirements. But before we start with those, let’s have a quick rundown at the various integration techniques for composing micro-frontends.
Simform is a web development company that purely focuses on building fully functional, robust, and scalable web applications. Hundreds of clients have benefited from our experience in developing SOA-based architecture and innovatively modularizing existing architectures. To build your upcoming web development project, get in touch with us!
Server-side composition
In this composition method, the micro-frontends are composed right at the server, and then relayed to the browser. The advantage of using this method is that you save users from unnecessary load times and blank screens as all the processing of core content gets done on the server beforehand.
Build-time integration
In the build-time integration technique, each micro-frontend is treated as an independent code repository. This makes the deployment a breeze and even helps reduce the overall data flow to the browser. However, the increased dependency among the micro-frontends in this strategy makes it difficult to keep the release pipelines independent of each other.
Run-time integration
Client-side integration or run-time integration is the technique in which all the micro-frontends are delivered to the browser and subsequently organized using one of the various available methods. You can compose micro-frontends using iframes, JavaScript, and web-components with the run-time integration strategy.
Now that you are familiar with the different integration techniques, let’s jump right into the examples.
Bit Speed Up Development With Build-time Integration
Bit, the popular component-sharing platform, enables more than 100,000 developers to organize, manage, and collaborate over shared components. Since their decisions affect the work of so many teams and developers, they always choose what enables better partnership during product development and promotes team autonomy.
To realize the benefits of micro frontends, they have a fine component model in place and also avail a shared infrastructure. This allows teams to independently build components and integrate them later to create efficient applications.
To keep teams from stepping on each other’s toes, they split and decoupled the release pipelines. Build-time integrations helped them ensure that release processes don’t couple together as it happens in the case of iframes. As a result, they experienced a 50X faster component-driven CI process.
DAZN Got Predictability With Build-Time Integration
Faster product development is merely one of many reasons why you should consider looking beyond run-time integration. In the case of DAZN, they wanted more predictable outcomes.
DAZN is an OTT streaming service that caters live and on-demand content to its subscribers scattered across several countries. The nature of their service puts them in a unique position since they deliver user experiences not just on the web but on smart TVs, consoles, and set-top boxes as well.
As a growing organization that also wanted to scale the frontend simultaneously, micro frontends was their most obvious architectural choice. It’d let them build smaller, autonomous teams to improve delivery speed and maintain decent code quality.
When it comes to building a micro frontend, they always ask themselves which method they’d use for compilation.
Build-time compilation allows them to verify the application’s performance and run all end-to-end tests before serving it. This strategy not only puts their predictability concerns to rest, but it also serves well for frontend scaling.
Vonage Leveraged All The Run-time Integration Techniques
Bit and DAZN found build-time integrations to make more sense for them. Like Bit, Vonage also collaborates with multiple third-party developers with their number even reaching half a million.
They jumped to the micro frontend architecture as maintaining code was getting more difficult with teams writing over their repositories. Bugs became unavoidable, and scalability started to seem like a distant dream.
Once they adopted the micro-frontend architecture, they next had to choose an injection method. They overlooked the build-time integration method since they believed it was more suitable for organizations with frontend at the company level.
So they once again had three ways to go about the run-time integration—using web components, iframes, and JavaScript-based techniques. Ultimately, they decided to proceed with a combination of all three based on their specific requirements.
Iframes give them 100% component isolation but don’t allow sharing dependencies. With Javascript-based techniques, communication between the parent application and the injected component becomes much simpler. However, it has no provision for isolation.
When they used web components for integration, they found them to be technology agnostic but could not find useful documentation for most use cases.
With the combination of all three run-time integrations, they can now provide isolation, communicate efficiently, and stay technology agnostic whenever needed.
Smallcase Tackled Performance Issues With Built-time Composition
Not everyone has a clear picture from the get-go. Smallcase had to jump through many hoops to discover what worked best for them. They switched to the micro-frontend architecture to manage the bottleneck arising in the subscription-flow management.
For integration, they started with run-time composition. The most significant advantage of using this method is that it finally made atomic deployment possible for them. They didn’t need to upgrade microsites to make changes in the widget script. Run-time composition spared them the hassle of deploying 50+ microsites.
But the method has its downsides as well:
Hence, they decided to switch over to build-time composition. This method gave them a much-needed performance boost thanks to its superior dependency management, which led to smaller bundles. Along with that, they could also continue independent deployment.
Even though build time composition isn’t ideal for all scenarios, it’s working in favor of Smallcase for the time being. So I’d like to reiterate what I said at the beginning—make choices based on your specific use case.
Choose build-time integrations if you want to take advantage of components and retain all the benefits of micro frontends. But if you wish to stay technology agnostic, exercise independent deployment, and improve communication between the parent app and the component, then run-time integrations are your safest bet.
The Wrap-up
Irrespective of the composition technique that suits you the most, you always need a competent team to do the job for you. We, at Simform, have been an extended team of technical teams of organizations worldwide and empowers them with the best tech workforce. With more than a decade of experience under our belt, we understand all the nuances of web development and always have the perfect solution for your specific needs.
If your organization is experiencing growth and is in need of a scalable architecture at the frontend, we can accompany you on the journey to becoming future-ready while elevating performance in the present. Our team of talented developers optimized to work under remote scenarios. We remain transparent throughout builds and let you be in control at all times. So, feel free to reach out to us and get your free consultation today.
