diff --git a/history/260927-ComplexWebAppUiComponents_chatgpt.txt b/history/260927-ComplexWebAppUiComponents_chatgpt.txt new file mode 100755 index 0000000..11ff327 --- /dev/null +++ b/history/260927-ComplexWebAppUiComponents_chatgpt.txt @@ -0,0 +1,480 @@ +## Prompt + +Is there a best practice for providing ui components to complex web application ui environments integrating multiple user interfaces and interface components? + +## Exploration + +Yes. For a complex web application that needs to integrate multiple user interfaces, teams, frameworks, or independently evolving components, there is a fairly mature set of practices—but not one single pattern. The useful way to think about it is as an **integration architecture with several layers**, rather than merely as a component library. + +A good default architecture today looks roughly like this: + +```text +Application Shell +│ +├── UX / Design System +│ ├── design tokens +│ ├── primitive components +│ └── interaction conventions +│ +├── UI Integration Contract +│ ├── inputs / properties +│ ├── outputs / events +│ ├── commands +│ ├── lifecycle +│ └── capability metadata +│ +├── Application Components +│ ├── search-ui +│ ├── customer-editor +│ ├── document-viewer +│ └── reporting-ui +│ +├── Composition Layer +│ ├── routing +│ ├── layout +│ ├── authentication context +│ ├── shared state +│ └── event/message bus +│ +└── Runtime Integration + ├── ordinary packages + ├── Web Components + ├── module federation + ├── micro-frontends + └── iframe/process isolation when necessary +``` + +The important distinction is that these layers solve **different problems**. + +### 1. Use a design system for visual and interaction coherence + +A design system should define things such as typography, spacing, colors, accessibility conventions, buttons, dialogs, forms, navigation, tables, notifications, etc. + +But a design system alone is not enough. It tells you that all applications should use the same sort of `