2

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.

Screen shot comparison of Easy Spaces - Lightning v LWC

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.
 */
  • @sfdcfox Yes, I was specifically talking about the source code in the \es-base-code directory - hence, 2 LWC components. Your explanation of the 'pubsub' service component (and how it relates to event management in LWC) is helpful. – Talkin Data Dec 31 '18 at 15:09
3

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.