Speaker is working on something. they have to do a presentation. Speaker is going to keep this short.

Speaker is into web components and one of the ways to create web components is through lit. Speaker is going to share they screen. Speaker likes Hyper HTML because it shows you all the different ways to create web components.

Speaker has done them. they have heard of web components. Speaker finds the link from the lit.org website cool as it breaks down the project into smaller units with component composition and links to the documentation. Speaker explains how to break down complex code into separate units. Speaker explains the process of building a large complex component out of smaller simpler components. Speaker and they team have worked on a project. They isolated the complexity into specific components and composed them together to create the overall design. Speaker broke down the design of the application. they explain how the top bar, a menu bar, drawer with menu items for navigating the current selection, the main content area and the slot for the title fuzzy were created.

Speaker explains to Speaker how to think about passing data up and down the tree. Speaker explains how the model component works. Speaker wants to be able to pass in an array of names to hear whatever language and then it would put it here for sub items, and then send an event of what was selected, so that the outer application can know. Speaker doesn't know how to exchange data between two components.

Speaker explains how it works. Speaker is making a highlight video. Speaker wants people to put the link to the web component in the slot title. Speaker is going to share some traveling music with coulomb.

• likes
• web components
• item components
• data
• simpler components
• multiple components
• outer application
• title fuzzy
• familiar events
• mediator pattern
• merge conflicts

Welcome back your dreams were, you're welcome back that same old place, but those dreams everything, and they turn around.

Hey, what's going on?

Y'all?

All right, so you're like working on something.

You like get one more thing done.

Let me get one more thing done and then times goes.

Super quick and you have a hop on and do a presentation.

Yeah, that was just me just now but I got it done.

So that's good.

Song to go back and do it.

Cool.

So I am going to keep this short anyway, so I always say that it never ends up being short.

All right, so sure my screen.

So this is the break.

Oh by the way, stretch it out stretch.

Oh, that's a good one.

Okay.

Now, so on Twitter, I came across this tweet.

So Where is my mouse where to go?

There you go, tired.

All right.

Now, share my screen.

I don't think I am going to audio, but I am not sure the audio just in case.

So anybody knows me knows I am into like web components and one of the ways to create web components is through lit.

And so, I actually came across these tweets.

I am going to add the link to the video so that you can check it out for yourself.

But Soul, it is a way of being able to create web components.

The kind of Because there's a lot like boilerplate stuff to do like a vanilla JavaScript web component and soul.

It helps by abstracting some of that stuff away and adding some other goodness to it.

If you're ever curious to figure out all the different ways of creating web components.

There's web components that Dev shoutouts to these folks there.

It's like an online IDE thing where you're able to create web components and it's pretty cool.

So add this link as well.

So, you can check it out, but it's really quickly.

So, for all web components, code your component isolation.

You can push code published code and deploy the website.

Now, what's cool is that?

It shows you all the different ways to create web components.

So they have so apparently, he's like 58 Agnes.

Aafrin.

I have never heard these catalysts.

Oh, that's what these are new to.

A lot of.

Wow, okay.

Hyper HTML, I am a hybrid tomato, from back in the day.

That was like the thing.

I first created web components with that, wasn't like, vanilla JavaScript.

So you see that they have lit as well.

So there're all sorts of ways to create web components.

And what's cool is you can kind of just try them out.

I will wear components, Dev and figure out one that you like and continue building web components of whatever because you can use web components and whatever framework or without a framework.

This amazing.

So that's why I like it.

I like that.

There's a variety of different ways to be able to create and stencil sense.

Another one.

I have done lwc.

I think that's from like, is it?

The people that do the trailheads, but as it is it's not Shopify.

I don't know.

No.

I don't remember but yeah cool and then you can see wrapped in the custom elements.

So like angular element.

So if you like react to web components stuff, pretty cool.

Alright, and then you use those felt cool.

So yeah, all sorts of different ways.

Haunted is another one.

I have heard of cool, and then I guess CSS and JavaScript gets you do.

Oh, I guess there's web components for Tailwind.

Cool, but you can see a lot of stuff with HTML lit elements and that all goes to.

