High-Quality Maintainable Code: Data Modeling for Frontend Development

What Is Data Modeling

Data modeling defines and analyzes data requirements and the supporting information system, becoming essential for front‑end engineers as state management libraries (e.g., Flux, Redux, MobX) bring more data handling to the client side.

The product of modeling is a data model , which specifies how data is input and output, comprising three elements: data structure, data operations, and data integrity constraints.

Three Elements

Data Integrity Constraints

Good data structures need constraints to ensure consistency, such as enforcing a field to be a string rather than a number.

// status is a string, reject numeric values
if (status === 1) {
  ...
}

// Define model with constraints
model.define(
  'user',
  {
    name: { field: 'name', type: STRING(64), allowNull: false, comment: '姓名' },
    sex: { field: 'sex', type: INTEGER(1), allowNull: false, comment: '性别' }
  }
);

Data Structure

Beyond describing a model’s properties, fields also express relationships between tables.

Data Operations

Operations manipulate data and its relationships within the defined structure.

Domain‑Driven Design (DDD)

DDD drives software design from business knowledge, focusing on a concise business model and its implementation.

Layered Architecture

UI layer – presents information and interprets user commands.

Application layer – coordinates activities without containing business logic.

Domain layer – core business logic and state, delegating persistence to the infrastructure layer.

Infrastructure layer – provides libraries, persistence, and support for other layers.

Good design minimizes inter‑layer dependencies, keeping code isolated and maintainable.

Key DDD Concepts

Entity

Objects with identity, such as a Cat class that includes a unique ID.

Value Object

Objects without identity that describe aspects of a domain, e.g., an address value object.

Service

Encapsulates behavior that does not belong to an entity or value object, such as a purchase service.

Module

Organizes related concepts and tasks to reduce complexity, promoting high cohesion and low coupling.

Aggregate

A cluster of related objects treated as a single unit, with a root entity providing external access.

Factory

Encapsulates object creation knowledge, especially useful for aggregates.

Repository

Provides a global access point for domain objects, abstracting the data‑access layer.

Front‑End Data Modeling

Front‑end models often rely on back‑end DTOs and require data cleaning before use.

Domain Division

Identify business domains (e.g., user, product, order) and organize code accordingly.

src
  modules
    trading               # trading domain
      components/
      models/
      pages/
      redux/
      services/
      styles/
      index.ts

Conceptual Model

Use mind maps to outline business concepts without strict adherence to the three elements.

Define Model

Refine the conceptual model with details and relationships, such as a marketing product with discount rules.

Reduce Complexity

Avoid heavy business logic in the front‑end; let the back‑end handle complex calculations and expose only necessary fields.

When many price fields are sent to the client, the front‑end should simply display them rather than compute them.

// Bad example
const switchPrice = product => {
  switch (product.status) {
    case 0: return product.priceA;
    case 1: return product.priceB;
    case 2: return product.priceB;
    default: return product.priceBase;
  }
};
<Price value={switchPrice(product)}/>

// Good example
<Price value={product.price}/>

Logic Layering

Separate application (business) logic from presentation logic; keep models as pure data structures.

// View layer only handles display logic
// Component A
<span>Date: {format(res.date, 'YYYY-MM-DD')}</span>

// Component B
<span>Date: {format(res.date, 'YYYY-MM')}</span>

Unified Fields

Align front‑end field names with back‑end definitions to reduce transformation overhead.

Conclusion

No single data model fits every scenario; building a robust model requires understanding business context, choosing appropriate technology, and maintaining systematic thinking to create long‑lasting, maintainable front‑end data structures.