- Today, I'm going to show you how
you can build LWC components anywhere.
We'll start with trailheadapps
and deploy the ebike repo to Salesforce.
If you look over here, I've got ebikes deployed
and I'm on the product catalog.
I can click on a bike, and you'll see the details render
on the right.
You can also do a quick search to find another bike,
but today, I'm going to focus on the reseller orders.
I've got an order started over here.
I'm going to go ahead and drag another bike in.
Oh shoot, looks like I grabbed the wrong one.
Let me go ahead and fix that.
And I'll find that one today on my order and here you go.
I can fix the number and get a new total.
Today, I'm going to focus on this delivery times component
that I created to help people scheduled deliveries.
You can see if I go and click on this button
that is actually a lightning button.
Usually, this precludes me from using an off Salesforce.
I've also got a lightning card.
These two things kind of tie me
into the platform a little bit
because they're lightning controls.
I'm going to pull up my code here.
You can also see I am using a wire adapter
that calls an apex controller.
Again, these are things you would think,
how would this work off of Salesforce?
I need Salesforce to run this component.
And I've got my lightning card reference
and a bunch of other markup I've done from my custom layout.
And then here, you can see the lightning button.
Okay, well, I'm going to tell you that I've used the same
code to run on a local website on my machine.
Here, I've got localhost and I've got my bikes page,
I can do a quick search to look for the bike
that I've had my eye on, click on that
and zoom into the product order,
and you can see it's the same component.
Look, I'm going to show you.
If I right click here, it's the same lightning button.
And if I scroll up a little,
you'll see it's the same lightning card.
Like I said, usually you'd think this can't work,
but this is running in a localhost
on my machine outside of Salesforce.
So we're going to take a peek at the code.
So let me go ahead and pull that up.
And here you can see,
I've got a lightning data service adapter,
a .raml file that defines my deliveries API
with a zip code parameter.
And I've got an LDS file that maps into that.
And what this is going to do is create a wire adapter
for me that maps to that same API,
I can set the time to live.
And I also can set the unique key.
I get to create my own wire adapter,
so I run some code gen, and it gives me this.
Here, you can see that before anything happens,
I check to see, do I have a record in the cache?
If I do, I pull it.
If not, I check for partial hits.
If not, I pull the difference.
Otherwise, I'll go out to the network.
Great, so that's how a wire adapter is born.
And I'm going to jump back over here,
and you're going to see the code where I'm referencing,
not apex because I've commented that out.
Yet, I'm referencing my own wire adapter
that I generated from that project you saw
with the same data contract.
So yes, I did replace this one reference,
but it's the same data contract.
You can see all four of my components are sitting
in C namespace.
If I go back to my other project,
you can see I have the same exact four components
that I copied and pasted from this project
into my local host project.
And I made that one change for the data adapter.
You can even see for posterity I brought
over the js-meta.xml, I don't need it,
but I just brought it because
I literally copied and pasted.
Now, how did I get the lightning components in here?
Well, we're going to look at this config,
I can reference NPM packages.
So I've published my own UI components package
on NPM that uses the open source based components.
So if you see here, I'm going in,
I'm going to pull up in the card code.
This is straight from the open source repo
for base components, I copied and pasted.
I deployed this NPM, I was able to reference it
and install it in my local project.
And that's why a lightning button
and a lightning card reference works.
So copying and pasting the code,
I have all the same references.
And you can see here that it behaves the same,
I'm clicking on the time and it's changing
just like it would on the platform.
Let's take one more look over at the Salesforce side.
Here you go, same exact code running on and off platform
because I was able to create a wire adapter
and reference the open source based components.
Thank you for your time.