Composable Architecture - Part 2

Introduction

In the second part of our series on leveraging composable architecture for modernizing portals and experiences in the banking industry, we'll explore the process of building micro frontends using domain driven design and module federation. We'll explain what these terms mean and how they enable product teams to work independently and release at will, while still maintaining a cohesive user experience across the application.

High-level approach 

At a very high level, the key steps would be 

1. Domain-driven design (DDD)
2. Shared Design System
3. Module Federation
4. Consider implementing monorepos

Domain-driven design (DDD)

DDD is a methodology that emphasizes the importance of understanding the business domain in which a software system operates. It provides a framework for building systems that are aligned with the business domain, making them easier to understand, maintain, and evolve.

When building micro frontends using DDD, developers start by identifying the core business domains that the front-end system needs to support. These domains are then broken down into smaller, independent modules, each with a specific responsibility. For example, a module might be responsible for handling customer authentication, while another might be responsible for displaying account balances.

Once the modules have been identified, developers use APIs to allow them to communicate with each other. This enables the modules to be easily composed together to create the final front-end system. In this way, the system can be easily adapted to changing business requirements, with new modules added or removed as needed.

Developing the Design System as a Shared Standard

Another important aspect of building micro frontends is the development of a shared design system. A design system is a collection of reusable design components, patterns, and guidelines that ensure consistency across all channels. By developing a shared design system, banks can ensure that all micro frontends adhere to the same visual and interaction standards, providing a seamless user experience.

Finalizing the technology stack to enforce consistency

While, theoretically, it is possible for every micro frontend to using different versions of the same technology stack, or entirely different technology stack, it is common sense to ensure that the frontend technology stack is standardized just as how one does it for microservices. Both Angular and React dominate the enterprise banking landscape and module federation enabled by Webpack 5 works equally well with both these frameworks. 

Module Federation

Micro frontends are built using modern web technologies such as React or Angular & one way to implement this in a robust, secure, and scalable model is to use "Module Federation".

Module federation (as enabled by Webpack 5) is a technology that allows multiple independent codebases to work together as a single application. It does this by enabling each codebase to expose certain parts of its functionality as "remote modules" that can be consumed by other codebases.

When it comes to building micro frontends using Angular or React, module federation allows each micro frontend to be developed and deployed independently, while still being able to communicate and collaborate with other micro frontends in the same application.

For example, imagine that a banking application is composed of multiple micro frontends, each responsible for a different piece of functionality such as account management, payments, or loan applications. With module federation, each of these micro frontends can be developed separately using Angular or React, and then integrated into the overall application seamlessly using remote module loading.

This means that each micro frontend can have its own development team, release cycle, and deployment schedule, while still being able to collaborate with the other micro frontends in the same application. In other words, module federation allows for true independence and autonomy for each micro frontend, while still maintaining a cohesive and integrated application experience for the end user.

Overall, module federation is a powerful tool for enabling the development of micro frontends using Angular or React, as it allows for greater flexibility, scalability, and agility in front-end development for the banking industry.

Organizing Micro Frontends in Monorepos

Monorepos are a popular approach for organizing micro frontends, allowing developers to manage multiple modules within a single repository. This approach provides several benefits, including simplified code sharing and version control, as well as easier collaboration between teams.

In a monorepo, each micro frontend is treated as a separate module, with its own build and deployment process. This allows different teams to work on their own micro frontend independently, without fear of conflicts with other teams' code. Additionally, each micro frontend can have its own independent CI/CD pipeline, which allows teams to release at will and ship changes independently from each other.

This level of autonomy can greatly speed up development and deployment, as each team can move at its own pace and release changes as soon as they are ready.

Conclusion

Composable architecture and micro frontends have emerged as powerful tools for modernizing portals and experiences in the banking industry. By leveraging micro frontends for composable architecture, banks can empower product squads to work independently and develop micro apps that can be composed together on the front end to make it seamless for banking.