Quick Start: Lightning Web Components
Welcome in Lightning Web Components Worlds. Here i'm starting the Lightning Web Component series for beginners, this may helps beginners and intermediate level learners to possess an honest knowledge of lightning web components.
Lightning Web Components are announced as part of Spring19 pre-release. As of now, we have built lightning component using the "Aura Components model" we can also built lightning component using the "Lightning Web Components model".
According to Salesforce, you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.
What is Lightning Web Component or LWC?
This is a new programming model for developing the lightning components.
A lightning web component that includes an HTML file, a JavaScript file, and a metadata configuration file. Lighting Web Components are custom HTML elements built using HTML and modern JavaScript. The files must use the same name so the framework can auto-wire them.
Power of Lightning Web Component (LWC)
HTML Templates
The power of Lightning Web Components is using template tag. Content inside a template tag will not be rendered. The content can be visible and rendered later by using Javascript.
CSS
In Lightning web Components, you can use Lightning Design System or Custom Css.
JavaScript
In Lightning Web Components, JavaScript files are in ES6 modules.
Composition
You can add components to Aura Component, Aura App and Lightning Web Component.
• Access Static Resources, Labels, Internationalization Properties, and User IDs
• Component Lifecycle
Why Lightning Web Components (LWC)?
Knowledge Domain
Developers familiar with Web Components are mostly familiar with LWC out-of-the-box. Aura is proprietary, so the more you know about web standards, the more you'll have of a skill that can be used outside Salesforce, too!
Better Execution
LWC leverages built-in browser security features from WC standards, so there's less custom code. This means they run faster and are more consistent in how they enforce security. Also, events have a more limited scope, so there's much less processing required to handle events.
New Security Features
We get better CSS isolation, script isolation, DOM isolation, and a more limited event scope, all of which leads to more consistent component design.
ES6+
We now have better support for ES6 and ES7, not available in Aura. You can do more in less code. It also transpiles code to work with IE 11 and other browsers that are missing some features.
More Consistent Data Binding
Two-way data binding, which has always been kind of buggy in Aura, is gone. This forces developers to coordinate how data moves between components. This also means that data binding will work as expected, without the "gotchas" from Aura.
Service Components
You can now write components that have no UI. They simply provide reusable methods that you can use in other components. This is much more efficient than Static Resources.
Mixins
You can import accessible methods from other components (as per above), and also import specific Apex methods, even from multiple classes. In addition, the Apex methods can be cached for improved performance.
Let’s see how to Create Lightning Web Component
Step #1: Setup Salesforce Dx in VSCode
1. Install Salesforce CLI.
2. Download and install VSCode.
3. Install required Extension.
-> Salesforce CLI Integration.
MIND IT !
More Details About : Software Setup (VS Code, Extensions, SFDX)
Step #2: Create SalesforceDX Project
Open VSCode. Press CTRL+SHIFT+P(Windows), Command+Shift+P (Mac) and then enter SFDX:Create Project with Manifest. Then enter a project name and select folder.
-> Enter SFDX:Create Project with Manifest
If you do not see the option ('Create Project with Manifest'), you might try restarting your IDE or verify if all
per-requisites are met.
MIND IT !
what is the difference between Create Project and Create Project using Manifest?
Create Project is an empty project with only the folders.
1. Choose an existing folder for your project on disk
2. Open VSCode. Press CTRL+SHIFT+P (Windows or Linux), Command+Shift+P (Mac).
3. Here type SFDX: Authorize an Org
4. Enter an alias of this org (here MYFIRSTAPP)
5. Enter your credentials (user/password)
6. Terminal (tab): type the next command lines directly
sfdx force:source:retrieve -m ApexClass
sfdx force:source:retrieve -m AuraDefinitionBundle
Create Project using Manifest => "manifest" folder contains a default package.xml
1. Choose an existing folder for your project on disk
2. Open VSCode. Press CTRL+SHIFT+P (Windows or Linux), Command+Shift+P (Mac).
3. Here type SFDX: Authorize an Org
4. Enter an alias of this org (here MYFIRSTAPP)
5. Enter your credentials (user/password)
6. Right click on package.xml
7. SFDX: Retrieve Source in Manifest from Org
-> Enter a project name and press enter.
-> After giving the name, It will ask you to save your project in the folder. Specify the folder here. ( I would suggest you to first create a folder name lwc and store the project in this folder. as we will be wiring more session examples here.)
-> Click on the Create Project button. Now you can see the folder hierarchy.
Authorize an Org :
Press CTRL+SHIFT+P(Windows), Command+Shift+P (Mac) and then enter SFDX:Authorize an Org.
-> Enter SFDX:Authorize an Org
Step #3: Finally, Create your first Lightning Web Component.
1. Open Visual Studio Code.
2. Press CTRL+SHIFT+P(Windows), Command+Shift+P (Mac) and then enter SFDX: Create Lightning Web Component.
3. It will ask for the desired directory, Just press enter
4. Then enter your Lightning Web Component Name. Please use camelCase for Lightning Web Components.It’s the best practice.
5. Let’s see your Lightning Web Component under “lwc” folder.
LWC bundle contains an HTML file, a JavaScript file, and a metadata configuration file as shown in the below image and these files are created once we create a Lightning web component.
Step #4: Now, Lightning Web Component created. Let’s see how to use Lightning Web Component.
HTML Code:helloWorld.html
Hello, {greeting}!
<lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
JS Code: helloWorld.js
import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
@track greeting = 'LearnFrenzy World';
changeHandler(event) {
this.greeting = event.target.value;
}
}
XML Code: helloWorld.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?><apiVersion>45.0</apiVersion> <isExposed>true</isExposed> lightning__AppPage lightning__RecordPage lightning__HomePage
Step #5: Finally, deploy your component into Developer Org.
Step #6: Go to your Developer Org.
-> Click App Launcher Icon and then Select Sales App.
->Then Click at Setup Icon and select edit page.
->Then Drag “helloWorld” Component at pageLayout. After that, click at Activation and choose "OrgDefault".Next, Activate.
MIND IT !
Domain is enabled in your Org. Else Custom Component will not be visible in your Org.
->Enable the domain in your developer org.
Here is your first Lightning Web Component.
(1) Comments
Brilliantly explained article.