Lightning Web Components: The New Development Style

Lightning and Lightning Web Components. In Salesforce Eco system these are the most common word you hear these days. Now we are coming to year end but Lightning is still going strong with lots of update and new feature. This week Salesforce introduce Lightning Web components (LWC). This is just not another update this is total game changer. Don’t worry existing lightning component will still be supported but LWC is future, because they support latest feature and standard. So LWC is a new programming model for building Lightning components. It leverages the web standards breakthroughs of the last five years.

In 2019 web stack many new feature added in web standards and Lightning Web Component (LWC) supports them. Which includes ECMAScript 7, templates and many other things

Those who are still thinking about how it will work with the existing lightning component, Below image will make this clear. So Aura components and Lightning web components can coexist and interoperate, and they share the same high-level services.

• LWC and Aura components can coexist on the same page.
• Aura Components can include Lightning web components.
• Aura components and LWC share the same base Lightning components. Base Lightning components were already implemented as Lightning web components.
• LWC and Aura components share the same underlying services (Lightning Data Service, User Interface API, etc.).

Install pre-requisite software

So today we will create a basic lightning web component using SFDX and VS code. Firstly you need to install SFDX CLI in your system. You can read steps for that here.

After that install the Visual Studio Code. Once the VScode is installed then go to extension pack and Search for Salesforce Extension Pack and click Install and again search for Salesforce Lightning Web Components and click Install. Now in VScode press Command + Shift + P on macOS or Ctrl + Shift + P on Windows and then type SFDX commands. In terminal enter sfdx plugins to check everything is correctly setup.

Create Project in VS code

• Firstly we will create a new project. So in VS code type Ctrl + Shift + P on Windows and type SFDX: Create Project with Manifest.

• Second type Authorize and login using your dev org and when asked allow the permission. Then you will get success message in CLI.

• Similarly we can create a scratch org using command SFDX: Create a Default Scratch Org. After that select all the default details. You can find setup for creating Scratch org here.

Create Lightning Web Components

• Next we will create the Lightning web component. In VScode Ctrl + Shift + P on Windows and type command SFDX: Create Lightning Web Component. After that select all the default details and give component a name. So just make sure that name starts with small caps.

• You will notice that, instead of the previous bundle now we get three files. Firstly lwcLightningdataService.html where we will write the html code. Secondly
  lwcLightningdataService.js file where we will write the JS code and third is lwcLightningdataService.js-meta.xml 
  LightningdataService.js-meta.xml file. We also get one CSS file.
• Copy paste the below code in newly created component.

LightningdataService.html

<template>
    <lightning-card title="Record Edit Form Contact" icon-name="standard:contact">

        <div class="slds-m-around_medium">
   
            <lightning-record-edit-form
                object-api-name="Contact"
                record-id="recordId">
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Title"></lightning-input-field>
                <lightning-input-field field-name="Phone"></lightning-input-field>
                <lightning-input-field field-name="Email"></lightning-input-field>
                <div class="slds-m-top_medium">
                    <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
                </div>
            </lightning-record-edit-form>

        </div>

    </lightning-card>
</template>

LightningdataService.js

import { LightningElement, api } from 'lwc';
  
export default class RecordEditFormDynamicContact extends LightningElement {
  @api recordId;
  @api objectApiName;
} 

LightningDataService.js-meta.xml

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

Here target define where this component will be visible. LWC follow lightning-* naming format. Also set the isExposed to true to make it visible.

We can see that JS code reflect modern module like import, export statement, class and extends. 

Deploy code in Org

• Now we need to save it into default org. So in VScode type Ctrl + Shift + P on Windows and type command SFDX: Deploy Source to Org.

• In VScode Ctrl + Shift + P on Windows and type command SFDX: Open Default Org.
• Select an existing Contact or create new Contact. Edit page and then add the new component.

So here we have quickly created new LightningDataService using new Lightning Web Component. . Also as of now developer console don’t support LWC so we need SFDX + VSCode to create, update them.

You can try your hands on LWC trailhead badge or can check the sample gallery to try lightning app using new LWC modules.

You can also check LWC developer guide. There you will find LWC documents, Component reference and playground which you can use to try components. You will also get unique URL which you can share with other so that they can refer same code.

Finally if you want to fetch existing Metadata including Lightning Web Components (LWC) then make sure its metadata details is available project.xml. As in older version it wont fetch LWC components.

<types>
        <members>*</members>
        <name>LightningComponentBundle</name>
 </types>

In addition you can also check below posts to get hands-on experience.

1. Get Current User Details in Lightning Web Component
2. Use Static Resource In Lightning Web Component
3. Call Apex Method From Lightning Web Components
4. Pass Data between Component using Events in Lightning Web Components
5. Custom Toast Component in Lightning Web Components
6. LWC: Datatable with LDS and Apex
7. LWC: Datatable with Lazy loading, Inline Edit and Dynamic Row Action
8. Iterate Map in Lightning Web Components
9. Display Generic sObject in Lightning Web Components
10. Custom Lookup in Lightning Web Components

So did you like the post, have any question or want to add anything, let me know in comments. Happy programming 🙂