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.
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.
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
10. DECIDE WHICH CONTROLLER SHOULD DO WHICH TASK
- Use of Apex Controller is not limited to fetch data or DML operation, you can use it for some other operation as well. Example:
** 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. <<