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.
Micro Frontends
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.
While many companies have reaped the benefits of adopting a microservices architecture, many are still encumbered by large, monolithic frontend codebases. As more and more of the web relies on large, feature-rich, and powerful SPAs, it becomes increasingly difficult to integrate new frontend libraries, frameworks, and JavaScript (or JavaScript-compilable) language features. In addition, the coupling and complexity of a monolith means that coordinating frontend development between separate teams quickly becomes onerous.
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.
The Problem
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.
Module Federation
Invented and prototyped by Zack Jackson, module federation allows a JavaScript application to dynamically load code from another application and share dependencies at runtime, leading to less code duplication and fewer resources transferred over the network. Module federation was released as a core feature of Webpack 5 in October 2020 and offers great potential in creating distributed applications with shared components and dependencies.
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.
Why Atriom
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!
Getting Started
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
