Lightning Web Components Easy Spaces sample application LWC component code

Question

The screenshot below shows a comparison of the \es-base-code\main\default\ source code structures for the Salesforce sample application Easy Spaces - Lightning version v. Lightning Web Components version. I need to do more digging into the source code, but is it accurate to say that the LWC version has added 1 new Lightning component (using LWC - named InlineMessage) to the \es-base-code\main\default source code found in the Lightning version?

• The JavaScript file '\InlineMessage\InlineMessage.js' contains the following export declaration (line 3):

  export default class InlineMessage extends LightningElement ...
  

• The second item under default\lwc, '\pubsub\pubsub.js' does not contain an export of a class which extends LightningElement.

The reason I'm asking this question is that it doesn't seem that the LWC version of the sample application has converted much of the regular Lightning - Aura version to LWC. It would be nice to have 'Aura' framework component code to compare side by side with the LWC versions of similar functionality.

In reference to @sfdcfox 's answer re pubsub and events, I did notice the following comment at the top of file

pubsub.js :

/**
 * Component for basic, pub-sub sibling component communication.
 * This component is a stop-gap until a standardized system for
 * flexipage-based sibling component communication is available.
 */

Answer 1

There are a lot of new LWC components; you've only stumbled across two of them so far. pubsub is an example of a new type of component only available in LWC, the "service component." This component is used to share methods across a variety of components found in /es-space-mgmt/main/default/lwc. The methods it exports are the last few lines of source:

export {
    registerListener,
    unregisterListener,
    unregisterAllListeners,
    fireEvent,
};

This is a component meant to simplify event management. If you do a search in the repo for those four methods, you'll find several places where they're used, but as an example, reservationList has code like this:

import { registerListener, unregisterAllListeners, fireEvent } from 'c/pubsub';
...
connectedCallback() {
    registerListener('flowexit', this.handleFlowExit, this);
}

disconnectedCallback() {
    unregisterAllListeners(this);
}
...
handleSelectEvent(event) {
        this.selectedRecId = event.detail.reservationId;
        fireEvent(this.pageRef, 'selectreservation', { detail: event.detail });
        this.handleMute();
    }
}

This is a lot to "unpack" mentally, and there really isn't a Aura equivalent of this technique. That's not to say it can't be done at all, it's just going to be a lot more than I can directly translate in a single answer.

This design basically allows us to have "libraries" that we can import into other components. This static compilation requires fewer round trips to the server for each component, which contributes to improved loading and rendering times.

The Share JavaScript Code part of the new documentation is particularly relevant here. In Aura, each component would often duplicate code, and this design is intended to minimize that duplication.