Beginner 60-minute hands-on

AI-generated appendix

This appendix was drafted with GPT-5.5 from the original chibivue book content. Treat this route as a guided learning path; the original chapters and implementation code remain the source of truth.

This route walks through the original Minimum Example without trying to absorb every explanation. You will touch the main shape of a Vue-like framework: application API, renderer, reactivity, components, template compiler, and SFC support.

Goal

By the end, you should understand why chibivue is split into packages and how a .vue file eventually becomes DOM updates.

0-8 min: project shape

Read:

• Approach in This Book and Setting Up the Environment
• Package Architecture

Do:

• Locate packages/runtime-core, packages/runtime-dom, packages/reactivity, packages/compiler-core, packages/compiler-dom, and packages/compiler-sfc in an implementation snapshot under book/impls.
• Write down one sentence for each package: what problem does it own?

Checkpoint:

• You can tell runtime code apart from compiler code.

8-18 min: first render

Read:

• First Rendering and the createApp API
• Let's Enable Rendering HTML Elements
• Let's work on supporting event handlers and attributes.

Do:

• Follow how createApp(...).mount(...) reaches the renderer.
• Find where an element is created.
• Find where props or event handlers are applied.

Checkpoint:

• You can trace one button from render function to real DOM.

18-28 min: first reactivity

Read:

• Prerequisite Knowledge for the Reactivity System
• Try Implementing a Small Reactivity System

Do:

• Identify where an active effect is stored.
• Identify where property reads are tracked.
• Identify where property writes trigger effects.

Checkpoint:

• You understand why reactive state needs both a Proxy and an effect function.

28-40 min: VNode and components

Read:

• A Minimal Virtual DOM
• Aspiring for Component-Oriented Development
• Component Props
• Component Emit

Do:

• Compare an element VNode with a component VNode.
• Find where component setup is called.
• Find how props enter a component and how emit leaves it.

Checkpoint:

• You can explain why components are also represented as VNodes.

40-52 min: template compiler

Read:

• Understanding the Template Compiler
• Implementing the Template Compiler
• Data Binding

Do:

• Trace the pipeline: template string, parse result, generated render function.
• Find where interpolation like becomes code.

Checkpoint:

• You can say what the compiler produces and why the runtime can execute it.

52-60 min: SFC support

Read:

• Developing with SFC (Peripheral Knowledge)
• Parse SFC
• SFC template block
• SFC script block
• SFC style block

Do:

• Identify the three blocks of an SFC.
• Find which block becomes render code.
• Find which block becomes component options.
• Find which block becomes CSS.

Checkpoint:

• You can describe .vue as a convenient authoring format that is split and transformed before the runtime sees it.

Stop here

You now have the skeleton. The best next move is not to rush into every advanced feature. Pick one part that felt most surprising and read its full original chapter again.