FAB Framework
Field Architecture Base
Decentralize data, centralize components.
Give AI a small set of strong base components and it builds consistently: every new screen becomes configuration, not another component to write, review and maintain.
Consistent AI output
Instead of a new one-off component for every screen, a model works from a small set of shared base components and configures them with data. The stronger the base, the less the AI has to work out on its own.
Pages described by fields
The template places base components; a fields file beside it describes what each one shows and does. Read a page from top to bottom, and change it by swapping, reordering or removing a field. The Form, Section and Action Builders handle forms, layout and actions, so the data can grow without a single new component.
Less to ship, faster apps
The same small set renders every screen, so there is less code to ship, load and maintain. Each base component wraps shared data, so swapping what sits underneath it, like a UI library or an icon set, happens in one place.
<form-builder [$formFields]="fields.composeRows()" />
Each component is a single line in its template, a container that its fields fill. Templates read like an outline of the screen: take in a whole page at a glance, and go straight to the part you want to change.
These examples are built on Angular Material, but any UI library works underneath. The base components are containers: they can hold whatever you put inside them.