A few months ago I started building a web extension in spare time. My first run, a working prototype built over a couple of nights, was module based, byo templa

A few months ago I started building a web extension in spare time. My first run, a working prototype built over a couple of nights, was module based, byo templating, plain CSS, with no build process. It worked well, was performant and had no strings attached. Vanilla all the way. I employed a bunch of CSS trickery to get effects and functionality that you might otherwise roll out with a line of frameworked JS. In my head the codebase had become a bit of a humble brag in itself. I recently came back to the project, having run it sideloaded for a few months, with lots of thoughts and finally some implementation time up my sleeve. I had a lot of trouble dipping back in. My various solutions, CSS trickery, etc .. all heavily commented at the time .. suddenly seemed overly complex, opaque, and tightly coupled(!). Much of the code was difficult to repurpose or build on. As I didn't have a build process my 2 external dependencies had been downloaded and hand-optimised for local import, however both had since been updated. While looking at these external dependencies I realised I probably was only utilising a small amount of functionality out of the combined 44kb gzip payload (websocket database stuff). But I didn't have any easy way to tree shake without a reneg on my satisfying (yet painstaking) manual build process. I decided to spend a couple of hours trialing vitejs on the scaffolding / build side. So my front-end vanilla milkshake is still on the menu, but it's served up by an automated build process with the most efficient mix of ingredients. It took about 3hrs of research, fiddling and tea breaks to get back to where I started. My external dependencies had dropped in size by more than half. Everything else worked as before, except now with hot reloading. Jumping back into the actual extension I started to clean things up. I switched my long, rambling, trick-filled CSS for much simpler nested SCSS. 30 mins later my complex rules now seemed a lot more legible and straightforward. Finally I had another look at my 'super simple' regex based templating engine, something I was quite proud of and which worked fine, but was causing all kinds of complexity within my module based system of imports, exports and storage-backed state. I gave myself another 2 hrs to try and solve it. At first I looked for other simple, drop-in templating solutions that worked well within a module setup. But everything seemed convoluted. Finally I just dropped in Vue, as a trial only ... the fact I'd been looking for an excuse to trial the v3 syntax helped the decision here. Again, it was surprisingly straightforward I had it refactored and up and running in another 2hrs. I'll save judgement until I have chance to let things go cold again, but I'm optimistic. My build is smaller, my development process is dramatically simpler, and the project is more legible and easier to build upon, despite the underlying complexity having increased. I am cognisant that there may be minor front-end performance hits due to the framework, but I'm also not convinced that my brute force regex templating solution was as performant as I would have liked. I will note one noticeable downside is that my dev compute load has noticeably increased (file watching, dev environment, and build-on-save are all handy for an extension). I've skipped a lot of detail here. Happy to fill in any blanks.