Enterprises are racing to modernize software applications to take full advantage of cloud, extend or revitalize product lines, and deliver better software faster, among other benefits. But one obstacle stands in the way of many modernization journeys: the large, monolithic frontend architecture of their application.
Developers may be willing to overhaul backend systems without hesitation, but a ground-up rebuild of the customer experience and user interface can stall any modernization effort before it even begins.
Thankfully, there’s an emerging approach that makes this task less daunting, bringing frontend development efforts in line with new-age architectures without diluting customer experience. This approach is referred to as micro frontends (or, alternatively, “Micro Frontends” or “micro front-ends” but we’ll stay with the first reference for ease of reading).
Micro frontends explained
The micro frontends approach takes away the burden of managing and updating the website’s frontend from a single team and divides it up among several smaller development teams focused on specific features, functions or missions of the application.
Compositionally, each of these teams is cross-functional, including all the skills and abilities needed to ensure self-sufficiency. They’re also empowered to think in a truly end-to-end manner that offers ownership over a complete process or function, rather than improving one section of a process to the possible detriment of upstream or downstream teams.
For example, an airline website in need of modernization might replace a single frontend development team with smaller, independent teams responsible for:
- Managing the flight search and booking function
- Integrating the payment process
- Supporting the customer loyalty program
- Delivering relevant special offers or promotions independent of loyalty
- Adding supporting up-sell/cross-sell revenue opportunities like hotel, vehicle, and restaurant bookings
Rather than being forced to consider the frontend code as a single monolith in need of a ground-up rewrite, breaking it up into micro frontends allows development teams to address components of the frontend independently, without being forced to rely on each other’s code to function. These micro frontends are also managed and deployed separately, providing hot deployment in production environment.
Core concepts for micro frontends implementation
This point is an important one, as it is one of the five core concepts for the micro frontend approach, as defined on:
- Independent Teams that are able to design, develop, test, deploy and support their code in their own independent continuous delivery pipeline without the need to rely on other teams. Any interdependence only slows development down without adding value.
- Self-Contained Applications not relying on common runtimes, codebases, pipelines, or shared resources.
- Use Native Browsers rather than custom APIs, relying on browser events for communication with other frontend functions. If APIs are an absolute must, keep them simple.
- Reduce dependency on JavaScript. Universal Rendering and Progressive Enhancement can improve site performance and the user experience even if JavaScript is slow of fails entirely.
- Use a naming convention strategy. Some teams have to walk before they can run, so if there’s still a need for interdependence, be sure to clarify ownership through the use of namespaces to ensure clear hierarchies of events, storage, cookies and CSS.
The benefits of micro frontend adoption
Adopting the micro frontend approach delivers immediate benefits for your development teams while also unlocking long-lasting business benefits as well.
From a development perspective, this approach helps development teams tackle the overwhelming task of overhauling an application’s frontend code—but in a way that also supports and even accelerates the enterprise’s overall modernization goals.
As independent teams can home in on one specific aspect of the application without having to be distracted or slowed by the progress of other teams, they can focus their efforts and think holistically, increasing the likelihood of truly innovative and differentiated customer experiences.
At the same time, they’ll be able to bring these developments to deployment much more quickly through their own dedicated continuous development/continuous improvement pipeline – ensuring faster deployment of new features and a sustained competitive advantage for the product and business alike.
Micro frontends in action
Persistent recently worked with a large US based bank, to help rewrite the legacy UI framework (used by 30+ portals) to ReactJS based framework using widgets as micro frontends. Using a Micro frontend-based design approach helped significantly accelerate complex UI migration process while enabling reusability, loose coupling and scalability.
We also helped a leading global data company migrate 100+ legacy desktop applications to web based UI using common micro frontend-based architecture. Leveraging this approach, we were able to achieve 40% improvement in development velocity due to reusable, testable UI component design approach.
To learn how Persistent Systems can put 30+ years of business acceleration and transformation experience to help you begin or accelerate your modernization journey, visit our Digital Transformation and Product Modernization pages.
