Google open-sources JsAction, a JavaScript event delegation library

So this (with specialized lib, and fairly large unintuitive js code to set whole thing up):

        <div id="foo" jsaction="leftNav.clickAction;
             dblclick:leftNav.doubleClickAction">

is pretty much the same as this:

        <div id="foo"
             onclick="Actions.leftNav.clickAction()" 
             ondblclick="Actions.leftNav.doubleClickAction()">

without any abusing or manipulating of html and dom and with setup as simple and understandable as this:

        window.Actions = {
            leftNav: {
                clickAction: function() {
                    myApp.LeftNav.doSomeSeriousStuff();
                },
                doubleClickAction: function() {
                    // very late loading of implementation
                    require("LeftNavActions", function(LeftNavActions) { 
                        LeftNavActions.doSomeOtherSeriousStuff();
                    })
                },
                // if you want add handlers from other places 
                // with Actions.leftNav._anotherAction.push()
                _anotherAction: [],
                anotherAction: function() {
                    this._anotherAction.forEach(function(a) { a(); });
                }

            }
        }

Actions is a good idea that I remember from Delphi 4. It is just one additional layer of indirection that enables you to attach same behavior for example to menu option and toolbar button.

The API could use some work. To implement the simplest example, I need to remember patterns like:

> eventContract.dispatchTo(goog.bind(dispatcher.dispatch, dispatcher));

imho, there's a problem if you need to dust off your gang of four book to understand the API. Might as well include an AbstractSingletonProxyFactoryBean.

I like they are putting this on Github instead of (or on top of) Google Code

This seems pretty complicated and not so simple. Someone else asked, "How is this better than Backbone?" Backbone is (a lot) more than just an event lib. A better question would be, "How is this better than OnOff?" (which is basically the equivalent of the events part of Backbone):

https://github.com/LiftoffSoftware/OnOff

Is it just me or is this overly complex for what amounts to declaring an EventEmitter, requiring it where needed, and proxying dom events to that EventEmitter?

Yes. Let's reinvent onclick attribute. What's with the recent trend of putting logic and visual configuration back into xmllish html clutter where you can't see it among the </>=" and meaningless words like div, span, class? Did people forget how much of a good idea was binding stuff to html from far away, from js and css files?

Did new programmers evolved some new protein that prevents their eyes from bleeding when they try to find bits of actual meaning in xml files?

Is it just me, or does this not seem "tiny" at all? It seems to require a bunch of Closure modules, and on top of that the source itself is hundreds of lines (albeit with comments).

Nitpicking aside, it looks like an interesting approach to decoupling the DOM from your event handlers. Personally I'm happy sticking with the standard on{event} attributes for really simple stuff.

This seems similar to a module I wrote called [html-delegator][1].

The separation of thing that emits named event and listener is a good idea.

I Actually moved away from the HTML attribute DSL and started putting named events in my virtual dom instead (using [mercury][2])

The important part of this approach that is not shown in js action is to ensure you emit data structures instead of dom event objects to the listeners.

  [1]: https://github.com/Raynos/html-delegator/blob/master/README.md
  [2]: https://github.com/Raynos/mercury

How does this compare with RX.js where they use the Observable setup to work with collections of events? Like that Netflix talk that was up here last week?

This looks very similar to the concept of "sigils" in Javelin: https://secure.phabricator.com/book/javelin/article/sigils_m...

Interesting. This might have come from the Google+ development team, as this and something called "jsmodel" are part of that product. You can see traces of both of these in the DOM of plus.google.com

Seems like this has to be "compiled" with clojure compiler. I'm not very familiar with this. Can someone provide some rough instructions to actually get the "compiled" library?

Why is this better than something like backbone, for instance?