adam bien's blog

BCE/ECB for Static, Semantic Web 📎

TLDR: a static site splits into business components (BCs), each a directory exposing an index.html built with semantic markup and web standards only.

The BCE pattern is usually explained with Java: JAX-RS resources as boundaries, stateless logic as controls, Records or JPA entities. A static website has no code at all, and the mapping still works.

A static site built using only semantic HTML and modern CSS, with no JavaScript or build system, can be easily broken down into the three BCE layers:

  1. Boundary: semantic HTML pages. The entry points for all external actors: users, crawlers, assistive technology. Landmarks, heading hierarchy, labeled forms, skip links. Exactly what a boundary does: expose the component to the outside world in coarse-grained operations. Here the operation is a page view.
  2. Control: CSS-only interactivity. Behavior without scripts: details/summary accordions, :target modals, :checked tabs and hamburger menus, :hover + :focus-within dropdowns. State lives in native HTML elements, transitions are pure CSS. Stateless, declarative logic: a control layer with zero failure modes.
  3. Entity: content and design tokens. Custom properties on :root are the domain model of the design: colors, spacing, typography, radii. Page rules reference tokens, never raw values. The same discipline as entities owning the data and everything else referencing them.

The business component structure carries over too. Content areas become BC directories named after domain topics:

site/
├── index.html
├── css/style.css
├── workshops/
│   ├── index.html
│   └── checks.md
└── trainings/
    ├── index.html
    └── checks.md

The boundary, control, and entity folders inside each component are omitted for the sake of simplicity.

Each component ships its own checks.md: observable, browser-verifiable expectations per page. Verification happens from the outside, by driving a real browser against the rendered pages: the interaction rules of a system with no code.

BCE is about separating entry points, behavior, and data. Turns out that separation exists even when the whole application is files on a web server. The approach is also fully Spec-Driven Design compatible: each BC maps to a capability spec (sbce.space).

Details: bce.design/web-static.html