As technology evolves, websites grow increasingly complex and with that complexity comes new challenges. Traditional monolithic architectures are often hard to update quickly. They can become difficult to maintain and scale and must rely on a single stack. We all know this scenario is far from ideal as apps can become quickly outdated this way.
Enter micro frontends. Micro frontends are a way of structuring the UI of a site around a series of independent fragments, extending the benefits of microservice architecture to frontend development. The key to micro frontends is to think about the application as being composed of a collection of features which are owned by independent teams. By breaking up a large monolithic site into smaller pieces, developers can combat many of the problems that arise from added complexity.
Implementing a micro-frontend architecture can take an unwieldy project and help it become flexible, agile, more performant and easy to scale. Many large companies have made the switch to a micro frontend approach, including popular consumer apps such as Zalando, Hello Fresh, Netflix, Uber, Amazon and SoundCloud. Financial institutions are now following suit.
This article from micro-frontends.org provides an excellent description of how micro frontends work.
Using micro-frontend architecture has particular key advantages when implemented in an enterprise setting:
- Flexibility. Since each team has autonomy over their fragment, they are free to use whatever frameworks or languages they prefer.
- Innovation. Removing dependencies between fragments enables developers the freedom to innovate without fear of breaking other parts of the site. The smaller size of the individual fragment also means faster iteration.
- Deployment. Each team can deploy on their own schedule. Fragments that are ready to be updated or that require continuous delivery don’t need to wait for the rest of the site in order to push their changes.
- Testability. By separating a monolithic site into small stand-alone fragments, we narrow the scope of our tests as well. This specificity makes testing easier and allows for confidence on deployment.
- Scalability. Another benefit of the modular nature of micro frontends is the ease with which growth is possible. Other teams can be easily created as the site evolves, which allows for faster onboarding since new team members only need to learn about their feature instead of the entire codebase.
- Performance. None of these matter if the user’s experience suffers, but micro frontends can help us there too! Since a page is now made up of a bunch of fragments, one slow loading piece of the puzzle won’t hold up the entire site. By implementing various placeholder techniques such as loading bars and skeleton screens, developers can make the initial page load extremely fast and lazy load slower fragments as they are available. This allows end users to begin interacting with the page before everything is finished, instead of having to wait for slow components to load.
The biggest challenge that comes with using micro frontends is consistency. With many different teams responsible for the various fragments that make up a site, style and branding can diverge over time. This challenge can be easily overcome by creating a clear and easily digestible style guide for teams to adhere to and facilitating open communication between teams.
Another perceived challenge is that of converting an existing code base to a micro-frontend structure. But again, micro-frontends for the win! The very nature of micro-frontend architecture is to allow this conversion to take place as quickly or slowly as is appropriate. Since the individual fragments render to HTML anyway, sections of an existing site can be replaced one at a time without disturbing the rest of the site.
As buy and sell side firms move towards the use of micro frontends / applications to build out workflows, they require a number of key elements. Functionality such as window management, application discovery services, a solid communication infrastructure and defined message protocols, will enable applications to communicate seamlessly with each other locally and remotely. More on that here: FDC3, Glue42, Mosaic9, OpenFin, Single-spa.
Micro frontends may not be the best solution for every problem, but for enterprise projects, they have the potential to offer a lot of value and help keep a site fast, up-to-date and flexible.
If you want to see how a microfront-end approach with functionality such as window management can help you reimagine your financial desktop joins us for a webinar on September 25 at 10 am ET,