Salesforce Lightning: What browser am I using? What version is my browser?

You can use $Browser global value provider to return information about the hardware and operating system of the browser accessing the application as described in the link below:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_browser_value_provider.htm

But it cannot be used to detect the browser type or version number.

You can use the below code to detect the browser on which you are running your Lightning application. Here, I am checking whether I am on Internet Explorer or not:

checkBrowser: function (component) {

    var browserType = navigator.sayswho= (function(){
        var ua= navigator.userAgent, tem,
            M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
        if(/trident/i.test(M[1])){
            tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
            return 'IE '+(tem[1] || '');
        }
        if(M[1]=== 'Chrome'){
            tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
            if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
        }
        M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
        if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
        return M.join(' ');
    })();
    if (browserType.startsWith("IE")) {
        component.set("v.isIE", true);
    }
}

If the value of isIE attribute is true, then you are running on Internet Explorer. Similarly you can check for Chrome, Firefox, Opera and other browsers.

Foreground, setBackground, setStorable, setAbortable

There are some properties that you can set on a server-side action to influence how the framework manages the action while it’s in the queue waiting to be sent to the server.

Foreground and Background Actions

Foreground actions are the default. Multiple queued foreground actions are batched in a single request (XHR) to minimize network traffic. The batching of actions is also known as boxcar’ing, similar to a train that couples boxcars together. The server sends the XHR response to the client when all actions have been processed on the server. If a long-running action is in the boxcar, the XHR response is held until that long-running action completes. Marking an action as background results in that action being sent separately, which avoids it impacting the response time of the other actions.

To set an action as a background action, call the setBackground() method on the action object in JavaScript.

Storable Actions

Enhance your component’s performance by marking actions as storable to quickly show cached data from client-side storage without waiting for a server trip. If the cached data is stale, the framework retrieves the latest data from the server.

• A storable action might result in no call to the server. Never mark as storable an action that updates or deletes data.
• For storable actions in the cache, the framework returns the cached response immediately and also refreshes the data if it’s stale. Therefore, storable actions might have their callbacks invoked more than once: first with cached data, then with updated data from the server.

To mark a server-side action as storable, call setStorable() on the action in JavaScript code.

Abortable Actions

An abortable action in the queue is not sent to the server if the component that created the action is no longer valid, that is cmp.isValid() == false. A component is automatically destroyed and marked invalid by the framework when it is unrendered. Mark a server-side action as abortable by using the setAbortable() method on the Action object in JavaScript.

Mark a server-side action as abortable by using the setAbortable() method on the Action object in JavaScript.


Let's understand the scenarios using a sample application. Pressing the button under Foreground Action results in 1 batched action from 2 different actions (the 3rd entry), and is then sent to the server; while pressing the button under Background Action results in the action being sent separately (the 1st and 2nd entry) to the server.

Pressing the button under Storable Action for the first time results in one server trip (foreground action). Pressing the button again for couple of times doesn't result in any more server trips, displaying the same cached data from client-side storage as shown below.

Code for this application is provided below.

	<aura:application controller="echoController" extends="force:slds">
	<aura:attribute name="echoes" type="String[]"/>
	<div class="slds-grid slds-wrap container">
	<div class="slds-size--3-of-12">Foreground Action</div>
	<div class="slds-size--3-of-12">Background Action</div>
	<div class="slds-size--3-of-12">Storable Action</div>
	<div class="slds-size--3-of-12">Abortable Action</div>
	<div class="slds-size--3-of-12">
	<ui:button label="Generate Echo" press="{!c.doForeground}"/>
	</div>
	<div class="slds-size--3-of-12">
	<ui:button label="Generate Echo" press="{!c.doBackground}"/>
	</div>
	<div class="slds-size--3-of-12">
	<ui:button label="Generate Echo" press="{!c.doStorable}"/>
	</div>
	<div class="slds-size--3-of-12">
	<ui:button label="Generate Echo" press="{!c.doAbortable}"/>
	</div>
	</div>
	<ul class="" role="presentation">
	<aura:iteration items="{!v.echoes}" var="echo">
	<c:EchoComponent echo="{!echo}" />
	</aura:iteration>
	</ul>
	<aura:if isTrue="{! v.echoes.length &gt; 0 }">
	<ui:button label="Clear" press="{!c.doClear}"/>
	</aura:if>
	<auraStorage:init name="actions" persistent="false" clearStorageOnInit="true" defaultExpiration="30"/>
	</aura:application>

view raw Echo.app hosted with ❤ by GitHub

	({
	doForeground: function(cmp, event, helper) {
	helper.echo(cmp, 'Foreground #1');
	helper.echo(cmp, 'Foreground #2');
	},
	doBackground: function(cmp, event, helper) {
	helper.echo(cmp, 'Background #1', function(action) {
	action.setBackground();
	});
	helper.echo(cmp, 'Background #2', function(action) {
	action.setBackground();
	});
	},
	doStorable: function(cmp, event, helper) {
	helper.echo(cmp, 'Storable #1', function(action) {
	action.setStorable();
	});
	helper.echo(cmp, 'Storable #2', function(action) {
	action.setStorable();
	});
	},
	doAbortable: function(cmp, event, helper) {
	helper.echo(cmp, 'Abortable #1', function(action) {
	action.setAbortable();
	});
	helper.echo(cmp, 'Abortable #2', function(action) {
	action.setAbortable();
	});
	},
	doClear: function(cmp, event, helper) {
	helper.clear(cmp);
	}
	})

