TodoMVC

🚧 Pardon Our Stardust!

The @warp-drive/tutorials package isn't published yet, so the npx command below doesn't work. Until it is, run the starter from a clone of the WarpDrive repo:

git clone https://github.com/warp-drive-data/warp-drive.git
cd warp-drive
pnpm install
cd packages/tutorials/todomvc-ember/starter
pnpm start

Let's build the data layer of a TodoMVC app with WarpDrive.

The starter ships the Ember UI and a local API. You write the WarpDrive part: requests, builders, one handler and a few cache updates. No models, adapters or serializers. Your first request renders todos in chapter 1. From chapter 4 on, each chapter adds one operation: create, edit, toggle, delete, then the bulk controls. Most chapters start with a problem every data layer has, and show how WarpDrive handles it.

Chapters

	Chapter	You'll use
1	First request	store.request and <Request>
2	Why that worked	the four ideas WarpDrive is built on
3	Request builders	builders and a handler
4	Create	createRecord and invalidation
5	Edit title	checkout and updateRecord
6	Toggle	store.cache.patch
7	Delete	deleteRecord
8	Bulk operations	bulk requests, then where to go next

Before you start

You should know TypeScript and have built something with Ember. You don't need to know WarpDrive.

You need Node.js and pnpm.

Get the starter

npx @warp-drive/tutorials@canary todomvc-ember
cd todomvc-ember
pnpm install
pnpm start

Open the URL Vite prints. You should see the TodoMVC header and the filters, with no todos between them. That's right: nothing requests todos until chapter 1.

What's in the starter

todomvc-ember/
  api-worker/     the API, in a service worker; you won't touch it
  app/
    components/   the TodoMVC UI, finished
    data/
      builders/   you write these, next to a shipped utils.ts
      schemas/    the todo schema, finished
      store.ts    the store; you add a handler in chapter 3
    routes/       one per filter: index (All), active, completed

The UI is done. You add WarpDrive calls to a few routes and components, and each chapter tells you which.

The API

The app talks to a JSON:API server at /api. It runs in the browser as a service worker, so there's nothing to start, and it keeps your changes across reloads. It begins with three todos. To reset it, clear the site data in your browser's developer tools.