5 ms·
Google open-sources JsAction, a JavaScript event delegation library
- mmastrac 12y agoInteresting. 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
- cramforce 12y agoActually you can also see traces of the jsaction attribute in the G+ product. G+ isn't using this from the group up though. It has a pretty long history at Google, so I'm not even sure where it came from. Should have been either Maps or Search.
- zaphar 12y agoIt started in maps. At the time IE had some issues with memory leaks when dom elements with an event listener attached were deleted. This allowed them to have just one listener for the page.
- jgmmo 12y agoHow 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?
- wldlyinaccurate 12y agoIs 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.
- cramforce 12y agoIt is 2.5KB to 6KB (depending on enabled flags) gzipped which is still in the realm on inlining into the HTML – thus avoiding a roundtrip for enabling event handling (even if all the handlers do is download the modules that have the actual implementation).
- espeed 12y agoThe Closure advanced compiler can reduce the size significantly (https://developers.google.com/closure/compiler/docs/compilation_levels https://developers.google.com/closure/compiler/docs/compilat...).
- rabino 12y agoI like they are putting this on Github instead of (or on top of) Google Code
- camus2 12y agoGoogle code could have been great.But the UX sucks so much and has never been updated. Github is successfull because of git AND its good clean UX. Google code feels like developpers were in charge of the UX. It's a UX disaster and will be retired sooner or later.
- Cthulhu_ 12y agoit's a shame TBH, Google Code could have a lot of potential, if only because Google as a company is chock full of developers. Maybe not as much UX designers though.
- deleted 12y ago[deleted]
- mkaziz 12y agoWhy is this better than something like backbone, for instance?
- cramforce 12y agoIt could probably be integrated nicely with backbone. This is much more low level.
- michaelmior 12y agoJsAction provides a subset of the functionality provided by Backbone. In terms of how the two handle event delegation, in JsAction, the events are defined in the DOM. With Backbone, you typically define the events in the view which should process them. It's open for debate which is better.
- scotty79 12y ago> It's open for debate which is better. Which is same debate as between onclick and addEventListener only with slightly less verbose syntax on both sides of the debate and some implicit scoping that makes it possible.
- cramforce 12y agoNot a zero sum game though (although I do realize this is hackernews :). addEventListener is sometimes strictly better than using jsaction. i.e. it supports removing event listeners. That is fine. Right tool for the job. onclick-like functionality is coming back to frameworks. Angular and Polymer both have variations of what jsaction provides as a single-purpose library. It is sometimes just much nicer to bind stuff together directly.
- scotty79 12y ago> onclick-like functionality is coming back to frameworks. Yes. I've noticed and as you might have guessed I'm equally deeply astonished and saddened. > It is sometimes just much nicer to bind stuff together directly. Yes. It's so much nicer to have your hammer at your desk than to go to a cabinet to fetch it when you need it. But if you own bunch of tools and do various task at your desk it's either cabinet or a pile on you desk that at some point prevents you from making any progress on your projects. Things should be kept separated out and organised by concern. If they are brought together it is either for convenience or speed. Both perfectly valid reasons so the separation is never strict but should be viewed as exception not as a rule. If you don't watch yourself you might end up with oscommerce PHP source files where everything is together because it's so much nicer to bind stuff directly.
- dudus 12y agoSeems 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?
- deleted 12y ago[deleted]
- espeed 12y agoThe Google Closure compiler [1] (not Clojure); however, this is easy to mix up since ClojureScript [2] is built on Google Closure and uses the Google Closure compiler. [1] https://developers.google.com/closure/compiler/docs/compilation_levels https://developers.google.com/closure/compiler/docs/compilat... [2] https://github.com/clojure/clojurescript https://github.com/clojure/clojurescript
- underwater 12y agoThis looks very similar to the concept of "sigils" in Javelin: https://secure.phabricator.com/book/javelin/article/sigils_metadata/ https://secure.phabricator.com/book/javelin/article/sigils_m...
- scotty79 12y agoYes. 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?
- michaelmior 12y agoThis isn't reinventing onClick. onClick has several problems. First, it can in theory contain arbitrary JS code and serve as a potential XSS injection vector. Also, as more make the move to blacklist inline JS via Content Security Policy, onClick becomes impossible. Second, onClick requires an explicit receiver. Part of the benefit of something like JSAction is that it decouples the generation of the event from it's processing. I'm not arguing that JsAction is the best solution for this, but I think the general concept is sound.
- scotty79 12y agoFor me worst part of onclick is putting what's essentially configuration of binding in baroque syntax interspersed with elements that are there for unrelated reasons, in files that have forced structure and are not easy to partition by concern.
- 12y ago
- riskable 12y agoThis 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 https://github.com/LiftoffSoftware/OnOff
- modarts 12y agoHow is OnOff better than just the standard EventEmitter?
- riskable 12y agoYou mean Node.js's EventEmitter? That's not built into JavaScript (i.e. not a "standard"). Anyway, OnOff is better because: 1. It's smaller. 2. It's simpler/less complicated. Also, it doesn't need a noConflict option due to the way it gets instantiated.
- floatrock 12y agoThe 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.
- couchand 12y agoThe API could certainly use some work, and it's worse than you mention. If it were just a matter of applying widely-known Gang of Four patterns it would be fine. All over the place it looks like the designer didn't realize there's a built-in Function.prototype.bind.
- gefh 12y agoIn IE8 and FF3.6, there isn't. If you believe netmarketshare.com, that's 20% of users right there.
- coldtea 12y agoIIRC, lots of Google products (like Google Docs) don't support those browsers entirely.
- superlupo 12y agoIf you are not relying on edge case behaviour of Function.prototype.bind, including the polyfill here should be enough: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Compatibility https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- Raynos 12y agoThis 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
- distracteddev90 12y agoIs 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?
- scotty79 12y agoSo 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.
- marcus_holmes 12y agoI like the syntax, but it bugs me that the behaviour goes into the HTML. I really like keeping my event mapping in the javascript so I keep a clean separation between structure in the HTML and behaviour in the JS.
- Kiro 12y agoI don't know. I think the one of the best things about Angular for example is that you often see straight away what's happening because of it's declarative nature. With normal event handlers you don't know what's going on until you specifically search for the id/class/tag in all the JS files.
- egeozcan 12y agoIn that case, it's good to have some conventions but I agree that it takes a very small amount of carelessness for maintenance to become a PITA. I think using reactive templates which associate with a model is better than declaring every reaction on the DOM level though.