When it comes to developing Lightning components, Salesforce developers have two programming models to choose from: Aura Components, and the latest model, Lightning Web Components (LWC).
Now, if you’re thinking, “I just mastered developing Aura components, and now there’s something else I have to learn?” we have good news for you—Lightning Web Components was developed to align with modern web standards, making the coding much easier for non-Salesforce developers.
Not only is it easier to develop with Lightning Web Components, but it’s easier to understand as well, (plus, it just looks better). For a high-level overview of Lightning Web Components, check out our article, “An Introduction to Salesforce Lightning Web Components.” But if you’re ready to dive into specific tips and tricks for using Salesforce Lightning Web Components (in addition to when you should probably still develop in Aura), this article is the one for you.
Let’s get started.
When to Develop in Aura vs. Lightning Web Components
With two options for developing Lightning components, it can be difficult to decide which best suits your needs. In most cases, we recommend starting with Lightning Web Components unless there’s a specific functionality you need that only exists in Aura.
For example, let’s say you needed an interface component because you need to be able to override a button. Lightning Web Components doesn’t have interface components, and while you can create your own Lightning button component, if you want to override an existing button that currently exists in Salesforce, you’d have to involve Aura through what’s called composite development.
Specifically, you’d create a custom wrapper in Aura with the functionality to override the button in question which would then call on LWC moving forward. While working in Aura is required for this example, you’re really only doing the bare minimum with it by embedding a Lightning Web Component that has all the logic with the modern interfaces inside the Aura component.
Another place where Aura is still used is in custom layouts. If you plan to create a layout on a digital experience page, you’ll need to develop it with Aura.
Aura vs LWC Reminder
Both Lightning Web Components and Aura components can play nicely together, but it’s important to remember that:
- Aura components can contain Lightning Web Components
- Lightning Web Components cannot contain Aura components
Updating Data in Lightning Web Components (Without Reloading the Page)
A thing to remember with Lightning Web Components is how to regularly update the data. Normally, once you load a page in LWC, you tap into the Salesforce data and load what you have. The system caches that data locally, however, so every time you make changes to the page, it won’t automatically refresh the data unless you tell it to. If you want to update data without manually reloading the page, you can use what’s called the wire method.
In this case, you could issue a refreshApex. Issuing a refreshApex tells the component that the data might be old and needs a refresh. (If you deleted a record from a list, let’s say, and now need to see the updated list.)
Note that Lightning Web Components expects a developer to do their best to minimize calls to the database to minimize processing that can impact network traffic. This means you’ll need to be conscious of how you’re updating data in the background, as well as how you’re displaying it. You have to look at the stack of events that are happening with your process and decide whether a specific refresh data call (if you’re using the wire method) would be appropriate.
Creating a Responsive Experience in Lightning Web Components with the Event Model
Responsive design enables your app page or website to scale perfectly across screen sizes from mobile to desktop. Having a responsive experience improves app maintainability and reliability while future-proofing for different browsers and platforms. Creating a responsible experience in Lightning Web Components with an event model is a two-step process.
First, you start by creating the component with no data, merely the structure of the page you’re going to display. Second, you issue a call to fill that structure with data. As you start filling in the data, it may trigger changes in the layout. For example, based on the data you get, you might need to show a different kind of button or field. If that happens, the system will trigger a new redrawing and the layout of the page.
You’ll work through these cycles until you’ve retrieved all the data and there are no more conditional statements to evaluate. And best of all, the data will be presented in a way that makes sense based on the screen size of the user. (Say goodbye to tiny web pages on mobile.)
Getting Started with Salesforce Lightning Web Components
Lightning Web Components offers the latest web standards, delivers better performance and productivity, and interoperates seamlessly with existing code. Of course, there can be some pitfalls with it as you’re just starting out (which we’ll share in our next Salesforce article). But don’t let that keep you from adding LWC to your Salesforce toolbox.
If you’d like to avoid those hazards, we recommend partnering with the experts. Our senior-level Salesforce consulting team can help train, support, implement, or mentor your Salesforce crew. Contact us today to get started.
