Saurabh Samir

Follow

--

Hello everyone, Welcome in SFDC Worlds…!!

As Salesforce world is moving towards Lightning Web components (LWC), So today I will share the scenario-based Lightning web components interview questions with you.

Asking simple straightforward questions in Salesforce is history. Few years back Salesforce certified people were very less. Hence criteria was just to check whether that person know about Salesforce or not.

So questions used to be:• What are Lightning Web Components (LWC)?• What is Lightning Framework in Salesforce?• How is LWC different from Aura?• What is the use of a Lightning Component Framework?• In how many ways can lightning components be made?• What are the different Lightning page types?etc.

If you notice above questions are crisp to the point. But now since in market there are many Salesforce certified people above style of interview doesn’t work. One could easily memories these.

Now the style of asking questions is different for the interviewer. There is more focus on asking real time scenario questions rather than how etc.

Check Scenario Based LWC Interview Questions as one can have the theoretical knowledge. But the recruiters also check for scenario-based knowledge or Practical knowledge. Recruiters always ask tricky questions on the problems that one can face during implementation.

Only the person which has faced the problems while execution can only answer the questions.

In this blog series, I have tried to cover all LWC Scenario Based Interview Questions which are often asked by Salesforce Developer in an interview.

Please go through them in depth.

Lightning Web Components are custom HTML elements build using the HTML Elements and modern JavaScript. We can build components using any of the models and can place these components on the same lightning page.

As of now, we have built a lightning component using the “Aura Components model”. we can also build a lightning component using the “Lightning Web Components model”.

Same but different

Instead of up to 8 files you only need 4. For one: all JavaScript (3 files) now lives in one ES6 JS file and we don’t have an auradoc or svg file for now

MIND IT !

For developing LWC we require “Salesforce Extensions for Visual Studio Code” and for deploying LWC from an org we require Salesforce CLI.

LWC — Developer Tool

Aura Components make use of own custom component model, custom templates, custom components, etc. while LWC is built on web standards and it makes use of web components, templates, custom elements which we have in web standards.

Both the Aura component, LWC make use of Security, LDS and Base lightning components.

1) Aura component and LWC can exist on the same lightning page.2) Aura component can include LWC

The Lightning web component is the component-based framework built using SLDS (Salesforce Lightning Design System) and web components.

Lightning Web Components are custom HTML elements build using the HTML Elements and modern JavaScript.

Lightning Web Component framework has a rich set of out the box components and APIs to communicate with the Salesforce Database.

Why Lightning Web Component is lightweight?

Because the Lightning Web Components framework is built on the code which natively runs in the browser, most of the code that you write in them is standard HTML and JavaScript.

Unlike the Aura Component Framework, they don’t need the additional resources to be loaded.

LWC- Component Structure

Similar to an AURA component, the main contents of a LWC are also html, JavaScript. There are optional content like CSS. But then in addition to these for LWC, an xml configuration file is also included which defines the metadata values for the component. So, a LWC component would look like:

myComponent foldermyComponent.htmlmyComponent.jsmyComponent.js-meta.xmlmyComponent.cssmyComponent.svg

The folder and its files must follow these naming rules.

• Can’t contain a hyphen (dash)• Must begin with a lowercase letter• Can’t include whitespace• Contain only alphanumeric or underscore characters• Can’t end with an underscore• Must be unique in the namespace• Can’t contain two consecutive underscores

Let start the interview series on Scenario Based Interview Questions on Lightning Web Components (Between Interviewer & Interviewee).

Interviewer: What is LWC(Lightning Web Components)?

Interviewee: Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce.

• Custom HTML Components built using HTML and modern JS (ES 6)• Supported by the same browsers as Lightning Experience.• Uses latest version of JS.

Interviewer: Do you think Aura Web Components and Lightning Web Components can coexist together?

Interviewee: Yes, both Aura Lightning components and Lightning Web Components can coexist together.

Interviewer: What are the advantages of using Lightning Component Framework?

