Visualize the System

Visualizing the system composed of containers is crucial for understanding dependencies and interactions within your application. Here’s how to effectively use the visualization tool.

We’ll explore:

• Using the compose.graph: How to visualize the system composed of containers.

Example

import { createContainer, compose } from '@grlt-hub/app-compose';

const start = () => ({ api: null });

const a = createContainer({ id: 'a', start });
const b = createContainer({ id: 'b', dependsOn: [a], start });
const c = createContainer({ id: 'c', optionalDependsOn: [b], start });
const d = createContainer({ id: 'd', dependsOn: [c], optionalDependsOn: [b], start });

const graph = compose.graph([a, b, c, d]);

console.log(graph);

Expected Result

The output of compose.graph provides a detailed breakdown of each container:

• Direct Dependencies:
  • Strict: Lists containers that are strict dependencies of the current container.
  • Optional: Lists containers that are optional dependencies of the current container.
• Transitive Dependencies:
  • Strict: Lists containers that are strict dependencies, inherited through a chain of dependencies.
  • Optional: Lists containers that are optional dependencies, inherited through a chain of dependencies.
• Transitive Dependency Paths:
  • Each transitive dependency includes a path that describes how the dependency is reached, which is helpful for tracing and debugging.

{
  "a": {
    "strict": [],
    "optional": [],
    "transitive": { "strict": [], "optional": [] }
  },
  "b": {
    "strict": ["a"],
    "optional": [],
    "transitive": { "strict": [], "optional": [] }
  },
  "c": {
    "strict": [],
    "optional": ["b"],
    "transitive": {
      "strict": [],
      "optional": [{ "id": "a", "path": "c -> b -> a" }]
    }
  },
  "d": {
    "strict": ["c"],
    "optional": ["b"],
    "transitive": {
      "strict": [],
      "optional": [{ "id": "a", "path": "d -> b -> a" }]
    }
  }
}

When to Use compose.graph

• Debugging: Use the graph output to identify and resolve potential issues, such as missing or transitive (hidden) dependencies.
• Optimizing Architecture: Analyze the dependency structure to refactor and optimize your application’s architecture.
• Documenting Dependencies: Generate a visual representation to document the architecture for your team.

Notes

• Ensure that all containers are defined with proper dependsOn and optionalDependsOn attributes.
• The compose.graph function does not modify your containers; it only provides a visualization of the dependencies.

Conclusion

Using compose.graph allows you to have a comprehensive understanding of the container-based architecture of your application. This tool is essential for debugging, optimizing, and documenting the dependencies and interactions between various parts of your system.