view raw EchoController.js hosted with ❤ by GitHub

	({
	isFunction: function(obj) {
	return !!(obj && obj.constructor && obj.call && obj.apply);
	},
	echo: function(cmp, message, callback) {
	var action = cmp.get('{!c.echo}');
	action.setParams({
	message: message
	});
	action.setCallback(this, function(response) {
	var state = response.getState();
	var text = response.getReturnValue();
	var echoes = cmp.get('v.echoes');
	echoes.push({
	text: text,
	state: state,
	listener: text.indexOf("#1") !== -1 ? 1 : 2
	});
	cmp.set('v.echoes', echoes);
	});
	if (this.isFunction(callback)) {
	callback(action);
	}
	$A.enqueueAction(action);
	},
	clear: function(cmp) {
	cmp.set('v.echoes', []);
	}
	})

view raw EchoHelper.js hosted with ❤ by GitHub

	public class echoController {
	@AuraEnabled
	public static String echo(String message) {
	return message;
	}
	}

view raw echoController.apxc hosted with ❤ by GitHub

	<aura:component >
	<aura:attribute name="echo" type="String" required="true" />
	<li class="slds-lookup__item">
	<div class="{!'slds-page-header' + if(v.echo.listener == 2 , ' slds-theme--info', ' slds-theme--alt-inverse')}">
	{!v.echo.text} : {!v.echo.state}
	</div>
	</li>
	</aura:component>

view raw EchoComponent.cmp hosted with ❤ by GitHub

AuraHandledException

From Apex class:

    @AuraEnabled
    public static List<Account> fetchAccount() {
        throw new AuraHandledException('User-defined error');
    }

From client-side controller:

    doInit: function(component, event, helper) {
        var action = component.get('c.fetchAccount');
        action.setParams({ firstName : cmp.get("v.firstName") });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.Accounts', response.getReturnValue());
            }
            else if (component.isValid() && state === "ERROR") {
                console.log("Error Message: ", response.getError()[0].message);
            }
        });
        $A.enqueueAction(action);
    }

Lightning Component Rendering LifeCycle

Rendering LifeCycle

1. The init event is fired by the component service that constructs the components to signal that initialization has completed.

2. For each component in the tree, the base implementation of render() or your custom renderer is called to start component rendering.

3. Once your components are rendered to the DOM, afterRender() is called to signal that rendering is completed for each of these component definitions.

4. To indicate that the client is done waiting for a response to the server request XHR, the aura:doneWaiting event is fired.

5. The framework fires a render event, enabling you to interact with the DOM tree after the framework’s rendering service has inserted DOM elements. Handling the render event is preferred to creating a custom renderer and overriding afterRender().

6. Finally, the aura:doneRendering event is fired at the end of the rendering lifecycle.

Salesforce doesn't recommend using the legacy aura:waiting, aura:doneWaiting, and aura:doneRendering application events except as a last resort. The aura:waiting and aura:doneWaiting application events are fired for every batched server request, even for requests from other components in your app.

References:
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-1.html
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-2.html

Access SOQL data in Lightning component

public class AccountContactController {
    @AuraEnabled
    public static List<Account> fetchAccount() {
        List<Account> listOfAccounts = [SELECT Name, AnnualRevenue, BillingState, (SELECT LastName FROM contacts) FROM Account LIMIT 10];
        return listOfAccounts;
    }
}

<aura:component controller="AccountContactController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="Accounts" type="Account[]"/>
    <ul>
        <aura:iteration items="{!v.Accounts}" var="account">
            <li>AccountName: {!account.Name}</li>
            <ul>
                <aura:iteration items="{!account.Contacts}" var="contact" indexVar="index">
                    <li>Contact {!index + 1} : {!contact.LastName}</li>
                </aura:iteration>
            </ul>
            <hr/>
        </aura:iteration>
    </ul>
</aura:component>

({
    doInit: function(component, event, helper) {
        var action = component.get('c.fetchAccount');
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.Accounts', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

Access apex class properties in Lightning component

public class PersonController {
    @AuraEnabled public String Name {get;set;}
    @AuraEnabled public integer Age {get;set;}
    @auraEnabled public List<Account> ListOfAccounts {get;set;}
    
    @AuraEnabled
    public static PersonController initMethod(){
        PersonController person = new PersonController();
        person.Name = 'John Doe';
        person.Age = 30 ;
        person.ListOfAccounts = [SELECT Id, Name FROM Account LIMIT 10];
        return person ;
    }
}

Note the attribute personController of type PersonController.

<aura:component controller="PersonController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="personController" type="PersonController"/>
    
    <div>
        Name: {!v.personController.Name}<br />
        Age: {!v.personController.Age}<br />
    </div>
    <div>
        List of Accounts:
        <aura:iteration items="{!v.personController.ListOfAccounts}" var="account">
            <li>{!account.Name}</li>
        </aura:iteration>
    </div>
</aura:component>

({
    doInit : function(component, event, helper) {
        var action = component.get('c.initMethod');
        action.setCallback(this,function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.personController', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
})