Interviewee: Here are some of the benefits of using the Lightning Component Framework.

1. It provides out-of-the-box components.2. Rich Custom Component Ecosystem.3. Fast Development.4. Device-aware and Cross Browser Compatibility.

Interviewer: Explain the Lightning Web Component Bundle?

Interviewee: LWC bundle contains an HTML file, a JavaScript file, and a Metadata Configuration file and these files are created once we create a Lightning web component.

Component: HTML File

Every user interface (UI) component must have an HTML file with the root tag

It should be saved as “.html” like myComponent.html below.

Component: JavaScript File

All business logic for components is defined in a JavaScript file, and it’s written as “.js”. To import a class, function, or variable declared in a module, use the “import” statement. To allow other code to use a class, function, or variable declared in a module, use the “export” statement.

Component: Metadata Configuration File

Every component must have a configuration file. The configuration file defines the metadata values for the component, including the design configuration for Lightning App Builder and Community Builder.

MIND IT !

All LWC configuration settings are included in a metafile. For example, “” is set to true to expose the component in all orgs. We can define targets where we wanted to use our LWC using the “” tag.

Above mentioned file are default ,we can also add CSS, SVG and other optional files like “Additional JavaScript file” with a unique name.

The file structure of Lightning Web Components

myComponent foldermyComponent.htmlmyComponent.jsmyComponent.js-meta.xmlmyComponent.cssmyComponent.svg

Interviewer: What is the purpose of JavaScript file in Lightning Web Component bundle?

Interviewee: The JavaScript file defines the behavior of HTML element present in HTML file.

JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local — it’s scoped to the module.

To import a class, function, or variable declared in a module, use the import statement. To allow other code to use a class, function, or variable declared in a module, use the export statement.

Interviewer: What is difference between var and let in JS ?

Interviewee: In simple words difference is var is function scoped while let is block scoped.Var allows you to redeclare same variable while let will throw an error.Var variables are hoisted that is you can access them even before they are declared in code its just they will return undefined value while with let it will throw an error.

Interviewer: What is Meta configuration file in Lightning Web Component?

Interviewee: The Meta configuration file defines the metadata values for the components.If we don’t include a configuration file for our component, we get an error shown below when we push your changes.

Error Message : “Cannot find Lightning Component Bundle “.

Interviewer: How can you display components HTML conditionally?

Interviewee: If we want to render HTML conditionally, add the if:true|false directive to a nested tag that encloses the conditional content.

Interviewer: How we can iterate list in Lightning Web Component (LWC)?OR How to iterate over an array in HTML file?

Interviewee: There are 2 ways of iterating your list in LWC templates :

1. for:each2. Iterator

Whenever we use for:each or Iterator we need to use key directive on the element on which we are doing iteration. Key gives unique id to each item. Remember, without key we cannot do iteration.

When a list changes, the framework uses the key to re-render only the item that changed. It is used for performance optimization and isn’t reflected in the DOM at run time.

for:each

• When using the for:each directive, use for:item=”currentItem” to access the current item.

• To assign a key to the first element in the nested template, use the key={uniqueId} directive.

• You can use them for:index=”index” to access the current item index, it is optional.

Example : HelloForEach.html

HelloForEach.js

Output:

iterator

If you want add special behavior to the first or last item in a list, use the iterator directive, iterator:iteratorName={array}. Use the iterator directive on a template tag.

Use iteratorName to access these properties:

• value — The value of the item in the list. Use this property to access the properties of the array.

For example, iteratorName.value.propertyName.

• index — The index of the item in the list.

• first — A boolean value indicating whether this item is the first item in the list.

• last — A boolean value indicating whether this item is the last item in the list.

Sample Example:

HelloIterator.html

HelloIterator.js

helloIterator.css

.list-last { border-bottom: 1px solid black; padding-bottom: 5px;}

Output:

For More Questions visit the link below:

learnfrenzy.com

Thanks for reading ☺️