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
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.
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.