Hacker News Reader

Comment by ThJ | Hacker News Reader

This is more or less what RxJS calls an Observable (except with nicer syntax). Here's a very nice table that makes the lack of this feature in ESnext seem like a strange omission:

https://danreynolds.ca/images/tech/push-pull.png

Asynchronous iterators / observables are so much more useful that synchronous iterators that they should've added that to the standard first.

Wouldn't it be wonderful if ESnext allowed you to write event loops that maintain state with block scope variables instead of all the hacks we have to resort to now?

EDIT: RxJS is mentioned in the README. What I like about this is that it doesn't try to implement the kitchen sink and is a fairly atomic dependency. Now if we could just get to where we don't need transpilers anymore, that would be nice.

View on HN

In case that link is your site, the SSL hostname is for `www.` not for the main domain, so it doesn't load in Safari. Chrome for whatever reason didn't care.

Chrome shows an interesting notice in the console.

> Redirecting navigation danreynolds.ca -> www.danreynolds.ca because the server presented a certificate valid for www.danreynolds.ca but not for danreynolds.ca. To disable such redirects launch Chrome with the following flag: --disable-features=SSLCommonNameMismatchHandling

It's not my site. Just didn't bother to hunt for that image in the RxJS docs and looked for it on GIS instead, since I was on a phone.

Yes, there is a relationship, with RxJS on the "push" side and async iterators on the "pull" side.

An interesting alternative to the library mentioned here is that IxJS is the RxJS team's own implementation of the sorts of operators that Axax is trying to provide, though for both ordinary iterators and async iterators: https://github.com/ReactiveX/IxJS

IxJS gets the benefits of trying to share as much as possible the same API as RxJS, making it really easy to use bits of IxJS and RxJS in the same project, depending on use case.

>Wouldn't it be wonderful if ESnext allowed you to write event loops that maintain state with block scope variables instead of all the hacks we have to resort to now?

I think this is already possible:

    let event = null
    while (event = await getNextEvent()) {
        ... // process event
    }

getNextEvent() creates a promise, registers an event handler which resolves it and returns the promise.

Have I misunderstood your question?

Suppose the events in question are network messages arriving via DOM callback. You call getNextEvent() and then what? You're not inside the event callback, so there's no event to hand back. You could push events onto an array as they arrive in the event callback and pop them off from getNextEvent(), but how? You can't await an array. Iterators won't help you either, because they are for pulling multiple results out of a function synchronously, not having multiple results pushed to the caller asynchronously. That's what asynchronous iterators / generators are for. Think of it like looping through an array, except the loop will halt to wait for elements that aren't populated yet.

Now, on top of that, add the ability to run map(), reduxe() and filter() on a series of events. Instead of having to wait for all the elements in an array to be available, you can process it as you're receiving it, yet treat it as an already complete array in terms of being able to filter and transform it. It's a very powerful concept and I suggest you read about Observables in the RXJS docs. It took a while before it clicked for me.

> run map(), reduxe() and filter() on a series of events.

Can't you do that with a btree already?

Yeah... Well, I'm pretty sure you're wrong:

    'use strict';
    
    function getNextEvent() {
        return new Promise(resolve => {
            document.getElementById('button').onclick = event => resolve(event);
        })
    }
    
    async function enterEventLoop() {
        let event = null;
        while (event = await getNextEvent()) {
            alert(event);
        }
    }
    
    enterEventLoop();

And thanks for recommending RxJS, but I've been using reactive programming on various platforms for the past 6 years, so I'm pretty sure it already had "clicked" for me.

Neat, I'd think the same example applies to Rx! Likewise, their library (seems to) do modular imports, which gives pay-as-you-go tree shaking. This is a good push to clarify that!

Reassigning the event handler? That doesn't count. What if that was a WebSocket connection? Would you keep removing and adding event handlers? What if the JS engine decided to invoke the 'message' event handler 3 times in a row before invoking the next iteration of that loop? Or alternatively, what if your event loop needed to call an async function before it could process the next message, and another event fired in the meanwhile? You'd only receive the first message.

Reply on news.ycombinator.com