(FEATURE FEEDBACK): Hub middleware

Is your feature request related to a problem? Please describe. In order to minimize the number of dependencies in our apps, we’ve been using Hub as our default pub-sub event broker. It works well with low latency for the most part, but I think it could be made more robust with middleware.

Describe the solution you’d like The ability to apply middleware to Hub that will allow for things like custom logging (e.g. on listener groups), and modifying listeners at runtime, grouping listeners that share logic in order to attach that logic to the listener group (DRY principle), garbage collection, etc.

For instance, consider a set of Show(.*) and Hide(.*) listeners (e.g. ShowAppSplashScreen and HideAppSplashScreen), each being created on a different Component that (as a constraint) has the same name as the capture group in the regex. Suppose also that each of these components, or their containers, provide show() and hide() methods. Then any listener that matches Show(.*) is going to execute its holder object’s show() method when that event is sent.

Rather than duplicating that logic across every component by repetition in onHubCapsule, it would be cleaner to give Hub listener groups (perhaps by regex as in this example) and apply hooks that replace duplicated code.

In extreme cases, we have listeners that every component is listening to, like “UIReset”, with every component that listens to it having a corresponding reset() method.

Something like the addition of these methods:

Hub.createGroup(listenerNames, groupName) - create a group aliased groupName from list listenerNames Hub.createGroupByRegex(regex, groupName), with a use like this:

Hub.createGroupByRegex(/Show(.*)/, "ShowListeners") - create a group referencable with ShowListeners that middleware can be attached to

Hub.attachMiddlewareToGroup(groupName, f) - apply function f to any listener l in group on Hub.dispatch(l, data), with a sample use case:

Hub.attachMiddlewareToGroup("ShowListeners", (capsule) => {
    let holder = capsule.holder //assume that every emit includes a reference to the holder object
    holder.show();
}

Hub.attachMiddlewareToGroup("HideListeners", (capsule) => {
    let holder = capsule.holder //assume that every emit includes a reference to the holder object
    holder.hide();
}

Then for the extreme use case, a similar method that lets you apply middleware to a singel listener:

Hub.attachMiddlewareToListener("UIReset", (capsule) => {
    let holder = capsule.holder //assume that every emit includes a reference to the holder object
    holder.reset();
}

This would allow us to put a lot of repetitive logic inside Hub and not repeat it across many components. If the holder reference for each object in the group could be provided by Hub as an additional parameter to the attachMiddleware* function(s), that would allow attaching middleware without modifying existing dispatch code. Like this:

Hub.attachMiddlewareToGroup("ShowListeners", (capsule, holder) => {
    holder.show();
    //process the capsule if necessary
}

Thoughts? I’m sure this idea can be drastically improved.

[undefobj]

Hello @jkeys-ecg-nmsu. I’ve looked into this a bit. We had already been looking into some possible improvements for Hub so your suggestions are timely. There have been some patterns we were considering including changing Hub into a full blown Observable, but right now we don’t want to introduce any breaking changes and are unsure of the long term benefits here. However I think we can make some changes to still support your goals.

I have created a new version of the Hub module with some sample usage and posted it in the following repo: https://github.com/undefobj/hub_reboot

You’ll find a readme there with sample usage, and you can also download it and run some tests. Please let me know your feedback if this is in the direction you were looking for to improve your usage of the module, any changes in functionality you might require, or any future ideas for improvement. Thanks.

[undefobj]

@jkeys-ecg-nmsu this is now live: https://aws-amplify.github.io/docs/js/hub