Intermediate React Why Emotion & CSS in JS

Transcript from the "Why Emotion & CSS in JS" Lesson

[00:00:00]
>> Brian Holt: Cool, does anyone have any questions about Emotion or anything in general about Emotion? I'll give you my final opinion on CSS and JS here in just a second. But any questions about the mechanics or how to do it?
>> Brian Holt: Or just in general about Emotion.
>> Speaker 2: I'm still not understanding what is the benefit, other than deletability.

[00:00:19] Which you could handle by putting your SaaS file into a folder with your component. I still don't see the benefit of using Emotion. Because it seems a lot more syntax involved like.
>> Brian Holt: Part of it is like all of, everything lives in one file, that's a benefit. If any of you have ever written Vue JS, or have looked at Vue JS.

[00:00:44] I think to me the biggest innovation that Vue came up with was single file components. If you don't know what that is go check it out. I think it's revolutionary. I hope that we're gonna get more towards that direction in general with JavaScript. But I think having everything live in one file, that's a big benefit.

[00:01:01] And the other thing is that this has a runtime, right? And while it's net loss a little bit on the performance side and,
>> Brian Holt: Just like file size and the performance implications of that. But at the same time, now you can manipulate all of your styles in JavaScript at runtime.

[00:01:21] If you're doing things like SaaS or LESS, you're limited to build time. So anything that you can only do at build time. But, like I can base like how frequently this spins, I could just say like,
>> Brian Holt: All right, we're gonna build this super fast cuz I think this could be compelling.

[00:01:39] So,
>> Brian Holt: Frequency,
>> Brian Holt: And s, let's see,
>> Brian Holt: Props frequency.
>> Brian Holt: So this can actually be a function that it'll provide to you, and then here we'll just do it, this is a SpyGlass.
>> Brian Holt: And then here, we'd say frequency = 5. So this will be really slow, right?

[00:02:19] But we can even take this a little bit further if we make this a class component.
>> Brian Holt: Class NavBar = extends React.Component render return,
>> Brian Holt: And just move all this into there.
>> Brian Holt: Okay, so now we have the class component. Okay, and now I'm gonna set this.state, I'm sorry, state = (frequency: 1).

[00:03:08]
>> Brian Holt: And maybe set it to like 10. And then we'll say halfFrequency = this.setState.
>> Brian Holt: Frequency is this.frequency/2, this.state.frequency. And then we'll say onClick = this.halfFrequency. And frequency will equal to this.state.frequency. This was a long example, but I think hopefully we got it. Right now, this is going real slow.

[00:03:53] Every 10 seconds, it's going to rotate, but if I click on it, it's going to start going faster.
>> Brian Holt: [LAUGH]
>> Speaker 2: It was worth it just for that. [LAUGH]
>> Brian Holt: [LAUGH]
>> Speaker 3: You convinced us, it's useful. [LAUGH]
>> Speaker 4: So you specifically use it to make your spy glasses faster, is the takeaway?

[00:04:20]
>> Brian Holt: Yes, that is the only thing. This is the unique use case for this. [LAUGH] This projectors not refreshing right, but you should see on my laptop right now, it's going way faster than even that.
>> Speaker 3: Have the dogs spin too.
>> Speaker 2: [LAUGH] But they'll get sick.
>> Brian Holt: [LAUGH] But like this is my point is like, this makes manipulating your styles in real time incredibly simple.

[00:04:46] If you wanted to do this with CSS, obviously possible. But we're gonna have a little bit more difficulty getting up and running on that. This was trivial. I made it up, like right now. [LAUGH] So,
>> Brian Holt: Cool, any other questions?
>> Brian Holt: So I kinda half answered your question with you, what do I think about CSS and JS?

[00:05:12] I gotta stop that, that's really annoying. [LAUGH] In general, I don't reach for it out of the box first. For the most part, writing normal CSS with classes is sufficient. I think it's good enough for me. But I am stoked that people are doing this because it's pushing the boundaries forward.

[00:05:33] We're looking at CSS with new eyes. And I think pushing the boundaries like this is really important to us moving forward as an industry. And so I don't discourage anyone from doing it, especially if you're using Emotion. The performance overhead on this is minimal enough that I think it values, it adds enough value that it might be worth doing.

[00:05:54] I think the idea of doing design systems and things like that is really compelling with Emotion, so I think that's a good thing to do. And if you're doing things like this where you have to have real time affecting of your styles at run time, use Emotion. This is awesome, this is what it's made for.

[00:06:12] This is what it's the best at. So yeah, that's kind of my idea behind Emotion. I really like CSS modules so if I'm gonna reach for something, CSS modules has no overhead. It's basically the idea that you can import CSS, and then it just grabs all of your imported CSS and it just makes a big style sheet out of it.

[00:06:34] So that's kind of my middle ground that I really like. And Parcel does that out of the box. What that would look like, instead of having Emotion up here, I would just say import,
>> Brian Holt: ./my-css.css, right? And then it would import that, and then at build time, it gathers all of those imports together, makes a giant style sheet, and then that's what you export.

[00:06:59] I think that's pretty cool.
>> Speaker 2: You said it does SaaS out of the box as well.
>> Brian Holt: Mm-hm, it does SaaS, LESS, Stylus, all those ones out of the box.
>> Brian Holt: So all of this is up in a branch, the branch is called Emotion. It unfortunately does not have the really cool magnifying glass trick.

[00:07:22] That's a bonus feature for Frontend Master's subscribers. It's the director's cut.