So the link from that tweet, which I thought was pretty cool because, you know, I will always like these little like tidbits of knowledge that kind of come up on Twitter and I can kind of dive in more with what's happening.

So from the good Folks at lit.

It's a break.

A component lit project down into smaller units with component composition and this is stuff.

I always think about and, you know, I am creating things and so it's cool to see like it in documentation forms.

You can always go back to review it.

And so you can check out there.

So they have a thread.

So it's like you have your component here.

And then, within your component, your other sub components, and it kind of talks about how to handle all that.

And so links to this in the documentation this section here.

So let me put this also in the list of links.

Here we go.

I keep losing my mouse.

I don't know.

I like three screens happening.

And so add this link.

Save it.

All right, so it kind of goes over a brief overview.

So component composition, the most common way to handle complexity and Factor lit code into two.

Separate units is component composition.

So basically taking something that's kind of like complex like if you're creating and it's running I was actually doing this for the past couple of weeks.

Web components that are like Standalone pieces of an application.

But sometimes that Standalone unit has other things inside of it.

And so, this is kind of, like, a way of breaking down that complexity, you know, I mean so.

And so yeah, so that is the process of building a large complex component out of smaller simpler components.

Imagine you have been tasked with implementing a screen of you.

I so kind of like this thing here, where you click this, and these paw, Pop up.

And so you can probably identify the areas which involve some complexity to implement chances are those would be components.

Those could be components.

Yes.

So exactly.

Like we're building an application like a demo application really quickly, and I was like, all right, so that we don't have like merge conflicts and that we're not bumping into each other's code.

Let us break this down into different components.

And then, so, you work out some components.

I work as some components, and they're all separated.

You know, I mean, and so that way we could come together have a shell.

And just slot in the app, it works.

Well, like we got it done.

It's pretty amazing like The speed and the time like we had to complete, we did pretty well.

I think so.

Yeah.

So yeah, so by isolating the complexity into specific components.

You make the job much simpler and you can then compose these components together to create the overall design.

Literally what I just said, what we did.

And so yeah says though and so, yeah, so we took the application.

So we had like the design and what things need to be done and then so instead of working.

On you know, that application together and then like getting each other way like merge conflicts.

I am pulling stuff sending stuff things aren't being up.

So we're like, all right.

We're just going to fight, this is going to be a component.

This is going to be a component, and we kind of broke down the design and it's like, all right, you're going to do this, do this, and we all kind of just work together.

And yeah, it was awesome.

And so basically what that is saying is what we did, which was super cool.

All right.

So, yeah, so for the fairly simple screenshot above.

And so they go through all this stuff.

So that's like there's a top bar, a menu bar, a drawer with menu items for navigating the current selection, the main content area.

So yeah, so a lot of times, a lot of applications follow that same thing.

They're like, there's a menu.

There's a part that shows the stuff that's, you know, when you select a menu, there's a top bar where things are, things like that.

So, So yeah, so those are like, all right?

So you're the top bar.

Here's the icon for the menu, the, you know, slide in and out and then the slot for the title fuzzy.

So, right there, so, this is that.

So this is the top bar.

So now what makes a good component?

Cool.

It has its own state that has its own template.

It is used more than once more than its used in more than one place, either in this component or in multiple components.

So like, for example, You want to make like bees things like their own components, like the selection in the menu, they could be like their own components and like they could fire off their own events, but we will get to that.

All right, cool.

As a well-defined API, cool.

So as far as like, what goes in, what's goes out, kind of stuff.

And so, reusable controls like buttons, checkboxes and input Fields can make great components.

It's funny because we had that in our application, we created, but more complex UI pieces, like, drawers, and carousels are also great.

Candidates for composite component, has a ssion, that's when you work for me.

All right, so some things to kind of think about passing data up and down the tree.

So, A lot of times, and I guess if you're into Frameworks as well, they will say this as also, but like properties down events up.

So the way you're passing information.

So if you have your component, you want passing information, you pass it through properties, but then if the component is doing something like an action and the outer application using know about it, you send that up through events that application can listen for all right.

