How to use Salesforce Lightning Web Components

Salesforce CRM operates in two modes – Classic and Lightning. Salesforce Classic is the older version of Salesforce, while Lightning is the modern representation of Salesforce. As they say, out with the old and in with the new. But is this true in the case of Salesforce?

  • Published 01 Dec 2022
  • 14 mins read
How to use Salesforce Lightning Web Components
Table of contents
Article Summary Box

Article Highlights

  • The article introduces Salesforce Lightning as an advanced, modern framework that enhances Salesforce Classic with component-based architecture and advanced JavaScript features, making it more user-friendly and efficient.
  • LWC is described as a crucial part of Salesforce Lightning, utilizing standard web technologies like HTML, CSS, and JavaScript, along with Salesforce-specific services, to create reusable and modular components for web applications.
  • The article compares LWC with Aura components, emphasizing LWC’s better performance, ease of development, and alignment with modern web standards, suggesting a preference for LWC in future Salesforce development.


This article will explore the more recent version of Salesforce—Salesforce Lightning—and what it offers admins, developers, and business owners.

Salesforce Lightning Web Components

Salesforce Lightning uses a web-based framework called the Lightning Web Component (LWC). LWC is an integral part of Salesforce Lightning. Usually, the best way to accomplish a given requirement is to break it down into smaller and reusable components and then handle them simultaneously.

The Lightning Component in Salesforce works the same way. The complex features use reusable, small, modular Lightning Web Components.

But why did Salesforce resort to Lightning? What exactly are Salesforce Lightning and Lightning Web Components? Let’s find out in detail.

Salesforce Lightning Experience Overview

Salesforce Lightning Experience is an advanced and modern representation of Salesforce Classic. It is a component-based framework and hosts advanced JavaScript features to make Salesforce more fun and easier to use.

🖥️
When mobile computing wasn't popular, Salesforce used Apex and Visualforce for almost everything. However, the IT sector saw a massive shift in 2015 because of JavaScript. Every other app and website now requires a desktop and mobile-friendly design.

However, Salesforce worked on Aura components long before the innovative JavaScript shift. As JavaScript is ever-changing, reimplementing it with Aura components wasn’t easy.

Salesforce came to the rescue by coming up with LWCs. This web-based framework follows web component standards and the advantages JavaScript brings.

Before LWCs, the Salesforce mobile app could only be developed via "Salesforce1." However, the Lightning Experience and Lightning Web Components have made the component development framework of mobile-ready components more manageable.

Salesforce Lightning features

Salesforce Lightning introduced numerous new features. Here are some of the major ones:

The Lightning Experience

The front-end graphical user interface is much more impeccable than the Classic version.

Lightning App Builder

This feature provides endless out-of-the-box options for Salesforce app creation and customizations with mere drag-and-drop features.

Lightning Component Framework

This is all about developing reusable Web Components with the help of front-end technologies. Whether on the developer or client side, the Lightning Framework is preferred by all.

Lightning Connect

Lightning Connect develops easier ways to integrate external tools with Salesforce. It handles data consumption and production from external sources and integration.

What is a Lightning Web Component?

An LWC consists of standard web technologies, like HTML, CSS, JavaScript, and some Salesforce specialized services. The Salesforce specialized services are:

  • A customizable Lightning data device.
  • User interface API.
  • The base components that help deliver end-to-end platform-specific solutions and functionalities. The extension of these components is “.cmp.”

Typically, Salesforce developers create various LWCs, and the administrators deploy them to construct web applications according to business users and their needs. An LWC can be easily combined with other components, which makes it highly flexible and customizable.

Types of Salesforce Lightning Components

There are three types of Lightning Components:

  • Standard Components: The standard Lightning Components come with Salesforce. As these are pre-installed in your organization, you can’t remove them. However, you can use or hide them.
  • Custom Components: As the name suggests, Salesforce developers create custom-based Lightning Components based on different requirements and needs. These are highly advanced and flexible. Custom Lightning Components and the Lightning Experience are often termed Lightning Pages.
  • AppExchange Components: AppExchange is like a Salesforce store with numerous custom-built components and functionality. The AppExchange Web Components are pre-built and made available, ready to be installed and used.

What are the contents of the LWC framework?

