LWC Flashcards
What is lwc?
UI framework built using html, modern Javascript. Uses core web standards. runs natively on browser which in turn makes it light weight and perform faster(load, render faster and responsive)
Benefits of lwc?
- up to date with current web standards
- runs natively on browser hence faster(no compilations or abstractions)
- transferable skill
- coexist with aura
Files in LWC/folder structure in LWC?
MyComponent.html - frontend
MyComponent.js - client side backend
MyComponent.js-meta.xml - configuration
MyComponent.css
What is lwc module?
lwc framework follows module structure. So lwc is a core module which is extended by every lwc component. It provides with lifecycle hooks, decorators, etc.
Named vs default exports
Named exports can be many in a single file and while importing their names need to match in both places. For that just write export in front of that function. It’s opposite happens in default exports.
LWC js file is a default export
xml file basic attributes?
apiVersion - salesforce api version
isExposed - is component exposed to lightning app builder or lightning experience builder
targets - target -
lightning_HomePage,
lightning_AppPage,
lightning_RecordPage,
lightning_ScreenFlow,
lightning_Tab
Can aura component have lwc? and vice versa
Yes. No
camel case vs kebab case
name of properties/folder/components - camel case, while including a component in the html - kebab case prefixed with namespace or default namespace(i.e.) c
myComponent, MyComponent, c-my-component
What are decorators?
They modify behavior of properties and functions.
@api, @track, @wire
field vs property
interchangeable but to define, field is wrt class and property is wrt the instance of that class
@api
- marks a property public
- public properties can be assigned value in
html markup by parent component - public properties are reactive (all
properties are reactive in newer releases)
What is reactive?
A change in value of property makes the component re render as it is observing it. With new release all properties are reactive
@track
make an element of array or property of object reactive
@wire
Provision of immutable data from salesforce to component. caches. To mutate that data copy of it needs to be made on which mutations happen
Conditional rendering?
- <template if:true={data}></template>
- <template if:false={data}></template>
List rendering?
- <template for:each={contacts} item=’contact’>
- <li key={contact.id} value={contact.name}></li>
- </template>
expression in lwc
<template>{propertyName}</template>
.js
@api propertyName
declared in js and used in html
in case of aura properties declared in html and assigned in js
Which annotation is used to expose an apex method to lwc?
@AuraEnabled(Cacheable=true)
When is cacheable=true mandatory?
When apex method called by wire adapter. The returned list is cached.
What is caching?
Storing data in browser cache so as to make less server calls.
Can cacheable=true used for imperative apex calls?
Yes but then the returned data becomes immutable
Types of calls in lwc?
wire and imperative
What are lifecycle hooks?
LWC provides methods which allows to hook code at different stages of lifecycle of lwc.
List lifecycle events and hooks
-component created - constructor() - parent to child
-inserted in DOM - connectedCallback() - parent to child
-rendered - render(), renderedCallback() - child to parent
-error occured - errorCallback() - parent to child
-removed from DOM - disconnectedCallback() - parent to child
best resource - https://www.sfdcstop.com/2023/08/lifecycle-hooks-in-lwc.html
Lifecycle flow?
- Constructor called on parent
- parent public properties assigned
- parent inserted into DOM
- connectedcallback() called on parent - initialization tasks like fetch data, update cache or listen to events happen here
- parent rendered
- constructor called on child
- child public properties assigned
- child inserted into DOM
- connectedCallback() called on child
- child rendered
- renderedCallback() called on child
- renderedCallback() called on parent
- if error occurs errorCallback() on parent
- component removed
- parent disconnectedCallback() - remove listeners
- child disconnectedCallback()
or
parent private properties assigned
parent constructor
parent public properties assigned
parent connected callback - get initial data from server / listen for events
child private properties assigned
child constructor called
child public properties assigned
child connected callback
child rendered callback
parent rendered callback
parent disconnected
child disconnected
render() use
render component dynamically or conditionally
Is rederedCallback() called once? can be called once?
No, called every time a component renders. Yes, we can limit it to be executed once
When should setter used instead of connectedCallback() for assigning value to a property?
When the component derives it’s state from that property dynamically. / you want some logic to execute whenever that property changes
data of a contact based on contactid
refer lifecycle hook doc for clarity
Can connectedCallback fire multiple time?
it’s called only once in a lifecycle but if the case is of reordering list by removing and reinserting element that multiple calls happen.
api, dom, html, xml, json full form
Applicaion programming interface - interface for give and take of data
document object model - defines structure of elements in browser
hypertext markup language - defines structure of elements
xtensible markup language - defines structure of data
javascript object notation - defines structure of data
LDS. LMS
lightning data service
lightning message service
Ways of working with salesforce data?
- LDS
- lightning base components
- lightning-record-form
- lightning-record-view-form
- lightning-record-edit-form
- lightning uiapi modules
- uiRecordapi
- uiObjectapi
- uiAppapi
- lightning base components
- Apex
What is LDS?
Plays role of intermediate between salesforce and browser.
diagram
- browser/client
- LWCs
- LDS
- Salesforce/server
- user interface api
- database
cache system of LDS
The records loaded in LDS are cached on the browser and shared across all components. LDS does timed interval caching. and reloads cache if data becomes invalid or refreshed in between the time window.
Why to import salesforce reference objects and fields?
-Salesforce verifies if object and field exist
-If object or field name is renamed then the code doesn’t need to be updated.
-The references doesn’t allow deletion of fields and objects until they are dereferenced inside the code.
how to import references to objects and fields?
import POSITION_OBJECT from ‘@salesforce/schema/Position__c
import LEVEL_FIELD from ‘@salesforce/schema/Position__c.level__c
same for standard and custom fields but without __c.
import POSITION_HIRINGMANAGER_NAME_FIELD__c from ‘@salesforce/schema/Position__c.HiringManager__r.Name__c’;
import ACCOUNT_OWNER_NAME_FIELD from ‘@salesforce/schema/Account.Owner.Name’;
3 relationship fields allowed, i.e. 4 objects
How to get current recordid in salesforce?
@api recordid. The flexipage containing component sets this public property to record id.
Can we communicate between aura and lwc?
Yes
If aura contains lwc then
-aura can set public properties of lwc and using component.find(‘elementid’).public_function_of_lwc it can access lwc’s public functions
-lwc can dispatch custom events to aura with the data attached to detail property.
sharing a javascript file
if they are unrelated then LMS-lightning message channel or platform events can work
Details on lifeycle hooks? read if needed
https://knowledgepredator.wordpress.com/2020/06/14/life-cycle-hooks-in-lightning-web-components/
imperative vs wire apex calls
wire called when component loads
imperative execute on demand
What is one way and two way binding?
this is in context to parent and child component
In one way binding only parent can make changes to child properties, reverse not allowed. Child has only read only access to parent properties, in lwc.
in two way binding two ways changes can take place.
In context of html and js
in one way binding - only js can make html changes, html changes can’t make js changes
In aura, using bounded expression it is achieved, {!v.variable}, {#v.variable}-unbounded
which binding lwc and aura have?
aura - two way
lwc - one way
pro and con of one way binding?
pro - more control over flow of data
con - need to write more code
Can we make the Wire method to refresh forcefully and bring fresh data from server?
Yes, using refreshApex method
refer docs for more if needed
How can we communicate from parent component to child component in LWC?
How can we pass data from parent component to child component in LWC ?
Can we call child Component method from parent in LWC?
access public property and function of child lwc.
set property in html template
access function using this.template.querySelector(‘c-child-component’).functionName() inside js of parent
How can we communicate from child component to parent component in LWC ?
By dispatching cuatom events from child js to which parent is listening in html
this.dispatchEvent(new CustomEvent(‘add’,{detail: 3});
<c-child-component onAdd = {parentfunction}></c-child-component>
How can we communicate between unrelated components in LWC?
old pubsub model
LMS - lightning message service/channel
How pub sub in LWC work?
there is a pubsub.js file that needs to be included in the lwc directory
use it’s methods in publisher and subscriber components
How LMS work?
create a messageChannels folder in main/default
inside that create .messageChannel-meta.xml file having all the data properties defined
write respective code in publisher and subscriber components
refer doc for code, if needed
LMS vs pubsub
LMS enables any component to communicate with each other across any page.
Can we include more than one JavaScript file in LWC Component?
Can we include more than one HTML file in LWC Component?
yes in both cases
How to include LWC Component inside VF Page?
We can include our lwc component inside aura component. Then use lightning out feature to include that aura lightning component inside VF page
match aura and lwc file structure
file.cmp - file.html
fileController.js - file.js
fileHelper.js - file.js
fileRenderer - file.js
file.design - file.js-meta.xml
file.css - file.css
developer requirements for LWC
salesforce DX
salesforce CLI
VS code with salesforce extension
Steps for creating and deploying lwc project
in vs command palette SFDX: create project, provide namespace or keep default
right click main/default and SFDX: create LWC
in command p. SFDX: authorize org
right click on lwc component and SFDX:deploy to org
add component using lightning app builder and activate it
Development choice between lwc aura
If completely new functionality required then create lwc
if revamp existing aura them it’s child components also need to be migrated
if aura is needed them make them communicate
