Open code, practice, and notes →
Download source with English comments · for reading
Svelte · 27 Preparing a Three-Framework Comparison
Series contents · Technology map
Stage: Canvas Verification and Framework Comparison · External example · preview instructions · Storage ID: svelte-step-27
Goals and learning outcomes
- All three implementations use the same fixture.
- The table includes execution status and locations of APIs to compare.
Prerequisites
Unit 27 continues with the work and experiment records from Unit 26.
Key concepts and explanations
Identical Input
Fix the ids, titles, completion states, and operation order in the comparison data. Different functionality weakens the basis for comparing code size and response speed.
Separate Observations
Record implementation differences separately from personal preferences. Mark items you could not actually run as not run.
Practice setup
First check the execution scope guidance on the example screen. The following environment is for extending the assignment in a separate project. Compile and run .svelte files in a separate Svelte 5 Vite project. Record package versions and the lockfile. Frontory’s Svelte preview uses actual writable stores and an explicit DOM adapter; it is not a .svelte compiler or a runes runner.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- In notes/comparison-plan.md, write the contract for 3 cards, toggling, filtering, and A/B notes.
- Provide the same data to separate React·Vue projects and record their execution environments.
- Collect corresponding code locations for state, derived values, events, and cleanup.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Input Data | Different data per framework | Shared fixture | Output differences can be explained against the same inputs. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- All three implementations use the same fixture.
- The table includes execution status and locations of APIs to compare.
Self-check
- Do fewer source lines always mean easier maintenance?
- From which kinds of comparisons should the built-in Svelte column be excluded?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
The preview is a Svelte writable/DOM contract experiment. To run runes, snippets, and compiled output, run the actual App.svelte in a Svelte 5 project.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Regression Scenarios for the Same Contract · Next: Framework Comparison