Designing And Developing Lightning Component – Best Practices

I am sure you all know how to develop Lightning Components as  Lightning Framework is easiest to learn and implement. But do you know how you can get best out of Lightning Framework and build a lightning fast component? If not, then this is a post for you.

 

In this post, we will focus on best practices to design your solution using Lightning Component keeping in mind that these components should be easy to understand, well optimized, scalable and #lightningfast.

 

Design Phase

1. FOLLOW THE FRAMEWORK

– Lightning Framework follows the component-based design which makes it more scalable as one component can be used in multiple places to serve the same purpose. You can relate this to OOPS concepts where you have different methods serving unique functionalities. These methods can be called from other classes or methods where the same functionality is needed. Similar to this, you lightning components can be included within other lightning components or pages where same functionality is needed. So this means:

  • Divide your complete requirement into small components instead of writing the complete code in one single component.
  • Each of these components should serve different requirement or problem.
  • This helps us to centralize some pieces our code, and in future, if any changes are needed, making the changes in one component will automatically reflect at all the places where this component is being used.
  • This also helps in code debugging as loosely coupled components can be easily debugged.

Example: Create one component to fetch a user’s session information. Session information might be needed in other pages or components as well, so instead of writing the same code in those components, you can simply include this component which will do the same this.

2. MAKE YOUR COMPONENT DYNAMIC

Once you have drilled down your requirement and decided the solution approach (or the components you will be building), the next thing you need to make sure is to make your component dynamic. What I mean by this is, your component should be able to process different user request with different data.

  • Use attributes instead of hard-coding or assuming the values, to make your component dynamic.
  • User design file to give your Admin freedom to customize your component. For example, your admin should be able to customize the details you want to show in “Session” component.
Development Phase

While you are in Development Phase, there are a lot of things that can go wrong and can impact your Lightning Component’s performance and scalability.

1. LEVERAGE BROWSER CACHE

When you develop a lightning component, you need to make sure that you leverage browser cache to boost your component’s performance. You can either make you action call (apex controller call) as setStorable, or you can make your @AuraEnabled method as cacheable=true.

  • Using browser cache sometimes avoids server side and you get the required data from the browser itself. Since you are avoiding server-side request and response, you will observe a major boost in component’s performance.
  • Make sure you only use cache for immutable action, that means you are not modifying the data you will get from your action. Using cache for mutable action can modify the data which is not latest which may harm the database integrity. 
  • Syntax: 1. action.setStorable();    Or    2. @AuraEnabled(cacheable=true)

Refer to this video: Using Browser Cache in Lightning Component

2. LDS IS YOUR FRIEND

Lightning Data Service is your friend when it comes to Lightning Component Development. Use LDS wherever possible and avoid your custom action.

  • LDS smartly cache the server response on the browser and use it for any future data loading.
  • LDS is smart enough to share the same data with other components as well. This means if there are multiple components on a page request for same data, LDS will only fetch it once and will share the response with all the components.
  • LDS is super smart on UI rendering, this means if any of the components is modifying the data, the remaining components which are using same data will automatically be updated with new data. Pretty cool!! Isn’t it?

Refer to this video: Lightning Data Service

3. CUSTOM CACHE WHERE STANDARD FAILS

You can build your own custom cache mechanism to use browser cache in Lightning Component. For example, if you want to override refresh interval and expiration interval of your lightning component, you can build your own cache where you can also set the duration of the refresh interval.

  • If you want to keep some of the data persistent for a complete user session, the custom cache would be a very useful solution.

4. LAZY INSTANTIATION

I have already covered this multiple times, lazy instantiation is the best solution when it comes to boosting your component’s performance.

  • You can use a base lightning component like lightning:tab, lightning:tabSet, lightning:accordion etc to use lazy instantiation. The markup within these components will be loaded only when these components are clicked or come in focus.
  • In your own component, you can use browser events like onfocus along with aura:if,  to create your own lazy instantiation solution.

