At my very first job, we had a weekly meeting to assign tickets and estimates.
Our non-technical PM wrote "drag-and-drop" on a whiteboard, and then my name.
"Gavin, how long do you think this will take?"
"All week. At least. Maybe longer?"
PM laughed, then realized I wasn't making a joke.
"What do you mean 'all week'? That's ridiculous, do I need to give this to someone else?"
"Well, you could, but I wouldn't count on you getting it any sooner."
Appalled, he exclaims: "It's just drag-and-drop!"
After 10-15 minutes of a room full of engineers trying to explain the difficulty, he gave up with an unhappy "Fine."
The phrase "it's just drag-and-drop" became an inside joke for the rest of my time there...
Nowadays you would just "npm install drag-and-drop" but back then you often had to hand-roll solutions.
If anyone can dig up an ancient library on GitHub for drag-and-drop back in those days, I'd imagine it would be several thousand lines long, not to mention the absolute nightmare that testing something like this with a proper framework and accompanying testing library.
> If anyone can dig up an ancient library on GitHub for drag-and-drop back in those days, I'd imagine it would be several thousand lines long,
I bet, the JS devs who do write code overcompensate for the ones who can only stitch together libraries. I suppose because the expectation is that the library consumer is incapable of writing their own code extending it, so the library itself must support every possible combination of use cases for a million different users, even though the code any individual consumer actually needs is more like 100 loc.
> What the hell do you need a library for?
On the frontend, you have to re-calculate the display state for all the possible drop positions, in-between transitions, and drop-end-snap-back.Think of a grid of cards, and all the possible drag, hover, and drop state transitions it can be in with any other card, and the animations required to make it look nice
Now also consider that you need to persist the final state on the backend, and handle things like rejection, cancellation, failed updates/errors.
It becomes a massive state chart and web of complexity
Paper here: https://declarative-dragging.github.io/D2.pdf
IMO one of the remaining gaps of agentic coding is that it's hard for even multimodal LLMs to check interactive motion effects for correctness and "feel." Like, sure, they can take screenshots of a few snapshotted states, but in terms of how things react as underlying nodes move and (potentially) reflow. How do you QA the feel of moving your wrist rapidly in the context of nested zones?
The answer is that you avoid the need to: you have a (nearly-provably) correct foundation that ensures that behavior is predictable regardless of state, and just render accordingly.
The paper's approach is incredible here: simultaneous optimistic rendering of multiple possible states, and a composable algebra (a small combinator language) over how drop zones and distance are derived - allowing for an extremely high-level interface in practice. Everything feels snappy and right, and the code you write is about as minimal as you can get - though the paper notes that state management is somewhat complex. But this seems solvable!
Once this is ported to HTML, it'll become an incredible part of the modern dev toolkit. I'm very excited for what this means.
Also this approach seems to introduce new complicated concepts like "composables" and even a DSL. Probably writing custom code for Drag-and-drop would be easier that figuring out how this works. I read the page and did not understand much. For example, this phrase is difficult to understand: "Rather than programming all that visual behavior directly, you simply say, for each element you want to make draggable, which future states of your application dragging it should lead to.". Not "simply" at all. Writing new code would be easier especially with LLM.
Here the goal can be a render state and it is the solvers problem to figure out what should be there.
So you define these things very atomically, but the behavior automagically finds a valid render state (usually through converting things into a standard planner or solver language, haven’t dived into this repo yet)
[0]: https://hazel.org/
In huge "Stop Drawing Dead Fish" / "Stop Writing Dead Programs" ways. Which I'm such a fan of. Asked Astra to chase down references on this a couple weeks ago, quite enjoyed the result. https://news.ycombinator.com/item?id=5634662 https://news.ycombinator.com/item?id=33251799 https://news.ycombinator.com/item?id=33270235 https://chatgpt.com/share/6aea25b4-e294-83e9-b925-431bb13b00...
Thanks for the mention. I ran across Declarative Drawing & I really want excuses to use this. But I don't remember Hazel from the video I watched in it!
I fear this might lead to an exponential blowup.
(The examples shown are all tiny)
Edit: nvm, answered by the Background section of the paper
The Hazel programming env is dope. I can already imagine using it to explain refactorings to new programmers.
The twisted tree diagrams is also really neat. Is that a new idea as well? I got the beginnings of an idea where it might be a good diagram to display tangled code paths.
Very nice work