LWC(Lightning Web Components)
--->Salesforce has recently announced LWC(in december 2018) in comparison to aura
framework.
--->LWC is a new breed of light weight frameworks supporting all advance web
tecnologies
and web standards.
--->More secure,fast and light weighted components we can develop using LWC.
--->Lwc and aura components can exists on same lightning page.
--->Both can communicate with each other.
--->Lwc pretty solves rendering and performance issues.
--->Rendering of lwc component is very fast as comparison to aura.
*******We cannot develop lwc components using developer console.
---------->We need external editor
(VS CODE Editor)
We need sfdx commands to work on lwc components.
***************Setup environment for development***********************
STEP1-->Install Vs Code Editor.
https://code.visualstudio.com/download
Step2--->Install Salesforce Cli(Command Line Interface)
https://developer.salesforce.com/tools/sfdxcli
Step3--->***Open Visual Studio Code Editor(Add Salesforce Extension Pack)
Step4---->
SCRATCH ORGS-->
Allows development and testing in seperate environments.
They are disposable units.
They are temporary orgs.
max days(30 days).
Step5--->
Dev Hub--->are those salesforce orgs which allows us to create scratch orgs.
Goto--->Salesforce org--->set up-->dev hub-->enable dev hub.
**Once you will enable it it will not disable again.
Step 6--->Open Vs Code Editor--->open terminal window-->
sfdx update
-->this command will update salesforce cli to latest version<---
Step7--->Create Project Folder.
CTRL+SHIFT+P--->Create Project-->Enter
Step8-->Authorize Dev Hub Org.
Because we have to create scratch org for this org from salesforce cli.
sfdx force:auth:web:login
Step9-->Create Scratch Org.
sfdx force:org:create -a lwc1 -d 20 -f config/project-scratch-def.json
Step10-->Open Scratch Org
sfdx force:org:open -u lwc1
---------------Develop Our First Component--------------------------
<template>
<h1 style="color:whitesmoke">Welcome TO LWC COMPONENTS</h1>
<h1 style="background-color: cyan;color:darkorange">LWC DEMOS </h1>
</template>
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
PUSH COMPONENT FROM VS--->SCRATCH ORG.
sfdx force:source:push -u lwc1
//lwc1-->alias for scratch org.
TRAILHEAD
https://trailhead.salesforce.com/en/content/learn/trails/build-lightning-web-
components
------------->JAVASCRIPT PROPERTIES<------
(Dynamic binding)
<template>
<h1 style="color:whitesmoke">Welcome {welcomename} TO LWC COMPONENTS</h1>
<lightning-input label="Enter Your Name" onchange={showmessage}></lightning-input>
</template>
JS
import { LightningElement } from 'lwc';
export default class WelcomeComponent extends LightningElement {
welcomename;
showmessage(event)
{
this.welcomename=event.target.value;
}
------------->Calculator In LWC<----------------------------------
<template>
<h1 style="color:yellow;background-color:turquoise">CALCULATOR DEMO</h1>
<lightning-input label="First Number" onchange={num1}></lightning-input>
<br/>
<lightning-input label="Enter Second Number" onchange={num2}></lightning-input>
<br/>
<lightning-button label="sum" onclick={calculate}></lightning-button>
<lightning-button label="sub" onclick={calculate}></lightning-button>
<lightning-button label="multi" onclick={calculate}></lightning-button>
<lightning-button label="divide" onclick={calculate}></lightning-button>
<div style="background-color:violet;">Result Is {result}</div>
</template>
js File
import { LightningElement } from 'lwc';
export default class WelcomeComponent extends LightningElement {
n1;
n2;
result;
num1(event)
{
this.n1=event.target.value;
}
num2(event)
{
this.n2=event.target.value;
}
calculate(event)
{
var l=event.target.label;
if(l=='sum')
{
this.result=parseInt(this.n1)+parseInt(this.n2);
}
else if(l=='sub')
{
this.result=parseInt(this.n1)-parseInt(this.n2);
}
else if(l=='multi')
{
this.result=parseInt(this.n1)*parseInt(this.n2);
}
else if(l=='divide')
{
this.result=parseInt(this.n1)/parseInt(this.n2);
}
}
}
--------------->Apex Interaction With Lwc<----------------
UDEMY LINK
https://www.udemy.com/course/lightning-web-component-
development/learn/lecture/15161778#overview
***Display List Of Accounts in lwc component
Wire property.
public with sharing class Accountmanager
{
public Accountmanager() {
}
@AuraEnabled(cacheable=true)
public static list<account> allaccounts()
{
return [select name,type from account];
}
}
[email protected]
[email protected]
JS File
import { LightningElement,wire } from 'lwc';
import allaccounts from '@salesforce/apex/Accountmanager.allaccounts'
export default class ViewAccountComponent extends LightningElement
{
@wire(allaccounts)
accounts;//any name
}
HTML File
<template>
<h1 style="color:yellow">View Accounts Name</h1>
<template for:each={accounts.data} for:item="con">
<div key={con.Id}>
<lightning-card title={con.Name}>
{con.Type}
</lightning-card>
</div>
</template>
</template>
