Lightning Web Components (LWC) are reusable components that provide data in context on Salesforce pages. They are custom HTML elements built using HTML and modern JavaScript. Salesforce Mobile SDK enables developers to build custom mobile applications tailored to their specific business and UI needs. With the release of Salesforce Mobile SDK 8.2, it’s now easy for developers to include the power of Lightning Web Components within their custom mobile applications.
I’m so excited to share details about this feature as this has been one of the more popular requests from our developer community. And, this initial integration of Lighting Web Components with Salesforce Mobile SDK is just the beginning. Over the next few major Mobile SDK releases, we’ll build a tighter integration with more features to better combine Lightning with native functionality.
For this 8.2 release, our goal is to make the developer experience simple and easy. Check out all the great features we’ve included for you.
LWC in Mobile SDK features
- New application type for forcehybrid: hybrid_lwc, that creates a project preconfigured for LWC
- New template, HybridLWCTemplate, that includes a Salesforce DX server side project
- Mobile SDK Visualforce page to host your LWC
mobilesdkobject that allows LWC to communicate with the app’s native container
If this is your first introduction to Salesforce Mobile SDK, learn more in the Mobile SDK Trail on Trailhead.
Mobile SDK supports different application types on both iOS and Android. The applications types available are native, hybrid local, hybrid remote, and React Native. Mobile SDK’s 8.2 integration of Lightning Web Components is targeted specifically for hybrid remote applications. Hybrid remote applications are mobile applications that use a web view for their user interface but host the HTML/JS/CSS remotely on a server.
When Mobile SDK was first released, the only way to build a custom web app hosted on Salesforce was Visualforce. Since then, new UI technologies have been rolled out: first Lightning components and more recently Lightning Web Components (LWC). Lightning components and Lightning Web Components haven’t been supported in the Mobile SDK……… until now.
Mobile SDK’s solution works with Lightning Web Components, and this helps us bring our customers forward in a supported way as the Mobile SDK continues to enhance and tighten our integration story with LWC.
To get started, you’ll need to follow a few easy steps.
High level steps
- Build new or leverage existing Lightning Web Components
- Preview Lightning Web Components for mobile locally using new Mobile Debugging Tools in Microsoft VSCode
- Use the Mobile SDK template for Lightning Web Components
- Add your Lightning Web Component to the Mobile SDK Visualforce page
After following the above high level steps, your Mobile SDK hybrid remote application handles the rest. You can continue to build, debug, and preview your mobile application to meet your specific business needs. In the end, publish an amazing custom mobile app that combines Lightning Web Components with native functionality.
Creating your first Mobile SDK + LWC application
There is a new application type for forcehybrid: hybrid_lwc. This application type is also available if you create your application using Mobile SDK sfdx plugin.
When you select this application type, the generated application contains a server folder that holds a Salesforce DX project. You’ll need to push it to your org before logging into your mobile application. We’ve updated the “Next steps” that are shown after running forcehybrid accordingly.
The following screenshot shows the output of forcehybrid, as well as the generated mobile application (after you’ve logged in).
What’s in this generated application?
The generated application is set up and ready to include Lightning Web Components. The application hosts its root Lightning Web Component on a Visualforce page. This Visualforce page is provided by Mobile SDK, and it’s important to use the generated page to simplify the entire developer experience.
For more information, see Use Components in Visualforce in the Lightning Web Component Developer Guide.
The generated project also contains:
- The JavaScript code for Cordova and the Mobile SDK plugins.
- A simple Apex class that examines the user agent to decide what JavaScript libraries to serve (either for iOS or for Android).
This approach has multiple benefits:
- The Mobile SDK container already knows how to seamlessly handle session expiration of a Visualforce page.
- Interaction with the native container (via the Mobile SDK Cordova plugin) is possible. We construct a mobilesdk object, and pass it into the root Lightning Web Component to allow it (or any components below it) to communicate with the native container (for example, to make network calls, store data in SmartStore, or even take advantage of MobileSync).
This example shows the Lightning Out JavaScript code added to a host Visualforce page. You can see the root Lightning Web Component, ContactList, is referenced as “c:ContactList”.
In the template, ContactList gets the mobilesdk object as a property, and uses it to get data from the server through the network plugin. The relevant code taken from lwc/ContactList.js is highlighted below.
Modifying your first Mobile SDK + LWC application
The generated application uses the example ContactList Lightning Web Component. When creating your own application, you’ll want to modify the application and replace ContactList with your own specific Lightning Web Component.
Developing a Lightning Web Component for your mobile application should be no different than developing for a desktop browser. For more information on building Lightning Web Component, review the trail Quick Start: Lightning Web Components.
The bulk of your work should be in server/force-app/main/default/lwc/. If you need a different root component, simply update server/force-app/main/default/pages/YourAppName.page accordingly.
For a component to talk to the native container, you need to pass it the mobilesdk object as a property. Other than this mobilesdk object, you write your components the same way you would write any other Lightning Web Component. It should run within your Mobile SDK application with no additional changes.
Our only additional recommendation is to consider the smaller mobile screen. Salesforce has powerful new tools that enable you to build and debug mobile-ready Lightning Web Components with mobile in mind. You can preview your Lightning Web Components for mobile locally via Microsoft Visual Studio Code. Check out the Mobile Debugging Tools page on developer.salesforce.com for more information.
Adding LWC to an existing Mobile SDK application
If you already have an existing hybrid remote Mobile SDK application and you now want to add Lightning Web Components, we recommend that you recreate the application to use the template. In a hybrid remote application, the native code is separated, and can be added back in fairly easily.
Here are the steps to integrate your LWC:
- Create a new Mobile SDK app using the HybridLWCTemplate.
- Move parts of your existing application into the application created by the template.
- Put your LWC components under ./server/force-app/main/default/lwc
- Make your root LWC element the one created in ./server/force-app/main/default/pages/<yourApp>.page (change $Lightning.createComponent(“c:ContactList”, …) to $Lightning.createComponent(“<yourRoot Component>”, …)
- Edit bootconfig.json
- Make sure it has: “isLocal”: false, “startPage”: “apex/<yourApp>.page”
- Move your native code to this new application
Limitations
The generated application is running LWC inside a Visualforce page, which has some known limitations. Review Lightning Out Considerations and Limitations in the Lightning Web Components Developer Guide.
Find out more about Mobile SDK and other mobile development tools at the Salesforce Mobile Developer Center. Mobile SDK developer information can be found on GitHub — Mobile SDK for iOS & Mobile SDK for Android. Get started today!
About the authors
Sue Berry is a Director of Product Management at Salesforce where she focuses on Salesforce Mobile. She’s currently working on Salesforce Mobile SDK and the new Mobile tool for LWC previews locally and in Salesforce. She has been building developer tools for over 15 years.
Wolfgang Mathurin is an architect in the Salesforce Mobile Platform team and has worked on Salesforce Mobile products for the last ten years. He has been in development for over 20 years.