Salesforce LIGHTNING WEB COMPONENT

An Introduction to Salesforce Lightning Web Component

1) INTRODUCTION TO LIGHTNING WEB COMPONENT:

  • Using HTML and modern JavaScript we can build Lightning web components that are basically custom HTML elements
  • Aura components and Lightning web components can coincide and interact on a page. To admins and end users, they both seem as Lightning components.
  • Lightning Web Components uses core web component standards and provides only what’s necessary to perform well in browsers supported by Salesforce.
  •  Because lightning web components are built on code that runs genetically in browsers, Lightning Web Components are lightweight and give the optimum performance. The code you mostly write that is totally standard JavaScript and HTML.

Don't miss out iconDon't miss to check out: How to Add or Delete Dynamic Rows in Salesforce using Lightning Web Component.

2) WHAT IS THE REAL MEANING OF LIGHTNING WEB COMPONENTS FOR DEVELOPERS AND CUSTOMERS IN REAL LIFE ENVIRONMENT:

  1. For JavaScript developers: Across the globe, it means that they can do Salesforce coding without anything new.
  2. For Salesforce developers: It means that their lightning components that are built with aura will work alongside lightning web components. They have no need to rebuild anything.
  3. For Salesforce customers: It is easier than ever to build faster enterprise apps on Salesforce (connected to CRM and business data). 

3) HOW LIGHTNING WEB COMPONENT IS DIFFERENT FROM LIGHTNING COMPONENT:

The main difference between lightning component and lightning web component is as follows:

  • LIGHTNING COMPONENT: 

If we talk about the Lightning components so it uses the Aura framework for development and execution of Lightning components. We can place the Aura framework  in the same stack as Angular, React, as we know that it provides the full functionality to run your lightning components.

  • LIGHTNING WEB COMPONENT:

On the other hand if we talk about the Lightning web components, it uses the browser provided features for general components not the aura framework and its scaffolding along with the Salesforce Lightning web components framework (which gives the functionality that is totally related to security, service integration and base lightning components). 

4) HOW TO CREATE A LIGHTNING WEB COMPONENT WITH EXAMPLE:

There are various steps to create a lightning web component by following it you can easily make a lightning web component in your organization that are as follows:

STEP1) Create a Salesforce DX project:

  1. For creating a Salesforce DX project just go in the Visual Studio Code and then open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
  2. Type SFDX.
  3. Select SFDX: Create Project.
  4. Press Enter to accept the standard option.
  5. Enter HelloWorldLightningWebComponent as the project name.
  6. Press Enter.
  7. Select a folder to store the project.
  8. Click Create Project. After this You can see something like this as your base setup that is as showing in picture:

STEP2) Authorize your trailhead playground:

  1. For this just go to the Visual Studio Code and then just open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
  2. Type SFDX.
  3. Select SFDX: Authorize an Org.
  4. Press the Enter button to accept the Project Default login URL option.(For choosing default one)
  5. Press Enter to accept the default alias.
  6. Log in using your Trailhead Playground credentials.
  7. If prompted to allow access, click Allow.
  8. After authenticating in the browser, the CLI(Command Line Interface) remembers your credentials and you can also see that. The success message of authenticating should be seem like this:

STEP3) Create a lightning web component:

  1. For this, just go to the Visual Studio Code and then open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
  2. Type SFDX.
  3. Select SFDX: Create Lightning Web Component. Don't use SFDX: Create Lightning Component. (This creates an Aura component.)
  4. Enter helloWorld for the name of the new component.
  5. Press Enter to accept the default force-app/main/default/lwc.
  6. Press Enter.
  7. View the newly created files in Visual Studio Code.

STEP4) Coding in the HTML file:

<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>

STEP5) Coding in the JavaScript file:

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
  greeting = 'World';
  changeHandler(event) {
    this.greeting = event.target.value;
  }
}

STEP6) Coding in the XML file:

<?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>

STEP7) Deploy to your trailhead playground:

  1. Right-click the default folder.
  2. Click SFDX: Deploy Source to Org.
  3. In the Output tab of your integrated terminal, you can see the output or the results of your deployment. You should have also received a notice that states: SFDX: Deploy Source to Org ... ended with exit code 0. This means that the command ran successfully.

dont miss out iconCheck out another amazing article by Pooja here: Events in Salesforce Lightning Component.

STEP8) Add component to App in Lightning Experience:

  1. For this just go to the Visual Studio Code and then open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
  2. Type SFDX.
  3. Select SFDX: Open Default Org.
  4. From the App Launcher (), and there you simply find the sales so just select Sales.
  5. Click then select Edit Page.
  6. After that just Drag the helloWorld Lightning web component from the Custom area of the Lightning Components as you are showing in the list to the top of the Page Canvas.
  7. Click Save.
  8. Click Activate.
  9. Click Assign as Org Default.
  10. Click Save.
  11. After that Click the Save button again, then click the Back button to return to the Home page.
  12. Refresh the page to view your new component.

You’ve officially made your first Lightning web component!

5) ADVANTAGES OF USING LIGHTNING WEB COMPONENT:

  • Compliant to web standards
  • Lightweight
  • Memory efficient
  • Fast
  • Easier to learn and Transferable knowledge.

Popular Salesforce Blogs