Best Practices To Be Followed In Salesforce Lightning Web Components
Introduction
Lightning Web Components (LWC) is a modern Salesforce development method that uses open web standards (such as standard JavaScript and HTML), allowing developers who have never worked with Salesforce to participate directly, while current developers can also use industry-leading technologies and tools.
Here are a few best practices to consider:
1) The naming convention for LWC component bundles
Using camel case to call the components in the HTML file, and kebab-case to refer to a component in the markup file.
The file containing JavaScript: The name of the Javascript class should be written in PascalCase. For bundled components, use camelCase.
2) Apex
In Lightning Web components, there are two ways to call Apex classes.
- Imperative
- Wire
Imperatively Vs Wire:
According to the best practice of Lightning components, use @wire on imperative method calls. @wire is very suitable for the entire Lightning Web Component reactive architecture. Salesforce is working on several performance changes that will only be open to @wire. Some use cases, however, necessitate the use of imperative Apex.
Don't forget to check out: Learn All About How to Use Lightning Spinner | Salesforce Lightning Component
Wire functions and wire characteristics :
Wiring is preferred over attributes. Best practices generally apply to @wire (not only to the wiring Apex method).
3) Lightning data service
LWC advises creating, tracking, and deleting records by calling Apex methods and using Lightning Data Service functions. Yes, in some use cases, you need multiple records, then we can use the Apex method.
The user interface API is the core of the Lightning Data Service. UI API is the public Salesforce API used by Salesforce to build Lightning Experience. As the UI API is intended to make the process of developing a Salesforce UI easier. UI API provides you with data and metadata in one response.
The form type of the user interface is prioritized in the following order.
lightning-record-form: This is the fastest/most effective way to create a form.
If you need more layout control, want to manage events on a single input field, or need to perform a pre-commit @wire (getRecord), use lightning-record-view-form. If you need more control over the user interface, or if you need to access data without using a user interface.
4) Events in the LWC
Generally, there are 3 ways to communicate between components using events.
In LWC, use communicate approaches (Parent and Child)
In Lightning Web Components, you can configure event communication (child to parent)
In Lightning Web Components, publish a subscriber model (two components that are not directly related)
Here are a few ideas for DOM events.
- No capital letters
- Out of space
- Use underscores to separate words
- Do not prefix the event name with the string "on".
5) Adjust data capture, stream API, platform events
Methods for subscribing to streaming media channels and listening for event messages are available via the lightning / empApi module. Supports all streaming media channels, including platform events, PushTopic events, general events and Change Data Capture event channels. API version 44.0 or higher is needed for this component. The shared CometD link is used by the lightning / empApi module.
Check out another amazing blog by Anuj here: Communicate Between Components Using Events in Lightning Web Components | Salesforce Developer Guide
6) How to debug LWC
To see the debugging proxy values of unminified JavaScript and info, use Chrome's lovely JS settings. This is an example.
- Enable debug mode
- It provides uncompressed Javascript
- Console warning
- Beautiful data structure
- Be careful-it will degrade Salesforce performance, make sure to disable it in production.
7) Make use of actions that can be saved (stored)
It will minimize calls to the server by using storable operations. (cacheable = true) Syntax-@AuraEnabled(cacheable = true)
Responses