To facilitate comparison, these variations differ from each other as little as possible. They all have the same UI and the same one-entity TodoItem model. Because our focus is on client-side programming, they share the same server side design and implementation: an ASP.NET Web API controller accessing a SQL database via Entity Framework.
We'll explore some details of the Todo sample and its variations over this and several other pages:
The user experience of all Todo variations is the same.
The app launches with a query for active TodoItems which are shown in a list. Each item has a Description displayed in a label, an IsDone flag governed by a checkbox, and a hidden IsArchived flag.
You create a new Todo by entering its Description in the large textbox below the application title.
You can edit the Description of an exiting Todo by clicking in the label. The label changes to a textbox where you can type or erase characters. Validation rules prevent you from making the description too long or leaving it blank. Label and check/uncheck the IsDone state; such "completed" todos display with a line struck through the label.
The Mark all as complete checkbox (above the item list) toggles the IsDone state of all displayed todos.
Clicking Archive... will flip an item into the archived state if it IsDone and not already archived. The archived item immediately disappears. Checking Show archived (above the item list) will re-query the database to show both active and archived items; archived items display in gold. You can't unarchive an item once it's been archived.
You can delete any item by hovering over the Description and clicking the X that appears to the right.
All changes are saved immediately.
Purge and Reset links at the bottom respectively delete all Todos in the database or reset the data to the initial demo state.
Here is another way to see these same "Todos" with Breeze and KO.