Lightning Components Best Practices by Fabien Taillon
0 likes156 views
This document provides performance best practices for Lightning Components. It recommends: - Setting aura:if attributes to false by default to avoid unnecessary rerendering. - Avoiding setting multiple items in an aura:iteration in the same cycle to improve performance. - Being cautious of aura:iteration since it rerenders all lines even without changes. It's better to filter lists in the parent component. - Using action.setStorable() to cache data and make use of storable actions when possible to improve performance.
![Needed to clear unrendered body
Performance degradation] markup://aura:if ["3:313;a"] in c:myComponent ["1:313;a"] needed to clear
unrendered body.
More info: https://developer.salesforce.com/docs/atlas.en-
us.lightning.meta/lightning/perf_warnings_if.htm
Always set <aura:if isTrue="{!v.visible}"> to false by default, then switch it to true.](https://image.slidesharecdn.com/dugbordeaux-aura-180711161451/85/Lightning-Components-Best-Practices-by-Fabien-Taillon-3-320.jpg)
![Multiple items set in the same Aura cycle
[Performance degradation] markup://aura:iteration [id:5:251;a] in c:myComponent ["1:251;a"] had
multiple items set in the same Aura cycle.
More info: https://developer.salesforce.com/docs/atlas.en-
us.lightning.meta/lightning/perf_warnings_iteration.htm
Don't set several time your list values
• As a default value and then later in JS
• Several time in JS](https://image.slidesharecdn.com/dugbordeaux-aura-180711161451/85/Lightning-Components-Best-Practices-by-Fabien-Taillon-4-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Lightning Components Best Practices by Fabien Taillon (20)
Ad
More from Bordeaux Salesforce Developer Group (13)
Ad
Recently uploaded (20)
Lightning Components Best Practices by Fabien Taillon
- 1. Lightning Components Performance best practices @FabienTaillon Fabien Taillon, Salesforce MVP, CTO @TEXEÏ Lightning Components Performance best practices @FabienTaillon Fabien Taillon, Salesforce MVP, CTO @TEXEÏ
- 2. Activate Debug Mode for your user
- 3. Needed to clear unrendered body Performance degradation] markup://aura:if ["3:313;a"] in c:myComponent ["1:313;a"] needed to clear unrendered body. More info: https://developer.salesforce.com/docs/atlas.en- us.lightning.meta/lightning/perf_warnings_if.htm Always set <aura:if isTrue="{!v.visible}"> to false by default, then switch it to true.
- 4. Multiple items set in the same Aura cycle [Performance degradation] markup://aura:iteration [id:5:251;a] in c:myComponent ["1:251;a"] had multiple items set in the same Aura cycle. More info: https://developer.salesforce.com/docs/atlas.en- us.lightning.meta/lightning/perf_warnings_iteration.htm Don't set several time your list values • As a default value and then later in JS • Several time in JS
- 5. More generally on aura:iteration on aura:iteration Be careful: for every update to the list, all lines are rerendered (even if there is no change) • No real workaround • Have it in mind • Avoid doing too many logic in the child • Filter the list in the parent instead of using aura:if on the line • For 5 records displayed on a list of 1000, aura:if will be created 1000 times • Everytime you set your list (using component.set), your components init is called (not only once in an aura:cycle)
- 6. action.setStorable(); Makes use of cached data https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_storable_actions.htm https://developer.salesforce.com/blogs/developer-relations/2017/03/lightning-components-best-practices-caching-data-storable- actions.html Use storable actions when you can