VUE, and maybe VITE, for UI development

[AaronDavidNewman]

VUE

I initially didn't even want a UI for Smoosic. The early dialog boxes were just wrappers around JSON blobs that were sent to vexflow. My naïve thought at the time was to just serialize the objects to save the score. This didn't work well with things like key signatures - the objects you need in code don't always map with the object in the score, and the objects that make sense in the UI aren't always how they are represented either in the score or in code.

The dialog box architecture has evolved somewhat, but it is still very web 2.0 for the non-music DOM management. Most dialogs are still just wrappers around Smo object parameters. And it looks terrible, for the most part. We want more sophisticated controls, and we want to separate the concerns of form and function. And we really need some reactivity - so that selecting, say, a trill enables options for trills, and hides or disables them otherwise. We'd like to have controls enabled based on what music is selected, and we'd like to have sliders and maybe even some fun synth controls for the audio. And lots more editing options (copy lyrics, etc.). Making these changes with a custom jquery DOM editor is too cumbersome.

I picked VUE as a web component compiler because I know it, and it is pretty mainstream. I'm sure React would have worked equally well. Over time, I hope all the HTML UI elements will transition to VUE.

Webpack

Webpack has always been the hero we needed, but it is not at all easy to use. It is prone to fits and cryptic error messages that are difficult to debug. It seems the web is moving away from it. I am currently looking at VITE. It is created by the VUE team, so mixing VUE and typescript should be pretty straightforward. I'd like to take a little time to evaluate it and make sure it's not too VUE-centric.

[AaronDavidNewman]

Update: after reviewing it for a while, I don't think I like VITE. I don't like the way it makes you have a certain html file as an entry point. This seems too fragile for a project like Smoosic that can be the either an end product or a dependency.

I know vue-loader has entered 'maintenance mode', so I will continue to look for a different bundling solution.

[AaronDavidNewman]

Progress report: I have updated the main application area, and the dialogs for Note, Part, Score and File to use VUE. I have also tried to standardize on some settings to make the UI more consistent. I merged this into the main application, and also fixed some bugs I found along the way.

My issues with vue-loader and webpack went away once I updated to the latest typescript versions.