Lightning Web Components

Question 1

Lightning Web Components Open Source vs. Lightning Web Components (On Platform)

Answer 1

1. Feature Availability - OSS will get access to features sooner because of the release schedule. And also because of the integration with the Salesforce that needs to be developed.

• LWC OSS - updates once a week
• LWC - 3 updates a year

2. Development Environment

• LWC OSS - no prefered environment
• LWC - Salesforce Extention Pack for VS Code + Salesforce CLI

3. Custom Componenet Namespace

• LWC OSS - ability to control namespaces
• LWC - created in default c namespace

4. Standard Components

• LWC OSS - no access by default to standard components
• LWC - access to all components

5. SLDS

• LWC OSS - don’t include SLDS by default
• LWC - no prior setup needed

6. Working with Salesforce Records

• LWC OSS - make use of Salesfor API
• LWC -

Question 2

What are the requirements for a web component bundle (for a visible element)?

Answer 2

Meta XML file

HTML template

Javascript module

Question 3

What is a Meta XML file?

Answer 3

• includes information about the API version they should be used with
• determines where within our org that component can be surfaced

Question 4

What are template directives?

Answer 4

template directives allow us conditionally render markup (if:true and if:false) or to iterate through collections, rendering markup for each element of the collection (for:each and iterator)

Question 5

How can we data bind or action bind?

Answer 5

we can data bind or action bind by surrounding the variable name in our HTML template with curly braces to bind it to a property or method within the component’s JS moduonle

onchange={handleChange}

Question 6

How do we instantiate a lwc inside of another?

Answer 6

to instantiate a component inside of another, we follow the kebab case naming convention with the format

Question 7

What does the Shadow DOM do?

Answer 7

it implements encapsulation so that the inner content of a component cannot be accessed by entities outside of the component bundle by default

Question 8

What are the three LWC Decorators that come with the framework?

Answer 8

• @track
• @wire
• @qpi

Question 9

What is the @track decorator?

Answer 9

• allows us to make objects and arrays in our JS reactive
• this means that our component will automatically rerender whenever the contents of a collection with the track decorator is changed

Question 10

What is the @wire decorator?

Answer 10

• allows us to have the framework handle the invocation of methods from our org or other external services

Question 11

What is the @api decorator?

Answer 11

• we’ll apply the @api decorator to any variable or method within our JS class that we’d like to expose publicly

Question 12

Lightning Web Component Lifecycle for Composed Components

Answer 12

1. Invoke constructor connected callback on the parent
2. Then we go all the way down to any children constructor and invoke the connected call back on them
3. only when the rendered callback has been invoked on all children of a particular component do we have it invoked on the parent component itself
4. and then we use the disconnectedCallback() whenever we are removing a component from the DOM

Question 13

What is a constructor()?

Answer 13

• the constructor() callback is invoked when a component is instantiated

Question 14

What is a connectedCallback()?

Answer 14

invoked whenever a component is inserted into the DOM

Question 15

What is a renderedCallback()?

Answer 15

invoked whenever a component is rendered

Question 16

What is disconnectedCallback()?

Answer 16

invoked whenever the component is removed from the DOM

Question 17

What is errorCallback()?

Answer 17

invoked whenever we have some sort of exception occur within a child component

Question 18

What handles the Client Side Security?

Answer 18

• client-side security is taken care of for us through Lightning Locker
• lightning locker allows the LWC framework to wrap each component in its own shadow tree

Question 19

What is the order of preference for working with Salesforce data?

Answer 19

1. Use standard components from the Lightning Component Library with Lightning Data Service
2. Use wire adapters with Lightning Data Service
3. Use wire adapters with Apex methods
4. Imperatively invoking Apex methods

Question 20

Syntax to import an object into our JS class

Answer 20

import OBJECT_NAME from ‘@salesforce/schema/ObjectApiName’;

Question 21

Syntax to import a field into our JS class

Answer 21

import FIELD_NAME from ‘@salesforce/schema/ObjectApiName.FieldApiName’;

Question 22

What is the Lightning Data Service? (What preference is it?)

Answer 22

• Lightning Data Service is a Salesforce feature that allows us to interact with our records without needing to write much, if any, non-markup code
• Lightning Data Service is the fastest and most efficient way to work with our Salesforce records
  
  • if multiple components are working with the same record, Lightning Data Service will only query for the record a single time and update the record in all components that reference it whenever changes
  • Lightning Data Service caches the record locally so that unnecessary server calls aren’t made

Question 23

