Thank you for wording.

And also thank you for coming.

And today we're talking about hype on And, uh So, um, maybe as a front and developer, you already experienced that.

We're living in a hype driven development environment, hyper urban development.

Just one off the things.

But also there is the fear of missing out because they're Brazilian.

You frameworks coming out every day and you don't know, Like, what should I learn?

What should I follow?

What should I need to apply?

What do we have to apply?

What we have to learn on.

So at some point, we start kind of falling just a few people on Twitter because, I don't know, maybe we heard them talking in one off the conferences or we read a really cool medium article from them, and so we're not following these people.

But somehow this is just a very small group of people on, so we kind of end up in a bubble because these people follow each other.

And so we maybe don't hear others people opinions anymore.

And maybe we even start taking everything for granted to people we follow.

Say so.

Let me introduce you to the motor off the High Royal Society.

Back in the day, that was a group dedicated to science.

And back in the day it was very common that the bird off a person that was like, Lord or I don't know somebody who had money Waas Yeah, hear louder and better And their opinion mattered more to people than, let's say, from a poor monk or some other worker on the street on Dhe.

So the Hiroi Society, the British Royal Society, had one motto and they call it Julius and Barbara.

It's Latin on.

That means don't take a word for granted or and so that means that we should listen to the facts and not only who assess it so.

And the spot Where you going to do today?

We're talking about five pieces.

Um, why we're currently using psych opponents.

And if they're right, if they're wrong on dhe, I also want to give you a little disclaimer.

So did I.

Am talking mostly about sy components there.

Other approaches off seasons and Js.

But I have the most experience with that one.

And also I think that's the most popular package right now or at least the react well.

Also, I believe that the people that write these packages are awesome, so I don't have anything against them.

This is really just we'll see.

Like what I experienced by working with this in real life on Dhe, trying not to compare with other solutions that are not see, assess and Js in the classic approach.

So I think the biggest reason why we are starting to put our CSS in our Js is because sadly, sees us surrender blocking.

That also means that we need to bring it to our clients as soon and as fast and as quick as possible.

And how are we doing this?

So if you like, look at the classic approach to include a style, it's by using a link tack that's just linking Thio, a CSS file on DDE.

What then happens in the browser is the browsers starts downloading the stuff, so first brother needs to know, like what?

It's all day with the contents off it.

So there's tht Mel, and then it starts.

Render downloading all the other stuff, which also contains overseas s because it doesn't make sense for the browser to start rendering or painting before it doesn't know how this stuff should look like.

Otherwise, he would always see for a second.

Ah, very ugly on style page on.

That's awesome.

That's NYU's.

So the browser decides instead to show you a blank page until it all has downloaded all the files and then it starts painting.

So the easiest and fastest way to not have render blocking your styles is to have them included in your HD male.

They just having style tax and then put the sales all there that was done even way before they wants something like react or you were angular.

Andi people hated it because of different reasons.

But we're back at that today and makes sense because when you're not, go for example foresight components, that is like the biggest future off it.

Um, you don't even have to write a sees this file anymore, because just write all your styles in your JavaScript file next to the stuff where you have to.

You render and return off your component, which is really awesome.

Really nice, because it renders like this so it generates you.

Um, this button component on it even generates you automatically some class names on then, um, it piss in line the CSS in the bottom after get him out.

So we have a chief.

What?

We want it.

We have our HTML combined with our CSS andi so the browser can render faster than before because, awesome, we only show the stuff that we show, uh, that we need in the first page.

Because in our first page, there's only the components we show there.

And so there's only the CSS of these components and nothing else.

So we also show only the necessaries.

So the critical CSS path.

Okay, but this, uh, problem we have since longer time.

Um, and other people already had this idea on dhe.

They build the thing called Peck.

That pack is a model bundler and does some magic.

So it goes through all your files on DDE looks how they're tangled together, which imports which, and then it pipes it's room on, gives you out a very nice bundle off all of these things.

Um, so when you have your project Ah, and you're, um, weapon is there, and then you configure it like just that you at a CSS loader style odor to it.

And then you can even say something like source maps iss the air because, um, that's one off the not so nice things.

But everything is crunched together.

You don't know any more where your pieces are coming from and by source maps enabled.

You still know where to stuff what's once located.

So what do you don't do?

Is in your JavaScript filed with backpack configured.

You, um, import your sees this file not with a linked like before, but with a just JavaScript import pointing to the file on dhe.

Then Peck does the rest of the magic for you, so it renders you vanilla button, and then it puts in the bottom after a she male.

Also your style on.

What's a little nice comment to you?

Um, where that original code waas from?

Also very nice.

So kind of the same thing solved.

But, um, so you have done all of this work like configuring lepak or Sigh components to be faster.

So let's compare them.

I did a little experiment.

I know it's a little blurry, so I created um, four buttons.

So one is a like vanilla version.

That's the normal version.

The other one is my primary button.

The 2nd 1 is my secondary, Barton.

And then there is the combination off primary on dhe inactive state.

So, um, just what we do normally in our applications, we combined stuff on dhe.

Um, I approached, just like with three different things.

First, I tried CSS vanilla, see Assessment backpack.

Then I tried Cy components by using props, and I also tried, um, side components by using the extent so there's no extent, but you can take your primary button and then at another thing to it and extend it, and then it issue our primary inactive.

So I don't know if you can see this.

So, um, I let it all render in the browser, and they're not that far apart, so, um nah, missed.

CSS takes about 3.4 seconds until the first meaningful paint.

