How do you animate with nodes across widgets?

[dylans]

@schontz commented on Thu Jun 28 2018

I have an app that looks something like:

App
|- Header
   |- Home icon
   |- Cart icon
|- Main: (Home OR Search OR ...)
   |- Item
   |- Item
   |- Item ...

When you click a button on an Item to add it to the cart I want to do the following:

1. Create an icon/avatar
2. Move that avatar from the source button to the Cart icon in the Header widget
3. And then perform some action on the Cart icon, e.g. wiggle the cart and +1 the quantity in an animated fashion.

In a reactive app you cannot dig into widgets directly or look at their nodes. What is an elegant way to perform this action? My thought process:

• Since more needs to happen with the Cart icon (destination of animation and then further animation on self), I assume the animation needs to live somewhere in my Header
• How do you go about initiating that animation and sending it the necessary details, i.e. the location of the 'add to cart' button?
  • I added Item.onAddToCart
  • Which bubbles up to its parent (Search or Cart pages)
  • Which bubbles up to App
  • Which sets some property on Header along with a timestamp, e.g. addedToCart = { timestamp: new Date, payload: data }.
  • Header reads addedToCart, verifies that it is a new request by comparing the timestamp to the private saved version, _lastAddedToCart, and if it is a new request it kicks off the animation sequence.

My solution requires me to explicitly bubble the event all the way up to the App top level through each widget. That is not ideal and brittle. I also happen to be using a Container around my Items so I added some logic in the container widget which is also not ideal.

In my example, if the child widget could set a value on an app-level registry that would make things easier. I don't know if this is the right way(TM), but to get the discussion going...

// Source widget
w(Item, { onAddToCart: (e: MouseEvent) => this.appGlobal.set('addToCart', e) });

// Consuming widget
w(Cart, { addToCartEvented: this.appGlobal.getOnChange('addToCart') });

While my cart example is specific, I think there are some generalities that people coming from dojo 1/non-reactive design will run into:

• A widget performs an action that affects another widget
• They do not know where each other exist within the App (nor should they care if both widgets actually exist since things only happen if an event is fired AND listened to)
• Animations are involved, which themselves produce events that other parts of the app need to be able to respond to. (Should there be app-level event listeners for such things? A kind of pub/sub at app level?)

---

@dylans commented on Thu Jun 28 2018

I'm going to move this to dojo/meta, as this is an issue that somewhat transcends multiple packages/repos.

[schontz]

This could also include synthetic events, push events, etc.

[schontz]

As @matt-gadd pointed out on gitter this can be solved with @dojo/stores. This can probably be closed in favor of "finish the stores tutorial." Maybe until the tutorial is done you should provide a link to the README. If you are reading through the tutorials you just hit a "coming soon" dead end.

[agubler]

Closing, we have an issue open for the dojo/stores tutorial https://github.com/dojo/dojo.io/issues/224