Aura Components

10 Most Important Interview Questions for Salesforce – Aura Components

1. What is difference between the way we implement VF Page and Lightning.

Visualforce Page:
VF page framework follows page-centric model as it sends that request to the Salesforce servers and then reloads the entire page with the new state of the UI(using view state) In VF page most of the processing takes place on the server-side. VF page was developed keeping in mind the desktop websites.

Lightning Component :
Aura Component framework follows App-Centric Model as most of the work is done at client side and call to server is made only when its essentially required like updating records etc. Aura Component framework was built keeping the mobile first approach.

2. What are different files in Aura Component ?

  • Component: It contains HTML like markup which is responsible for displaying UI components.
  • Controller: It handles the client side events and behaviour for UI components.
  • Helper: Helper file is used to write common logic which can be used by different controller methods.
  • Style: We can add CSS for UI components in this file.
  • Documentation: We can add comments, components description here.
  • Renderer: This file contains the default rendering behaviour of a component.
  • SVG: We can plae SVG icons here such as the icon which gets displayed before the component name in the Lightning App Builder.
  • Design: This component controls which attribute we can expose to tools like the Lightning App Builder. It helps with component re-usability.

3. What are events in Aura components ?

Events are used to provide communication between various components in Aura applications, for example passing arguments etc.

There are diffrent types of events in Aura Components :

System events like init events which are automatically triggered during component life cycles.

Component Events, Application events.

4. What are difference between Component events and Application events in Aura Components?

Component Events :

A component event can either be handled by the component itself or it can be handled by any other component which is present in the hierarchy above the component.For Example, if we have two components say parent and child, and we want to pass paramters from child to parent than, we can use component events for this.

Application Events :

Application events can be fired from any component and they can be handled by any component. No relation is required between the components, but these components must be a part of a single application. These events are essentially a traditional publish-subscribe model.

5. How to include Aura Component inside VF page?

  1. Add <apex:includeLightning/> at the beginning of your page
  2. Create an aura:application and add dependencies by extending lightning out.
<aura:application access="GLOBAL" extends="ltng:outApp">     <c:demoComp/>
</aura:application>

3. Use Lightning Application inside VF page and create the component inside it.

<apex:page standardController=”Account”>        
    <apex:includeLightning />
    <script>
        $Lightning.use(“c:demoApp”, function() {
            $Lightning.createComponent(
                “c:demoComp”,
                {},
                “test”,
                function(cmp) {
                    console.log(“Component is created!”);
              
                });
            });        
      </script>
</apex:page>

6. What are bound and unbound expression in Aura Components?

There are two ways in which we can use expression in aura components and also pass value to child component attriutes from parent components.

Below is the bound expression. If you pass the value this way, then any change to value in child component is also reflected in the parent ccomponent.

<c:child childAttr="{!v.parentAttr}" />

Below is the unbound expression. If you pass the value this way, then any change to value in child component is not reflected in the parent ccomponent.

<c:child childAttr="{#v.parentAttr}" />

7. What are Aura Methods in Aura Components?

For passing the values from child to parent or executing parent component’s logic based on certain event in child we can use component events.

But lets say, we want to pass paramters to child component from parent or want to execute certain logic of child compoent based on certain events in parent component, we can use Aura Methods for this.

ChildComponent.cmp

<aura:component>
    <aura:method name="childMethod" action="{!c.handleMethod}" access="public">
        <aura:attribute name="firstName" type="String" default="Salesforce"/> 
    </aura:method>
</aura:component>

ChildComponentController.js

({
    handleMethod : function(component, event) {
        var params = event.getParam('firstName');
        if (params) {
			console.log('First Name from parent is #' + params);
        }
    }
})

parentCmp.cmp

<aura:component>  
        <c:ChildComponent aura:id="childCmp"/>
        <lightning:button variant="brand" label="Call Child Method" onclick="{!c.callAuraMethod}" />
</aura:component>

parentCmpController.js

({
    callAuraMethod : function(component, event, helper) {
        var childComponent = component.find("childCmp");
        var message = childComponent.childMethod();
    }
})

8. If we have two components say parent and child in Aura, whose init event is fired first?

Always child init gets fired first. However, if you want to fire parent’s init first you can achieve it.

Check below link for more detailed answer on this:

https://knowledgepredator.com/2020/05/30/aura-init-execution-order/

9. Can We have two methods with same name in Controller.js and helper.js files in Aura Components?

Surprisingly, yes we can have two methods with same name in either controller or helper files. Check below link for more detailed answer on this.

https://knowledgepredator.com/2020/06/08/aura-components-interesting-scenarios/

10. What are different interfaces in Aura Components ?

Lightning Interfaces uses to allow components to be used in different contexts or enable the lightning component to receive extra context data. A Lightning component can use multiple interfaces.

Examples:

flexipage:availableForAllPageTypes component to be available for all pages.

flexipage:availableForRecordHome component to be available only on the record home page.

force:lightningQuickAction component to be used as quick action.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s