What Are Micro-frontends?
Micro-frontends are a new architectural pattern for building web-based applications. In essence, they are an extension of the microservices architecture into the UI arena. Martin Fowler, software architect and author, describes the technology as “an architectural style where independently deliverable frontend applications are composed into a greater whole.” Luca Mezzalira, the author of the book “Building Micro Frontends“, further develops this further by outlining micro-frontends as “a project or pages of composed features owned by independent teams.”
Nowadays, with the need for optimized user experiences and seamless navigation through complex workflows, UI integration has become a priority for every financial enterprise. As a result, micro-frontends are now widely used in the financial services industry to achieve this outcome.
The diagram below shows how a typical web-based architecture looks when different services are connected to a monolithic front-end application. In the past, the presentation, business, services, and database parts of the application were all tied in together in a monolith UI. This made it change one part of the code without affecting another.
With the rise of micro-frontends, small teams can be organized to work together based on business domains.
Benefits for Dev Teams
Improved workflow
Micro-frontends allow development teams to independently apply changes to different parts of an application while giving them the opportunity to build an efficient and cohesive workflow.
Flexibility in updates
Micro-frontends provide flexible maintenance cycles for each separate app component. Any part of the application can be updated independently, as opposed to updating an entire application slice from frontend through to the backend. Each micro-frontend can be deployed regardless of the old monolith’s stage of deployment. Only the updated features need to be tested, hence allowing for faster development and deployment.
Operational support
In the past, if the monolithic UI went down then the continuation of service would not be possible. With the new architectural pattern, users can keep working in other parts of the system.
Additionally, using this architecture helps the production support team pinpoint where an issue lies and enables them to resolve it quickly.
More managable codebases
With micro-frontends, teams can maintain a smaller codebase that can be updated and run by autonomous teams. The reduced potential for complex code allows developers to work more quickly and efficiently. Each team can develop an end-to-end feature. Micro-frontends eliminate accidental coupling of components which improves the way data flows between different parts of the code.
Reusability
Micro-frontends can be reused in different types of applications that share a common feature or function. This saves time and effort and is cost-effective.
Empowered teams
Micro-frontends allow for a vertical split so that each team is responsible for a separate feature in its entirety – frontend and backend. This enables them to cooperate without disrupting the workflow.
Permissioning made easier
Users can be permissioned to only have access to the micro-app(s) relevant to their role. This means users no longer have to tolerate and navigate unwanted functions and this, in turn, will free up valuable desktop real estate. The desktop clutter disappears, and workflows and workspaces become streamlined.
Micro-frontends for Enterprises
Large enterprises often use monolithic in-house apps, platforms, or portals. That is why the benefits of micro-frontends are extremely appealing to technology and operations teams. Most importantly, they allow for:
- Accelerating build, testing, and deployment increases business agility
- Cutting development costs
- Improving production stability and decreasing risk
Decomposing monolithic applications into relatively independent micro-frontends certainly has its advantages, but large organizations rarely use a single system for their complex business processes. Instead, the average employee’s desktop is cluttered with many apps, both web, and native. While some big applications may be broken down to easily maintainable independent micro-frontends, the overall number of business apps and the lack of visual and functional integration between them is a pressing matter.
Users waste time dealing with numerous freely floating windows, searching for the right application, and copy/pasting their way through multiple apps until they finally find what they need.
This is where the concept of micro-frontends can be extended even further to encompass the entire business desktop – all web and native applications, irrespective of the technologies they use. Through desktop integration and interoperability, “micro-frontends” adopt a new meaning in the business world.
Micro-frontends in Financial Services
Digital transformation in financial services has shifted from application-centric to workflow-centric development. The user experience has become a top priority. Many financial institutions are now looking at ways to integrate different applications into a unified and cohesive desktop experience.
Let us take a simple business example in capital markets: A sales trader may want to look at different parts of a CRM and OMS to build a helicopter view of one of their clients and create workflows between these applications. With monolithic applications, the sales trader will need to understand the sub-optimal workflow (and application design) to avoid the unnecessary features and functions to execute their tasks. With micro-frontends coupled with a desktop integration platform, they can create a unified workspace comprising just the micro-apps they want and establish workflows and data sharing between them.
In addition, micro-frontends can help financial services on their path to digital transformation. Banks can easily upgrade their app components, eliminating the need to develop an entirely new app. This can significantly reduce development costs and speed up the modernization process.
One of the most recent micro-frontend enablers in the industry was the introduction of FDC3, an open standard for interoperability between applications. It helps organizations embrace micro-frontend-oriented workflows and accelerate UI integration. This is of particular interest to financial app development because it allows data-dense views and complex workflows to be broken into logical and reusable parts.
In addition, micro-frontends can help financial services on their path to digital transformation. Banks can easily upgrade their app components, eliminating the need to develop an entirely new app. This can significantly reduce development costs and speed up the modernization process.
How to Apply Micro-frontends Successfully
When investing in new technology, enterprises often rush with big bang changes and eventually do not get the result they were hoping for. To maximize ROI, organizations should consider 5 key elements, outlined by McKinsey, to upgrade their application architecture:
- Ensure consistent user interface by creating a library with reusable UI components;
- Improve flexibility with tech-agnostic design;
- Gain independence with browse-agnostic technology;
- Automate micro-frontend integration testing with DevOps;
- Create a developer portal that integrates all reusable components.
Teams should also make sure not to overuse micro-frontends. Each component must embody some re-usable piece of business logic and serve a particular business need; it is a good idea to center the design around a business goal or transaction. If you are working with a relatively small team, using a micro-frontend architecture might be unwise.
Desktop Integration and Interoperability with Micro-frontends
A mature Desktop Integration Platform like Glue42 Enterprise makes it possible to orchestrate micro-frontends and create a unified user experience, both visually and functionally. With only a few lines of code, each application can be ‘glue-enabled’ and then participate in window groups or workspaces. Using various Interop mechanisms, apps can then be integrated on a functional level, allowing them to share data and discover capabilities at run-time.
Micro-frontends significantly change the way applications are built and delivered to the user. They satisfy the demand for more scalable frontend architecture. Micro-frontends are already on their way to becoming an essential part of any advanced frontend development program.
