Salesforce : Lightning Web Components

Lightning Web Components is the Salesforce implementation of that new breed of lightweight frameworks built on web standards. It’s the next framework, which will coexist and interoperate with Lightning Aura Platform. Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including:

1. The Base Lightning Components, a set of over 70 UI components all built as custom elements.
2. The Lightning Data Service which provides declarative access to Salesforce data and metadata, data caching, and data synchronization.
3. The User Interface API, the underlying service that makes Base Lightning Components and the Lightning Data Service metadata aware, leading to substantial productivity gains.

So, let’s see a quick details about this new change we need to keep in our mind and adhere to in near future.

Setup (Prerequisite is you have a pre-release org from Spring 19)

As this is not available to all as of now, you need to have a Spring 19 pre-release org to test things out. Also, you need to have My Domain enabled to be able to use the custom components in lightning Experience.
You will need to setup Salesforce DX for this post. If not already done so , please do it at Salesforce DX

Once you have installed it, you will need to install Visual Studio Code (Internal Post)

After this you will need to install the Lightning Web Components extension for the Visual Studio Code. This will allow you to create metadata files for LWC and the Lightning Web Components. As we have Aura folder for lightning components , LWC is the folder name for Web components.

You can connect the pre-release spring 19 org to your Visual Studio Code by following bellow commands:

1. Open VSC (Visual Studio Code)
2. Press Ctl+Shift+P to open the Command Palette
3. Enter SFDX : Create Project with Menifest (This is for connecting your developer org with out Dev Hub enabled)
4. Enter the project name
5. Create the folder and the default folder structure will be created
6. Open the Command Palette and use SFDX: Authorize an Org and enter the dev org credentials
7. Once the authentication is done you are ready to create your first Lightning Web Component

If you have installed the Lightning Web Component Extension for VSC you can see the below command in the Command Palette

Once you select this command , hit enter to keep the default folder structure. Enter the project Name you want and hit enter. I am using HiThere as my project name, so it should produce some files as below structure:

The files

Let’s see the files as they got created. The project has three files html, JS and XML.

HTML file is the template file, which will contain and visualize your component. JS file is the controller where we can have the logics, as we did in our Aura components. XML file is the metadata, which stores information about the component.

If you open the HTML file you will see :

A blank template file.

The JS file:

It imports the LWC framework and extends the LightningElement to be used.

XML File:

Currently it’s almost blank with a very little information about the component. We can add attributes to this file to expose it at certain places and some other attributes, will talk about them in some other post. At this moment this component has nothing and cannot be used. Let’s add some code to it and use it somewhere.

Add code

open the JS file and copy the below code :

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

Open the HTML file and update as below: (Note: we can still use the lightning Design system 🙂 )

Update the XML file to configure the component, so that it can be used in recordpage,homepage and apppage:

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

Deploy the code to your org, by right clicking on the LWC folder or on the component folder and deploy the code to org:

Once successfully deployed add the component to your home page in Lightning Experience, as you would normally add a lightning component normally.

Conclusion

So, this is a start to the new framework by Salesforce. This is just a start and as we have been seeing this platform grow fast, I am sure will see a quick enhancement to this and it will be more widely used.

You can check the Trailhead module for a quick info : Lightning Web Component

Keep reading and sharing …….