Skip to main content
Author
Posted On 28 May 2021

Talk to our experts about Micro Frontends

I agree to Privacy Policy

qentelli-blogA user interface is like a joke. If you have to explain it, it’s not that good.

- Martin Leblancqentelli-blog

Have we set the tone of this article for you?

Good! A friendly user interface has a lot of behind the scenes. What a user sees and experiences comes from multiple teams working to put together uncountable codes. We assume that it should be no news to you that an app can be developed with 90% front-end code and while we are at it, how can we not mention the much-discussed buzzword – Micro Frontends?

The development world has seen the term lingering for a while now and rightly so! After all, it is not a new concept. Ask someone from the yesteryears and they would resonate to terms like frontend integration for verticalized systems or self-contained systems. However, it was only in 2016 that ThoughtWorks Technology Radar mentioned the term micro frontends. And there has been no looking back since.

But are these worth the hype? Is it a good practice to split an application into smaller fragments? And are they effective? Let’s take a closer look at micro frontends and what can it mean for your app.

What are micro frontends?

The past few years paved way for a number of service-oriented architectures – the most promising of them all being Microservices. What they did was break an application into smaller sections that could be developed, deployed, and tested independently, while working as a unified unit. They have been the answer to most architectural problems for its ease of deployment among multiple teams. Several front-end architectures – MVC, MVVM, Web components – came into existence, but none succeeded to take full advantage of microservices.

It has been common practice for developers to build microservices architecture foundation and layer full-featured application over it, creating frontend monoliths. However, over time, the architecture merged into the application, making maintenance a complicated task. To mitigate these challenges, micro frontends were created. The entire genesis of these were to develop independent features, developed by different teams, put together to create a comprehensive interface – making the application less bulky and a lot more customizable.

Why micro frontends?

When compared to monolithic architectures, microservice architecture has wide-ranging advantages.

The ease of upgrades – In a monolith a change or upgrade needed on a component will need to be supported with the entire app. As a result, increasing upgradation costs, more development and higher testing time before deployment. However, a micro frontend seamlessly adopts to changes, without interfering with the entire application.

The ease of scalability and deployment – Every micro frontend architecture has its own continuous delivery pipeline, making the whole process of building, testing, and deployment seamless. Its independent nature further allows larger number of teams to work simultaneously, without interrupting the status of other pipelines and code, making it an autonomous journey.

Cleaner codebase – The autonomous structure automatically creates a cleaner source code, as opposed to a monolithic frontend. Since the code bases are smaller, they are also simpler and easier to work with. It also averts any unintentional coupling of components.

Better collaboration and more ownership – Micro frontends create the perfect environment for multiple cross-functional teams to simultaneously work and own a stack from the application. Clearly, once a stack is owned, the ownership subsequently increases.

Best practices to deploy micro frontends

Any implementation demands adherence to certain standards and best practices. Adopting micro frontends too need set standards and practices to use it to its full potential. Here’s our top pick for the best practices to be introduced for its deployment.

Browser Integration – It is important to have browser integration for different web components to create front end fragments that can be bundled together with the back-end components. This enables seamless merging of the entire building process and also ramps up the decision-making process on which components are to be featured and how.

Building Custom Elements – If an element is created to always perform the same role and has the same set of properties and functions applied to it, then it can be labelled after its function. For instance, with the rapidly evolving landscape HTML cannot keep up with the rate of change. Custom elements allow developers to create elements based on their function and allow defining their properties.

Creating Shadow DOMs – DOM is the API for micro frontend application. It is a programming interface for HTML and XML documents and represents the page so that programs can change the document structure. It is good practice to create a shadow DOM combining HTML, JavaScript and CSS, segregated from the main DOM, to prevent the risk of global styles seeping into the micro frontend.

The Right Frontend Structure – Needless to mention, the right structure is important for the frontends’ seamless operation. It can heavily depend on frameworks, inter-module communication and isolation techniques. Identify the right structure that will suit your app’s need.

Build it Up Slowly – The enhanced functionality that micro frontends enable often may seem tempting enough to consider migrating legacy monolithic architectures. However, ensure to be aware of the risks involved in the process. The challenges can be both in terms of increased dependencies and technical challenges. Build everything in pieces and take it slow. 

Micro frontend frameworks 10

There are many approaches to micro frontends. From smart build-time to run-time integrations, we have listed the most prominent tools that can help you build micro frontends.

Bit

Bit is among the widely used and opted for tool to build micro frontends. Bit enables developers to compose independent components in build-time, while providing the robustness of a traditional monolith and the straightforwardness of micro frontends. Bit allows multiple teams to build and publish their components independently, while making cross-functional collaboration easier.

Webpack 5 and Module Federation

Module Federation is a JavaScript architecture invented by Zack Jackson, who then proposed to create a Webpack plugin for it. Module Federation allows JavaScript application to dynamically import code from another application at run-time. It also tackles the problem of code dependency and increased bundle size by enabling dependency sharing. This unlocks some really great potential for building micro frontends. 

Single SPA

Single SPA applies a lifecycle to every application. It enables each app to react to URL routing events.  Simply explained, “Single-SPA is a JavaScript framework for building, testing, and deploying multiple JavaScript micro frontends independently in a single frontend application.”

Piral

Piral simplifies building portal applications using micro frontends. It enables creating a modular frontend application that is extended at runtime with decoupled modules called pilets, leveraging a micro frontend architecture. A pilet can be developed independently and ships with the necessary code, as well as all other relevant assets.

Luigi

Luigi is a micro frontend JavaScript framework that enables creating an administrative user interface driven by local and distributed views. It also allows developers to take modules or even entire applications from third-party vendors and integrate them directly into the application.

In a nutshell

If we were to simply explain what micro frontends do, we’d say that they help breaking down bigger structures into more manageable, smaller sections and co-relating them to create a homogenous structure. The technology we choose, the teams we work with should be able to work autonomously and timely.

Conclusion

As we continue to rapidly evolve frontend codebases, it is inevitable to get more complex. There will be sharp rise in adopting more scalable architectures, which will enable drawing clear boundaries between technical and domain entities.

While it might still be work-in-progress, micro frontends do deliver these benefits and with usage, we should be able to apply it to all legacy monoliths. Whether micro frontends are the right approach for you and your organization or not, is a call you will need to make, taking into consideration the continuous trend of adopting frontend architectures for building applications.

Category