Name: Kathrin Holzmann - CSS in JS: Is it worth it hype｜JSUnconf 2019 (Kathrin Holzmann - CSS in JS: Is it worth the hype | JSUnconf 2019)
Uploaded: 2021-01-14T10:27:31.000Z
Duration: 31 min 23 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

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.

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?

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.

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.

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?

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.

Am talking mostly about sy components there.

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.

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.

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?

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.

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.

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.

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

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

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.

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.

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.

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

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

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, 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.

字幕リスト動画再生

Kathrin Holzmann - CSS in JS: Is it worth it hype｜JSUnconf 2019 (Kathrin Holzmann - CSS in JS: Is it worth the hype | JSUnconf 2019)

stuff

specific

approach

awesome