Sean: Hi and welcome to PodRocket. I'm Sean and with me today is Tru Narla, software engineer at Discord, Twitch partner, and recently gave a talk at Next.js Conf, which we'll be talking about today, building a design system in Next.js with Tailwind. Welcome to the podcast, Tru. Tru Narla: Thank you so much. Thanks for having me. Nice to meet you. Sean: Yeah, nice to meet you. We're excited to have you. And before we get into the talk, do you mind telling us a little bit about your background and your work at Discord, and what it's like being a Twitch partner in the WebDev space? Tru Narla: Yeah, of course. So my name is Tru. I've been streaming on Twitch for about two years now, in specifically the programming category. And it's been really fun. We used to be in this thing called science and technology and then we have our game and software development category now. So it's been really awesome. The category's also grown a lot. When I first started I was around five average viewers and now it's around 200 to 300. And so yeah, the whole category's grown too. So many more people are starting and it's all over the scale with the levels at which people are programming. So there's beginners learning how to code. There's advanced people that know TypeScript really well teaching others. So it's been really fun. And Discord, I've been at Discord for about I think three and a half months now and it's been awesome. I was a software engineer then I went to try a dev advocacy for a little bit and now I'm back to being a software engineer and I think that's where I really enjoy it. I love being a dev advocate. It was fun. It was really cool because I do content on the side so it's doing that fun stuff as my job, but it burnt me out a little bit. So it's nice that I get to code and then do content on the side instead of doing it as my job. So yeah, it's been fun. On Discord, I'm on the new member experience team in the community's org, so I work on what does the new member experience look like when people join big servers. And so we're trying to solve that problem. And so it's been a lot of fun. One of our big launches is happening at the end of this year, so I'm super excited for it. Sean: Awesome. Yeah, that's great that you still get to have a community with the Twitch channel, even though you moved from dev advocacy to doing software engineering. What made you start to do Twitch in the first place? Were you always interested in social media or was it more just having a developer community? Tru Narla: Yeah. So I used to watch Twitch all the time when I was working. I remember when I was an intern at Uber, one half of one screen was always a Twitch stream and it used to be PUBG or Overwatch at the time. So I knew about Twitch, but I never really started streaming. I did a couple of game streams but those never took off. But yeah, in the pandemic, I think it was around March or April, so right in the beginning in 2020 I was really bored and I was stuck at home, my parents' home and not my own place. So I didn't have anything to really do. So I bought an old computer on Amazon, a pre-built Windows computer so I could stream and then a webcam and a mic and I was like, "Let me just try programming." And I talked to my manager at the company I worked at the time and he was like, "Go for it. It's a good idea." So I got his go-ahead to do it an hour or two every day and it was really fun. I got to work on projects that I wouldn't do in my job so I got to learn things. I think that's where I learned about function components in React. Because we used class components at work. So it's like, "Oh that's a learning experience." I got to build something like a collaborative drawing platform. So it was learning how to use sockets, stuff that I wouldn't normally do. So it was really fun at the time and it was just a way for me to do social things without leaving the house. So that was a big draw. Sean: Yeah, that's so cool. No, it definitely feels like the space is really growing. I remember there was all the tutorial channels on YouTube, like thenewboston and I don't know if you remember some of those early ones, but now there's a ton of new folks who are coming on and doing streaming content as well, which I've started to watch a ton of too. So it's really cool. Tru Narla: 100%. It's growing really big so it's nice. Yeah. Sean: Sweet. Yeah, no I'd love to get into the talk now. So what is a design system before we get into it? Because I know there's system design, but that's a separate concept. Right? Tru Narla: It's completely separate, yeah. So a design system, it's kind of hard. I think how I explained it in the talk is that it's a bridge between designers and engineers. Some people are like, "Eh" about it. But I think what I basically mean by that bridge is that it's a set of standards that both designers and engineers follow that help you maintain a similar design at scale. And so at Discord, for example, we have design systems that tell us how buttons, dropdowns, et cetera should look. And I'm on a small team that works on a subset of the whole app, but you want whatever we do to reflect the entire app. So a design system helps maintain that cohesion. And so yeah, it helps both design and dev work be completed at scale since there's all these pre-made UI components and elements. And so designers use the same elements that the engineers can use and you can name them the same so that it's really easy to understand when you're looking at one or the other. And it really helps in bigger companies, at a bigger scale. I think for smaller companies it might not be a huge thing to take immediately, but it's really good for maintaining that cohesion across an entire app or multiple apps. Sean: Yeah. That makes sense, to have a consistent user experience even though it's different developers working on different portions of the app. Tru Narla: Exactly. Sean: And so what are the ways that people can start to implement a design system into a project? Tru Narla: So I touched on this a little bit, but there's a couple different ways. So if you're a smaller company or you're building one app as a side project, there's existing component library. So that's what a lot of people use for design systems. So specifically for React, there's things like Chakra UI, MUI or Mantine. And so they already have all these pre-built items in there, as well as accessibility items like text areas, inputs with accessibility, et cetera. And so you can use those if they meet your needs. And they're a little bit customizable too with not too much work, but when it gets into the really nitty gritty, so Discords very different looking and they have a specific design in mind. The other way to do is just build your own UI component library from scratch. And so there's a bunch of tools that allow you to do that and that's what my talk covered a subset of those, but that's the other way to do it. Yeah. Sean: Okay, cool. Yeah, I know, I think you said that those were opinionated component libraries, which made a ton of sense because they made it to do what you need. They do other things out of the box, but if you need to customize it a ton, is that when then it would maybe make sense to do something more from scratch? Tru Narla: Oh yeah, 100%. A lot of times, designers at the bigger companies or any company in general, they have different ideas than what the UI component libraries look like. And so when you're trying to circumvent design positions that these UI component libraries have already made, the amount of time it takes to write that code, it might be better spent just building your own design system to begin with. And so that's... It's like at what point do you really swap? When we were building a side project on the side, we started with Chakra, but there was a lot of stuff we had to rewrite with our brand colors, with our sizing, spacing of things and so it took a lot of time and so when we started to move things over to Tailwind and using something else, it was just a lot easier because we could start it from scratch, set up the spacing, all of that. So it's really, what do you want? Is it look good enough for you to work with or would you rather spend more time? Sean: Yeah. So how does Tailwind come in? Because in my head I think of it as the NexGen Bootstrap, the better Bootstrap, but I know it does more than that. So I know you went over it in the talk, but I'd love to dig into that part of it. Tru Narla: Yeah. Tailwind's great. I first learned about it on Stream actually, and I was against it in the beginning because we were doing a competition and the idea was CSS in the dark. So I would give people a design and you have to make it in CSS without looking at what it looks like until the very end. And so one of the people wanted to use Tailwind and I was like, "That's cheating." But in retrospect, it's not. It's basically just utility classes on top of CSS. So it's not that different. But yeah, I used to be anti Tailwind, I mean, I get the anti Tailwind rhetoric, some people are like, "Oh, it's too much." When you look at your HTML with all the Tailwind classes, it's super long. So I get that it's verbose. And then people also say it's basically inline styles. You're writing all your styles and your HTML, why do you do that? But I really enjoy it. I mean, I used to use styled-components, that's what I did at work before I learned about Tailwind and the anti Tailwind people, the idea that they have is they want the separation of concerns. So you want your HTML to be all the content that you show and then the CSS file is all the styling. And the idea behind that is that in your HTML, if you have all the class names in your CSS file, you can just remove that whole thing and add another style sheet and it'll look all different. So that's the idea is you can just replace the style sheet and it'll change. But I don't know, Adam Wathan, the creator of Tailwind, he has a really good blog post on how he started to approach thinking about this problem and the steps that he took to get to where Tailwind is. And so Tailwind is the idea of building a library that chooses re-usability over everything else and composability, right? So the idea is to break things down into the smallest possible pieces so you're not reusing a lot of your styles in different places. And so that's where all the Tailwind classes come in. So you have things like margin specifically, padding, all that. And so it keeps it a lot simpler and easier to change up designs. And because Tailwind comes with a config file, a lot of these base cases, so a margin could be m-2, you could change what two really means. So I think it's four picks per everyone, so you could change what that is. And so it's super configurable and since you can do that in one config file, wherever you use Tailwind across your project, it'll stay consistent. And so that's super useful and super cool about it. But yeah, I mean, Tailwind's been great but I write CSS so much faster now. It's so nice to not change context, like switch between styles and the code constantly because at Discord that's how we do it. So I have to set a style name and then change it in another file and it's just hard going back and forth. So I really enjoy Tailwind, I'm really pro Tailwind. But yeah. Sean: That makes sense. And just going back to what you said at the beginning, the CSS and the dark thing, that is such a good idea. I just wanted to say that sounds so fun. It was like CSS 101 five or so years ago, that you separate your style sheets or a different file from the HTML or otherwise it gets too jumbled. But I guess it makes sense from the composability of perspective. If you want to have a theme that you can easily switch out, it's hard to do that if you just have a CSS file and then need to rewrite it in a different way. So are there JavaScript libraries that help us with doing some of that CSS-in-JS? Because you mentioned style components, we use that at LogRocket, but I thought that was really interesting using that for the first time like, "Wait, the CSS is in the JavaScript? That's crazy." So what are some of the tools that JavaScript offers to help us with CSS? Tru Narla: Yeah, there's some that I've heard of, I haven't used them too much. So there's Stitches, which I think of some similar tools CVA is based off of, which is basically CSS-in-TS. So you can basically write, given these props, these are the CSS styles that you're going to apply to these components. I think there's also Vanilla Extract, but I haven't worked with it too much so I can't talk too much about it. Sean: And you mentioned... Maybe this is not a JavaScript thing, but you mentioned CLSX, I haven't used that one before. What features does that one have? Tru Narla: Yeah, so CLSX is very similar to the class names package also in NPM, but I think CLSX is a little bit faster and smaller, not too sure. I think it is. So the general idea is that it allows you to conditionally apply classes or in general just construct strings that you can pass into your class name. So let's say you have a button component and it takes in a prop like variant and the variant is either a primary or secondary. So you can use CLSX to basically say, "Hey, if this variant equals primary, set the color to something or set the color to something else." And so it'll actually apply those classes properly. And so it's really good for Tailwind, specifically, because you can't construct Tailwind classes with the general backtick and then the string, whatever it's called, JavaScript, can't remember. So this is super useful. And so it's the way that I used to do the... What is it? Conditionally applying classes before I learned about CVA. So this is how I do it and we actually use class names at Discord to do this. Sean: Okay, cool. And then do you mind just going into CVA too? Because that one's also totally in it, I don't know if we have listeners who aren't familiar with that one as well. Tru Narla: Oh yeah, for sure. So CVA, I talked about this in the talk, but it's a class variance authority. And so I learned about this just a couple months ago and it's been super awesome and I've been trying to do that with all my side projects. And so the idea behind CVA is to build a variance schema. So similar to how you have all these props that you pass into your components that change certain attributes about it, you're defining these variant schemas that basically tell you things that you could change about this component. So things like I mentioned were, I called it variant earlier, but you could say color of the button, the size of the button, et cetera. And so they're like Lego blocks and they're super composable. So you could have one variant or you could have multiple variants. And the really cool thing is CVA lets you define default variants. So your button without any props passed in could be medium and blue or something. And you can also use compound variants. So you can say if the button is blue and medium, apply this specific thing to it. So it's really cool. It lets you build a bunch of this out and it's type-safe, so there's a variance props that CVA comes with. So you can actually grab the props from... When you pass into your component, the CVA object thing, it grabs the props and when you're typing in color, it just populates it with the variance that you passed in earlier. So it's really cool, really awesome. And you don't have to use Tailwind, you can use anything. So it's super customizable. And it also works with other frameworks, not just React. So there's spelt examples, I think, view examples and yeah, it's based on those other libraries I mentioned earlier like Stitches. But CVA, instead of being CSS and TS, it's more like you can define class names in TS. And so it's like if Stitches was classes versus being a CSS that you pass in. Sean: It sounds like it helps you maybe dynamically apply different CSS styles without being super verbose. Tru Narla: Yes. Sean: And you mentioned that it integrates with Tailwind and I'll just give you my next question. So does it integrate with your Tailwind theme or how do those two operate together? Tru Narla: Yeah, so you basically pass in class names to CVA. So whatever you can... If you want to define a custom brand color, for example, in your Tailwind config, it'll just be able to use that. So you could just set, if your base variant or whatever of your button, you can just set brand color 600 or something. It works with Tailwind, whatever you set, configure Tailwind to it works. The other option is because it just uses class names, you can use things like CSS modules or something else where you can define your styles in another CSS file and it'll just grab those. Sean: Cool. And then, you showed that the variant thing hooks in really nicely into Storybook. I thought that was awesome. Because if you have all these different styles that you can apply to the CSS to see them in action, how could Storybook help with your development designing a design system? Tru Narla: Yeah, 100%. So Storybook's great. So one thing that I've been running into at work is I work on a specific part of the Discord app that isn't linkable. So when I'm trying to test design changes, if the app ever refreshes, I have to go and click back into this thing and have it open up and then test it. So Storybook, instead of having to run your app, you can just run Storybook and pass in a bunch of different, I think they're called stories, and you can basically mock your UI components out. And the really cool thing is with all the variants that you can define for any component, you can just create all of that set of it so you can see the full set of the components, every set, different style, every different combination of things. You can see it all in Storybook. And I think that's awesome and it makes it super easy to test. And so like I said, in your Storybook when you're defining stories, you can define buttons or a dropdown for all the colors, you can quickly toggle which one you want to see. You can pass in mock data if there's components that take in mock data, like a dropdown list or something, you can pass in what you want those items to look like, et cetera. And so yeah, I think it's super useful and it's a really great tool for this. I think it's built specifically for developing design systems and yeah, I mean it's just super easy to test all the different states and the props that you could pass into components. So yeah, I love it. Sean: Yeah, no, I'm a huge fan of Storybook too. My favorite part is if you're working on a frontend piece of something and there's a backend piece for me, the backend isn't ready, you don't have to, like you're saying, boot up your app and get to wherever that lives in the app, you can just see it separate from the rest of everything. So super useful for developing the frontend part separately. Tru Narla: Exactly. And if you have something that triggers on a very complicated user action, you don't need to do that. You could just pass that it's showing or something versus having to do all that. Yeah. Sean: No, yeah, it seems like the space is really growing, in terms of the tools that developers have access to now for making these design systems. I'm just curious, since you use a bunch, do you have any opinions or ideas where this stuff is going in the future? Tru Narla: Yeah, this is a hard question because you have to imagine what could be, but I think there's a lot of mundane tasks that are involved in creating a design system. And so maybe... There's a lot of manual work that goes into it and maintaining one as well. Creating and then maintaining. So it's documentation, keeping the docs of how to use these components up to date, updating outdated components to new designs that are in Figma or somewhere else. They're separate from where the code is. And so maybe some tools that automate some of this that could make it a lot easier to maintain design systems. And I don't know what that would really look like. I don't know if they would live as, maybe it's a Figma plugin that hooks into something in your code or some generated thing. I don't know. But that's a really cool problem space that could have something solve it. I don't know what to term it. Sean: Yeah, no, I'm with you. It feels like that handoff from Figma to then incorporating into the code isn't totally smooth. Because then there's a translation of, "Okay, how do these colors in Figma and whatnot then translate into our design system?" Tru Narla: 100%. And on that note too, just the handoff, there's like, "How do designers and developers work together and suggesting new components? How do we update designs? How can developers give feedback to designers in an easy way and without causing friction?" Making it really easy instead of having to learn a tool like Figma. I don't know. There's a lot of disconnect between the two. And so I know a lot of times when we make designs, when we work with our designer on our team, he has a lot of feedback on things could be moved, very pixel pushing, moving thing. So it's like, "Is there a way to not have that make it a little bit easier?" But yeah, I don't know. There's a lot here. Sean: Yeah, no, for sure. Yeah, maybe one day it'll be like you design something in Figma and then it spits out all of the code that you need. Tru Narla: I think a lot of people are trying to work on that. It's just hard because there's so many different frameworks and options for people to do. So it's like, "What does it spit out? How much can you have it spit out?" Sean: Yeah. Does it spit out a React-style component or view code? Yeah, it makes sense that there's a lot of companies or let me just, startups trying to solve that. Tru Narla: Yeah. Sean: Yeah. Awesome. No, we really appreciate having you on today. And for our listeners, where can they find you online? You said you did Twitch streaming. Tru Narla: Yes, I stream. My name is MewTru, so M-E-W-T-R-U, on everything except Twitter, I think, where it's Tru Narla. But yeah, I stream on Twitch. I haven't done it in a while, but I will. A lot of work and busyness coming up but I also make content on TikTok, YouTube, Instagram, so you could check that out, too. But yeah, thank you so much for having me. It was so fun to talk to you. Sean: Yeah. Isn't Mewtru a play off of MuTu, the Pokemon? Tru Narla: Oh my God. So I used to be called, not Truth because my name is like a bully and just a funny joke, but I was like, "It doesn't roll off the tongue." So I took a week and I was like, "I have to come up with a name that'll work on everything. And so yes, MewTru was a spin on the Pokemon, but it was also the easiest thing to say and it felt really... I don't know, it was short and sweet, so I really liked it. Yeah. Sean: Yeah. No, awesome. No, I love it. Yeah, no, thanks again for coming on and for our listeners, check out on Twitch at MewTru.