Atriom — an intuitive visualization tool for federated micro frontends
Extract data from your Webpack build and display component relationships in minutes!
With the rise in popularity of micro frontend architecture, relationships between frontend application modules and dependencies are becoming increasingly complex. Atriom provides developers with a webpack plugin to extract application data as well as a clean, intuitive GUI to visualize these relationships and highlight areas for potential optimization.
The rise in popularity of microservices has led to new paradigms in modern web development. Enterprise applications are more and more frequently moving away from a monolithic server-side architecture and instead integrating suites of smaller, independently deployable microservices. Microservices can be tested independently, written in different programming languages and managed by separate teams. This can speed up development and simplify deployment significantly at scale.
Micro frontends seek to solve these issues by extending the ideology and benefits of microservices to frontend development. Micro frontends allow frontend monoliths to be broken up into smaller, more manageable pieces that can be written in different frameworks and tied together at runtime. Like microservices, micro frontends should be technology agnostic and independently scalable.
One of the major drawbacks to using micro frontends is that code sharing between separate repositories is difficult. In addition, resources must often be duplicated for applications to maintain their independence from one another, which results in large overheads when it comes to integrating component pages. Enter module federation.
While module federation allows micro frontends to behave similarly to a monolith at runtime, the complexity of code sharing across independent repositories can be difficult for developers to visualize, optimize, and maintain.
Atriom is a powerful and flexible optimization tool that maps and visualizes component, module, and dependency relationships within a federated micro frontend architecture. Atriom supports multiple frontend frameworks (React, Vue, Angular) and provides developers with valuable information about their application’s webpack build within minutes!
First, open your terminal and install the atriom-plugin npm package in your application’s root directory:
npm i atriom-plugin
Add the following configuration to each federated application’s webpack.config.js file:
Make sure that all output paths are pointing to the project’s root directory, and then run the webpack build script for each application:
webpack — mode production
You should now see an ATRIOM.dat file generated in your project’s root directory. Visit atriomdashboard.io, drag and drop the ATRIOM.dat file, and see your application data materialize before your very eyes!
Don’t have an application ready to go? Try out the dashboard using sample application data.
Atriom is a new tool that remains in active development. Our engineering team will always welcome feedback and contributions to the project. Please visit our atriom-dashboard and atriom-plugin GitHub repos to see how you can get involved. We look forward to hearing from you!
The Atriom Team
Rachel Farley | GitHub
Shadman Khan | GitHub
Maureen Onchiri | GitHub
Angelo Quail | GitHub