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?
A key reason for an increased adaption to microservices is due to the dynamic nature of web applications. Software development frameworks and techniques have to keep up with these changes. This can only be achieved by facilitating a co-existence of different front-end frameworks. That’s where micro frontends come into play.
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.
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
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 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
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.
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.
Handling Micro Frontends
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.