ADR-06: Vanilla JS frontend

Context

Modern web frontends typically use a component framework (React, Vue, Svelte, …). The question was whether TINO’s frontend warranted that dependency.

Decision

The TINO frontend is written in plain ES2022 JavaScript with no build step and no framework. The only significant runtime dependencies are CodeMirror 6 (editor) and Yjs (collaboration), both bundled as a single pre-built vendor file. CSS is hand-written; no utility framework is used.

Consequences

Positive

  • No build toolchain
    No npm, no bundler, no transpiler in the development loop. Edit a file, reload the browser.
  • No framework churn
    The frontend does not rot when a framework releases a major version.
  • Small payload
    The browser downloads and parses less JavaScript.
  • Easy to navigate
    The codebase is accessible to contributors who are not frontend specialists.
  • What you edit is what runs
    Files are served as-is — no source maps, no compilation artefacts, no discrepancy between the editor and the browser. Debugging is straightforward.
  • AI-friendly
    Plain JS is an excellent foundation for AI-assisted development: no framework abstractions, no transpilation layer, and no generated code for the model to reason through — just files the AI can read, edit, and reload directly.

Negative

  • Manual DOM updates
    No reactive data binding — DOM updates are written by hand. Manageable at TINO’s current UI complexity, but would become painful if the interface grew significantly.
  • No component abstraction
    Shared UI patterns (dialogs, panels) are duplicated across files rather than encapsulated in reusable components.