LWC Fundamentals – Know About LWC

We had aura component to develop applications for lightning experience and it was solving the requirements so why do salesforce introduce LWC i.e. Lightning Web Components

Well, Salesforce keeps on evolving to a better version and in this pursuit, they keep on innovating and bringing awesome and optimized things to the table.

Initially, we used to have visual force pages for developing user interfaces in the classic mode then we got aura component to developing user interfaces for the Lightning Experience. Now with the introduction of LWC, we are again going to see a much better and optimized way to design and build user interfaces on Salesforce.

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.

If you wanted to know about custom HTML elements then here is a great article to read about it – https://javascript.info/custom-elements

LWC Performance:

LWC is lightweight and has amazing performance.

If you inspect a page containing aura components you will be seeing that aura components tags were translated back to native HTML tags. However, this is not the case with LWC. If you inspect a page containing LWC components you will be seeing their tags only as they are custom HTML elements.

Shadow DOM:

Before proceeding further please get yourself familiar with the concept of shadow DOM by reading – https://javascript.info/shadow-dom

Assuming you have read by now about shadow DOM and know about it. Just to summarize Shadow DOM is a way to create a component-local DOM. It is used for encapsulation. Encapsulating the DOM gives developers the ability to share a component and protect the component from being manipulated by any other HTML, CSS, and JavaScript

Lightning Web Component Folder Structure:

Lightning Web Component has the following folder structure as shown in the below diagram. We will cover each one by one.

Lightning Web Component HTML File:

Every UI component must have an HTML file with the root tag <template>.

The HTML file follows the naming convention <component>.html, such as myComponent.html.

Create the HTML for a Lightning web component declaratively, within the <template> tag. The HTML template element contains your component’s HTML.

<!-- myComponent.html -->
<template>
    <!-- Replace comment with component HTML -->
</template>

Lightning Web Component Javascript File:

The JavaScript file follows the naming convention <component>.js, such as myComponent.js.

Every UI component must include a JavaScript file with at least this code.

import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {

}

JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local—it’s scoped to the module.

In case you wanted to know the core concepts of ES6 modules and what is the big deal with import and export statements then feel free to refer to this great article – https://javascript.info/modules

Lightning Web Component Configuration File:

The configuration file defines the metadata values for the component, including supported targets and the design configuration for Lightning App Builder and Experience Builder.

The configuration file follows the naming convention <component>.js-meta.xml, such as myComponent.js-meta.xml.

Include the configuration file in your component’s project folder, and push it to your org along with the other component files.

Every component must have a configuration file otherwise you will get an error when you push your changes.

Here is a simple configuration file:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

Here is the reference for the complete list of elements available in the configuration file – XML Configuration File Elements

Lightning Web Component CSS File:

To style a component, create a style sheet in the component bundle with the same name as the component. If the component is called myComponent, the style sheet is myComponent.css. The style sheet is applied automatically.

Lightning Web Component SVG Icon:

A component can include an SVG resource to use as a custom icon in Lightning App Builder and Experience Builder.

To include an SVG resource as a custom icon for your component, add it to your component’s folder. It must be named <component>.svg. If the component is called myComponent, the svg is myComponent.svg. You can only have one SVG per folder.

Create Lightning Web Component Using VS Code:

Please go through this post to create your first lightning web component – Create LWC Component Using VS Code. If you already know this then feel free to skip this 🙂

Lightning Web Component Example:

Here we would be updating the helloLWC component which we created earlier – Create LWC Component Using VS Code.

Update the helloLwc.js with the following code:

import { LightningElement } from 'lwc';

export default class HelloLwc extends LightningElement {
    welcomeMessage = "Hey! Welcome to SalesforceBlue :)"
}

Update the helloLwc.html with the following code:

<template>
    <lightning-card>
        <p class="slds-p-horizontal_small">
            {welcomeMessage}
        </p>
    </lightning-card>
</template>

Update the helloLwc.js-meta.xml with the following code:

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

In the configuration file helloLwc.js-meta.xml notice we have marked isExposed to true and have added the target element which makes this component visible to be added to different lightning pages.

Add this created helloLwc component to the lightning home page. If you wanted to know how to add components to the lightning page then refer to this – Using Lightning App Builder

Open the home page and view your helloLwc component smiling there 🙂

Referring to Lightning Web Component Inside A Parent Component (LWC):

Camel case component folder names map to kebab-case in markup. In this post, we have created the component folder name as helloLwc so to reference this component inside a parent lwc component, use <c-hello-lwc>. Here c is the default namespace.

<-- parentLwc.html -->
<template>
    <c-hello-lwc></c-hello-lwc>
</template>

Thus, we will be wrapping up the LWC fundamentals here. More LWC core concepts and exciting stuff are shared in the next posts. Feel free to check and learn 🙂

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