Lightning Web Components Flashcards

1
Q

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

A

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 -
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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

A

Meta XML file

HTML template

Javascript module

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is a Meta XML file?

A
  • includes information about the API version they should be used with
  • determines where within our org that component can be surfaced
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are template directives?

A

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)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How can we data bind or action bind?

A

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}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

How do we instantiate a lwc inside of another?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does the Shadow DOM do?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A
  • @track
  • @wire
  • @qpi
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is the @track decorator?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the @wire decorator?

A
  • allows us to have the framework handle the invocation of methods from our org or other external services
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the @api decorator?

A
  • we’ll apply the @api decorator to any variable or method within our JS class that we’d like to expose publicly
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Lightning Web Component Lifecycle for Composed Components

A
  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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is a constructor()?

A
  • the constructor() callback is invoked when a component is instantiated
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is a connectedCallback()?

A

invoked whenever a component is inserted into the DOM

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is a renderedCallback()?

A

invoked whenever a component is rendered

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is disconnectedCallback()?

A

invoked whenever the component is removed from the DOM

17
Q

What is errorCallback()?

A

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

18
Q

What handles the Client Side Security?

A
  • 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
19
Q

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

A
  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
20
Q

Syntax to import an object into our JS class

A

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

21
Q

Syntax to import a field into our JS class

A

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

22
Q

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

A
  • 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
23
Q

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

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

What are Wire Service?

A
  • 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
25
Q

How do you expose Apex Methods to LWC?

A
  • 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() {}
}
26
Q

How do you import Apex Method?

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

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

27
Q

How to invoke Apex Methods through Wire Service?

A
  • 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
28
Q

Invoking Apex Methods Imperatively

A
  • 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
29
Q

Communicating Between Lightning Web Components

A

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
30
Q

Custom Events

How do you create one and how do you fire one

A
  • 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
31
Q

How do you create a custom event that includes information?

A

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’})

32
Q

What is Lightning Message Service?

A
  • 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
33
Q

How do you publish an event on our channel?

A
  • 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
34
Q

How do you subscribe to a channel?

A
  • 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
35
Q

How do you retrieve components and elements in JavaScript?

A
  • 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

36
Q

What is Jest?

A
  • 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)
37
Q

What do we have within our jest test file?

A
  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