Decoy Space

HomeShimiHouse Sitting

Redeveloping my shimi UI library

Shimi WC

I know it's a somewhat controversial opinion, but I do actually really enjoy developing in javascript, it's a fun language with lots of things happening. Especially for UI development, as someone coming from the C# WPF world, I sometimes think people who complain about js don't realise how good (and non-verbose) they've got it. That being said though, the one thing I dislike about js projects more than anything else is setting up new ones.

It should have been a red flag when I started with my initial shimi-ui project just how much pain and hoops I had to go through to get my Vue web components project set up and buildable. At the time, I really loved Vue. There was something about how much work it felt like the library was doing for you, while also not feeling like it was some bloated Angular beast. Since then I've come to realise how hard vue code can be to test and debug, and so these days I tend to favour React, largely for its simplicity and popularity, but there's still a small Vue-shaped soft spot in my heart.

One day, long after I'd already published my Vue-based shimi-ui library, I was doing some work on this website and decided that I wanted to change the default behaviour for how new notes are drawn in the ClipEditor. I opened up VS Code, went to start up the project, and....BOOM. Build error. Funny, I don't think anything should have changed since last publish, lets investigate the error. Couldn't make much sense of it myself, found numerous people online also suffering the same problem, some of whom managed to resolve the issue, whatever I tried though, nothing was working.

This was far from my first gripe, I'd had similar problems building before which were only resolved by downgrading my node version....not ideal. I also didn't like how in projects that used the components, I couldn't just import shimi-ui, I also had to explicitly import vue, which just felt a bit tacky. On this day I'd had enough and just decided fuck it, time for a rewrite!

Shimi WC

After looking around at what the best libraries were for building web components, I ended up settling on lit, partly because that's what it's specifically designed for, rather than a UI framework which can also do components if you ask super nicely. Also, the way you interact with the library is genuinely just really nice and straightforward. For me, it again strikes that perfect balance of doing a lot for you while still knowing not to overstep its boundaries. And finally, the developer community seemed to be largely in favour of it.

I got to work rebuilding the project, and a few weeks on-and-off later it was done! I'm happy to say that development was almost entirely drama free. The new project, shimi-wc, has everything that the old one did. It also has better test coverage, as well as some truly excellent sandbox tests/documentation thanks to the lovely Storybook. The ClipEditor (by far the most complex component in there at time of writing) has been far more effectively modularised, with the presentation logic, data, and behaviours all being split out into their own files, meaning support in the future for customised behaviours could be very easily achieveable. And on top of everything else, to get the library working, you simply need to import shimi-wc, just as god intended.