Web Component Application Project

[00:00:00]
>> CD. All right, let's clear CD. We'll go into our brewery app and then we're gonna open it in VS code. And I trust those authors. Okay, so, looking at VS code, we have some of the same stuff. We have a Storybook, server, we have some VS code, extensions, lit plugin, pretty standard.

[00:00:28]
And that's my thing, I made that. And then we have a logo, and then let's do npm start, which is what it wanted us to do. Okay, and over here, we have a application. So, this is the open WC sort of exampl, whatever's, how the frameworks like to put their logo on the thing you just made?

[00:00:57]
So it does that. So, brewery app is going to be our component it looks like. And brewery app with a hyphen is basically just it's going to ingest the app and define the app. Let's just say, goodbye. [LAUGH] We'll get that later. If we have lit here, we're just gonna use brewery app and what's it mad at me?

[00:01:27]
Let element is defined by naming us. Okay, cool. So, our next thing that we're gonna do is basically set up our app wrapper, right? So class, brewery app, extend, lit element. And I can power code some of this stuff. But in our thing, we need our construct. Actually in my example, I don't think I even need a constructor, that's beautiful, weird.

[00:02:01]
[LAUGH] I guess cuz were auto doing it. So let's see here. We're going to have some properties, right? Stat get properties and we're gonna have, what would our brewery app mean to have in it?
>> Breweries.
>> Probably, breweries. Yes, [LAUGH] breweries, right? And then that's gonna be, we'll just give it a type that we expect, that's probably an array of stuff, right?

[00:02:34]
Okay, and then our connected callback, which I think we'll use later. We're going to go super.connectedcallback. And we're getting some autocomplete happening. That's kinda nice, it's working how we expected. And when hit our Render function HTML or return HTML. And then we're going to, breweries and then we'll have like, h 2.

[00:03:13]
And then maybe it's like, let's see, oay, yeah, here we go. I was confused what I wrote down breweries app. That's the name of our brewery. We're gonna call it, KewlBrew [LAUGH] KewlBrews. And brewery is one of those words if you say it enough you kinda stop hearing it?

[00:03:40]
And then we're gonna do, [LAUGH] whatever this .breweries.length. We're just gonna say, how many breweries we found, right? And I think that's i, that's all we need to kinda get going. We'll eventually wanna loop through the breweries, I guess we could make make our loop for breweries right now.

[00:04:05]
Typing bad. And then li.. So this is kinda where the sort of reacting nature JSSC nature breweries.map, right? We all like to map. Brewery and then we go through and we do that. I missed this. Okay, we're good. So, we have all that and then we probably map through, right?

[00:04:35]
But we also need to return some HTML. I forgot my HTML tag template. So, we're gonna return HTML from inside, for every brewery we're gonna loop through. This debris eagle eyes, [LAUGH] eagle eyed observers. Breweries defined but never use, so we're gonna do that. We're gonna go brewery.name and just like echo that out.

[00:05:13]
Block statement is surrounding, hold on, I'm going to say goodbye to that. And surrounding the body but Hello. I'm confused with that is mad about, but let's see here. Can it fix itself? Fix, sure dude, if that's what you want to do. [LAUGH] That's why you are so upset about, I'm happy for you.

[00:05:43]
Cool, let's see if this even renders now in our application. So it's not, so I must have actually needed to have something here. So I don't think I need this. Who but our index.html is trying to render our brewery app from our brew, source brewery app. Got it, and this is us, and brewery app.

[00:06:10]
We didn't define our custom element. Define brewery app, Brewery app. So,
>> The method you just ran the define that could also be a decorator at the top?
>> Yeah, so that's kind of like in lit at the end of decorators. There may just be an feature, but yeah, so here you can go define some syntax, they have you define.

[00:06:48]
Is it in parentheses? I think it's not, but you say brewery app. It might be doing it here. No, it wasn't. But the decorator syntax inside for lit is, I think you have to import that package. But it's really nice, it actually is pretty convenient. And even properties just turns into app and you do that instead of this object that I got all stumped on.

[00:07:21]
So,
>> But that define decorator that is provided by lit that's not a browser, right?
>> That is part of lit but, you know what, the good question. Let's see here. Make it less man. Let's look at lit, cuz in all their examples, they kinda show these custom elements.

[00:07:50]
They show these group styles. Maybe if you're looking at the TypeScript thing, they have that. And we can actually switch this to TypeScript if we wanted to. But they have to, let's go into, Decorators. Here we go. Okay, so we import custom element. And then, okay, add custom elements, sorry, I was way off.

[00:08:18]
[LAUGH] So yeah, and then I can do @customelements('brewery-app'). Which might be a nicer, cleaner way for you to define custom elements, in the browser. Or just you put it all at the top of file, you don't have to go back down to the bottom of file. Yes.
>> Do these decorators and lit also add a build step similar to the ones?

[00:08:48]
>> Yeah, so I think cuz it's not like a fully supported feature right now. So it would be something you'd have to kinda compile through. I think maybe Chrome does, but yeah, I think you're still gonna walk do it. I would maybe probably just do it all through Typescrip, [LAUGH] and then call it a TS file and then know that that's just gonna get kinda fixed as it transpires.

[00:09:12]
But yeah, but those decorators are pretty cool. Just I don't use them cuz I'm more, I'm trying not to use too much new stuff. [LAUGH] Realm, but those decorators are pretty sweet for just short handing a bunch of kinda tedious steps. So we're running here, but we're not rendering.

[00:09:35]
So let's see what's mad about. Cannot read property of length. Okay, cool.
>> [INAUDIBLE]
>> Yeah, I mean, I guess, no, this .breweries.length or 0. [LAUGH] Is that what it wants? No, here, maybe we'll do that. So that's just JavaScript there, so it really hates that.
>> [INAUDIBLE]

[00:10:09]
>> Like that?
>> Yeah.
>> Yeah, boy it hates that. Wait, map. Okay, I can't do the map either cuz it really hates it. So maybe I'll do, yeah, may I'll say, right there super, right or we'll go super. But we can just stop breweries equals empty array, right?

[00:10:35]
So hey, okay, we got something. Cool Bruce.