- Hi everyone I'm Sue Berry,
I'm a Product Manager in Mobile for Salesforce.
And today's demo focuses on building mobile
ready experiences with Lightning Web Components.
Salesforce provides key tools and guidelines
to help you successfully verify
that your Lightning Web Components
run as expected everywhere,
and especially that they work well on mobile devices.
There are two new tools available
based on how you want to test for mobile.
Using Mobile Previews, developers
can preview their Lightning Web Components locally
before they are ready to publish them to a Salesforce org.
Using simulator builds of the Salesforce mobile app,
you can easily verify that your Lightning Web Components
work with other components within Salesforce.
You can test on many different types of devices
without having all those devices on hand.
Let's take a look at the demo.
Here I am in Microsoft Visual Studio Code.
I am looking at a Lightning Web Component
that I have already started developing.
It's a lightning app launcher
that displays apps in a grid view.
It displays apps that our users interact with most often.
And as I continued to develop it,
I want to preview it locally for both desktop and mobile.
I want to make sure my users get
the best experience everywhere.
Okay, let's preview what I have so far.
I'll go over and I right click in the pane
and I select preview component locally,
and I see new previews available to me,
obviously the desktop preview,
but now I also see the Android emulator preview
and the iOS simulator preview.
First, I'll preview on desktop browser.
Okay, here in the desktop browser,
I can see my three apps that I've created
and they're all lined up as expected, looks good.
Now let's go back to Microsoft VS Code
and preview locally for mobile.
I right click again in the pane
and select preview component locally,
and this time I'll choose use iOS simulator.
I already have the iOS simulator running
to the right of my VS Code
and the component is launched in the simulator
and visible for me to preview.
I actually also see
that it displays differently for mobile.
Let's continue to update this component,
I want to add another app to this grid component,
I am adding a work.com app,
since most of the employees will be using this daily
as we transitioned back to the office.
I already have this code available,
and so I'll just grab that
and insert it directly into the existing component.
Let's preview my changes.
Once I save my changes,
I love that the changes
are instantly reflected in the previews.
The changes look great on both
the desktop browser and for mobile.
Now I'm ready to publish this component
to a page in Salesforce
and see how it looks with other components on my page.
I go back to VS Code
and I select push source to default scratch org.
I can see that the app is being sent to Salesforce,
great, it's complete.
Now that my component has been
successfully pushed to Salesforce,
I'll use the Salesforce mobile app in my simulator
to see how that component looks on my page
with other components.
Great, the component looks good
and is behaving well on mobile.
I can now either continue to tweak the component in VS Code
or go ahead and publish it.
In this demo, you saw how easy it is
to make sure the components you build
work well for both desktop and mobile users.
With the new mobile tooling available to you,
you can test your Lightning Web Components locally
on mobile while still in the early development stage.
You can also use the simulator builds
of the Salesforce mobile app
to verify your components work well
with other components once published to Salesforce.
You can find more information about mobile tooling
on developer.salesforce.com.