Let learn Lightning Web Components (LWC) Best Practice like when to use apex class and when not to use apex class. When we should use which event in LWC.
1. LWC component Bundle naming convention
Check this post to learn about what is camelCase, PascalCase and kebab-case.
- Html file : Use camel case to name your component and use kebab-case to reference a component in the markup
- Bundle Component : use camelCase.
2. Calling Apex From LWC
There are two way to call Apex class in Lightning web component.
- Wire a property
- Wire a function
Wire Vs Imperatively :
As per Lightning component best practices use @wire over imperative method invocation. @wire fits nicely in the overall Lightning Web Component reactive architecture. Salesforce is building some performance enhancement features that are only available with @wire. But there are a few use cases,, that require you to use imperative Apex.
Wire Property Vs Wire Function :
Prefer wiring to a property. This best practice applies to @wire in general (not just to wiring Apex methods).
3. Lightning Data Service (LDS)
As per LWC best practice use Lightning Data Service functions to create,Record, and delete a record over invoking Apex methods. Yes there are some use cases where you need to multiple records then we can use Apex methods.
Lightning Data Service is built on top of User Interface API. UI API is a public Salesforce API that Salesforce uses to build Lightning Experience. Like its name suggests, UI API is designed to make it easy to build Salesforce UI. UI API gives you data and metadata in a single response
Give preference to user interface form-type in below order.
- lightning-record-form : It is the fastest/most productive way to build a form.
- lightning-record-view-form : If you need more control over the layout, want to handle events on individual input fields, or need to execute pre-submission
- @wire(getRecord) : If you need even more control over the UI, or if you need to access data without a UI
4. Event in LWC
There are typically 3 approaches for communication between the components using events.
- Communication using Method in LWC ( Parent to Child )
- Custom Event Communication in Lightning Web Component (Child to Parent )
- Publish Subscriber model in Lightning Web Component ( Two components which doesn’t have a direct relation )
Here is some recommendation for DOM Event.
- No uppercase letters
- No Spaces
- use underscores to separate words
- Don’t prefix your event name with string “on”.
Learn more about Events in lightning web components here.
5. Streaming API, Platform Event, Change Data Capture
The lightning/empApi module provides access to methods for subscribing to a streaming channel and listening to event messages. All streaming channels are supported, including channels for platform events, PushTopic events, generic events, and Change Data Capture events. This component requires API version 44.0 or later. The lightning/empApi module uses a shared CometD connection. Example Code.
6. How to debug LWC
- Enable Debug mode
- Console warnings
- Pretty data structure
- Caution – it reduces performance of Salesforce, make sure its disabled in production
7. Use Storable Action
Use Storable Action, It will reduces call to Server. Syntax – @AuraEnabled(cacheable=true)
Caution: A storable action might result in no call to the server. Never mark as storable an action that updates or deletes data.
For storable actions in the cache, the framework returns the cached response immediately and also refreshes the data if it’s stale. Therefore, storable actions might have their callbacks invoked more than once: first with cached data, then with updated data from the server.
Lightning Web Components (LWC) Best Practice
Hear from the man who helps make it happen: Salesforce Principal Developer Evangelist René Winkelmeyer. Building rich, efficient, and resilient Lightning Web Components is no black magic. This webinar will cover best practices around:
- Using public, and private properties for effective component composition.
- When we should use @api or @track variable
- Event communication for child-to-parent as well as for sibling components (pubsub).
- Parent to Child Communication
- Child to Parent Communication
- When, and when not, to use Apex with Lightning Web Components
- Aura interoperability
Please note that we have limit of 100 attendees that can join the online sessions. However, recording will be posted on our YouTube channel. Make sure to subscribe our YouTube and click on bell icon to get notification for video upload.
I hope this lightning web components best practices will help you become a good Salesforce Developers.
Amit Chaudhary is Salesforce Application & System Architect and working on Salesforce Platform since 2010. He is Salesforce MVP since 2017 and have 17 Salesforce Certificates.
He is a active blogger and founder of Apex Hours.