The micro frontend approach is one of the hottest trends in enterprise application development today. For beginners, the simplest way to understand this new methodology is – Consider splitting a web application component into multiple subcomponents during development and having different teams develop each component from back-end to front-end as a self-contained entity. The key difference it has over microservices is that with micro frontends, the application is sliced into components on the basis of browser-based functionality that the end application is expected to offer. On the other hand, microservices architecture focuses on backend services being split into different components and finally governed by an umbrella monolithic front-end.
But before going into implementing a micro frontend approach for your business’s web applications, it is important to make note of 8 key factors. Let us examine them:
Evaluate Team Size
The micro frontend approach works well when you have sufficient team size to handle intra-component activities. Smaller team sizes can reduce efficiencies and increase overheads, since coding and deployment processes for different sliced components may have to be handled by the same developer. It is, therefore, recommended that the Micro frontend approach is reserved for development initiatives that require a large team size. There will be a learning curve involved in this approach as with any other technological innovation. Hence, from a business point of view, the investment in training would be worthwhile only if a large number of people are trained to handle the new methodology.
Simplify Cross Team Exchanges
There is a high degree of independence for each team as they are free to choose frameworks, libraries, and technology stacks to build their component in a self-contained environment. They do not even share runtime even if different teams leverage the same framework. As such when the application requires different components to work in harmony to serve desired end-user requests, there should not be any complexity at the communication interface between different components. Cross-team information and data exchange APIs need to be as simple as possible and the nomenclature of items that cannot be isolated should be standardized across the entire development team to prevent clashes and ownership conflicts.
Strategic Component Division
The micro frontend approach is brought in through the mechanism of slicing large web applications into smaller components and then having vertical teams build each component end-to-end. However, depending on the size and complexity of the end product, you can choose to assign dedicated teams to either every child component or another dedicated team for the shared components. Additionally, your business can even choose not to go in for a deep slicing approach and restrict component division to just a handful of those that are eligible for division. In such an approach, you need to prioritize the components that need slicing and the ones that are well off without it and can be seamlessly handled by shared teams.
Conflict Resolution
Over time, the usage patterns of the web application by consumers may result in situations where different micro-front ends will be simultaneously executed in an unpredictable fashion in the same browser window. There are chances that different libraries or different versions of the same libraries may be used in different front ends. Hence, there are more favorable conditions for conflicts to arise during runtime. Such conflicts can disrupt normalcy and could bring the entire web application crashing down resulting in losses. To avoid this, enterprises must ensure that front-end libraries and frameworks employ modules that support isolated running.
SEO Considerations
In the internet era, SEO cannot be ignored especially if the business caters to a large B2C domain like eCommerce. However, for the micro frontend approach, SEO is most effective when Server-Side Rendering is the preferred choice for development. Unless your business doesn’t depend on web traffic to power sales and conversions, Client-Side Rendering (CSR) approach should not be encouraged for building micro frontend-based applications.
Debugging Challenges
The micro frontend approach inherently follows a decoupled component design wherein different functions built using these components work independently. However, the web application is offered as a single entity to end users irrespective of the number of sub-components. If there are too many dependencies between decoupled components, then debugging the application can be a huge challenge. There will be considerable delays and the situation may escalate into even worse situations when modern-day experiences like Single Sign-On (SSO) or styling standards like Global CSS are to be implemented. Hence it is important to keep dependencies well under check.
Consistency of User Experience
With a micro frontend approach, different teams are engaged to design and build different components that are finally held together to present a homogenous front-end experience for end-users. However, there may be instances, where different teams tend to follow different best practices in user experience design and development ideologies. This could result in the end application having inconsistencies in user experience across modules. Hence, there should be a clear roadmap for user experience, guided by a common rule book for picking components and UX elements to eliminate this problem.
Choice of Frameworks
While the micro frontend approach supports the development of web applications that are built by different teams leveraging different frameworks, it is best to stick to a single framework for the different components of the web application during this approach. The downsides to using multiple frameworks are the large footprint of resource utilization, code heaviness, diverse integration requirements, and cascading complexities while upgrading the application in the future.
Getting into a development culture that encourages a micro frontend approach requires a more strategic roadmap that mitigates the numerous challenges that can disrupt the functioning of your business application. It is important to have the right advisory to iron out jittery roads in your journey to embrace these technology paradigms. Get in touch with us to explore how our consultants can discover the best fit end-to-end digital transformation outlook and solutions for your business and help embrace modern development paradigms like the micro frontend approach without risks.
Article contributed by – Anurag Sinha, Co-Founder & Managing Director, Wissen Technology (Wissen.com)
