Designing resilient frontend boundaries.

Frontend resilience starts at the seams: the places where remote data, product language, and interactive state meet the components that render them.

> Make change cross one boundary

A page should ask for the information it needs without knowing whether that information came from a file, a CMS, or an API. A small repository contract turns infrastructure changes into local edits.

export interface ContentRepository {
  listPosts(): Promise<PostSummary[]>;
  getPostBySlug(slug: string): Promise<Post | null>;
}

> Keep presentation honest

Components become easier to reuse when their props describe UI needs rather than backend responses. Convert data once at the boundary and render a stable domain shape everywhere else.

• +Model missing content explicitly.
• +Return fresh values when callers can mutate arrays.
• +Test ordering and lookup at the repository boundary.

The best abstraction is not the most general one; it is the one that contains the next likely change.