Andy Tran

Lightning Web Components

by | 19 Jan, 2022 | Salesforce | 8 comments

Lightning Web Components in Salesforce

The Lightning Web Components framework is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client-side and Apex on the server-side.

There are two Programming models to create Lightning Component:

    • Lightning Web Component
    • Aura Component

We will learn about Lightning Web Components in this blog.

Delve into the Depth of Lightning Web Components

Lightning Web Components (LWC) are custom pages that are created using custom HTML elements made using HTML, CSS, and modern JavaScript. It is create ECMAScript Version 7 and uses modern web standards which makes it perfect for modern rich UI implementation. Web standards have a set of functionalities of native browsers like Shadow DOM, Custom Elements, and many more.

To achieve better component performance LWC uses fewer Frameworks and more web stacks because the framework is heavy.

Lighting Web Components

To create and develop LWC we need to set up salesforce DX. Salesforce DX is a set of tools and features that improve the efficiency of development during the application lifecycle. With this tool, development teams can easily work with command-line interfaces (CLIs) or integrated development environments (IDEs).
Unlike Aura Components, developing LWC components in the developer console is not possible. We need to write it locally and then push it to our org. For that, we can use tools like Visual Studio Code(VS Code), Salesforce Command Line Interface.
Install VS Code and set it up for Salesforce Development follow this Trailhead module.
LWC Component Structure
HTML, CSS, JS, XML file name should be similar to the component’s name, CSS file is optional.

Lightning we component screen

Let’s take a look at these files:
HTML
<template> as the root tag” title=”<template> as the root tag”/></p>
<ul>
<li style=

  • The HTML file has <template> as the root tag and all our HTML code will add inside the tag.
  • Templating system helps LWC to Manipulate the DOM. After the rendering process, the <template> tag is change with the name of the component i.e. <namespace-component-name>
  • The above component with the name lightningWebComponent will render as shown below.

search lightning web component

Lightning web component markings
JavaScript
Lightning web component Javascript

LightningElement is a base class for LWC, without extending the LightningElement class we can not create JavaScript Class and it allows us to use the life cycle hook’s methods to manage the component’s life cycle. It also supplies a JS controller for our component.
The export default keyword exports the class for other components to use.
XML File
Lightning web component XML file

XML file is metadata of components, it includes metadata values for the component, including targets and the design configuration for the Lightning App Builder and Experience Builder. Filename must be <component’s Name>.js-meta.XML.
To allow the component to be used in Lightning App Builder or Experience Builder, set <isExposed> to true and define at least one <target> tag, which is a type of Lightning page.

Decorators in Lightning Web Components
Decorators are part of ECMAScript, LWC has three decorators that add functionality to property or function. A property or function can be decorated with only one decorator at a time.
@api
It exposes public property. And public properties are reactive in nature means that when the value of property changes it re-renders the component.
To use @api decorator we need to import it from the lwc. Line number 4 in the image below shows how we can expose the message field as a public property.

To use @api decorator

We are using this public property ‘message’ as a value of the input tag in the HTML file.

using this public property 'message'

We can set the value of message public property from the Parent component like shown in the below image:
Setting this public property 'message' title=

Message from parent component
@track
The track is a decorator which makes variable reactive, meaning if the value of variable changes it triggers the component to rerender. It tells the framework to keep track of changes to the elements of Array or properties of an object.

track is a decorator
@wire
The wire is used to fetch and read the Salesforce Data. Wire service is used by LWC and when the fetching data process is done then the component re-renders.

Click here to know more about Salesforce.

Also Read: LWC : Share Data Between Parent and Child Components

Share this article...

8 Comments

  1. Krunal

    Thank you for giving this useful knowledge. It was quite beneficial to me. Keep up the good work!

    Reply
  2. Ayush

    Thank you for sharing this wonderful post. I like the way you explain the LWC Basics.

    Reply
  3. Ayush

    Thank you for sharing this wonderful post. I like the way you explain the Basics of LWC.

    Reply
  4. Rakesh Keshri

    Being new to the Salesforce Environment, and exploring LWC components, this particular blog helped me alot, Good work! Keep it up 👍🏼

    Reply
  5. Merajul Haque

    “Great share!”

    Reply
  6. Jayant sharma

    Thank you sharing for this great post. #SALESFORCE

    Reply
  7. Nikhil

    Thank you very much for sharing your knowledge with us , this blog helped me alot to understand basics of LWC.

    Reply
  8. Nikhil

    Thank you for sharing your knowledge with us , This blog helped me a lot to understand basics of LWC

    Reply

Trackbacks/Pingbacks

  1. Lifecycle Hooks in LWC - Erudite Works - […] for reading so far. Also Visit this link to read a Blog on Basics of […]

Submit a Comment

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.