AKH Coding Class: Lightning Web Component (LWC).

What is Lightning web component?

Lightning web component is a new framework to create Lightning Component and is a custom HTML elements built using HTML and modern JavaScript.

Advantage :

Low custom code is required as LWC is built on web standards for almost all of the code involved.
No more static resource is required. You can write reusable component (comp-1) that has no UI and then export it (comp-1) to use it (comp-1) by another component (comp-2) and to use the export component (comp-1), just import it from another component ((comp-2) .
In LWC less apex needs to write and hence calling apex is less painful experience.

Difference between Lightning Component and Lightning Web Component?

The main difference is that Lightning Component is built on open source aura framework, where LWC is built on standard web technologies like HTML, modern JavaScript, CSS, XML etc.
There is no import/export functionality in Lightning Component, but in LWC support import/export feature which reduce use of static resource and increase use of reusable component.

What you need to know before start LWC?

SFDX.
Visual Studio.
Web Component.

UI part of LWC is implemented by HTML, but Salesforce Org don't support HTML, then how its work?

We can't create LWC component using Salesforce Developer Console. To create it we generally use Visual Studio IDE and use SFDX for deployment. So, when we create LWC component using Visual Studio it will create a bundle which contains HTML, JS, XML and CSS (by default).
Next step is to deploy that component in a Salesforce Org. While deploying that bundle in any Salesforce Org, Salesforce internally handle all the source code and expose only that component's name to use by user.

Web Component:
Web Components is used to create REUSABLE CUSTOM ELEMENTS. Web Component is basically consists of 3 main technologies,

HTML Templates,
Custom Elements,
Shadow DOM

1. HTML Templates:

HTML Templates is allow us to write markup under <template> tag.

Ex. Create a html file say <index.html> and use <template> tag as below,

<template>
 <p>I am under HTML template tag.</p>
</template>

Now, execute/run this <index.html> in browser.

What is display in browser?

Expected Result: As per above html context browser should show "I am under HTML template tag." as a paragraph format.
Actual Result : Blank page. No content :(

Why browser is not showing anything?

Contents/Markup implemented under <template> tag will not rendered automatically. Actually the contents under template tag are not rendered in the DOM.
This <template> tag is part of HTML5 and is very powerful tag. This can be reused number of times (reusable) as the basis of a custom element's structure.

So, how to display the content in browser?

This template should be initiated by a JavaScript.

Example: Used the above <index.html> under a folder and modify it with a template Id as shown below,

<template id="myTemplate">
 <p>I am under HTML template tag.</p>
</template>

Now under same folder create a JavaScript file say named as "myJs.js" and fetch the template reference by template id and append it to the DOM.
Below are the sample JS code.
Example.

// newer feature
function loadTemplate1(){
 var template = document.querySelector("#myTemplate");
 var cloneTemplate = template.content.cloneNode(true);
 document.body.appendChild(cloneTemplate);
}

//older feature
function loadTemplate2(){
 let template = document.getElementById('myTemplate');
 let templateContent = template.content;
 document.body.appendChild(templateContent);
}

Now again modify the <index.html> to load the JavaScript.

<script src="myJs.js"></script>

<body onload="loadTemplate1();">
   <template id="myTemplate">
     <p>I am under HTML template tag...</p>
   </template>
</body>

Finally execute/run this index.html and it will display "I am under HTML template tag." as a paragraph format.

2. Custom Elements

This is the second part of Web Component. Here we can create our own tag and then we can use it in HTML. To build custom element, here we will use the above index.html and myJs.js file.
Suppose we want to create a custom tag named as "my-custom-tag" and want to use it under index.html. Now for simplicity let say this tag only display some string message.

So, the html is look as below,

<script src="myJs.js"></script>

<body onload="loadTemplate1();">
 <template id="myTemplate">
  <p>I am under HTML template tag...</p>
  
  <my-custom-tag></my-custom-tag>
 </template>
</body>

Now we have to create custom tag named as "my-custom-tag" under myJs.js file and the js will be as follows,

// newer feature
function loadTemplate1(){
 var template = document.querySelector("#myTemplate");
 var cloneTemplate = template.content.cloneNode(true);
 document.body.appendChild(cloneTemplate);
}

//Create a class that extends out of the box HTMLElement class.
class MyCustomTag extends HTMLElement{
 constructor(){
  super();
  
  this.innerHTML = '<p>This Message is coming from my custom tag.<p>';
 }
}

//Now define your custom tag logic under a user friendly tag.
customElements.define('my-custom-tag', MyCustomTag);

After execute/run the index.html, it will display below contents in browser.

I am under HTML template tag...

This Message is coming from my custom tag.

3. Shadow DOM

Encapsulation is an important aspect of web components. Shadow DOM can encapsulate the behavior (markup, style etc.) from main DOM.
Let take an example, take the previous example describe under Custom Element section. So, here we have 2 files index.html and myJs.js.
Under html we are using a paragraph (<p>) tag and in js file we are also using a paragraph (<p>) while creation of custom elements (my-custom-tag).

Now we want to show all paragraph contents with RED color. So, what we have to do? We have to create a CSS file (myCss.css) where we mentioned paragraph color as RED and the total code base will look like below,

index.html

<script src="myJs.js"></script>
<link rel="stylesheet" href="myCss.css">

<body onload="loadTemplate1();">
 <template id="myTemplate">
  <p>I am under HTML template tag...</p>
  
  <my-custom-tag/></my-custom-tag>
 </template>
</body>

myJs.js

// newer feature
function loadTemplate1(){
 var template = document.querySelector("#myTemplate");
 var cloneTemplate = template.content.cloneNode(true);
 document.body.appendChild(cloneTemplate);
}

//Create a class that extends out of the box HTMLElement class.
class MyCustomTag extends HTMLElement{
 constructor(){
  super();
  
  this.innerHTML = '<p>This Message is coming from my custom tag.<p>';
 }
}

//Now define your custom tag logic under a user friendly tag.
customElements.define('my-custom-tag', MyCustomTag);

myCss.css

p {
  color: red;
}

Output (red color):

I am under HTML template tag...

This Message is coming from my custom tag.

Here we have to note that we have a common CSS (myCss.css) file, which will made all paragraph's content as RED color.
Now, if we use style (paragraph color as BLUE) under custom elements, then as per Shadow DOM feature it will encapsulate main DOM RED color for paragraph.
So, result will RED color for "I am under HTML template tag..." and BLUE color for "This Message is coming from my custom tag.".

myJs.js

// newer feature
function loadTemplate1(){
 var template = document.querySelector("#myTemplate");
 var cloneTemplate = template.content.cloneNode(true);
 document.body.appendChild(cloneTemplate);
}

//Create a class that extends out of the box HTMLElement class.
class MyCustomTag extends HTMLElement{
 constructor(){
  super();
  
  this.innerHTML = "<p style='color:blue'>This Message is coming from my custom tag.<p>";
 }
}

//Now define your custom tag logic under a user friendly tag.
customElements.define('my-custom-tag', MyCustomTag);

Output:

I am under HTML template tag...

This Message is coming from my custom tag.

AKH Coding Class

Thursday, May 9, 2019

Lightning Web Component (LWC).

LWC to LWC Communication using Lightning Messaging Service (Part - 2)