Lightning Best Practice to Access Data for Increasing performance of Application

Hi Folks,

Lightning Platform is the new buzz word. Lets talk about its best practice in a bit more detail.

My upcoming blogs will be on lightning best practice and will share my experience and findings.  Now, lets jump to main topic.

Data Access

In Lightning, accessing data is very easy as we have our super hero aura framework that does the magic. Many of the developers are stuck by the performance of the application. If not then sometimes client comes back to us and complaining about performance. 

For all these issues we have an old remedy but in new style. Word is CACHING! CACHING!. 

Ways to do Caching in lightning components:-

Caching in lightning is done by unique way . You dont have to write a full code for caching or to do something at browser level . 

action.setStorable();

({
    myAction : function(component, event, helper) {
        var action = component.get("c.getAccounts"); 
        //alert('startTime'+startTime);
        action.setStorable();
        action.setCallback(this, function(actionResult) {
            
            var state = actionResult.getState();
            if (state === "SUCCESS") {
                console.log("time taken to load in ms ", 
                            
                            performance.now()- startTime);
                        component.set('v.childRecords', actionResult.getReturnValue());

                var state = actionResult.getState();
            
            
        });
        var startTime = performance.now();
        $A.enqueueAction(action);
    }
})

This function does every thing you need to cache your data for caching. Lets take an example. 

I have a component in which I have display more than 1000 records in my component and that on press of button.

In my demo below, when action calls the server it takes around 500 ms and when clicked second time it takes around 2 ms. This is how you can cache the data without calling the server. This is the magic being handled by aura framework.



Watch the demo below:-

#Salesforce #Lightning #SetStorable #BestPractices #caching #cache


Thanks
Happy Coding :) :)

Animated Lightning Progress Bar Based on Input

Hi Folks,

Its all Lightning Now!

I was looking at Lightning Design System, it is the coolest, it struck my eye to Progress  Bar. So I thought to play around little bit with it.
Although, there are numerous other blogs available for the same, thought to share the same for beginners.

So lets get started...

Lightning Design System(LDS) has very good out of box classes and CSS written for us which we can directly consume in our code.

Lightning Progress Bar

Lets take input to complete the progress bar in percentage. Lets take this step by step:-

1. Below is the code for Component or app.
      I have added the code in app . you can add that code in a component also.

<aura:application extends="force:slds">
<!-- <AnkushTest:ProgressBarComponent />-->
           
    <aura:attribute name="value" type="Integer" default="0" />
    <aura:attribute name="inputVal" type="Integer" default="0" />
    <aura:attribute name="timeout" type="object" />
    <!-- ==============Using Lightning Progress bar tag  ==================   -->
    <div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" role="progressbar">
     <lightning:progressBar value="{!v.value}" />
    </div>
   
    <!-- ==============Using Lightning Design System ==================   --> 

    <div class="slds-m-around_small">
       
        <div class="slds-m-bottom_large">
            <label>Type the value : <ui:inputNumber  change="{!c.onChanged}" /></label>
        </div>
        <div>
            <div style="width:50%" class="slds-progress-bar slds-progress-bar_circular slds-progress-bar_large"
                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!v.value}" role="progressbar">
                <span class="slds-progress-bar__value" style="{! 'width:  ' + v.value + '%;'}">
                    <span class="slds-assistive-text">{!'Progressing Value : ' + v.value + '%'}</span>
                </span>
                <div class="slds-text-align--center"><ui:outputNumber value="{!v.value}"/>
                    <ui:outputNumber value="100"/>
                    </div>
            </div>
        </div>
    </div>
    
    
   <style>
     .slds-progress-bar__value{
         background: green !important;
        }
    </style>
</aura:application>

Step By Step Explnation:-

There are two ways you can make progress bar
   A. By Using <lightning:progressBar> tag: It is a standard tag which renders as a horizontal bar. It        has various attributes which you can find easily on <lightning:progressBar>
  B.  Another way is by using Progress Bar .


2. We need to take input from user to make it animated i.e we need to keep refreshing the component or app after every nth sec to make it animated. For the same I have added that code in Helper.js

({
    Onchange : function(cmp, ev) {
       
        var currentValue=cmp.get('v.value');
        var finalValue=cmp.get('v.inputVal');
        var increment=1;
        if (finalValue<currentValue) {
            increment=-1; // in case the value needs to decreased if the value entered was less thn the initial value
        }
      
        var timeout = window.setInterval($A.getCallback(function() { // calling the function every n seconds
           
                var value=cmp.get('v.value');
                value+=increment; // Incrementing the value till it reaches the input value
                if (value==finalValue) {
                    window.clearInterval(cmp.get('v.timeout'));
                    cmp.set('v.timeout', null);
                }
                cmp.set('v.value', value); // set the incremented value to component 
            
        }), 200);
        cmp.set('v.timeout', timeout);
        
    }
})

In above code, the if loop inside window.setinterval makes sure that till the input value is equal to desired value this refresh should happen. once it value is achieved then set clear your interval.

3. Controller code :-

({
    onChanged : function(component, event, helper) {
        helper.Onchange(component, event);
    }
})

Just try it out , it will be fun ..

In case you face any issue just drop me message or mail.

Cheers!!
Happy Coding !