In today’s mobile-driven world, seamless offline access to critical business data is a necessity for users who need to stay productive but don’t have a consistent internet connection. This capability ensures that vital information remains available for tasks like field service and healthcare, regardless of location or connectivity status.
With Salesforce’s LWC offline capabilities, you can access, update, and store data locally on your mobile devices, even when you’re disconnected from the internet. Once your device reconnects to the network, all the data syncs seamlessly, ensuring that everything is up to date across all systems. LWC Offline is an optional feature that you can easily add to existing mobile apps, like the Salesforce mobile app and the Field Service app, and it will soon be available in the Consumer Goods app too.
In this blog post, we’ll explore how to build better Lightning web components (LWCs) that are optimized for offline usage using Salesforce mobile tools, especially ESLint rules for LWCs.
What is ESLint?
ESLint is an open-source static code analysis tool that enforces coding standards and best practices. This tool supports a modular architecture with plugins and customizable rules, and Salesforce provides a number of ESLint plugins and rules for LWC development.
ESLint is a CLI-driven tool, but thanks to VSCode extensions, ESLint rules are displayed in Visual Studio Code whenever your code violates them. These rules correspond to issues that impact your code’s integrity. When a rule violation occurs, a squiggly line appears on the affected code, and you can get the details of the violation by hovering over it.
For example, in the screenshot below, the squiggly line is displayed under the Comments__c field. Hovering over it displays a detailed message that the field’s value could exceed 32 KB and that large data sizes can negatively affect mobile app performance, potentially resulting in fewer returned records than expected.
Salesforce’s ESLint plugins provide a number of custom rules. Some of these are validations specific to mobile offline development for Salesforce applications, such as the Salesforce app and the Salesforce Field Service mobile app.
Key features include real-time linting of Lightning web components (LWC) code directly within VSCode, ensuring immediate feedback on potential issues. It also incorporates specific rules tailored for mobile offline development, guiding developers to follow best practices for creating LWCs that function effectively without a continuous internet connection. Furthermore, this functionality actively enforces code quality standards, promoting maintainable and robust Salesforce applications.
Why should you use ESLint?
- Optimizes mobile app performance: Mobile devices often have performance and memory constraints, and different user interaction patterns. ESLint validators help enforce best practices, ensuring that your LWC components run smoothly on mobile without unnecessary resource usage.
- Enhances developer experience: ESLint provides helpful warnings and errors as you code, improving the coding experience for mobile, and preventing potential bugs in production.
- Prevents over-complex components and silent failures: ESLint makes things simple by flagging overly complex components that may cause out-of-memory issues, ensuring that mobile components are lightweight, fast, and don’t result in unexpected behaviors.
What’s new in Salesforce VSCode Mobile Extensions V0.4.0
The latest version of Salesforce Mobile Extensions for Visual Studio Code introduces enhanced diagnostics to help identify and resolve mobile and offline performance issues. These improvements specifically flag potential performance concerns related to:
- Large GraphQL queries (many or big fields, exceeding data sizes of 32 KB) that can slow mobile apps and limit the number of records received
- Base Lightning web components that aren’t optimized for mobile offline use
- Use of wire adapters
getRelatedListRecordsandgetRelatedListCount, which are supported offline, but will not update to add or remove records that are created or deleted while offline
Setting up ESLint validation with VSCode Mobile Extensions
To get started, you’ll need to follow a few easy steps to install the prerequisites.
- Install Salesforce CLI.
- Install VSCode.
- Install Salesforce Extension Pack and Salesforce Mobile Extensions for Visual Studio Code within VSCode.
Alternatively, you can also use the CLI to install the eslint-plugin-lwc-mobile plugin to your package/project by using one of these package managers:
Yarn
$ yarn add --dev @salesforce/eslint-plugin-lwc-mobile
npm
$ npm install --save-dev @salesforce/eslint-plugin-lwc-mobile
You can enable static analysis on all the .js files used in your LWCs by extending the plugin @salesforce/lwc-mobile/recommended in the .eslintrc.json configuration file.
{
"extends": ["eslint:recommended", "plugin:@salesforce/lwc-mobile/recommended"]
Validating mobile offline code with ESLint
Now that you’re all set up with the required tools, let’s walk through a simple example of how ESLint can help identify potential issues in GraphQL queries. In this scenario, we’ll create a custom field with a length greater than 32,768. This will ensure that the field is capable of holding more than 32 KB of data and should be flagged by ESLint when used in GraphQL queries, so that the mobile app remains performant and optimized.
- In your Salesforce org, navigate to Setup > Object Manager and create a new custom object,
Book__C.
- Define the custom field “Review” as shown in the screenshot below. Make sure that the length of this field is greater than 32768.
- Now go to VSCode and authorize your org. Create a new LWC component and open the JavaScript file.
- Add the following code for creating a GraphQL query to fetch the book records.
import { LightningElement, wire } from "lwc";
import { gql, graphql } from "lightning/uiGraphqlApi";
export default class KidsBook extends LightningElement {
@wire(graphql, { query: "$bookQuery", variables: {} })
graphqlQueryResult({ error, data }) {
if (data) {
this.results = data.uiapi.query.Book__c.edges.map((edge) => edge.node);
}
this.errors = error;
}
get bookQuery() {
return gql`
query BookList {
uiapi {
query {
Book__c {
edges {
node {
Id
Name {
value
}
Review__c {
value
}
}
}
}
}
}
}
`;
}
}- Notice the squiggly line that appears instantly on the Review__c field. If you hover over it, you’ll find a warning provided by ESLint.
- To fix this issue, you can read more about the warning by clicking on the hyperlink provided in the warning.
Conclusion
Leveraging Salesforce mobile tools, particularly VSCode Mobile Extensions and the power of ESLint rules, is crucial for building performant and reliable Lightning web components for offline usage. By proactively identifying potential issues in your code during development, you can ensure that your mobile applications deliver a seamless and efficient experience, even without a network connection.
In the coming releases, we will be introducing Mobile Agent in Agentforce for Developers, a powerful feature designed to further streamline and enhance the mobile offline experience by using AI to automatically review and optimize your existing LWC code for a seamless offline functionality.
Resources
- ESLint plugin
- LSPs to reduce out of memory issues
- Use Salesforce Features While Offline
- Offline considerations and limitations
About the author
Shalini Jain is a Director of Product Management at Salesforce, where her primary focus lies in shaping the Mobile Platform Experience for developers. Her current initiatives are heavily invested in enhancing developer productivity, as evidenced by the tools highlighted throughout this blog post. Furthermore, she is spearheading the development of Mobile AI agents to further streamline and optimize the development workflow, with the ultimate goal of delivering a truly seamless and intuitive experience for all Salesforce mobile developers.
