Introduction, component Lifecycle, Events, decorators and todo recipe

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

2. 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

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

4. Web Stack Journey

5. 2014 Web Stack 2019 Web Stack

6. Lightning Web Components Stack

7. Fundamentals

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

9. 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.

10. HTML TEMPLATE
The power of Lightning Web Components is the templating system, which uses the virtual DOM to render
components smartly and efficiently.
<!-- helloConditionalRendering.html -->
<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>

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

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

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

14. 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

15. 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

16. Components
Communication

17. 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.

18. Flow Data in component Hierarchy
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.

19. Flow Data in component Hierarchy
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

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

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

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

23. 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

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

25. 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

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

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

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

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

30. Q & A

31. Thank You !!