What are the three components for Lightning Data Service available to LWC?

Answer 23

• • add, view, update a record
• • displays record data
• • used to add record or update fields on existing records

Question 24

What are Wire Service?

Answer 24

• the wire service allows us to retrieve data for a Lightning web component by invoking a method from Lightning Data Service, an Apex method, or a method from another JS module
• to use the wire service, we need to import the wire decorator from the lwc module

Question 25

How do you expose Apex Methods to LWC?

Answer 25

• the method needs to be static, public/global, and annotated @AuraEnabled
• if we’re invoking a method through the wire service or if our method doesn’t make any DML operations, we can follow the @AuraEnabled annotation with the cacheable parameter and assign it a true value in order to have the results of our method cached on the client

public class ClassName {
@AuraEnabled(cacheable=true)
 public static methodName() {}
}

Question 26

How do you import Apex Method?

Answer 26

• to import an Apex method, we’ll import it from the @salesforce/apex module as follows

import nameOfApexMethod from ‘@salesforce/apex/NameOfApexClass.nameOfApexMethod’;

Question 27

How to invoke Apex Methods through Wire Service?

Answer 27

• to invoke an Apex method through the wire service, we follow the same structure as when invoking a method from one of the lightning/ui modules through the wire service
• any Apex method invoked from the wire service must have the cacheable parameter set to true

Question 28

Invoking Apex Methods Imperatively

Answer 28

• to an invoke an Apex method imperatively, we’ll need to expose and import it just as we would when invoking an Apex method through the use of the wire service
• in the JS class function that we want to invoke the Apex method within, we’ll call the method and pass any parameters that it declares through the following syntax
• the framework will then invoke the Apex method, which will return a promise
  
  • we can handle this promise through the then, catch, and finally methods we discussed earlier
  • or we can handle it through the async/await keywords

Question 29

Communicating Between Lightning Web Components

Answer 29

You have one of three options

• if we want to communicate from a parent component to a child component, we’ll make use of public properties and methods on the child component
  
  • the fields and methods in a child component are made public through the use of the @api decorator
  • we can assign values to the properties of a child component when instantiating it we can invoke a method of the child component and pass information to that method as arguments
• we can use custom event to communicate from child back to parent
• if neither of the first two use cases is appropriate we can use Lightning Message Service

Question 30

Custom Events

How do you create one and how do you fire one

Answer 30

• to create a custom event, we’ll instantiate the CustomEvent class within our component
• we can fire our custom event by calling the dispatchEvent() method and passing it the custom event that we instantiated

Question 31

How do you create a custom event that includes information?

Answer 31

we’ll add in a second argument for that constructor to propagate that information

our first argument will always be the name of our custom event

the second argument will be an object literal with the detail property - whose value will be that information we want to propagate by way of the event

new CustomEvent(‘customeventname’, { detail : ‘value to propagate through event’})

Question 32

What is Lightning Message Service?

Answer 32

• Lightning Message Service allows us to communicate between unrelated LWCs, as well as Aura components and Visualforce pages on a Lightning Page
• to work with Lightning Message Service, we’ll first create a message channel

Question 33

How do you publish an event on our channel?

Answer 33

• to publish an event through our message channel, we’ll import the message channel and also import the publish method and MessageContext object from the lightning/messageService module

Question 34

How do you subscribe to a channel?

Answer 34

• to subscribe to a message channel in a LWC, we’ll make use of the subscribe() method
  
  • this method will be imported from lightning/messageService (along with the MessageContext and optionally APPLICATION_SCOPE objects)
  • we’ll also want to import the unsubscribe() method from the same module, as well as the message channel itself

Question 35

How do you retrieve components and elements in JavaScript?

Answer 35

• Lightning Locker modifies any Ids assigned to elements and components in our HTML template so that they’re globally unique values
• we prefer to use classes or tag name as selectors (NOT Id)
  
  • we’ll pass this selector syntax to this.template.querySelector() or this.template.querySelectorAll()

we use the queries to retrieve elements from html markup

Question 36

What is Jest?

Answer 36

• Jest is a JS testing framework that’s used to test LWCs
• they’re placed in a __test__ folder within our components folder (double underscored test folder)
• and the name of our test files will end with .test and .js (nameOfTestFile.test.js)

Question 37

What do we have within our jest test file?

Answer 37

1. describe blocks which denotes each test suites
2. test suites or test methods to denote individual tests
3. expect method to perform a asserts and check the outcome of our operations
4. calls to beforeEach() and afterEach() methods will perform setup or clean up for our test suites