So the application is doing something at past data through properties into your component.

And then if your component wants to pass information back out to the outer application, then you do that through events that the think of listen for.

All right, so properties down events up so you can read more about the stuff.

That's pretty much a summary.

And if you in the kitchen, this model component should be the source of Truth for the subcomponents.

So the component itself should have like, this is where we're at and any sub components follow that, you mean, so yeah, and then if a component change the property on itself, it should then fire to notify the components higher above it.

So like, just like you're saying the outer application.

Cool.

So yeah, so, like you would pass your properties.

So, if you is this, if you have an outer application, my menu is in.

You would pass through the properties through there.

For example, let us say like a property, would be maybe the names on these submenus, you know, because for like internalized, internationalisation another long word, let us say you want to be able to just generate whatever language and then pass it in.

So do you be able to pass in like an array of names?

And so you pass that into to hear whatever language, and then it would put it here for this sub items, anything cool.

And then, if anything ever changes on here or on my menu like the selection or whatever, to let the auto placate, some of the outer application know like, oh, this thing was selected.

I need you to show this thing.

You would send an event of what was selected, so that the outer application can know.

Oh, this thing change.

I know what I need to do with this change.

Let us make this happens.

Kind of thing.

So yeah, so they're saying like either a standard event like a quick or something or more specific to my item components.

So like its somebody clicks.

My item 3, you won't let the application know.

Hey my item 3 has been selected.

Yeah, so things like selected item.

Change, cool and passing data across the tree properties down and events up is a good rule to start with.

But what if you need to exchange data between two components?

That don't have a direct descendant of relationship.

So not like you know how this is a part of that.

Let us say you have my menu and then something else.

How do you pass data between those things?

So one solution is a problem is to use the mediator pattern and the mediator pattern, pure components, don't communicate with each other directly.

Instead, are mediated by a third party.

So like react, they have like the context API and Redux angular has its own thing.

Think view has like view store and I think view X, I think everyone and likes felt has its own stores, which I appreciate.

That.

So I guess that's called the mediator pattern did not know that was a thing.

So that's why I like, reading these things because a lot of stuff, I just make up and figure it out on my own, but it's good to place actual words and terms with things so that you can say to other people like, oh, yeah, the mediator pattern is where you like for a store or what have you.

So you can let you send all the information.

It's one place.

Everybody's listening to that one place, and they know what to do with it.

So yes, by adding a mediator, you can pass data across the tree.

Using the familiar events up properties down, principal.

And so they go through an example.

And what I like about this is that you actually, you can like, have typescript and JavaScript, which is cool.

So you can see how it is.

So, whatever your flavor of JavaScript you can have that there vanilla or type, and they have like, a little thing here.

So that's your new nickname life, long Dev.

Yeah, cool.

Oh, and then there's the other thing about the light Dom children, so you could pass in.

So, like here is your top bar web component, right?

And with that, you can pass in other things that are like visible to the outer application, because it's there, like this is like, this is like your 8 index.html and so you can see that stuff there.

We have stuff inside of it that you wouldn't be able to see if you looked at the source code because it's in the shadow Dom, right?

And yeah, and then a lot of times they will have like slots, and so they will tell the web component.

I need you to put this in the slot title.

If I like the menu icon stuff cool and then that's pretty much it.

So yeah, cool stuff.

I always like to kind of read especially if I am using the tool like little like a little like tips, you know, the kind of see like, oh you can do this thing.

If you ever thought about this kind of stuff, so I am always appreciative of stuff like that.

And yeah, so I put links to everything.

So, when the video is up.

You will be able to check them out.

Alright, so again cool stuff.

Web components are awesome.

Stop sharing my screen.

I am gonna get you all back to work.

Maybe you will find a new artist that you like, and that's the hope.

All right.

So this I did the highlight video cool start screen.

Share, I need this one here coulomb?

Send you off with some traveling music.

The track again is called.

Thank you all for hanging out.

I wish you much productivity and I have seen you 15 minutes after the hour.

All right.

See you later.

Thanks again.

Y'all by if this loads here you go.

All right.

Strong.