liveBook · Manning

Data model

As explained in Web Components in Action

A structured representation of the data and relationships an application manages.

A data model organizes the information an application manages and provides a usable interface to that information. In an MVC-style design, the model holds data, the view presents it, and the controller coordinates changes between them. section 14.4

Keeping data inside a rendering component makes ownership unclear and editing harder. Moving exercise data into a separate model gives components a central place to read, add, edit, clear, save, and load application state. section 14.4

Central workout-plan model

A shared WorkoutPlanData object stores the current workout, uses localStorage for named plans, and exposes save, load, clear, and playback methods. The exercise library imports the model and adds serialized exercises to it; controls call the same model rather than duplicating state logic. section 14.5

How Web Components in Action covers it

How deep it goes
Defines models and demonstrates getters, mutations, persistence, derived values, and playback, without detailing storage or event-system internals.
Examples
Uses an exercise library, workout-plan object, localStorage-backed saved plans, and playback controls as concrete model examples.
What it assumes
Assumes JavaScript and Web Component familiarity while introducing MVC roles and data separation through an exercise application.
What you can do after
Build it from scratch as a JavaScript module that centralizes application data, exposes operations, and coordinates component access.
How it connects
Connects data models to MVC, views, controllers, Web Components, localStorage, and event-driven data flow.

Also explained in

Compare how 23 books explain data model →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.