Skip to main content
CSE 331: Software Design & Implementation

CSE 331: The data behind the page

The guestbook gets a box that shows only the messages that start with what you type. The first filter removes from the page every message that does not match. A removed message is gone, and nothing typed in the box brings it back. The page is a drawing of the data, so a program that keeps its data only in the drawing loses whatever it removes from the drawing.

So the program keeps the messages in a variable and draws the page from the variable. Then it owes a claim: the list on the page shows exactly the messages that start with the text in the filter box. Only update assigns the variable, and update redraws. So the claim is true between one event and the next. The claim is a representation invariant: its fields are the variable and the page's tree, and its methods are the callbacks. A framework such as React keeps the same invariant for you. You write a component, a function from the program's state to the page, and React redraws the page when the state is assigned.