A Lightning Component's structure and component architecture are similar to that of an Aura component. The main contents of an LWC are HTML, JavaScript, optional CSS, and an XML file that defines the metadata value of that component.

🔙
In short, LWCs are custom front-end components created for a business's UI and functionality. These front-end interfaces can be linked with an Apex class on the back-end. 

Hence, you can also refer to the custom elements of LWCs as full-fledged Salesforce solutions. There are numerous advantages of using Lightning Web Components. Some of them are:

  • Lightning UI Components. These components can be highly flexible, customizable, and shareable with other users.
  • The Lightning Data Services Framework supports major front-end technologies, such as HTML5, CSS, JavaScript, etc. It enables the custom development of reusable and responsive Salesforce-based components and helps develop applications for desktop and mobile interfaces.
  • The Lightning record platform and framework uses JSON for data exchange.

Let us now understand the contents of each of these components.

HTML

The HTML file starts with the root tag “<template>,” which holds all your component’s HTML content and tags. Whenever this file is rendered, the “<template>” tag is changed to “<namespace-component-name>.”

The HTML file contains the component structure with which the user will interact.

JavaScript

The first line of every JavaScript file in an LWC is:

 Import { LightningElement } from ‘lwc’;

This import function imports the core Lightning module.

The JavaScript file handles all the back-end parts of a component, along with the linkage from Apex classes and Salesforce data.

Configuration (XML)

This file handles the metadata configuration of the component. For example, it takes on the responsibility of component labels, their availability for different Salesforce components and features, etc.

CSS And SVG

If you style your component or add some graphics, these files will help you. The stylesheets in LWC are applied automatically to the HTML file.

Prerequisites for Lightning Web Components

You can create Lightning Web Components from the Developer Console or use a code editor like VS Code. In this article, we will start with VS Code. Before creating an LWC, there are a few things you need to keep in mind:

  • Your component name must begin with a lowercase letter.
  • It shouldn’t contain any whitespace.
  • It should only have alphanumeric or underscore characters.
  • It shouldn’t contain consecutive underscores.

Now that you’re aware of the naming convention, let’s start with creating one Lightning Component:

  • Open the “Command Palette” in your VS Code. Press “Ctrl+Shift+P” (Windows) or “Cmd+Shift+P” (MacOS).
  • Type and select “Create: SFDX Project.” Press “Enter.”
  • Give the project a name. Press “Enter” and create the project.
  • Once your project is completed, you need to authorize your organization.

To learn more about creating a new project and authorizing an organization, you can follow this step-by-step guide by Trailhead.

When you create a web component, it creates three files by default. However, you can include two more files. Say you create an LWC named “helloWorld.” This Lightning Web Component contains the following files by default:

  • helloWorld.html.
  • helloWorld.js.
  • helloWorld.js-meta.XML.

If you want to add styles and graphics, you can create two more files:

  • helloWorld.css (optional).
  • HelloWorld.svg (optional).

Creating your first LWC

After setting up your developer experience organization and creating a project, follow these steps to make your first LWC:

  • Open the “Command Palette” in your VS Code. Press “Ctrl+Shift+P” (Windows) or “Cmd+Shift+P” (MacOS).
  • It’ll ask for your directory – just ignore that and press “Enter.”
  • Now type “helloWorldComponent” as the component name and press “Enter.”
  • You’ll now see your component under the LWC folder with three pre-built files: HTML, JavaScript, and XML.

Code requirement examples

helloWorldComponent.html

<template>
<lightning-card title="HelloWorld" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<p>Hello, {greeting}!</p>
<lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
</div>
</lightning-card>
</template>
  • As stated, the LWC’s HTML resides within the “<template>” tag.
  • You create a “<lightning-card>” in the code that acts like a container.
  • The “<lightning-input>” takes input from the user, and the value is stored in “{greeting}.”
  • This value is dynamically used in the “<p>” tag that displays some text.
  • The “{changeHandler}” comes to action whenever the value of the “{greeting}” is changed. JavaScript handles this action.

helloWorldComponent.js

import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
@track greeting = 'Flair.hr';
changeHandler(event) {
this.greeting = event.target.value;
}
}
  • The JavaScript file imports the Lightning module along with ‘track.’ The LWC hosts three decorators – track, wire, and API. Here, ‘track’ is used to track the changes in the property of an object or element.
  • This ‘track’ is used to observe the changes in the “{greeting}” based on user inputs.
  • Whenever the value of the “{greeting}” changes, the “changeHandler” event is called that sets the value of the “{greeting}.”

