Lightning web components - Introduction, component Lifecycle, Events, decorators and todo recipe

Lightning Web
Components
Nidhi Sharma
Associate Tech Lead & Scrum Master
Metacube Software Pvt. Ltd.

Agenda
● What is Lightning Web Component?
● Journey of Web Stack and its evolution
● Fundamentals of Lightning Web Component
● Component LifeCycle Hooks
● Components Inter-Communication
● To-do-list recipe

What is Lightning Web Component?
Lightning Web Components are custom HTML elements built using HTML and
javascript.

Lightning Web Components Stack

HTML FILE
CSS FILE
CONFIGURATION
METADATA FILE
JAVASCRIPT
FILE
LIGHTNING
WEB
COMPONENT
Lightning Web Components Bundle

HTML TEMPLATE
The power of Lightning Web Components is the templating system, which uses the virtual DOM to render
components smartly and efficiently.
● A template is valid HTML with a <template> root tag.
● When a component renders, the <template> tag is replaced with the name of the component,
<namespace-component-name>
● Bind properties in a component’s template to properties in the component’s JavaScript class by
surrounding the property with curly braces, {property}
● Render DOM Elements Conditionally with if:true|false directive to a nested <template>
tag that encloses the conditional content.

HTML TEMPLATE
The power of Lightning Web Components is the templating system, which uses the virtual DOM to render
components smartly and efficiently.

<template>
<lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<lightning-input type="checkbox" label="Show details"
onchange={handleChange}></lightning-input>
<template if:true={areDetailsVisible}>
<div class="slds-m-vertical_medium">
These are the details!
</div>
</template>
</div>
</lightning-card>
</template>

Component CSS
● Components can’t share style sheets
● Each component can have only one style sheet
● Salesforce Lightning Design System is a CSS
framework

Decorators
@api
➔ Exposes public property.
➔ Owner component can access the
public properties
➔ Public properties are reactive

Decorators
@track
➔ Private reactive properties.
➔ Owner component cannot access
these properties
➔ Rerenders the content of the
component if the property changes.

Decorators
@wire
➔ Read data using wire adapters in
the lightning/ui*Api
➔ Owner component cannot access
these properties
➔ Rerenders the content of the
component if the property changes.
import getContactList from
'@salesforce/apex/ContactController.
getContactList';
@wire(getContactList)
wiredContacts

Component Lifecycle Hooks
Constructor()
Component Instance
Created
connectedCallback()
Component inserted in DOM
renderedCallBack()
Rendering is complete
render()
Component renders
disconnectedCallBack()
Component is removed
errorCallBack
(error, stack)
Captures error in hierarchy

Flow Data in component Hierarchy
Parent
Child
@api child1
Child
@api child2
child-property=’Set me’
child-property =’Set me too’
● Child Components must declare Public API with
@api decorator
● Child Component can assign default value to the
public property but it cannot change the value of
the property.
● Only Parent can set the public property.

Parent
Child1
dispatchEvent
(child1Event)
Child2
dispatchEvent
(child2Event)
Child1Handler
Child2Handler
● Data must be passed up using Events.
● Events are created using the Event or
CustomEvent standard JavaScript classes
● Child components create and dispatch events.
● Parent component handles events dispatched by
child components.

lwc-brother
lwc-sister
● Use singleton library that follows the publish – subscribe pattern
● Salesforce has published such library - pubsub a service component that follows the
pattern
● This type of communication is also used for talking with Aura Components on the
same level.
aura-cousin

Lets cook LWC!!
Recipe - To-do-List

To-do-list
Task:
Desc
Priority
to-do-list
Add Item
to-do-form
to-do-app
Filter by Priority

To-do-List-Components
Task:
Desc
Priority
Add Item
to-do-app to-do-form
to-do-list
Filter by Priority

Ingredients (Tools)
● One - Salesforce CLI - installed
● One - Visual Studio Code - Installed
● One - Salesforce Extension package - Installed
● One - Development org - with enabled My Domain
in Org and DevHub

Seeking Help!!
● Lightning Component Library
● Playground
● TrailHead Sample Gallery
● Build Lightning Web Components
Trail

Preparation (Steps)
1. Create SFDX Project
a. Sfdx force:project:create --projectname toDoForm
b. Select SFDX:Create Project and provide name
1. Create Scratch Org
a. sfdx force:org:create -s -f config/project-scratch-def.json -a "wit"
b. Using VS Code - SFDX:Create a Default Scratch Org Project
1. Create Lightning Web Component
a. sfdx force:lightning:component:create --type lwc -n toDoForm -d force-
app/main/default/lwc
b. Using VS Code - Select SFDX:Create a Lightning Web Component
Project

to-do-form
Task:
Desc
Priority
Add Item
to-do-form
toDoForm
toDoForm.html
toDoForm.js
toDoForm.js-meta.xml

Lets cook (coding time )!!
Task:
Desc
Priority
Add Item
to-do-form

Serving steps
Drag toDoApp Component on the page you want to see your component

To-do-app Recipe is Ready to Serve!!

Lightning web components - Introduction, component Lifecycle, Events, decorators and todo recipe

More Related Content

What's hot

Similar to Lightning web components - Introduction, component Lifecycle, Events, decorators and todo recipe

Recently uploaded

Lightning web components - Introduction, component Lifecycle, Events, decorators and todo recipe