Lightning Web Components(LWC)

A modern Salesforce programming framework based on JavaScript, HTML, and Web Standards.

1) JavaScript Basics for LWC

Explanation:

LWC uses modern ES6 JavaScript.

Key Concepts:

  1. Variables: let, const
  2. Functions (normal + arrow)
  3. Classes & modules
  4. Promises & async/await
  5. Array functions (map, filter, reduce)

Example:


let name = 'Muni';
const multiplier = 2;

function greet() {
console.log(`Hello ${name}`);
}

const double = (num) => num * multiplier;

Why important?

All LWC components internally rely on JavaScript for logic.

2) HTML Templates

Explanation:

Every LWC has an HTML file that defines the UI layout.

Example LWC HTML:


<template>
<h1>Hello {fullName}</h1>
<lightning-button label="Click Me" onclick={handleClick}></lightning-button>
</template>

Binding Types:

  1. {propertyName} → One-way data binding
  2. onclick={handler} → Event binding

3) LWC Lifecycle Hooks

Explanation:

Hooks are special functions that run during component load, update, or removal.

Most Used Hooks:

  1. constructor()
  2. connectedCallback()
  3. renderedCallback()
  4. disconnectedCallback()

Example:


connectedCallback() {
console.log('Component loaded');
}

renderedCallback() {
console.log('DOM rendered');
}

4) Lightning Data Service (LDS)

Explanation:

LDS lets you access Salesforce data without writing Apex.

Common Features:

  1. Retrieve record
  2. Create/Update record
  3. Delete record

Example Using LDS:


import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';

@wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] })
account;

Purpose:

  1. No SOQL
  2. No Apex
  3. Secure and fast

5) Events in LWC

Explanation:

Events connect child → parent or communicate between components.

Types:

  1. Custom Events
  2. Lightning Message Service (LMS)

Example — Custom Event:

Child Component


handleClick() {
this.dispatchEvent(new CustomEvent('send', {
detail: { msg: 'Hello Parent' }
}));
}

Parent Component


<c-child onsend={handleMessage}></c-child>

handleMessage(event) {
console.log(event.detail.msg);
}

6) Calling Apex from LWC

Explanation:

When LDS can’t handle complex logic, Apex is used.

Example:

Apex class


public with sharing class AccountService {
@AuraEnabled(cacheable=true)
public static List<Account> getHotAccounts() {
return [SELECT Name, Rating FROM Account WHERE Rating='Hot'];
}
}

LWC JavaScript


import getHotAccounts from '@salesforce/apex/AccountService.getHotAccounts';

@wire(getHotAccounts)
accounts;

7) Wire Service

Explanation:

@wire is used to read Salesforce data automatically and reactively.

Example:


@wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] })
record;

Key Benefits:

  1. Auto-refresh
  2. Cache support
  3. Declarative

8) Navigation & UI Components

Explanation:

LWC has built-in components under the lightning namespace.

Example UI Components:

  1. <lightning-input>
  2. <lightning-card>
  3. <lightning-button>
  4. <lightning-datatable>
  5. <lightning-record-form>

Navigation Example:


import { NavigationMixin } from 'lightning/navigation';

this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.recordId,
objectApiName: 'Account',
actionName: 'view'
}
});

9) Deploying LWCs

Explanation:

LWCs are deployed using:

  1. Change Sets
  2. VS Code + Salesforce CLI
  3. DevOps Center
  4. Git-based CICD pipelines

Typical Deployment Using VS Code:


sfdx force:source:deploy -p force-app/main/default/lwc

Package structure:


myComponent/
myComponent.html
myComponent.js
myComponent.js-meta.xml