Um, the state components with the props takes around 3.5 seconds unto the first meaningful paint on the extent one takes 3.6 seconds.

That's all kind of very close to each other.

But when you look at the other two cake grass, the doughnut, um, you see that the scripting time is way bigger.

Uh, for the site components approached, asked for the CSS approach, which also means they're growing faster like this time off script rendering scripting time grows faster with the complexity off your components system.

So the more props he used, the more extensive half, the more variations to have, the longer it will take two script.

So it's very wake thing I'm saying No, but it's most likely that in the long run, the psych component approach will not as fast as when you just have been in Lucius.

Okay, so next thing next very nice thesis on that.

It's cold locations King.

So C s s has some issues by design.

Andi is not a mean thing to say.

It's just fact.

So in CSS, everything is global.

In CSS, you have selectors which have very specific rules.

How to like a playa style on DDE based on, like how intense and how strong your select a wrist you style stronger than the other one.

And um So now again, start components is going for co location, which means that you put your style in the same thing as you put your render component, which means that it's always in the same file.

It's always in the same location on dhe.

Um, that helps you with just issues off the global stuff, the inheritance and everything.

Um, which is really nice.

So awesome.

So but imagine so it is this something I copy it from a project I'm currently working on.

This is just I components in one off our a little bit more complex components, and I'm saying a little bit more.

It's teaser that have a button and a text on it.

Okay.

And there are 100 lines of code that are only dedicated two styles.

So if you want to see what's actually going on in that component, you need to scroll ah, 100 lines, which is annoying, especially when you work on that thing more often.

Um, awesome.

Just imagine you have a more like generic component like a ripper.

And you you're doing your coeducation.

Somehow it is everywhere because you start copying everything because it's generic component, and probably a difference.

It's not very big.

So you have copy is over and over by co locating your component in your render singing.

And then you maybe decide.

Okay, you know what I give up on that cool location For some, like more generic components I create are like space where it put them like a component folder on dhe.

Then because I also need to have a relations on this very basic component, I start to import them on dhe at more Celts them, like I have a normal ripper, and then they create a gallery wrapper on it just nice and breaks a farm.

Really cool.

But so it gets rendered to this.

So we have very nice not readable classes on dhe.

Just one style on.

We don't know any more.

Like where Which Silas coming from?

Because sy components doesn't support source maps yet on dhe.

If you don't know exactly where all your records are, you probably will never find that again.

Um, it's a little more helpful when we look at the reactive under because Debbie Kennelly see Okay, um, that style somewhere used in a component and cat galleries.

So part of my style will be there.

But I had very often times where I wasn't able to find the style that is bugging me like literally without a project.

Fools text search so that that is how I'm finding my stuff now.

Okay, but but Bible, photo rescue, You know, bobble that supercool translator thing.

People have written plug ins for that because they have been back by the same issues.

I, um so on when you have configured the bobble plug in for psych components, it finally at something meaningful to host class names.

And it adds the react component itself.

Anti start component to your class, name as prefix.

So you have a better hint now where it iss more or less, depending on how good you are in your locations.

Style stuff.

Um, but also, there's like, a none plug in required solution to this issue, and it is called patterns.

And, um, there is one very nice pattern.

I tried it in several, like project so far, and that is called atomic design, where you start by, like, splitting your components in their parts.

So you start by having the slightest thing smallest thing like a button, and then you start combining it up to like molecules and organisms and templates and pages.

And so by this way, you at least make sure that somehow you kind of know.

Okay, Which parts off my, um, components are like the basic ones that I have to re use more often.

So I locate them in one place and then the other stuff I'm locating in, like, the bigger component.

And so I kind of have a better guess on where to locate the stuff.

Umm, that also helps you when you'd use style components.

So that's this is no exclusive or or something.

You can combine them.

It's really cool.

So then a zay already have mentioned, uh, the other thing that sees us kind of bad about its scoping What?

Dreamy with sculpting.

Um, maybe one of you has done something like that before, just having like, a very long selector and and still have to run an important statement on it because you have a very tangled sees a space, and you don't know any more where this comes from or you have 1/3 party application that has, like, some very strong selectors and there's no other way to come around it.

So yes, I components means you put everything next to each other, which means you don't have classes anymore, which means you cannot have two strong.

Select us anymore.

Yeah, a problem soft.

But maybe you still have some legacy sees us laying around or some CSS from a certain party.

Le Guin.

Maybe on they have a very strong selector.

So and still, no matter what you do, because in your psych component you cannot access the class name anymore.

You cannot, like, make your select a more specific.

So as the selector is very specific, your button will still be pink like forever.

But this would rescue.

Yeah, There's a second Bajuk plug in.

Um, that allows you to get a rate.

Um, something more specific on dhe.

It's doing it by it.

How awesome.

Oh, yeah.

What about plucking?

It's named Baba plugging psych component CSS name space.

Very nice bird.

Um, and you can configure it, and then what it does is it duplicates your class name in your side definition to make it more specific than any other style.

Okay.

Okay.

Cool.

Um, another nun plug in approach would be to generally use some naming convention, for example, them, which is working, like with block element modifier.

So, um, that kind of kid safe you from two specific selectors I mean, it still doesn't prevent you from bats or party success, but at least your own CSS looks nicer than okay, so then the probably hardest thing and suffer development next to centering stuff.

Yeah, okay.

Naming.

Naming is really hard.

What do you mean with that?

So maybe one of you also have had that you have a button that has, like, a Brazilian class names on it.

You may be slurred, like very nice with yourself, Which this one class, maybe a second class you modifier, maybe even you spend.