How to architect and build software components.
Improve your understanding of software components and how to architect and build them.
Examples assume familiarity with React.
components and their properties, and the protocols between the components. What is ‘software architecture’? A protocol is a system of rules of communication: how the elements talk to each other. A structure is a set of elements: which elements belong to the system.
name a thing: a variable, an object field, a function, a class, a module. ◦ Good architecture starts with correct naming. The name summarizes the purpose of the thing. ◦ When the purpose changes, the name must change to reflect that. • How to structure a thing: function arguments, objects, pieces of code. • Where to put a thing: a variable, a function, a class, a module. • How to organize the data flow in a piece of code. ◦ Data flow is the path that certain pieces of data take through the program. • How to organize the control flow in a piece of code. ◦ Control flow is the path that the processor takes while executing the program. • How to comment a piece of code. ◦ Telling the reader why the code is written this way, not just what it does, helps to understand the architecture.
– what is the environment the component will live in? 2. Single responsibility and purpose. 3. Name – based on context, responsibility, purpose. 4. Inputs – the pieces of data required to fulfill the component’s responsibility. 5. Outputs – the pieces of data generated by the component. 6. Behavior, lifecycle – how the component will fulfill its responsibility.
• React-based dashboard at a company called Acme. • No existing tooltip. 2. Single responsibility & purpose • Display a tooltip on mouse hover over an arbitrary UI element. 3. Name `AcmeDashboardTooltip` ← Context → ← Responsibility and Purpose→ 4. Inputs • Reference UI element that will accept hover interaction. • The tooltip content. 5. Outputs • The React DOM element that implements the tooltip. 6. Behavior • Has current state: visible / hidden. • Changes state on mouse hover interaction. • Requires positioning independent of ‘parent’ browser DOM element.
of utmost importance. It’s as important as the correct name. • Understanding implicit inputs is even more important. ◦ Examples: environment variables and APIs, cookies, etc. • The fewer inputs, the better (more maintainable, future-proof, foolproof). ◦ Restrict the inputs to just the essential parts of data required to fulfill the component’s responsibility. • Making an input optional increases the parameter space. ◦ One more value to test. In JavaScript, even more than one. • A good way to keep yourself from adding more inputs is to write a test suite with every combination of their values.
• React props. ◦ Can be treated as function arguments. • React state. • React context. • Browser and platform environment, if accessed directly from a component. • Cookies, storage, if accessed directly from a component.