Bringing Extensibility to Frontends

Content consumption is undoubtedly growing larger by the day. Powering this consumption are complex frontend applications that allow users to enjoy an amazing viewing experience. Today, these frontend applications are much more than simple webpages, they constitute a lot of different domains such as authentication, previews, catalog, playback, user panels, help section, and much more. 

While developing such extensive and complex server-side web applications or client-side apps, most companies tend to make the same mistake as prominently seen with backends, i.e., end up with a monolithic codebase. With such a codebase that comprises of different domains, development teams not just get into each other’s way, but also face scalability and extension hurdles.

Recently, microservices oriented software architecture has gained much traction and aid in solving the monolith puzzle. The benefits are apparent - small and manageable services with autonomy in development and deployment. Efficient and effective scalability, easy maintenance, and independent updates are other significant benefits that microservices have brought along. 

As frontends also face the same issue, can the same concept of decoupling applied to them? Indeed yes! The same benefits can be extended to frontends when they are developed similar to microservices, aka as micro-frontends.

Simply speaking, when the development of web applications is carried out on top of the microservice-based backend, the frontends usually end up in big and scary monoliths due to continuous development and feature introduction by separate teams. With micro-frontends, the frontend is also decoupled and broken into independent pieces. But at runtime, these multiple micro-frontends load together to form a single application and provide the same experience.

As the frontends are developed in an isolated way, they can also be released independently. One of the most significant benefits is the clearly defined domain boundaries, which substantially reduces unintentional dependencies or coupling.

So, suppose one of your team is working on the video metadata management process and creates a new feature. In that case, they could autonomously decide their delivery pipelines, release cycles, testing, and deployment procedures. It dramatically improves the overall delivery speed, since domain teams can focus on their single micro-frontend. As the orchestration of the micro-frontends happens on runtime, it greatly benefits things like A/B testing, which can be done quickly and effectively.

Micro-frontends change the way how you develop, deploy, and integrate frontends. In the end, developers still write JavaScript code that runs in the browser. They enjoy the freedom to choose an aggregation layer or BFF (Backend For Frontend) to integrate services into a frontend application.

However, now an additional level of integration needs to be considered, and that’s the integration of pieces delivered from other micro-frontends. Since the micro-frontends are virtually independent and domain boundaries are now much bolder, the dependencies have to be defined explicitly. As a result, developers are prompted to think more thoroughly about the interfaces that the separate frontends have with another, which should happen already in any application development process.

Axinom Mosaic utilizes micro-frontends to provide the interface that editors use during content management. Now we can have one team of experts caring and developing the entity metadata editing workflows and another handling subscription models and editing workflows. They don’t need to worry about conflicts as long as they agree on potential interfaces. They can autonomously work on their frontends and have separate releases, bugfixes, and enhancements.  

Axinom Mosaic does the heavy lifting for you, providing you with seamless workflows and a standard interface throughout the services. No matter if you choose the managed services or if you want to integrate a third-party system, you can enjoy the benefits of the unique microservice and micro-frontend architecture.