Migrate to Vue

[Sakib25800]

Frontend stack would be:

• Vue
• TypeScript
• npm
• Vite

with a structure of:

web/
├── assets/
├── templates/
├── src/
│   ├── pages/queue/
│   │   ├── queue.ts
│   │   └── Queue.vue
│   ├── typings/
│   │   └── queue.ts
│   └── api.ts
├── package.json
├── package-lock.json
├── tsconfig.json
└── vite.config.ts

Local development would then become two processes:

cd web
npm install
npm run watch

cargo run

Building would be:

cd web
npm ci
npm run check
npm run build

cd ..
cargo build --release

Askama would provide the shared layout and page shells and the queue template would mount the Vue application, which would retrieve its data via API.

This is very similar to rustc-perf, but with Vite instead of Parcel since it seems like Parcel is problematic if we add more Vue pages? Only the queue page would use Vue for now since the rest are not interactive.

[Sakib25800]

I guess this would kinda complicate the backend since we would need to expose the queue.

Actually, we could embed a serialized queue view model in the Askama response, then parse it in the Vue entrypoint, and pass it to the root component through Vue's rootProps.

[Kobzol]

I guess this would kinda complicate the backend since we would need to expose the queue.

Bors actually already has a REST API JSON endpoint that returns the queue contents.

But yeah, I would just embed the queue state as JSON in the original response. That should also make the initial page load smaller (because now we sent a crapton of HTML). Though sending the HTML has an advantage that the page could also work without JS (that is not the case even today, though it would likely be easy to fix).

[Sakib25800]

I will work on this sometime next week now that my internship has finished. Likely in two stacked PRs:

1. Add Vue infrastructure and Rust view model
2. Migrate the queue page to Vue

[Kobzol]

Rust view model

Just curious about what did you mean by this? Ideally, I'd say we have a struct with the data (which corresponds to the *Template structs we have today), which we serialize to JSON and embed into the queue page, and then load it from JS (btw I recommend using JSON.parse(), it tends to be much faster for large data than outputting JavaScript objects directly).

[Sakib25800]

Yeah, I meant a serializable struct that matches QueueTemplate data -> Askama embeds it as JSON then queue JSON.parses it and passes it to the Queue.vue via root props.

[Sakib25800]

@medzernik will pick this up.

[medzernik]

@rustbot claim

EDIT: after being deep in clippy for a while, i completely forgot that there's no bors in bors xd

EDIT2: it appears it just took a long time to react