- Web Components
- Templates
- Custom Elements
- Shadow DOM
- Metadata
- ECMAScript 7
- Events
- Standard Elements
- Rendering
ECMAScript LWC Compatibility :
It's a language standard for developing lightning web components, It uses ECMAScript 6 and above. This language currently supports all the latest web browser like Apple Safari, Google Chrome, Microsoft Edge.
Now, Let's talk about the important javascript standards and changes you need to before starting with Lightning Web Components.
1. Decorators
2. DispatchEvent and CustomEvent
3. QuerySelectors
4. Import/Export
5. Spread Notation
6. Slots
7. Promises
8. String Interpolation + Let/Const
Let's discuss all these standards
1. Decorators :
Decorators tell the compiler that specific thing you need to do with the code. Just like in Aura components we use @AuraEnabled in apex code. These decorators are also called as a magic placeholder.
Decorators we can use for LWC components are :
@track :
- As this helps you to communicate inside your components (no communication of values from this component), Hence this is called private reactive property.
- The @track tells to your compiler that you need to watch between backend code and frontend activity. For Example: whenever there are changes made you need to update the front end and then you need to update that frontend variable.
- Let's consider a simple example, When I am adding two numbers as variable a + b and result at c. As soon as I update or change the input of a and b we need to perform the calculation in the backend and update the frontend result in c.
@api :
- It Means whenever you are developing a code its a private by default and if you want to make it public so that other things and call and reach into it, You can put @api decorator. Hence it's called public reactive property.
@wire :
- It is a reactive service for data.
- It is used to connect functions and variables to data.
These decorators are very important while implementing salesforce lightning web components.
2. DispatchEvent and CustomEvent :
- These DispatchEvent are also part of web standards.
- These events can be raised from Child to Parent.
- Very important about these events it the event will be preceded by putting Name of the event with 'on', Hence it is recommended not to write 'on' along with your event name because you are already using onchange keyword inside your markups as onchange handler.
SYNTAX :
childCmp.js
-----------------------------------------------------
const changeEvent = new CustomEvent('change', {detail: this.roles});
this.dispatchEvent(changeEvent);
-----------------------------------------------------
parentCmp.html
-----------------------------------------------------
<c-role-filter onchange={handleRoleChange}>
</c-role-filter>
-----------------------------------------------------
as you can see the onchange handles the change event in the top childCmp components. Of course for passing the values between these components we will also in @api decorators in our code.
3. QuerySelector :
As we have already worked with client-side javascript in lightning components, where we used Document.getElementById, But sorry It will not work for you in LWC due to security issues.
Hence instead of Document.getElementById as per new web standards, they introduced QuerySelector for LWC.
Let's consider an example :
card.html
---------------------------------------------------
<template>
Hey ! Welcome to this free salesforce learning platform called: {name}
</template>
---------------------------------------------------
- Defined card inside the template in markup
card.js
---------------------------------------------------
import { api, LightningElement } from 'lwc';
export deafult class card extends LightningElement {
@api
name = "Salesforce Vikas";
}
---------------------------------------------------
- with @api defined value of name as 'Salesforce vikas'
cardContainer.html
---------------------------------------------------
<c-card></c-card>
---------------------------------------------------
- Called that card component inside cardContainer component markup.
cardContainer.js
---------------------------------------------------
let card = this.template.querySelector("c-card");
card.name = "SFVIKAS";
---------------------------------------------------
- Inside controller with querySelector get the c-card component.
- Then from that card variable reassigned the value as "SFVIKAS"
OUTPUT :
---------------------------------------------------
Hey ! Welcome to this free salesforce learning platform called: SFVIKAS
---------------------------------------------------
- Hence the final output will be with the latest value as SFVIKAS. Cool right ? 😎
4. Import/Export (ECMAScript 6) :
This is the file source to help you to use external helper functions and use it here just like a libraries.
You can also use your own libraries, not just LWC imports. This is just a pulling outside javascript library inside lwc component.
Like for example when we want to use api, track then we use the syntax as follows:
---------------------------------------------------
import {LightningElement, track, api} OR
//for importing apex class functions
import getAccountList from '@salesforce/apex/accController.getAccountList';
//for importing from external library
import { flatten } from 'c/jsUtils' ;
---------------------------------------------------
As well as whenever you want to export a single variable or a function then we use export syntax as follows :
---------------------------------------------------
export function flatten(obj, prefix=[], current={}) {......}
---------------------------------------------------
5. Spread Notation (ECMAScript 9) :
- This spread notation is a way of explicitly copying data from one array into another when we are using it.
- It can also be used to recreate array, which updates @tracked variable.
- Spread actually splited the frontend thing when copying values from one array to other.
SYNTAX :
---------------------------------------------------
this.data = [...result1, ...result2];
---------------------------------------------------
'...' are used as a spread notation
6. Slots :
- Slots is also another web standard.
- It allows HTML to be passed to the component.
Let's understand this with an example :
Consider a first greeting component :
greeting.html
---------------------------------------------------
<template>
He is from: <slot name="country"></slot>
We called him: <slot name="name"</slot>
</template>
---------------------------------------------------
In another component define the values.
greetingContainer.html
---------------------------------------------------
<c-greeting>
<span slot="country"> India </span>
<span slot="name"> Salesforce Vikas</span>
</c-greeting>
---------------------------------------------------
OUTPUT :
---------------------------------------------------
He is from: India
We called him: Salesforce Vikas
---------------------------------------------------
So its simply push your content inside using slots.
7. Promises :
- If you think data communication 'Synchronously' then this is for you.
- It is nothing but wait for the things to come back and when it will come back then do something with them with this approach it promises that it will wait for the things to come back.
- It represents eventually completion and failure of the task.
- It uses .then() .catch() .finally() to handle promise result.
- This is just like lightning component that what to do with a response like if success then what to do and if its error then what time we can use it.
Let's understand with an example :
----------------------------------------------------
let vikasPromise = new Promise(function (resolve, reject){
setTimeout(function(){
resolve('Happy learning');
}, 2000)
});
---------------------------------------------------
---------------------------------------------------
vikasPromise.then(function(result){
console.log('Salesforce said:' + result);
}).catch(reason => {
console.log('Promise rejected:' + reason);
});
//Console result will be :
//Console > Salesforce said : Happy Learning
---------------------------------------------------
NOTE: If there are multiple promises then we use Promise.all to handle multiple promises.
The above syntax is as per ECMAScript 6 for a higher version like ECMAScript 8 the syntax is quite different as it supports Async/ Await. But the concept remains the same.
8. String Interpolation (ECMAScript) + Let/Const
In lightning AURA components, we have used concatenation lot of time to join multiple strings. But now we need to change something in the lightning web component.
For Example :
---------------------------------------------------
console.log('string1'+'string2'+'string3');
---------------------------------------------------
Now we need to change our habits and learn something called interpolation.
Let's understand with the help of an example :
---------------------------------------------------
function favouriteBlogs{
let firstBlog = 'Salesforce Official';
const secondBlog = 'Vikas singh Salesforce ';
//Please observe the string Interpolation below
console.log('My favourite blogs are ${firstBlog} and ${secondBlog}');
}
---------------------------------------------------
As you can observe in the above code we need to just use ${firstBlog} instead of maintaining '+' signs.
Let/Const :
Of course, we are familiar with var in Javascript before, but fortunately/unfortunately now we need to use Let/Const.
Let :
- Whenever you want to reassign the value for any variable then we will define with Let variable.
- It also signals that the variable will be used only in the block it's defined in, which is not always the entire containing function.
Const :
- Whenever you use const then the identifier won't be reassigned further. The value will remain constant.
