Harmony in Design: Untangling UI from Logic
I’ll keep this one short, as it’s based on a simple principle that can greatly enhance code cleanliness.
I’ve often observed that logic, akin to overflowing lava, can spill over its boundaries and extend to the edges of an application, leaving ‘ugly’ traces. This overreach makes the app difficult to maintain and nearly impossible to reuse.
Same situation, only now using excalidraw, I say as dramatique as the above:
A key strategy to reclaim areas free of logic involves setting clear boundaries. Consider a simple question to a component, for example: “What do you need to show me a list from which I can choose?” The answer might be straightforward: a default value, a list of options, and a callback function to invoke upon selection. For instance:
interface Props {
defaultValue: string;
onChange: (value: string) => void;
options: { value: string; label: string }[];
}Next, we choose a domain model, such as cars, and add a function to adapt our domain data for display. Other use case can be to transform a company’s branch locations into a list of cities. The UI shouldn’t concern itself with the ‘how’, ‘what’, or ‘from where’ regarding the source of this smartly acquired data — as long as it adheres to the ‘contract’ defined by Props.
Establishing boundaries on how far domain knowledge and logic can spread makes the UI more reusable and easier to maintain. Each case possesses the know-how to transform data in accordance with the contract it must follow, enabling the use of ‘clueless’ or ‘simple’ UI components effectively.
