Questions and Answers about Salesforce Lightning

Introducing Lightning Frameworks

1. How do Lightning components work? What are the different programming models?

Lightning components can be programmed in two different ways. The first is utilizing the Aura framework to build out Aura components, the second is utilizing the newer Lightning Web Components (LWC) framework.

2. Why would you choose one programming model over the other?

Taking advantage of Lightning Web Components should be your go-to development approach since it is a high-performance, easy-to-use, and aligns with modern web standards.

Although LWC has quickly reached feature parity with Aura components, there are still some scenarios where Aura components are required as of Summer ’21, such as building community templates and URL accessible components.

3. What tools should we use to develop these components?

Developing Aura components directly in Salesforce using the developer console is possible, but third party development environments (such as Visual Studio Code with SFDX) are much more efficient. LWCs can only be developed with third-party tools, such as Visual Studio Code and the Salesforce Extension Pack.

4. What is the relationship between the two programming models?

In addition to containing and utilizing LWCs, Aura components can communicate with them via events and component methods. LWCs can, however, never be composed of Aura components; they can only be their parents.

5. Where can we use Lightning components?

There are a variety of ways to use Lightning components, from drag-and-drop components on Lightning App Builder pages to quick actions on record detail pages. A component can also be exposed as a tab or URL addressable for additional customization.

In addition to the most common locations mentioned above, Lightning components can also be found in the following places:

• External web pages;
• Flows;
• Outlook and Gmail integrations;
• The Utility Bar;
• Visualforce pages;
• Pre-chat snap-ins.

Development Basics

6. How can we use Lightning components with different data types?

Data types that can be used within Aura components include Strings, Booleans, Dates, Objects, etc. In LWC, things are a lot more straightforward, since we do not need to define data types on our attributes. This means that an attribute of an LWC can hold any JavaScript data type, for example, we can hold all the standard data types, functions, HTML Nodes, Promises, and anything else that we may require.

7. How to interpret the keyword “this”?

It is possible to find the keyword “this” in both Aura and LWC, and their usage is quite similar. The keyword “this” can be used to access any LWC component property or method because it refers to the current code context, which is usually from within LWC.

The “this” keyword in Aura, however, does not refer to the component context. Instead, it references other helper methods within our helper, the reason is the same as in LWC, since our helper is the calling context.

8. We want our components to be admin configurable. How can we do that?

Component properties can be exposed in both Lightning App Builder and Experience Builder screens for further customization by admins. Additionally, we can limit where components appear so that record-based components will not appear on the incorrect object pages. For Aura components, we have a design resource file, which is where we define these. We do so by specifying a “design: attribute” for each “aura: attribute” we wish to be customized. We can also use “sfdc:objects” to limit the components on which the component can be used.

Our customizable properties for LWC are defined in the “.js-meta.xml” file found in all LWC component folders. As a result, we define “property” tags within “targetConfigs” tags. As compared to Aura, LWC offers us far more flexibility, allowing us to expose individual properties based on the target context (i.e. record page versus app builder page).

9. What are the best ways to reuse code between our components?

To share code between Aura components, we create a service component. This is an Aura component that uses “aura:method” to expose the pieces of code which are to be shared. Components can include this component and call the shared code in other components.

User interaction and Events

10. Which components can be reused?

It does not matter what framework is used, events remain the same. We define handler code within our component’s controller. We can then tell our component to listen to the events and then run our code when they are fired in several different ways. The simplest is to add an inline event handle to the component that fires it. The second way is to add an “aura:handler” tag. Both expect to be pointed toward an action in the controller that handles the event.

11. What are the different phases of events?

Bubbles and captures are the two phases of events. Bubbles propagate up the DOM, notifying event listeners along the way. As a result, the first event handlers to run are those on the innermost elements (e.g., the closest ancestors). When capturing is used, the inverse is true, the event is called from the top of the DOM, starting from the outermost event handler.

Component Styling

12. What is SLDS?

Using Salesforce Lightning’s Design System, Salesforce Lightning’s look and feel can be customized. We also provide HTML blueprints for components (including some that don’t exist as Lightning components).

13. What is the best way to apply custom styles?

Both Aura and LWC allow us to provide our own styles if the SLDS style classes don’t meet our requirements. In both frameworks, we create a CSS file matching the component name in its folder and place our styles there. Component styles in LWC are encapsulated and do not overflow. We prefix all our styles in Aura with ‘.THIS’, but our styles can affect child components as well.