Lightning Web Components

To provide World-class UI Experience, Salesforce R&D team is working hard to bring the best fits into Market with Uncompromised Industry Standards.

As part of this process, Salesforce is about to launch a new UI Framework called "Lightning Web Components" and Salesforce is suggesting to use instead of "Lightning Component", if you are new to developing on Lightning or if you are starting a new project.

The main concept of LWC is built a component with the below combination

1	HTML file (UI content) + Javascript file (To handle events) + XML file (To specify where to display this component content, meaning "Record page" or "Homepage" or "App Page")

Steps to follow to create and Test the LWC

=> Spring-19 pre-release Org
My credentials :
User Name: manjuonsfdc-j39v@force.com
Password : 9989008211a

=> LWC we can't develop directly(not available in Developer console also). So, we need to use SFDX. SFDX is just like ANT only but with advanced features. To setup SFDX and adding plugins to Visual Studio Code, follow this Trailhead module - Click HERE
With the above steps, setup/installation is completed.
Let's start building a new LWC:
Note: All SFDX commands are Case-Sensitive. 
1. Create SFDX project

1	sfdx force:project:create --projectname LWCExample --outputdir d:\SFDX

After 1 step completion, SFDX project will be created in our local machine like below

2. Login to Dev Hub org [Dev-Hub org is our Production org only, we just need to enable a permission so that we will get additional features]

1	sfdx force:auth:web:login --setdefaultdevhubusername --setalias LWCDevOrg

Note: We don't need to use scratch org. In this example, I am going to develop in my local machine and then will deploy the component back to Dev-Hub org.

3. Create an LWC

• In Visual Studio code, press "Command + Shift + P" on Mac (or) "Ctrl + Shift + P" on Windows.
• Type SFDX.
• Select SFDX: Create Lightning Web Component.
• Press Enter to accept the default force-app/main/default/lwc.
• Type "FirstLWC" for the name of the new component. [You can give any name] 
• Press Enter.

In our local machine, the below files will auto create

     Note : In SFDX format -> Lightning Web Components are stored in "lwc" folder.

4. Copy the below code into 3 files
FirstLWC.html

1 2 3 4 5 6 7 8

<template> <lightning-card title="FirstLWC" 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>

FirstLWC.js

1 2 3 4 5 6 7 8

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

FirstLWC.js-meta.xml

1 2 3 4 5 6 7 8 9 10

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

Now we are done with the implementation, the next step is to deploy code to Our Dev-Hub Org. This we can do from VSCode itself. Select the Main folder and right click and you will see an option to like "SFDX Deploy Source To Org" click on that.

Now the new component is available in our Dev-Hub org.

This component we can use just like our lightning component. I placed it on the "Home" page.

Source: Click HERE 
TrailHead: Click HERE

tHiNk gooD and dO thE bEsT.........MANJU NATH 🌝