Salesforce LWC Master Class (Ep1): What Are Lightning Web Components, when to use them, and why to use them.

---

If you are a Salesforce developer (or an admin looking to level up), you’ve likely heard the buzz around Lightning Web Components (LWC). But what exactly are they? Why should you use them over flows or Aura components? And how do you actually build one?

In the first episode of the Salesforce LWC Master Class, we figure out the fundamentals of LWCs, look at the history of Salesforce development, and build a “Hello World” LWC together. So, let’s get started!

What Are Lightning Web Components?

At their core, Lightning Web Components are custom HTML elements built using HTML and JavaScript.

While Salesforce provides a robust set of out-of-the-box tools (like standard record pages and page layouts), developers often hit a wall where standard features aren’t enough. You might need a specific user interface (UI) element or functionality that doesn’t exist natively.

Here are a couple of real-world examples:

• Character Counter: A text field that counts down remaining characters for a text field (something standard Salesforce fields don’t do visually).
• Stock Ticker: A component that pulls in real-time data (like the GME stock price) and displays it on a record page.

In short, LWCs exist to let you build custom UI elements that look and feel like Salesforce but provide functionality that point-and-click tools cannot.

When Should You Use LWCs?

With tools like Screen Flows and OmniScripts becoming more powerful, the line between “config” and “code” can blur. Here is the rule of thumb:

1. When Flows Hit Their Limit

Screen Flows are fantastic for guiding users through business processes. You should often start with a Flow. However, Flows have limitations regarding the “look and feel.” If you need a completely custom UI, a specific navigation experience, or a highly branded look that a Flow cannot provide, it’s time to switch to LWC.

• Pro Tip: You can actually combine the two! You can drop an LWC inside a Flow to handle specific complex tasks (like custom pagination) while keeping the rest of the logic in the Flow.

2. When Performance is Critical

Flows are powerful, but they can be heavier to load because they pull in a massive framework to operate. LWCs are built on modern web standards (more on that below), meaning much of what they need to run is already native to the web browser. This makes LWCs significantly faster and more performant than flows.

3. OmniScripts

If you use Salesforce Industries (formerly Vlocity), you might use OmniScripts. Similar to Flows, these are great for complex logic, but if the UI requirements exceed what the drag-and-drop tool offers, you will need to inject an LWC.

LWC vs. Aura: Why the Switch?

If you have been in the Salesforce ecosystem for a while, you remember Aura Components. Why do we have two frameworks, and why is LWC better?

The History Lesson

• 2014 (Aura Era): When Salesforce moved from Classic to Lightning, web browsers were quite limited. To get modern features, Salesforce had to build a massive “framework” (Aura) to fill in the gaps of what browsers couldn’t do.
• 2019+ (LWC Era): Web standards evolved. Browsers now natively support templates, modules, and shadow DOM.

Lightning Web Components were built to leverage these modern standards. Instead of a heavy custom framework, LWC runs closer to the browser’s native capabilities. This makes them:

• Faster: Less code for the browser to download and parse.
• Standardized: You are writing standard JavaScript and HTML, not just “Salesforce-specific” code.

Is Aura Dead?

Almost. You will use LWC 98% of the time. There are incredibly rare edge cases where Aura is still required (e.g., specific interactions with third-party libraries that need the global DOM rather than the Shadow DOM), but for most new development, you should stick to LWC.

Tutorial: Build Your First LWC

Ready to write some code? You cannot build LWCs in the Developer Console; you need an IDE like Visual Studio Code (VS Code) or IntelliJ set up with Salesforce extensions.

Here is the quick recipe for your first component:

1. Create the Component

Open your command palette in VS Code (Ctrl+Shift+P on Windows, Cmd+Shift+P on Mac) and run:

SFDX: Create Lightning Web Component

Name your component (e.g., demoComponent). Remember to use camelCase and avoid spaces.

2. The JavaScript (demoComponent.js)

We will create a simple property (variable) to hold our text.

JavaScript

import { LightningElement } from 'lwc';

export default class DemoComponent extends LightningElement {
    helloWorld = 'Taco Bell is that hot fire bro';
}

3. The HTML (demoComponent.html)

We use data binding to display that JavaScript property using curly braces {}.

HTML

<template>
    <p>{helloWorld}</p>
</template>

4. The Configuration (demoComponent.js-meta.xml)

To actually use this component in Salesforce, we need to expose it to the Lightning App Builder.

XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

5. Deploy and See It in Action

1. Right-click your component folder and select Deploy Source to Org.
2. Go to a Record Page in Salesforce (e.g., an Account).
3. Click the Gear Icon > Edit Page.
4. Find your demoComponent in the lightning app build sidebar and drag it onto the record page.
5. Save and Activate.

When you view the page, you will see your text: “Taco Bell is that hot fire bro” (or whatever message you chose)!

What’s Next?

You have now built a basic component! This is just the beginning. As you progress, you will learn about the Shadow DOM, CSS styling, communicating with Apex, and using Salesforce data services to build truly dynamic applications.

To watch the full explanation and code along with Matt, check out the video here: https://youtu.be/7hbaoMtp4pU

---

Need help with your Salesforce Org?

If you need help with your Salesforce org, schedule an hour of consulting time with me! I’m one of only ~500 Salesforce Certified Technical Architect’s (CTA) worldwide and I’ve spent over 30,000 hours building Salesforce implementations over the last decade!

Schedule and hour of consulting with me here!

---

Do you want to be the next Salesforce Certified Technical Architect (CTA)?

If you need training to help you on your journey to complete your Salesforce CTA Board then why not sign up for the cheapest Salesforce CTA course out there, with someone who has training over a million Salesforce professionals worldwide! You can check out and enroll in the course below!

Sign up for the CTA course here!

Or if a course isn’t your thing, you can always sign up for an hour long CTA study session with me here:
Schedule 1-on-1 CTA Coaching Here!

---

Get Coding With The Force Merch!!

We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!

---

Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram

---

Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture

---

AI DISCLAIMER: Gemini assisted me in writing this blog post by analyzing and summarizing the contents on the YouTube video I created that is linked at the top of this post.