Complex interactive animations

[dumblob]

One of the quality measures of a UI library is how well it handles layout in time.

The best example is interactive animations with mutually influencing behavior. E.g. vlang/ui#7 (comment) or in other words "use gotoB as export format for Wick".

Do you think it's possible? And what are the shortcommings (performance? any missing functionality? verbosity? ...)?

[fpereiro]

Hi @dumblob ! You raise a very interesting point.

gotoB is a retained mode framework. For that reason, it might be hard (or downright impossible) to develop in it applications with a vast number of widgets that have to be quickly redrawn in response to drag-and-drop events.

With that said, I think gotoB might take you relatively farther than other retained mode frameworks, for two reasons:

1. Control over when the app is redrawn. Redraws are triggered through events, and as the implementer, you decide when events are fired. In practical terms, this means that you decide the refresh rate at which gotoB is going to redraw things. So, a user interaction that could potentially trigger one redraw per ms can be debounced and the app redrawn every 10 or 50ms.
2. Diff-based redraw: gotoB uses a text diff algorithm to compute a shortest-edit-script for updating the view. When there are few changes to a view, the diff approach shines, because very few changes are performed in the DOM. This helps with performance.

Certain quite complex applications might be easier to implement with an immediate mode framework. For those cases, almost certainly gotoB won't be a good fit.

Interestingly enough, implementing 7GUIs (particularly the timer challenge) was very helpful in improving redraw performance. Thanks to that, gotoB can handle redraws based on a slider being moved around or some entity being dragged-and-dropped.

I am afraid I don't understand what you mean by "use gotoB as export format for Wick" -- would it mean implementing Wick in gotoB? If you meant something different, please let me know.

PS: An article about this topic that I found very insightful: https://games.greggman.com/game/rethinking-ui-apis/

[dumblob]

Thanks for shedding some light on the use cases for gotoB! It gives me hope drag&drop (and other interactive animations) is viable even in mid-comlex scenarios like the one outlined in the referenced post of mine 😉.

I am afraid I don't understand what you mean by "use gotoB as export format for Wick" -- would it mean implementing Wick in gotoB? If you meant something different, please let me know.

Sorry for not being clear. Actually Wick is a live environment to create interactive animations. These have to be somehow represented internally and later saved/exported to be run self-contained without the use of Wick itself. In other words, whether gotoB has the full capability to represent efficiently (both code size wise and performance wise) a game-like 2D fully interactive animated application with fully destroyable & constructible world.

I thought this would make it clearer but apparently it didn't 😉.

PS: An article about this topic that I found very insightful: https://games.greggman.com/game/rethinking-ui-apis/

Yep, it's aligned with my experience. And that's what I'm also aiming for - and gotoB might be part of the puzzle or some pre-step 😉.

[fpereiro]

Hi @dumblob !

Now I understand what you asked about Wick, thanks for the clarification. gotoB uses object literals to represent DOM structures. If the parts of the world are mappable to DOM structures, then gotoB can help you represent them with object literals - more precisely, liths. If you need to hold state that's not directly mappable to the DOM (but it does affect the DOM), then you can store it on the store through the event system and then create views that depend on the state.

If you embark on this project with gotoB, I'll be very happy to know how it goes. Feel free to ask me more specific questions if/when they arise!

[dumblob]

If you embark on this project with gotoB, I'll be very happy to know how it goes.

The example with Wick was really just an academical hypothetical example to show the breadth & importance of the "interactive animations" vision. I'm not planning to use gotoB as Wick export format 😉.

So to conclude the discussion, there currently is no existing drag&drop support but generally complex animations (not just "animated effects" but mutually interacting & interfering animations - no physics needed though, interruptible animations, collision detection - e.g. when dragging some things must not overlap, and this everything during a drag & drop, etc.) should be doable with gotoB with some more effort and acceptance of the spartan nature of such a "first shot".

Am I right? If so, feel free to close this issue as my questions got answered 😉.

[fpereiro]

Hi @dumblob ! Sorry for the delay in writing.

You are absolutely correct. There's no special drag-and-drop or animation support, but gotoB's general redraw mechanism may allow for "mutually interacting & interfering animations", inasmuch as it allows you to 1) pick the rate at which the DOM is redrawn; 2) it implements a relatively efficient diff mechanism for updating the DOM, particularly suited for small changes.

If you use gotoB, the software computing which decides where elements go will be the rendering engine of the browser. For that reason, if the DOM is too slow for what you're trying to do, gotoB cannot possibly help you do it.

Closing the issue, feel free to reopen if you wish to. Thanks for your questions, they are very welcome!

[dumblob]

If you use gotoB, the software computing which decides where elements go will be the rendering engine of the browser. For that reason, if the DOM is too slow for what you're trying to do, gotoB cannot possibly help you do it.

That shouldn't be a problem - browsers are incredibly fast with pure DOM manipulation: https://www.uselesspickles.com/triangles/ . It's usually us programmers who make it slow 😉.

[fpereiro]

If you use gotoB, the software computing which decides where elements go will be the rendering engine of the browser. For that reason, if the DOM is too slow for what you're trying to do, gotoB cannot possibly help you do it.

That shouldn't be a problem - browsers are incredibly fast with pure DOM manipulation: https://www.uselesspickles.com/triangles/ . It's usually us programmers who make it slow .

That's really good to hear!