Salesforce Lightning Interview Questions I

1. What are the different types of Lightning events?

• Browser: browser notifications that are triggered by user interaction with an element. Eg. onClick
• System: fired by LC framework during LC lifecycle. They notify component states. Eg. init, render, afterRender
• Navigation: force:navigateToURL, force:createRecord, force:editRecord
• Component: A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.
• Application: Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.

2. How to register, fire and handle a component and application event?

<aura:registerEvent name="componentEventFired" type="c:compEvent"/>
<aura:registerEvent name="appEvent" type="c:appEvent"/>

var compEvents = cmp.getEvent("componentEventFired");
compEvents.setParams({ "context" : parentName });
compEvents.fire();

var appEvent = $A.get("e.c:appEvent");
appEvent.setParams({ "context" : parentName });
appEvent.fire();
...
...
...
...
...
<aura:handler event="c:appEvent" action="{!c.handleApplicationEventFired}"/>
<aura:handler name="componentEventFired" event="c:compEvent" 
 action="{!c.handleComponentEventFired}"/>

{
 handleComponentEventFired : function(cmp, event) {
  var context = event.getParam("context");
 },

 handleApplicationEventFired : function(cmp, event) {
  var context = event.getParam("context");
 }
}

For more details, check the link below:
http://hellosnl.blogspot.in/2017/06/lightning-advanced-events-example.html


3. Let's say that you have an app myApp.app that contains a component myCmp.cmp with a ui:button component. During initialization, the init() event is fired in what order?
Answer: ui:button, ui:myCmp, and myApp.app.


4. Why do we use @AuraEnabled annotation?

• Use @AuraEnabled on Apex class static methods to make them accessible as remote controller actions in your Lightning components.
• Use @AuraEnabled on Apex instance methods and properties to make them serializable when an instance of the class is returned as data from a server-side action

5. Why do we use $A.enqueueAction(action)?
It adds the server-side controller action to the queue of actions to be executed. Rather than sending a separate request for each individual action, the framework processes the event chain and batches the actions in the queue into one request. The actions are asynchronous and have callbacks.


6. What is Namespace?
It is used to group related components together.


7. What is LockerService?
It enhances security by isolating Lightning components in their own namespace. A component can only traverse the DOM and access elements created by a component in the same namespace.


8. Examples of how to use some of the out-of-the-box events to enable component interation within your Lightning components?

$A.get("e.force:refreshView").fire(): reloads all data for the view.

createRecord : function (component, event, helper) {
    var createRecordEvent = $A.get("e.force:createRecord");
    createRecordEvent.setParams({
        "entityApiName": "Contact"
    });
    createRecordEvent.fire();
}

editRecord : function(component, event, helper) {
    var editRecordEvent = $A.get("e.force:editRecord");
    editRecordEvent.setParams({
         "recordId": component.get("v.contact.Id")
   });
    editRecordEvent.fire();
}

9. What is Lightning CLI?
It is a Heroku Toolbelt plugin that lets you scan your code for general JavaScript coding issues and lightning-specific issues.


10. Difference between bound and unbound expressions.
Bound expression {!expression}

• Any change to the value of the childAttr attribute in c:child also affects the parentAttr attribute in c:parent and vice versa.
• When you use a bound expression, a change in the attribute in the parent or child component triggers the change handler in both components.

Unbound expression {#expression}

• Any change to the value of the childAttr attribute in c:child doesn’t affect the parentAttr attribute in c:parent and vice versa.
• When you use an unbound expression, the change is not propagated between components so the change handler is only triggered in the component that contains the changed attribute.

For more details, check this link: http://hellosnl.blogspot.in/2017/05/data-binding-between-components.html


11. Use of THIS CSS class?
This adds namespacing to CSS and helps prevent one component's CSS from blowing away another component's styling.


12. How to set the value of an inherited attribute?
Use the <aura:set> tag.


13. What are the different ways to conditionally display markup, and what is the preferred approach?
Using the <aura:if> tag
Use CSS to toggle visibility of markup by calling $A.util.toggleClass(cmp, 'class') in JavaScript code.


14. What is $Resource global value provider? Is it possible to obtain a reference to a static resource in Javascript code?
It lets you reference images, style sheets, and JavaScript code you’ve uploaded in static resources.
To obtain a reference to a static resource in JavaScript code, use $A.get('$Resource.resourceName').
For more details, check this link http://hellosnl.blogspot.in/2017/04/lightning-using-static-resources.html


15. Let’s say you have several buttons that reuse the same onclick handler. How will you retrieve the name of the button that fired the event?
http://hellosnl.blogspot.in/2017/05/which-button-was-pressed.html


16. What are the names of interfaces that are added to a Lightning component to allow it to be used as custom tabs, and to be used in Lightning and Community builder?
http://hellosnl.blogspot.in/2017/05/configuring-lightning-components.html


17. What is the use of force:hasRecordId interface?
Add the force:hasRecordId interface to a Lightning component to enable the component to be assigned the ID of the current record.
The recordId attribute is set only when you place or invoke the component in a context of a record. For example, when you place the component on a record page, or invoke it as an action from a record page or object home. In all other cases, such as when you create this component programmatically inside another component, recordId isn’t set, and your component shouldn’t depend on it.


18. How to delete a design attribute for a component that implements the flexipage:availableForAllPageTypes or forceCommunity:availableForAllPageTypes interface?
First remove the interface from the component before deleting the design attribute. Then reimplement the interface. If the component is referenced in a Lightning page, you must remove the component from the page before you can change it.


19. How to add Lightning components to your Visualforce pages?
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_visualforce.htm