Compare core.async to RxJS

[mattpodwysocki]

How would you solve this issue with RxJS versus core.async?

My solution would be:

var magicSequence = 'ABBABA';

var keyups = Rx.Observable.fromEvent(document, 'keyup')
  .map(function (x) { return x.keyCode; })
  .bufferWithCount(6, 6)
  .take(1)
  .timeout(5000, Rx.Observable.just([]))
  .filter(function (xs) {
    return xs.map(function (x) { return String.fromCharCode(x); }).join('') === magicSequence;
  })
  .repeat()
  .subscribe(function (x) {
    console.log('Magic Keys!');
  });

Any thoughts @staltz, @headinthebox, @jhusain, @benjchristensen?

[staltz]

My original solution from stackoverflow is

var evaluationStream = bothButtons
  .merge(bothButtons.throttle(5000).map(function(){return "reset";}))
  .scan(function(acc, x) {
    if (x === "reset") return "";
    var newAcc = acc + x;
    if (newAcc.length > secretCombination.length) {
      return newAcc.substr(newAcc.length - secretCombination.length);
    }
    else {
      return newAcc;
    }
  })
  .map(function(combination) {
    return combination === secretCombination;  
  });

var wrongStream = evaluationStream
  .throttle(5000)
  .filter(function(result) { return result === false; });

var correctStream = evaluationStream
  .filter(function(result) { return result === true; });

wrongStream.subscribe(function() {
  outputDiv.html("Too slow or wrong!");
});

correctStream.subscribe(function() {
  outputDiv.html("Combination unlocked!");
});

which is more of a quick attempt to help the question author, combined with my initial misunderstanding of the real specs of the problem.

Matt's solution is very clever, specially using the skip/count version of bufferWithCount and timeout and repeat. I've never thought of using those together.

These are very interesting challenges, and we should probably do more of these. :)
Maybe I'll try later to redo this, trying to not be biased by Matt's solution.

PS: I haven't tried Matt's solution in JSFiddle yet.

[swannodette]

In @mattpodwysocki's RxJS example where can you output the message for timeout/failure?

[mattpodwysocki]

@swannodette that's pretty simple:

function identity (x) { return x; }
var magicSequence = 'ABBABA';

var keyups = Rx.Observable.fromEvent(document, 'keyup')
  .map(function (x) { return x.keyCode; })
  .bufferWithCount(6, 6)
  .take(1)
  .timeout(5000, Rx.Observable.just([]).tap(function () { console.log('Timed out'); }))
  .map(function (xs) {
    return xs.map(function (x) { return String.fromCharCode(x); }).join('') === magicSequence;
  })
  .tap(function (x) { console.log('correct sequence: ', x)
  .filter(identity)
  .repeat()
  .subscribe(function (x) {
    console.log('Magic Keys!');
  });

[swannodette]

@mattpodwysocki that's missing the failure case - incorrect sequence input.

[mattpodwysocki]

@swannodette updated, see above

[swannodette]

@mattpodwysocki that's not right as it needs to fail correctly before you even get 6 characters i.e. ABC.

[mattpodwysocki]

@swannodette or if we don't mind mixing purity, here's a smaller version:

var magicSequence = 'ABBABA';

var keyups = Rx.Observable.fromEvent(document, 'keyup')
  .map(function (x) { return x.keyCode; })
  .bufferWithCount(6, 6)
  .take(1)
  .timeout(5000, Rx.Observable.just([]).tap(function () { console.log('Timed out'); }))
  .filter(function (xs) {
    var shouldFIlter = xs.map(function (x) { return String.fromCharCode(x); }).join('') === magicSequence;
    console.log('correct sequence ', shouldFilter);
    return shouldFIlter;
  })
  .repeat()
  .subscribe(function (x) {
    console.log('Magic Keys!');
  });

[swannodette]

@mattpodwysocki still seems incorrect for input ABC :)

[mattpodwysocki]

@swannodette nope, it works fine for that, as it times out.

[swannodette]

@mattpodwysocki I don't think it's correct according to the original spec. For example in most UX scenarios you want immediate failure, the timeout is just a catch all.

Oops, just re-read. You're correct that's right according to the post. But I imagine this it's trickier if you need to fail immediately.

[mattpodwysocki]

@swannodette this is the original spec that I coded towards. If he wanted to do something else, he should have stated so.

Given that we have two buttons, A and B, we want to print a message if a “secret combination” (ABBABA) is clicked within 5 seconds. To make things a bit harder the following must also be true:

• The message should be printed immediately when the secret combination is clicked. We should not wait until the end of the 5 second interval before the message is printed.
• As soon as the secret combination is fulfilled (within 5 seconds) the message should be displayed regardless of what has been clicked before. For example a combination like “BBABBABA” is ok as long as “ABBABA” is clicked within 5 seconds.

[swannodette]

@mattpodwysocki yep you're right!

[staltz]

How come I can't get this to work? http://jsfiddle.net/yfdjf7tu/4/

[mattpodwysocki]

@staltz fixed it for you: http://jsfiddle.net/yfdjf7tu/5/