Refer to this video: aura:if & Lazy Instantiation

5. AVOID LISTENERS

To get better component performance on the browser, you need to avoid active listeners. More the number of listeners, worse the performance will be. Since the listeners are always listening for new changes, they consume more power and resources which can definitely harm your component.

  • Try to use Unbound Expression, instead of Bound Expression wherever possible. Unbound expression uses one-time data loading and does not create any listeners on the page, where each bound expression creates 2 listeners in the DOM to read for changes.
  • Try to use aura:method instead of event handler as if you use event handlers, they will create listeners in the backend to read for the event. However, aura:method gets executed on demand and does not create a listener.
  • Use component event instead of application event as application events are being broadcasted to all the components on the same page. If any component has any handler for it but does not want to handle it on the same page you cannot prevent it from happening. Component events are a better solution if your component is in the same hierarchy.

Refer to this video: Avoiding Listeners

6. AVOID EXTERNAL LIBRARIES

External Libraries uses extra resources, they take time to load. Lightning Framework itself is powerful enough to handle most of the tasks hence try to avoid using external library until you really need it.

  • If you really need an external library in your lightning component, use the minified version of it as they are generally faster to load and provides the same functionality.

7. AVOID MULTIPLE ACTIONS OR SERVER CALL IN INIT HANDLER

I have seen people making multiple server calls from init handler. That is bad, very bad!! This will impact your component’s performance as you are assigning many actions to your component on the initialization itself. Avoid many actions in init and try to use only one action if possible.

8. USE WRAPPER CLASS

To avoid multiple calls from your init handler or from anywhere in your component, you can use Wrapper Apex class to merge your result on the server side and get your data in one server call itself. This will help in avoiding multiple server calls.

  • This is especially helpful if you are fetching result from multiple objects.

9. USE aura:if

aura:if is the best solution for conditional rendering and to boost component’s performance.

  • Avoid using CSS for conditional rendering as CSS only hides the markup from UI, but the markup is still part of your DOM. Also, any active listener on your markup will still be active. This will make your component slow.
  • Use aura:if, as this will load the markup declared within aura:if only when the isTrue attribute’s value is true. As soon as the condition becomes false, this will destroy the markup along with active listener if any.

Refer to this video: aura:if & Lazy Instantiation

Also Read: Aura:If (a saviour OR a destructor) – Best Practices

10. DECIDE WHICH CONTROLLER SHOULD DO WHICH TASK

Lightning Component has both client-side controller (JavaScript file) and server-side controller(Apex Class). Both of these controllers are powerful enough to perform the heavy operation on the data. You need to decide which controller you want to use for which operation.

  • Use of Apex Controller is not limited to fetch data or DML operation, you can use it for some other operation as well. Example: 
    • When you action returns a data to JavaScript, instead of performing a generic data operation in your JavaScript, you can use Server Side controller to perform these operations in advance and send them along the response. This will put heavy lifting task on your server which is a powerful system instead of your browser which is generally not a high end device.
    • Instead of making multiple action calls from your JavaScript and then, later on, combine the output, you can use your Apex class to wrap the response in advance and send the data in one single call itself.
  • Use of Javascript controller should be used for minimal data calculations or rendering solutions like DOM manipulation. You should not perform heavy tasks in your JavaScript.

** While you follow #10, you should also consider Salesforce governor limit when you move heavy tasks to Apex**

 

Check out this session on Benchmarking Lightning Component from #JaipurDevFest2018:

 

If you follow above Design and Development best practices, it will also help you in future troubleshooting and maintenance.

A well designed lightning component solution which has multiple components for different functionalities, will always be better to debug than a component doing all the task by itself with long markup and javascrcipt code.

>> Your suggestions are most welcome on this article as these views are my own based on my past experience. <<

(Visited 1438 Times)

1 thought on “Designing And Developing Lightning Component – Best Practices

Leave a Reply

Your email address will not be published. Required fields are marked *