In this blog, we’ll understand:
- What LWC is
- Why Salesforce uses it
- LWC folder structure
- A real working component with code
- Best practices used by professionals
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Button Example</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
What is Lightning Web Components?
Lightning Web Components (LWC) is a UI framework built by Salesforce using modern web standards like:
- Custom Elements
- Shadow DOM
- ES6 JavaScript
- HTML templates
Earlier, Salesforce used Aura Components, which were powerful but heavy and complex.
LWC is lighter, faster, and much easier to maintain.
Why Salesforce Introduced LWC
Salesforce introduced LWC to solve real problems faced by developers and users.
Key reasons:
- Faster page loading
- Better performance on large data
- Cleaner code structure
- Easy integration with backend (Apex)
- Reusable UI components
- Better user experience
For enterprise applications like Salesforce, performance and scalability matter a lot, and LWC delivers both.
helloWorld
│── helloWorld.html
│── helloWorld.js
│── helloWorld.js-meta.xmlStep 1: HTML File (UI Layout)
This file defines what the user sees.
<template>
<lightning-card title="Hello LWC">
<div class="slds-p-around_medium">
<p>Hello, {name}!</p>
<lightning-input
label="Enter your name"
value={name}
onchange={handleChange}>
</lightning-input>
<lightning-button
label="Submit"
variant="brand"
onclick={handleClick}>
</lightning-button>
</div>
</lightning-card>
</template>
Step 2: JavaScript File (Logic)
This file controls how the component behaves.
import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
@track name = 'User';
handleChange(event) {
this.name = event.target.value;
}
handleClick() {
console.log('Button clicked');
}
}
Best Practices Used by Salesforce Professionals
- Keep components small and reusable
- Never put business logic in UI
- Use Apex only when required
- Handle errors gracefully
- Follow SLDS (Salesforce Lightning Design System)
- Optimize performance using
@wireand caching
Final Thoughts
Lightning Web Components are the future of Salesforce UI development.
They combine the best of modern web development with Salesforce’s powerful platform.
