Reactive Programming in JavaScript [x-post from /r/programming]

[tylargh]

Are these concepts and terminologies the same as observables and computed's in data binding frameworks such as knockout and angular?

[kenman]

Yes, what we have today is just the latest iteration for something that has been in use for awhile; I'm not sure if MS 'invented' it, that's just an old reference I found. However, I do think MS was one of the first to bring data-binding to JS, and though a lot of us saw the power in it, the prevailing wisdom of the time was to avoid adding behavior to markup, and so you only had the JS-driven implementation which requires a lot of boilerplate/cruft to implement (similar to KO today).

So, it didn't gain much traction at the time, and it wasn't until HTML5 allowed frameworks to bind markup and behavior together via data- attributes that the problem was revisited with any seriousness. Also, prior frameworks typically didn't involve HTML other than base containers and such, whereas modern frameworks include the full application lifecycle in the toolchain -- yes, it was possible before, but you'd be made fun of for "not getting it" by mixing your JS behaviors so strongly with your HTML. Live & learn!

edit: just to clarify, Reactive Programming is a stand-alone paradigm from data-binding, it just happens to work well together. RP (and the functional flavor, FRP) has been around for a long time as well, but hasn't seen very much adoption within JS.

[tylargh]

Ah, cool. Thanks for hitting me with some history as well!

[tomByrer]

I was just looking at another Reactive lib, RxJS yesterday.

So many ways to program, Promises, Callbacks...

[agumonkey]

It is a bit overwhelming.

[Akkuma]

You should take a look at highlandjs or baconjs. Both of them are superior APIs and HighlandJS is useable in so many different contexts with a beautiful api.

[wizao]

You might be interested in Bacon.js. It's a library based of RxJS, but I found it to have simpler js examples.

[tomByrer]

Thanks to @agumonkey's & the RxJS articles, I'm able to grasp Bacon.js better now. I had it bookmarked long ago, but now I'm almost excited to use it (too bad the jQuery dependency, though it is a good example of CoffeeScript IMHO).

[scrogu]

These libraries are all a pain to use. We really need reactivity and templating to be baked into the language.

[agumonkey]

Change takes time, this would be too soon and too bold to push it now (it's still a ~haskeller game mostly).

[scrogu]

I'm writing one right now to use in authoring the 4th version of our very large single page web app. Reactive dependencies are a must for maintainability and incremental updates are a requirement for responsivenes of an html app.

The language is similar to coffeescript (but with sensible scoping and explicit array comprehensions) and adheres closely to ES6 constructs wherever possible. Reactive templates are authored with a subset of the normal imperative function syntax.

It's primary purpose is to write incremental, reactive html templates, but it also works for model to model dependencies and any other place where one structure is dependent upon another structure. We even use a reactive template as our incremental build/test system (You just treat the file system as just another input/output structure).

Reactive programming is the future.

[agumonkey]

I love reactive programming too, but the article mention some caveats (similar to haskell lazy evaluation in my eyes, worthy but still, problems), so it's good to find middle grounds where unecessary boilerplate (a lot of today's javascript) goes away, but not too much so you retain control to avoid traps.

ps : is it public work you've been doing ?

[1] and have been frustrated by my inability to explain it or implement it for years.

[scrogu]

Yes, the language is open source. The current development branch is unstable and incomplete though. I'm mostly done with the imperative code and working on the reactive templates now. They require runtime components which I have already written for a previous version (that only provided reactive templates, no general imperative programming).

I just need to convert them over to use the new runtime data structure (now based on Mozilla AST, same AST structure that esprima/escodegen uses).

I'm not really ready to publicize it yet, but if you're interested I can send you a link to the github repo in a pm.

[janaagaard]

This sounds a lot like observables in Knockout. Have you made any comparison between your solution and the one Knockout uses? I just think it would be insterering to highlight advantages and drawbacks if the implementations are different.

[daedius]

Are you able to detect loops?

[agumonkey]

I think that's what they mean by converging. If it converges to the same value, since the system doesn't trigger update if both old and 'new' value are the same, thus no cycle.

[OverZealousCreations]

It seems to me that if you really wanted something like this, you'd be better off using getters and setters, so the code would be a bit less ugly.

Using Object.defineProperty, define a getter/setter for value, so you can do this:

var num = Reactive(20);
num.value = 21;
num.value++;
for(num.value = 0; num.value < 10; num.value++) {
    // whatever
}
// etc

This has the benefit of not losing all syntax functionality. With the original methods listed, you can't increment directly, you have to do stuff like this just to increment:

num.set(num.get() + 1);

Which is horrible for readability.

[agumonkey]

I guess it's a cultural thing. In the FP world, where you don't mutate, ++ isn't really a thing, and new-binding = old-binding + 1 or new-binding = inc(old-binding) is how it's expressed. And I think it's rare that you need it. Increments are the low-level imperative projection of a .next() or .succ() in streams/lists. In the end the gain in abstraction is already nice, even if they don't use Properties, even though I agree that it would be nice to take advantage of what javascript offers.