Real World Example about noel HOT 2 CLOSED

Hi Tobias,

Sure thing.

The emitter shines on event-driven software.

Here's what I believe will be the most common usage.

Say you have a PageCommentsService with the purpose of retrieving the current page comments as soon as the page is loaded. When the service is done it broadcasts an event to all components interested.

Say you have a component AwesomeComments. This component displays the page comments.

When this component is rendered, the page comments event might or might have not yet been triggered.

How it normally goes is:

The PageCommentsService must always store the data after broadcasting and provide an accessor to it in order for components that were not yet listening when the event was fired to be able to do something with it.

class PageCommentsService {
    emitter;
    pageComments;

    constructor() {
        this.fetchPageComments();
    }

    private fetchPageComments() {
        // After an async operation...
        this.emitter.emit('pageComments', fetchedPageComments);
        this.pageComments = fetchedPageComments;
    }

    getPageComments() {
        return this.pageComments;
    }

    onPageComments(listener) {
        return this.emitter.on('pageComments', listener);
    }
}

The AwesomeComments, because the event might have already happened, must check if the data is already there in order to bootstrap itself and listen for further changes.

class AwesomeComponent {
    constructor(pageCommentsService) {
        const comments = pageCommentsService.getPageComments();
        // If we missed the first event, manually call the event listener with the data
        if (comments) this.onPageComments(comments);

        pageCommentsService.onPageComments(this.onPageComments);
    }

    onPageComments() {
        // Process, and store somewhere to be rendered in the view
    }
}

With Noel, the PageCommentsService does not need to store the event emission data as Noel stores by default the data of the last emission, so no need for data nor it's getter

class PageCommentsService {
    emitter;

    constructor() {
        this.fetchPageComments();
    }

    private fetchPageComments() {
        // After an async operation...
        this.emitter.emit('pageComments', fetchedPageComments);
    }

    onPageComments(listener) {
        return this.emitter.on('pageComments', listener);
    }
}

And because of being able to replay events which we might have missed, the AwesomeComponent doesn't need to worry about wether the event has already happened or not. It can call replay when subscribing, if the event has already ocurred, the listener will be executed inmediatly with the last event emission arguments, if it has not, it will simply listen for the event.

class AwesomeComponent {
    constructor(pageCommentsService) {
        pageCommentsService.onPageComments(this.onPageComments).replay();
    }

    onPageComments() {
        // Process, and store somewhere to be rendered in the view
    }
}

While the example might be specific to frontend development, the idea is that by being able to replay events, we can think of events as part of our listeners life cycle, not something that happened at some arbitrary time before or after.

Full disclosure: the emitter is a core component of a state management library I am busy working on, thus as a component and hoping it would become obvious once the state management library was released, I didn't take more time to illustrate it's use-cases. Given the popularity of the emitter so far, I am reconsidering priorities.

Cheers,
Joel.

from noel.

Thanks for clarifying and coming along with this good example!

Your example reminded me to this article
Also, check out mst - in case You not already know about it 😊

from noel.