Lightning Web Component and Lightning-Aura Component : Salesforce

Lightning Web Component and Lightning-Aura Component : Salesforce

Code Cheat Sheet for both Framework with Comparison

1. Component Bundles

Lightning-Aura Component

.comp : Markup or HTML
Controller.Js : Client Side Controller
Helper.Js : Client Side Util or Helper Controller
Render.Js : Client Side Render Controller
.css  : CSS Resource for HTML
.auradoc : Aura Documentation
.design : Design Parameter for Builder
.SVG : SVG Resource for Component

Lightning Web Component

.html : Markup or HTML
Controller.Js : Client Side Controller
.css : CSS Resource for HTML
meta.xml : Design Parameter for Builder

2. JavaScript properties or Variables

Lightning-Aura Component

<aura:attribute name="recordId" type="Id" />
<aura:attribute name="recordObject" type="SObject" />

Lightning Web Component

import { LightningElement, api, track } from 'lwc';
export default class fetchRecords extends LightningElement {
    @api recordId;
    @track sobject;
}

3. Logical Operators

Lightning-Aura Component

<aura:if isTrue="{!v.isLoading}>
    //isLoading is a boolean attribute in Component 
</aura:if>

Lightning Web Component

<template if:true={isLoading}>
    //isLoading is a boolean variable in JS
</template>

3. Iterations

Lightning-Aura Component

<aura:iteration items="{!v.contactList}" itemVar="con">
    //contactList is a List type attribute in Component 
    {!con.Name}
</aura:iteration>

Lightning Web Component

<template for:each={contactList} for:item='con'>
    <p key={con.id}>{item}</p>
</template>

4. Window Load or Document ready

Lightning-Aura Component

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
({
     doInit : function(component, event) {
        //any action as per requirement
     }
 })

Lightning Web Component

export default class fetchContact extends LightningElement {
    connectedCallback() {
        // initialize component
    }
}

5. CSS File

Lightning-Aura Component

.THIS .header {
    color: #FFFFFF;
    background-color: #ccc;
    padding: 10px;
}

Lightning Web Component

.header {
    color: #FFFFFF;
    background-color: #ccc;
    padding: 10px;
}

6. Server Side Call

Lightning-Aura Component

var action = component.get("c.fetchRelatedContacts");
action.setCallback(this, function(data) {
    var accountContacts=data.getReturnValue();
    component.set("v.accountContacts", accountContacts);
});
$A.enqueueAction(action);

Lightning Web Component

import getAccountContacts from '@salesforce/apex/RelatedContactController.fetchAccountContacts';

export default class ApexImperativeMethod extends LightningElement {
    @track accountContacts;
    @track error;
 
    connectedCallback() {
        getAccountContacts({recordId: '$recordId'})
            .then(result => {
                this.accountContacts= result;
                this.error = undefined;
            })
            .catch(error => {
                this.error = error;
                this.accountContacts = undefined;
            });
    }
}

7. Call Child Component

Lightning-Aura Component

<aura:component>
   <aura:attribute name="parentAttribute" type="String"/> 
    //c:childComponent is another Lightning component
   <c:childComponent childAttribute="{!v.parentAttribute}"/>
</aura:component>

Lightning Web Component

<template>
    <div>
        //c-video-player is another LWC component
        <c-video-player video-url={video}></c-video-player>
    </div>
</template>

Happy Sharing...

Everyone has their own favourites, so please feel free to share yours in the comments below!