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?
This article will explore the more recent version of Salesforce – Salesforce Lightning – and what it brings to the table for admins, developers, and business owners.
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 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 way before the innovative JavaScript shift. But 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." But the Lightning Experience, along with Lightning Web Components, has made the component development framework of mobile-ready components more manageable.
Salesforce Lightning introduced numerous new features. Here are some of the major ones:
It is a front-end graphical user interface that is much more impeccable than the Classic version.
This feature provides endless out-of-the-box options for Salesforce app creation and customizations with mere drag-and-drop features.
This is all about developing reusable Web Components with the help of front-end technologies. Be it the developer side or the client side, the Lightning Framework is preferred by all.
Lightning Connect comes up with easier ways to integrate external tools with Salesforce. Lightning Connect handles data consumption and production from external sources and integration.
An LWC consists of standard web technologies, like HTML, CSS, JavaScript, and some Salesforce specialized services. The Salesforce specialized services are:
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.
There are three types of Lightning Components:
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:
Let us now understand the contents of each of these components.
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 structure of the component with which the user will interact.
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.
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.
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.
You can create Lightning Web Components either from the Developer Console or using 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:
Now that you’re aware of the naming convention, let’s start with creating one Lightning Component:
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:
If you want to add styles and graphics, you can create two more files:
After setting up your developer experience organization and creating a project, follow these steps to make your first LWC:
<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>
import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
@track greeting = 'Flair.hr';
changeHandler(event) {
this.greeting = event.target.value;
}
}
<?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>
LWCs can also invoke Apex classes to perform more advanced server-side operations and create exceptional performance.
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:
Now, you can use the Lightning Component on your homepage, application page, or record page. You can do so by following these steps:
LWCs perform better and are easier to develop than Aura Components. But there are cases when you need to use Aura along with 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:
Lightning Web Components (LWC) just use native web standards already built into browsers. It means that there is no additional abstraction layer like Aura or any other frameworks, you only need standard JavaScript to develop.
LWC is a lightweight framework, which is built on web standards, and because there is no additional abstraction layer, LWC may be rendered faster than Aura Components since speed is important for delivering pages quickly.
Because LWC aligns with web standards and is open source, the components you create can easily work outside the platform. This means that you can write a component on the platform and reuse it elsewhere.
One difference between LWC and standard Web Components is the amount of code you have to write to create a component. 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 lot of 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.
It doesn’t matter if you are a developer who builds components or a business owner who needs the functionality to be built. It is smart to turn to the modern web standards of LWC versus 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.