Interview Questions
1. What is the difference between an application and a component event?
Lightning supports two types of events,
a) Component Events
These travel upwards in the component hierarchy and are used when we want to send information for a child to the parent component.
b) Application Events
These travel to all the other aura components in the application and are used when we want to send out information from a parent to child components. It works like a publish and subscribe model.
2. When should we use an application or a component event in lightning ?
Generally, when we want to send data from parent to child component we should go with a component event. Otherwise, if we need to go from child to parent component then we can only achieve that by application events.
Another scenario to use application events over component events is when we want to send information to other components which are not connected in hierarchy, for example in the lightning app builder or community pages.
3. How can we use external javascript/CSS libraries in our lightning components?
External javascript/CSS files can be used in lightning components by uploading them in static resources and then referencing them in the markup by using the <lightning:require> tag.
The aura framework does not allow the <script> and <style> tags to be used directly in the markup.
4. What is the difference between the and tags in lightning?
Both of these tags are used to conditionally render markup in the lightning components. But the tag destroys the markup inside when it is not rendered on the markup. Meanwhile the tag just applies CSS to hide and show the markup.
is better performance wise as compared to , because reduces the markup being rendered on the page.
5. What is the difference between client side and server side controller in lightning?
The server side controller in lightning components in an apex class attached to the component. We can call methods inside this class if they are defined by an @AuraEnabled notation.
The client side controller is a javascript file associated with each lightning component which consists of javascript methods which can be called from the component markup.
6. What is the @AuraEnabled notation in lightning?
The @AuraEnabled notation is used in lightning to expose an apex method or an apex variable to be used in the aura framework. For example if we want to call an apex method from our lightning component, we need to use the @AuraEnabled notation while defining the method. For example :
public class lightningCtrl
{
@AuraEnabled
public static doSum(integer a,integer b)
{
return (a+b);
}
}
In order to use the @AuraEnabled notation, your apex method must be defined as static as well.
The second use of @AuraEnabled notation is to expose apex class variables to be used as objects in your lightning components. For example:
public class lightningWrapper
{
@AuraEnabled
public String textValue;
}
If we want to use this ‘textValue’ variable in our lightning component, we need to use the @AuraEnabled notation with it.
7. Do we need to enable ‘My Domain’ in order to use and develop lightning components?
Yes, we do need to enable ‘My Domain’ in order to use the lightning components in our org.
8. Do we need to create a custom namespace in order to use and develop lightning components?
No, we do not need to enable a custom namespace before using and developing lightning components. We can introduce a custom namespace but that will not affect our lightning component development since the ‘c’ already points to the default namespace in the org. That namespace could be the standard or a custom namespace.
9. How can we communicate between two lightning components without using events?
We can only communicate from the parent to the child component by using tag in lightning components to call a JavaScript method in the child component from the parent.
This works synchronously unlike calling an apex method from the javascript controller.
10. What is the use of the .THIS keyword in lightning CSS?
The .THIS keyword is used in CSS to uniquely bind the CSS to that particular component, so that CSS in one component does not override the CSS in another component.
At runtime, the .THIS keyword in all the CSS is replaced by the name of the component at the browser level to distinguish the CSS between each unique component.