Lightning Component Best Practices

Question

Inspired from this question General trigger bulkification - best practices

I wanted to ask what are the best practices when it comes to lightning components development?

Answer 1

These can be found at Lightning Components Performance Best Practices

1. Data retrieval
2. Data caching
3. Component instantiation
4. Conditional rendering
5. Data binding
6. Lists (aura:iteration)
7. Events
8. Third-party JavaScript libraries
9. Base Lightning Components
10. Image optimization
11. Rendering and reflow
12. Development settings vs production settings
13. Performance profiling tools

The above links all point towards the same linked Blog above, but redirect to their section.

Events Best Practices

Always try to use a component event instead of an application event, if possible.

Understanding JavaScript Controllers Versus Helpers In Lightning Components

When To Use Controllers v/s Helpers: Use Controllers to listen to user events and other events like component, application events. But delegate business logic to helper.

Just a some quick mentions,

Don't try to re-invent the wheel, when possible, leverage the provided Base components found in the Component Reference guide.

Mentioned in the blog, but worth repeating, Avoid Apex when possible.

Eventhough The above blog is oriented towards Performance Best Practices, I believe these go in Hand with Development Best Practices.

Leverage Salesforce's Lightning Design System when styling components.

Last but not least, learning how to debug your code is essential, I must admit, troubleshooting is not the easiest thing to do when developing in lightning, but this post How do I debug my lightning component? should provide useful.

I believe the above references are a good start for Best Practices when developing Lightning Components.

Answer 2

Rather a big subject to cover here... I offer these more as a list of things I have learned that might save others a bit of time than as a comprehensive list of best practices:

• Think and work in components and largely forget about the DOM
• Forget about patterns that worked well for jQuery
• Start out without any 3rd party libraries; only add them when there is no alternative (and many will not work because they don't meet the necessary standards)
• Remember that HTML markup in a component is translated into aura:html components too so access via those components
• Base logic on aura:id values never on DOM id values
• Only touch DOM elements as a last resort
• Get used to the LockerService getting in the way of simple logic
• When a component is getting complicated, break it up into multiple components just as you would break a complicated class up into multiple classes: creating a large number of components is normal
• Use the lightning:* components wherever possible because those have the SLDS styling wired in and are being invested in by Salesforce; but don't be surprised to hit bugs as the components are still quite new
• Learn about all the Developer Tools in your browser: you are going to need them to do any significant work
• Develop using VSCode/SFDX
• Run all code through the sfdx lightning:lint tool
• Particularly if you are an ISV, see the SFDX-Falcon Project Template for ideas about how to organize your components
• Key references are the Lightning Component Library and the Lightning Design System CSS.
• Learn about both {! ... } and {# ... } expressions
• Get used to forgetting the ugly v. prefix needed to access attributes
• Learn about v.body
• Learn about and use Promises
• JavaScript controller functions can't be factored out into functions calling other functions: get used to just delegating to the helper where such calls can be made
• As IE11 is still a browser supported by Salesforce, double check before using newer JavaScript features
• Automated testing is a challenge: the Lightning Testing Service is a basic framework only

Answer 3

I want to add my input on top of other comments.

1. Use Lightning Inter-Component Communication Patterns to pass data around lightning components.

2. If you create a component dynamically in JavaScript and that component isn't added to a facet (v.body or another attribute of type Aura.Component[]), you have to destroy it manually using Component.destroy() to avoid memory leaks.

3. Sending a request from a Lightning component to an Apex Controller and getting back a response is a path that has several potential failure points. Developers sometimes assume for the sake of simplicity that “things will work” and don’t always perform all the proper error checks and handling.we need to look at best practices for handling server-side and client-side errors. Error Handling Best Practices for Lightning and Apex