- [Instructor] Hello, and welcome to building components
on the Lightning Web Stack.
My name is Greg Rewis, I am the Director
of Product Management for Lightning Components.
Now, over the next few minutes I'm just gonna give you
a very quick harbor tour
about, building using Lightning Web Components
and the Lightning Web Stack.
Now, whether you are used to building lightning components
in their old Aura form, or you're coming
from Visualforce, or you're diving straight
into Lightning Web Components, I wanna make sure
that you are aware of a couple of great resources for you.
First of all, as you see on screen the component reference
the current component library.
This is your one stop shop that's gonna allow you
to go in and find information about individual components.
Find their documentation specifications,
what can you do with them.
In addition, you also can see the code
the code necessary for you to implement these
within your own component, or even experiment right here.
Because as you can see this is I'm just gonna change
a little bit here.
You can see that as I am typing this component is updating
in real time.
Great opportunity to test it out, play around with things.
Now, there's also a playground where you can use
to build more robust examples and even share
with your colleagues.
The next thing is the sample gallery.
In our sample gallery section, you're gonna find a bunch
of pre-built orgs, pre-built applications that we
have built, our evangelism team has built for you to use
and explore different implementations of components.
One of which I find invaluable is the LWC Recipes.
And that one, is gonna allow you to dive in
and see the source code for little examples on
how to do individual things.
If I wanted to make a little form that showed a first name
and a last name, how do I do it?
Well I can view the source right here on GitHub,
or I can clone the repo and view it
on my local machine as well.
And coming very soon actually on the I believe
it is June 14 or 17th something like that, we
are going to be releasing the visual force
to LWC Recipes as well.
So if you're a Visualforce developer wondering
how do I do something in LWC see that I'm used to doing
in Visualforce, these are gonna be some great recipes
and resources for you.
But for now, let's go ahead and dive right on in to see
what it looks like when we build
a Lightning Web Component versus an Aura component.
Now, on this Dreamhouse application, this is
that same sample gallery app that I
was talking about before.
That I've just made my own I've added a few components too.
You can see that I have a component here, this
is my broker card.
Now I built this so that a user would not have to go all
the way down to the broker field, mouse over it wait
for the preview panel to appear in order to get
the brokers details.
Now this was built in Aura, but what would it look like
if I was going to build this in LWC?
Well as it so happens I just happen to have the code itself.
Now, this is the LWC code but before we look
at it, let's go back and first look at the Aura code.
So here we have the Aura version of broker card, you
can see all the files that make up that component.
Now, the main one of course, is the component file itself.
Now the component file contains not only markup
in other words HTML.
It also contains things like force record data.
Aura attributes and so on, even our interfaces that we
are using within our component.
So a lot of information going on inside of
the component file.
That is a dramatic difference to LWC because LWC,
is built on web standards.
And what I mean by that is, we are building
on the web component specification, we
are building using HTML, CSS, and pure JavaScript,
modern JavaScript even.
So, we are now following along with the rest of the web
in an open standards way.
In fact, the LWC engine is open source
and we've even open sourced many
of our base components as well.
So, I digress let's go take a look at the markup.
Over here in the markup of the HTML is only HTML
because, HTML is the only thing that's allowed inside
of an HTML file in a Lightning Web Component.
Now the first thing that we see is our template tag,
that template tag just tells us this is the template,
this is the markup that we're supposed to render out
when we call for this component.
After that, we get straight into the markup
and as we can see I'm using
a base component lightning card here.
Along with, some HTML markup, a div
and then a lightning record form as well.
Now in LWC land, we no longer do logic in our markup.
We instead, declare a variable.
The way we declare that variable is curly bracket
and the name of the variable.
And that is going to be set then somewhere else, where?
Well it's gonna be set over in our JavaScript.
So let's go take a look at our JavaScript.
In our JavaScript, there's gonna be some new things
that we're going to see here.
First, in every lightning web component that you build, you
will do some imports, one of which that you will always do
is their online number one you will import
the lightning element from the LWC framework.
And then add on any additional items that you may need
for your component to work.
I've added on three decorators api, track and wire
and I'll talk about those in just a moment.
But I've also used the ui record api, which is what
the lightning data service uses to retrieve records.
I said I want to use getRecord from that.
And I'm gonna use a few other items here as well.
But moving on down to the important section here
is where we are defining the component itself.
And we're doing that as
a JavaScript class called brokerCard that is going
to extend that base element.
We noticed that our record ID has been tagged with
that decorator called @api.
So the way these work is, anytime you need a value
to be set from the outside for example, I need the page
to tell the component what the value of record ideas,
then I define that with a decorator of API.
If I simply want the component itself
to track values internally, for example
in this string array that I'm calling broker fields
then I use the @track decorator.
Which says anytime this value changes, redraw
the component, rebuild the component.
And the final decorator I wanna leave you with here
is called @wire.
This is the way we now talk to the server,
it's through at wires.
So I'm gonna say I want to fire a wire.
I'm gonna wire something up to my component, some data.
And I'm going to use that getRecord
from the UI record API, I'm going to pass in
that record ID that we received from the page, along with
a fields that variable which just happens to be
an array of Property_ _c.Name and .Broker.
So those are the only fields that I'm asking
for the UI record API to retrieve for me.
And I'm just gonna populate those
into some variables here that you see below.
But I'm gonna use that one variable, the broker ID variable
to then pass back over here to my lightning record form
in the form of the record ID.
And that is going to then use those broker fields
to go out and grab all that information
from the server without me needing to do any kind
of Apex calls, whatsoever.
And if we go back over to our page here
and we go into app builder.
I'm gonna show you that yes in fact, not only do we
have that version that we saw already the Aura version,
but here I have brokerCardLWC.
Because, as you can see you can't tell
what is an Aura component and what is a LWC component
in app builder they both look the same.
And when I drag it on not only do they look the same,
they actually function exactly the same.
Because we can
have LWC components sitting right alongside
of Aura components and never know, which one is which.
Now, this was a whole lot this up real fast tour.
I know it was a lot but, hopefully this gives you
some information and inspiration to dive further
into building Lightning Web Components
on the Lightning Web Stack.
Again, my name is Greg Rewis
and I look forward to seeing you online.