Now that the Lightning Experience is available through the Salesforce mobile app launch, all components are mobile components. It’s important to make sure we’re all building applications and components that work well everywhere, and especially on mobile.
Like all mobile users, I’ve come to expect amazing user experiences on mobile devices.
To help engineers successfully build components that work well on mobile, you’ll need a few key tools to help you. Salesforce is excited to be rolling out two new tools to help you verify that your mobile Lightning components are truly amazing. These new tools are:
- Mobile Previews for Lightning Web Components local development
- Virtual Device Builds for the Salesforce mobile app
Mobile Previews in local development for Lightning Web Components
When you’re developing Lightning Web Components locally in Microsoft Visual Studio Code, you need a way to preview your components and continue iterative development. Previously, you’ve only been able to preview for desktop browsers as you move through the development process.
Now you can also preview for mobile devices during local development of your Lightning Web Components. We’ve added Mobile Previews to the Salesforce VS Code Extensions for Lightning web components. We’re bringing this new functionality to the tooling you’re already using for Lightning web component development.
The Salesforce CLI Mobile Extensions plug-in is your key to mobile debugging. It lets you preview your Lightning Web Components on virtual mobile devices, and even view your changes instantly as you continue to develop and debug.
At a high level, the Mobile Extensions plug-in provides two tools:
Setup
Setup helps non-mobile developers make sure that the Android emulators and iOS simulators are properly configured and ready to display your components locally. With Setup, you can
- Verify the virtual devices are installed properly and with the correct SDK versions
- View what’s missing and needs to be installed to continue with Mobile Previews
Preview
Preview extends the local preview capabilities of the Local Development Server plug-in. With Mobile Extensions, you will now be able to select new Android and iOS preview options in addition to desktop.
Simply select the virtual mobile device type you want to use, and your Lightning Web Component is sent to the virtual mobile device for you to preview. As you continue developing your component, you can view the changes instantly in the virtual mobile device.
Salesforce mobile app virtual device builds
You may be saying, mobile previews in local development are awesome, but I need to preview and debug for mobile in Salesforce. Well, then I’m pleased to announce our second mobile tool coming your way today. With Salesforce mobile app virtual device builds, you can use the Salesforce mobile app on virtual devices to verify your components work well with other Salesforce components.
You can, of course, review components in the production Salesforce app on physical mobile devices. However, with a great variety of devices to test on, your hardware budget could soon be depleted. To test your Lightning components quickly and economically, you can use these handy new virtual device builds.
The steps to begin using them are simple and straightforward. Salesforce builds come in packages that you can drop onto a running instance of a virtual device—simulators for iOS and emulators for Android. You can then test Salesforce on any supported virtual device provided with these environments. Simply log into the Salesforce mobile app as you normally would and begin viewing your pages and components virtually.
To learn more and get started today, check out our Mobile Tools page on developer.salesforce.com.
About the Author
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 tools featured in this blog. She has been building developer tools for over 15 years.