The component anatomy, 90° to the left

BAM’s technical strategy sessions aimed to estimate feature complexity and plan work, but collaboration and estimates were not always effective. After seeing cross-screen bugs and spaghetti code, Ngangoue-Nyangwile began looking for a way to make component structure and data flow easier to reason about, especially for junior developers.

He drew inspiration from biology’s study of internal structures and construction plans that show how parts fit together. In his analogy, rooms and structures correspond to functions and components, while the movement of people and goods resembles data flow. He distinguishes visible flows, such as function parameters, from implicit ones triggered by hooks, state setters, mutations, or dispatch.

Component Anatomy has three steps: layering, data-flow analysis, and a fabrication plan. Ngangoue-Nyangwile separates UI, data, and business responsibilities, then maps component layers and four flow types: display data, user events, requests, and responses. He says each event should form a closed circuit; an open circuit can flag unfinished work or a potential bug.

In the email-change example, an input event updates email state, validation affects the submit button, and a mutation handles the change before navigation on success. Mapping these effects can expose unnecessary state and help divide work by data flow, which he says can reduce Git conflicts and dependencies. The fabrication plan arranges tasks into a dependency graph; one project used it to coordinate five developers across three applications.

Ngangoue-Nyangwile suggests using the method for technical discussions and component-based frameworks such as React, Angular, and Vue.js. He also proposes an experimental architectural-response measure based on the structures in a component’s data flow, potentially enforced through a VS Code plugin. Feedback he reports includes one developer reducing a task from an hour to 10 minutes after mapping its complexity, and a teammate feeling more confident designing a complex form.