Why Front‑End Data Models Matter: Lessons from Building a Complex Product Page

Introduction

Vmo is a tool library released in 2018 for quickly creating data models. It originated from 3D decoration projects where massive, inter‑related data required a systematic front‑end processing solution, planting the seed for data‑model concepts.

Typical 3D House Data

House, Layer, Room, Wall, WallSpace, Corner, Ceiling, Skirting, Floor (with thickness), FloorSpace, Door, Window, etc.

Variants such as bay windows, angled windows, curved windows, wall holes, stairs, and many more.

These entities have numerous relationships and calculations (e.g., a wall may belong to up to two rooms, corners may link multiple rooms and walls).

Product Model

When adding a new product, the front‑end creates a JSON payload; editing fetches the same JSON via an API, populates a form, and resubmits it. Abstracting this JSON into a class yields a clear product model (see diagram).

1. Request Data & Unit Testing

Front‑end code often mixes data requests with component logic. Different request strategies (draft, edit, category‑specific) return the same product model, allowing a strategy pattern where the consumer always receives a reliable Product instance.

Encapsulating request handling in a model simplifies unit testing and reduces friction when data needs transformation after multiple iterations.

2. Computational Consumption Data

Sometimes raw metadata must be recomposed for specific scenarios. A classic example is a Person1 class with computed getters:

class Person1 {
  fistName = "Wang";
  lastName = "Yee";

  get fullName() { return `${this.lastName} ${this.fistName}`; }
  get fullNameCN() { return `${this.fistName} ${this.lastName}`; }
}

For product publishing, the SKU model encapsulates core metadata and provides useful methods:

class SKU {
  value = new Map([
    [new SKUProperty({id:1, label:"Color Family"}), new SKUValue({id:101, label:"Red"})],
    [new SKUProperty({id:2, label:"Size"}), new SKUValue({id:201, label:"33"})]
  ]);
  price: string;
}

getProperties()

– returns all SKU attributes (e.g., Color Family, Size). getValues() – returns all attribute values (e.g., Red, 33). isEqual(anotherSKU) – checks full equality, useful for merging data. getValueByPropertyId(id) – fetches a specific SKUValue.

Unit tests verify these behaviours, for example checking that SKUs with different alias fields are not equal:

it("alias sku equal", () => {
  const data = [
    {text:"300MB", value:2988, name:"p-1"},
    {text:"Blue", value:2888, alias:"Blue1", name:"p-2"}
  ];
  const sku = SKU.fromData(data);
  expect(sku.isEqual(SKU.fromData([
    {text:"300MB", value:2988, name:"p-1"},
    {text:"Blue", value:2888, alias:"Blue2", name:"p-2"}
  ]))).toBeFalsy();
});

3. Data Relationships

Data models also clarify relationships such as product ↔ SKU, SKU ↔ SKUProperty, and SKU ↔ SKUValue. When SKU attributes change, a Cartesian product recomputation generates new SKU combinations (see diagram).

Encapsulating this logic in a SKUCollection model keeps the computation clean and testable.

test('sku calculate whether valid', () => {
  const skuCollection = SKUCollection.fromData({
    'p-3xxxx': [{text:'300MB', value:2}, {text:'128GB', value:3}],
    'p-4xxxx': [{text:'Blue', value:3}, {text:'Red', value:15}, {text:'Green', value:1}]
  });
  expect(skuCollection.value).toEqual(/* 6 SKU models */);
});

4. Exception Model

The product publishing page is a complex form with many modules (basic info, attributes, description, freight, etc.). Validation occurs both on the front‑end and back‑end; backend errors are returned with field identifiers.

Front‑end maps these errors back to the corresponding form fields, highlights them, and may display a top‑level error panel with a traceId for rare backend exceptions.

Conclusion

Data models bring safety, clarity, and extensibility to front‑end code. They can be packaged as independent libraries, reused across different product‑related pages, and coexist nicely with Composition API for view‑layer logic. Adopting this approach is especially beneficial for complex, data‑heavy projects.