Lesson 0005 · ~12 minutes · synthesis

Ship the decision, not the clone habit

One skill: given a brief, pick the copy tool, the shape, the move, and one risk you own — then say it in a design review.

← Lesson 4 Playbook (print) Checklist Glossary Mission
Mission payoff

This is the durable skill from MISSION.md: defend shallow | JSON | structuredClone | implicit clone | transfer | custom serializer without treating JSON as a deep clone or hoping class methods survive.

1. The playbook (four gates)

Run in order. Earlier gates reject more options than later ones.

Gate A · Job

Document → JSON. Shared nested refs → shallow. Independent deep data → structuredClone. Already on postMessage / BC / IDB / History → implicit. Large binary, sender done → transfer. Revival / versioned wire → custom serializer. (Lessons 1, 4)

Gate B · Shape

Keep / flatten / throw. Plain DTO. No functions, no DOM, no Proxy. Class instances become { fields }. (Lesson 2)

Gate C · Move

Copy vs list .buffer on the payload. Orphan list still detaches. No transfer on BC / IDB / History. Detached is terminal. (Lesson 3)

Gate D · Risks

Cost (patches / chunk / transfer), no double-clone, loud vs silent JSON. (Lesson 4)

Sentence you should be able to say

“We use shallow | JSON | structuredClone | implicit | transfer | custom serializer because job; shape is plain data; move is copy | .buffer on the payload | no list; we own cost · detach · no Proxy.”

Keep the print playbook open after this course.

2. Practice — full briefs

Pick the best default package. Equal-length options.

Brief A · React form modal

A React modal must edit a nested draft from useState (arrays + a Date). The store object must stay untouched until Save.

Brief B · REST settings

POST settings to your REST API. The server only accepts application/json.

Brief C · Pixel worker

A dedicated worker should own a 16MB ArrayBuffer of pixels. Main thread will not read those bytes again.

Brief D · Invoice file

Persist a domain Invoice (methods, private fields, schema version) to a file other services must read for years.

Brief E · Worker + live draft

You will worker.postMessage({ type, draft }). The React tree will keep rendering from draft after the send.

3. What to remember

Ask your teacher A real brief from your team — a React form, a worker pipeline, an IDB record — ask and we run the four gates on it.

Primary source (keep)

The print decision playbook is the artifact to reopen in reviews. Behind it: MDN algorithm, structuredClone(), transferables.