Improve Lightning Component performance using simple 15 rules like Storable Actions, avoiding server trips, Lightning Data Service, Unidirectional data binding, creating component APIs etc
Avoid Server Trips
Most obvious idea to improve Lightning Component Performance is to avoid server trips. Let’s say, you need to know the queue Id to be assigned as owner in Case and also need custom setting information to derive the behavior of Lightning Component. There are two ways to achieve this – Call Apex Controller two times vs return combined results from Apex in single call and process JSON in client side controller of Lightning Component.
2. Use Storable Action
In this approach, Lightning component shows cached result instead of making immediate server trip. Lightning component will make server (Apex) call in background and if cached result is stale, then it would cache and refresh the lightning component. This is very useful for devices which has slow internet connections. If you are Facebook or Google News user, you would be easily relate it. When we open these apps, it shows previous feed and if there are new feeds, it gives us option to refresh view or automatically refresh it. All you have to do is, on client side controller of Lightning component, mark action as storable using this code action.setStorable(). This blog post explains working of storable action in detail. Continue reading “15 ways to improve performance of Lightning Components in Salesforce”
Note : Everything we are discussing here is completely covered as part of Live coding in Apex Salesforce Saturday organized by Amit. Would like to thank Mohith for his support and answers during the demo. It also shows How SalesforceDX can be used daily by developers to perform development.
Chevron Component build in Lightning with Same look and feel as of Salesforce Path in read only mode
Salesforce Path is awesome feature, where you can display picklist value at top of record page and on click, it updates value in Salesforce database. However same solution does not fit in all scenario. Consider situation where picklist field is supposed to be changed by some other process or Integration. Now you don’t want anyone to change it from user interface. Even though you like Salesforce Path to show summary at top of page however it won’t be useful in above scenario.
Because of this, I created a Read Only Path Component in Lightning. I tried to keep same look and feel as of Standard Path component. This component will need only two inputs
Record Id – It would be automatically passed if we use it using App Builder
Field API Name – API name of picklist type of field
Now think about it. Only thing I got is Record Id. How would I know Object Name ? How would I know all picklist values for field name supplied ?
Best Practices for Salesforce Lightning Component. How Lightning Data Service can improve Lightning Component performance and solve inconsistent data problem without writing single line of Apex code. Demo source code, image and slides included.
If you have worked on Visualforce and started playing with Lightning Component, you must have identified one important missing feature, which is standard Controller.
Lets assume a scenario, you have two Lightning Components on Account page. One Lightning Component is used to show some fields and other component is used to edit same record.
Problem 1 :
To achieve this, both Lightning components would invoke Apex method separately at the cost of performance, by issuing duplicate server calls. Below image depicts problem, where multiple Lightning component requests same content by making separate server calls.
How to show Lightning component on public sites without need of user authentication
I have posted few articles on Lightning Out. In this post, we will see how Lightning components can be displayed on public website. To access these Lightning components, users don’t need to login to Salesforce.
How to print or export code review feedback report generated by Salesforce Lightning CLI tool
Update : We can use this heroku app to scan Lightning component online and get code review feedback. Complete source code is available here. We don’t need to install Lightning CLI until its project compliance issue.
In this post, we discussed that how Lightning CLI can be used to get a code review information of custom Lightning component. However, code review is either printed or exported as a file in text or JSON format. Question is, how to get Lightning component code review feedback in HTML or PDF format ?
I tried various options available here however there were no way to export code review feedback generated by Lightning CLI. Output generated by Lightning CLI is not presentable to business executives or clients.
How to use Lightning component in node.js (External websites) by using Lightning Out. It shows how to enable CORS and SSL in Node.js with Video and complete source code.
If you were the users of IGoogle, few years back, you would be excited to know that web development is progressing in that direction. Architect of web application development is getting shifted towards component based development by introducing concepts like Web Components and frameworks like polymer and Lightning Components. One of the possible use case of component driven development is ability to use whole component externally. In IGoogle, components were built by partners and then was exposed as widgets to be used on your custom Google home page. Salesforce product team, being visionary came up something like this by introducing Lightning Out. With the help of Lightning Out, we can surface our existing Lightning Component to external websites. Previously, we already discussed that how Lightning components can be used on Visualforce pages using Lightning Out.
Complete Source code to create generic and responsive Table component in Salesforce Lightning
Almost one year ago, I wrote this article to demonstrate how to create a responsive datagrid component in Lightning. Recently, when I went back to the post, I realized that responsive table component in Lightning could be a lot more easier. So, lets see easier and efficient approach to create a Responsive and Generic Table component in Lightning.
First and foremost, we need to provide data in below JSON format to Lightning component, everything else would be taken care by component itself.