03 / VUE TO MARIONETTE
From Vue to Marionette: An Agent-Led Migration
ChatGPT’s coding agent, dot, migrated a substantial Vue application to Marionette v5 RC2 without the developer supplying Marionette-specific implementation instructions. The measured frontend opened rich tasks faster and transferred less JavaScript and CSS on the cold list route than Vue.
Reuse versus rewrite
Vikunja is an open-source task manager with a Vue interface and Go backend. The agent inspected the existing application and used installed, version-matched Marionette guidance to replace its frontend.
| Kept | Changed |
|---|---|
| Go backend and API client | Vue templates → Marionette Views |
| Models and services | Component coordination → Applications and Regions |
| Assets and translation files | UI bindings, wrappers and lifecycle integration |
Reusable styles still depended on DOM structure. Vue bindings, wrappers, and component lifecycles needed replacement; framework-neutral code could stay. Migration record.
A faster rich task journey
Median time to open a rich task
Rich-task opening was 72% shorter. Cold-list JS/CSS transfer was 420.5 KiB versus Vue’s 614.2 KiB, about 32% less. Search was mixed: total input-to-paint was 194.80 ms versus 221.25 ms, but the results-publication-to-paint interval was slower, 24.45 ms versus 12.75 ms. These are implementation and journey comparisons, not framework rankings. Measurement report.
Why the architecture matters
The workspace survives project navigation while individual panels come and go. Task records publish accepted writes; editor Views keep their own drafts. If someone types during a save, the newer draft stays dirty after the older save succeeds. Updating a status indicator does not require rebuilding the editor. Task ownership review.
This TypeScript/Vite implementation renders through lit-html alongside existing services and UI libraries; v5 requires neither Backbone nor jQuery. Lit updates template nodes. The application chooses which child Views remain mounted. Architecture.
What to weigh before migrating
Try this approach for features with local drafts, asynchronous panels, and explicit lifetimes. You own routing, persistence integration, and synchronization policy. Follow a task from its Application to its record and editor View, then run the paired journey.
The developer directed outcomes, appearance, progress, and verification. The agent handled implementation, investigation, and technical corrections. Its incomplete Vue-source readings caused mistakes; paired desktop/mobile journeys exposed focus, styling, and label defects that builds missed. Verified follow-up fixes.
Evidence and methodology
All 59 original routes are ported; acceptance verification is incomplete. Fix snapshot 66af00fd passes 778 unit cases and 82/84 focused browser cases; the two retained mobile-wheel assertions also fail in Vue. Licensed integrations, external providers, Electron, OS IME and screen-reader equivalence remain unverified.
Benchmarks stay pinned to 5fca3cbd, before the label and recovery fixes; neither follow-up was rebenchmarked. The hero was captured October 7 at 05:48 UTC from 8de771eab, with the same measured frontend tree 50662d985. Runtime: 5.0.0-rc.2.
The developer confirms that he supplied outcome and verification direction, not Marionette-specific implementation instructions. This is an account of the migration, not a controlled agent-development experiment; the public migration record documents implementation and follow-up work, not a complete prompt transcript.
Measured code · Architecture · Measurements and method · Verified fixes and limits