How to use Salesforce Lightning Web Components

Hutte expert panel

Sushrut Kumar Mishra

Salesforce Developer, Technical Writer, and Entrepreneur

About

Sushrut is a skilled Salesforce Developer, Technical Writer, and Entrepreneur. His expertise includes front-end dev, Web3, and DevRel. He leverages technology to craft exceptional digital experiences.

Harald Mayer

Hutte CEO & Founder

About

Harald is the Co-Founder of Hutte, bringing his vision of no-code DevOps to life. His passion enables teams and individuals to focus on what matters most – bringing value to the users they build for.

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.

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:

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.

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:

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

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

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

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.

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:

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.

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.

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.