Separation of concerns divides an application into modular components with distinct responsibilities and clear boundaries. This makes individual parts easier to modify, replace, reuse, and maintain without affecting the entire codebase. section 3.1.2
Apply the principle by separating high-level intent from its concrete implementation:
- Define an intent such as generateText, autocomplete, or suggestion to describe the feature the application provides. section 3.1.2
- Assign an action that performs the work, such as calling an API, database, model, or chat-completion operation. section 3.1.2
- Connect intents and actions through interfaces or abstractions so implementations can change independently. section 3.1.2
- Keep AI logic outside UI components, making state flow more predictable and debugging more direct. section 8.1.3
Separating a chat interface
A ChatList component renders messages and loading feedback, while a useChatFormSubmit hook owns input state, loading state, message updates, and the assistant request. The page coordinates these pieces without containing all presentation and interaction logic itself. section 2.5.4
Figure 3.1 Separation of concerns between intents and actions. The intent (left) represents the high-level feature or functionality, such as generateText. The action (right) represents the specific implementation or concrete steps to fulfill the intent, such as making a chatCompletion request. The arrow signifies the connection point that bridges the intent with its corresponding action, facilitating communication and interaction between the two components.
Trace the connection between the generateText intent and the chatCompletion action, including the abstraction boundary that links them. section 3.1.2