helloWorldComponent.js-meta.XML

<?XML version="1.0" encoding="UTF-8"?>
<lightningcomponentbundle XMLns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</lightningcomponentbundle>
  • Your Lightning Component won’t be available to use unless you set “<isExposed>” as true.
  • The “<targets>” tag is used to mark down the target areas within Salesforce where you want the LWC to be available for use
  • For example, the target “lightning__AppPage” points to application pages, and “lightning_RecordPage” states that this component is also used in record pages.
LWCs can also invoke Apex classes to perform more advanced server-side operations and create exceptional performance.

Deployment

Once your LWC is created, all that’s left is to deploy and use it. Follow these steps to deploy your LWC from VS Code:

  • Go to the LWC folder in your project directory.
  • Look out for your component and right-click on it.
  • Click on “SFDX: Deploy Source to Org” when the panel opens up.
📁
Your LWC will be deployed to your organization within a few seconds and will become available. You can also deploy the LWC or any changes by right-clicking within the file and following the same steps.

Now, you can use the Lightning Component on your homepage, application page, or record page. You can do so by following these steps:

  • Go to the page where you want to add the LWC.
  • Click on the gear icon on the top-right side of the screen. Select “Edit page.
  • A new edit panel for that page opens up. Now search for your component under the custom tab.
  • Now, drag and drop where you want to display it on the page.
  • Click “Save” and then “Activation.” Now, set it as “Org Default,” if applicable, and click “Activate.”

Should you use LWC or Aura?

LWCs perform better and are easier to develop than Aura Components. But there are cases when you need to use Aura and Lightning Web Components. This performance is because LWCs are relatively new and don’t support all of Aura’s functionalities.

You can work with LWC and Aura for extra development by linking them with an interoperability layer.

This development allows you to write LWCs and connect them to applications containing Aura Components. Please note that Aura Components can host LWCs, but the other way around isn’t possible.

Here are some other points to consider:

Easy to learn

Lightning Web Components (LWC) use native web standards already built into browsers. This means that there is no additional abstraction layer like Aura or any other frameworks; you only need standard JavaScript to develop.

Faster websites and better page load times

LWC is a light­weight framework built on web standards. Because there is no additional abstraction layer, LWC may be rendered faster than Aura Components, which is important for delivering pages quickly.

Portability

Because LWC aligns with web standards and is open source, the components you create can easily work outside the platform. This means you can write a component on the platform and reuse it elsewhere.

Less code

One difference between LWC and standard Web Components is how much code you write to create a component. With LWC, you just write a few lines of code, and then the LWC compiler will transform that code, adding the necessary boilerplate code so that those become Web Components.


The difference between LWC and Aura can’t be seen on screen, but it makes a big difference for developers in the back end. Hence, it is generally widely accepted that it is better to choose LWC over Aura.

💡
You need to consider what will be best for your team, your production line, the reports and records you need to create, and your business's overall experience with code.

Once you have answered these questions, you can make an informed decision.

Are you ready to create your LWC?

It doesn’t matter if you are a developer who builds components or a business owner who needs the functionality built. It is smart to turn to the modern web standards of LWC rather than the Classic version. Salesforce Lightning and the Lightning Component Framework have made Salesforce high-end and easy to use.

👉
As LWC helps you develop flexible and easy Web Components with a friendly user experience, it has seen a sudden surge in future development implementation and demand.

Now is the best time to switch to LWC as a developer or a business.

As you can see, newer does seem to be better in this instance.

Spring Release Notes Box
Spring Release Updates
Unified Analytics Experiences
Control your report and dashboard sharing directly from the Analytics Tab. Streamline dashboard management with bulk selection. Save dashboard views on your iOS and Android devices.
Lightning Reports and Dashboard
ransfer Lightning Dashboard ownership (generally available). Enhance visualizations by adding images and rich text to your reports and dashboards.
Salesforce Scheduler
Optimize resource management by reassigning multiple service appointments. Improve appointment scheduling using concurrency in shifts. Troubleshoot setup and appointment scheduling issues.

Document
Contact us
to make your transition

Last updated: 13 Jun 2024