A bit ago, my friend Dan showed me a prototype implementation of a Photoshop-like dockable pane system built as React components, complete with a smokey pro theme. It's still missing drag and drop and floating windows, but it's a great start and looks cool.

I decided it would be fun to port it to Go. Not only would it push the limits of my proto-UI framework and my experience with it, but I'd actually use it for my Big Project and probably many others.

First, I made sure it still worked and Dan's project was put together well enough that I could just npm start into a demo. Then I started to understand how it works, roughly what components do what and tried to figure out a path where I port the components "inside out" since the inner most components would probably be a bit simpler and work on their own.

I got started with the test button and slider components, which mostly just wrap input elements, but forced me to think about how I would do styles. I'm not sure what the state of the art is these days for styling in React, but Dan did a lot of inline styles. I made a simple function that turns a map into a proper value for the style attribute.

Then it became less trivial. The next component up was a Window, which is maybe more of a pane, but it used WindowTabs so I had to implement both at the same time. WindowTab just changes style based on state and updates the Window's selected state when clicked. This was where a lot of the debugging went, but that came later.

With WindowTab implemented, I finished Window. Except there were a few problems. I fixed a few minor bugs, but also my v-for directive didn't support multiple assignment variables yet. So I added that, which was easier than I expected. But in the React version, it uses inline JSX to collect all the WindowTabs. For me, this meant I needed to put them in an element that would take the v-for directive.

Because they had siblings I couldn't just put it in the parent, I had to give them a new parent. This broke the styling so I implemented what React calls "fragments", which are no-op elements you can use to wrap elements that need to be wrapped for technical reasons.

So everything is coming together, but then all the event handlers on WindowTab weren't working. I thought they weren't being assigned because they didn't show up on the elements, but of course Vecty is adding them dynamically with addEventListener. I should have put logging in to see if they were firing first, but oh well. So they were assigned and firing but I was seeing no changes.

At some point I remembered Vecty needs you to manually tell components to re-render, but even then it wasn't working. Finally, and even though I talked about it earlier, I forgot I needed to normalize the style key names from JavaScript camelcase to dashed-lowercase like style attributes actually need.

Boom, working.

Obviously there's more to do, but this was a fun exercise helping to fill in the gaps of my stack and get experience building real components with it. And it will be really cool to have them.