WEBVTT 1 00:00:06.160 --> 00:00:09.839 Hey, everyone, Welcome to another episode of React Round Up. 2 00:00:10.080 --> 00:00:12.839 I will be your host today, Paige Nee Dringhouse, and 3 00:00:12.880 --> 00:00:15.000 we are joined by one of our panelists, TJ. 4 00:00:15.160 --> 00:00:15.560 Van Tool. 5 00:00:15.759 --> 00:00:18.719 Here everyone, and our special guest for today is Katherine 6 00:00:18.800 --> 00:00:22.440 Grayson NaN's Katherine, Do you want to introduce yourself and 7 00:00:22.519 --> 00:00:26.120 tell us a little bit about why you're famous? Absolutely? 8 00:00:26.359 --> 00:00:28.160 First out, thank you so much for having me. I'm 9 00:00:28.199 --> 00:00:29.960 super excited to be here. 10 00:00:30.120 --> 00:00:33.079 I am a senior front end engineer at threat Connect 11 00:00:33.240 --> 00:00:36.799 and I'm here today talk about component libraries. That's been 12 00:00:37.200 --> 00:00:40.039 kind of my jam recently, a place that I've really enjoyed, 13 00:00:40.159 --> 00:00:43.399 kind of working, getting to combine some of the skills 14 00:00:43.439 --> 00:00:47.799 from my design background with some of the technical aspects 15 00:00:47.799 --> 00:00:50.719 of being a friend end engineer. It's kind of been 16 00:00:50.840 --> 00:00:53.920 a niche I've found that I've really enjoyed and gotten 17 00:00:53.920 --> 00:00:56.600 the chance to give a couple talks on and build 18 00:00:56.600 --> 00:01:00.560 a couple libraries at a couple different companies. Now excited 19 00:01:00.600 --> 00:01:05.079 to share that's actually really interesting. I have used a 20 00:01:05.159 --> 00:01:10.560 number of component libraries Bootstrap, ant design material, UI. How 21 00:01:10.560 --> 00:01:13.439 do you actually go about building a library? Though? That 22 00:01:13.680 --> 00:01:18.280 is that seems like a pretty large undertaking. It is 23 00:01:18.519 --> 00:01:20.480 and I think it's worth saying first that it's not 24 00:01:20.560 --> 00:01:23.760 an undertaking that everyone needs to do. Like you said, 25 00:01:23.760 --> 00:01:26.879 there are a lot of really great libraries that really exist, 26 00:01:26.959 --> 00:01:30.079 and if you're just getting something off the ground or 27 00:01:30.319 --> 00:01:32.760 really trying to iterate quickly, then there's a lot of 28 00:01:32.840 --> 00:01:36.480 value in material design or ant design, they're good libraries. 29 00:01:37.239 --> 00:01:40.599 But it's also true that if you are at a 30 00:01:40.680 --> 00:01:44.200 larger company, or you have an application that has some 31 00:01:44.239 --> 00:01:47.319 different requirements or has a lot of custom components that 32 00:01:47.359 --> 00:01:50.480 you find yourself using and reusing that might go beyond 33 00:01:50.519 --> 00:01:53.799 your basics, your button, your drop down, then it can 34 00:01:53.799 --> 00:01:56.280 be beneficial to have all of those in one place. 35 00:01:56.560 --> 00:02:01.040 Really get to control the design, control puts, the props 36 00:02:01.040 --> 00:02:04.040 that are passed in, getting to handle all the things 37 00:02:04.040 --> 00:02:06.799 that are kind of custom to your library. And you 38 00:02:06.879 --> 00:02:07.359 forgive me, you. 39 00:02:07.359 --> 00:02:09.439 Know, as I said, inputs, which is because I've swapped 40 00:02:09.639 --> 00:02:12.159 recently this new job. We're working in Angular, which I 41 00:02:12.199 --> 00:02:16.439 know is probably heresy to say on the reactor. So 42 00:02:16.479 --> 00:02:18.280 I'm in the weird place now where I'm using all 43 00:02:18.280 --> 00:02:20.240 the React terms when I talk about Angular, and now 44 00:02:20.280 --> 00:02:23.800 using all the Angular terms when I talk about React, messing. 45 00:02:23.560 --> 00:02:28.159 Up both that actually gets me into question like how 46 00:02:28.240 --> 00:02:30.520 deep when you like when you say component library, right, 47 00:02:30.599 --> 00:02:33.439 like what specifically are we talking because does does this 48 00:02:33.479 --> 00:02:36.560 actually get into like React code are we talking about 49 00:02:36.639 --> 00:02:39.879 just like CSS and HTML or does it kind of 50 00:02:39.879 --> 00:02:42.759 depend on specifically what you're implementing At least in. 51 00:02:42.719 --> 00:02:46.680 My case, I'm definitely talking about code, so creating those 52 00:02:46.759 --> 00:02:49.960 kinds of custom components, and it does also include jsex 53 00:02:50.000 --> 00:02:54.080 and CSS or whatever your flavor of styling is, sass 54 00:02:54.159 --> 00:02:57.479 or less or whatnot. There are definitely component libraries that 55 00:02:57.560 --> 00:03:01.879 you can create fully in Stigma or your design platform 56 00:03:01.879 --> 00:03:04.039 of choice, and those are valuable in that they help 57 00:03:04.080 --> 00:03:07.800 you narrow down your design style, your colors and your 58 00:03:07.919 --> 00:03:11.840 type faces and really getting that kind of cohesive look happening. 59 00:03:11.960 --> 00:03:14.680 But when it comes to actually being able to reuse 60 00:03:14.719 --> 00:03:18.400 those components that React is just made so well to do, 61 00:03:18.680 --> 00:03:21.319 they can help to actually put those all together into 62 00:03:21.319 --> 00:03:24.560 one shared library and be able to important max building 63 00:03:25.000 --> 00:03:29.800 so fast. So have the libraries that you've built are 64 00:03:29.800 --> 00:03:33.800 they actually built with React? Because I've there's one in 65 00:03:33.960 --> 00:03:36.840 my company that's built with web components, because we have 66 00:03:36.919 --> 00:03:40.080 teams who build with Angular with few with React, and 67 00:03:40.120 --> 00:03:42.599 they wanted something that could kind of work with all 68 00:03:42.639 --> 00:03:45.719 of them, and it's it's okay, but it's been a 69 00:03:45.719 --> 00:03:49.840 little bit painful to implement because it's not actually React code. 70 00:03:49.879 --> 00:03:53.000 So is yours? Like, is it specific to a particular 71 00:03:53.039 --> 00:03:56.159 framework the kinds that you've built. Yes, I've done one 72 00:03:56.280 --> 00:03:58.400 in React and I'm currently in the process of doing 73 00:03:58.439 --> 00:04:00.439 one in Angular. I agree. 74 00:04:00.479 --> 00:04:02.879 If you're in a situation where some of that stuff 75 00:04:02.919 --> 00:04:05.159 needs to be shared across you gain a little, you 76 00:04:05.240 --> 00:04:07.520 lose a little. It's about that kind of compromise. 77 00:04:07.840 --> 00:04:13.159 But if you are just working in one framework, then 78 00:04:13.360 --> 00:04:15.960 it's nice to be able to have that specificity and 79 00:04:16.000 --> 00:04:18.240 really build things in the way that you know exactly 80 00:04:18.279 --> 00:04:19.160 how they'll be used. 81 00:04:19.480 --> 00:04:21.040 So I'm wondering if you could help paint me a 82 00:04:21.079 --> 00:04:24.680 picture of like what using a component library like. Well, 83 00:04:24.720 --> 00:04:27.040 first of all, is this like if for internal usage 84 00:04:27.199 --> 00:04:30.759 or these things you're like publicly documenting. And then then 85 00:04:30.800 --> 00:04:33.199 I'm sort of curious, like what's the use case like internally, 86 00:04:33.279 --> 00:04:35.720 Like I'm I'm an employee, I need to work on 87 00:04:35.759 --> 00:04:37.319 a new app. I need a button, Like what's my 88 00:04:37.399 --> 00:04:40.000 experience like, is it like using like a material or 89 00:04:40.000 --> 00:04:42.120 a design button? There is it a little bit different? 90 00:04:42.160 --> 00:04:44.120 What do I install? And I'm sort of curious about 91 00:04:44.120 --> 00:04:44.879 that sort of stuff. 92 00:04:45.079 --> 00:04:48.319 Yep, for sure. To the first part, whether it's something 93 00:04:48.399 --> 00:04:50.040 you want to share publicly or not, it kind of 94 00:04:50.040 --> 00:04:52.920 depends on the company. I know that that's super common now, 95 00:04:52.920 --> 00:04:54.480 and the idea of like, oh, we'll make it and 96 00:04:54.480 --> 00:04:57.000 we'll open source it and then everyone can use our components, 97 00:04:57.160 --> 00:04:59.160 which is one of those things that I think, honestly 98 00:04:59.639 --> 00:05:03.279 is nicer in theory than in practice. The idea of 99 00:05:03.800 --> 00:05:06.800 sharing your wonderful work with everyone and contributing to the 100 00:05:06.839 --> 00:05:10.240 design world sounds great, but you actually give yourself just 101 00:05:10.279 --> 00:05:13.639 a whole ton of upkeep and new variables to consider 102 00:05:13.879 --> 00:05:16.040 when you're not just building for your own company in 103 00:05:16.079 --> 00:05:18.879 a limited use case that you have probably a stronger 104 00:05:18.959 --> 00:05:21.800 understanding of, right, So you then end up in this 105 00:05:21.839 --> 00:05:24.160 situation where you're like, well, we know that we're going 106 00:05:24.160 --> 00:05:26.600 to use our component this way, but what if someone 107 00:05:26.600 --> 00:05:29.120 else wants to use it in some other way? So 108 00:05:29.160 --> 00:05:31.399 you broad things and you end up kind of creating 109 00:05:31.759 --> 00:05:36.439 I think, less specific and useful components because you're catering 110 00:05:36.480 --> 00:05:38.639 to a potential audience that you don't really know. If 111 00:05:38.639 --> 00:05:39.360 you have yet. 112 00:05:39.720 --> 00:05:42.759 So I would say if you have a library and 113 00:05:43.160 --> 00:05:45.600 you want to eventually go back and open source it, 114 00:05:45.759 --> 00:05:48.240 and especially if you're working somewhere you know, real big, 115 00:05:48.480 --> 00:05:50.800 you hear about kind of the you know, the Airbnbs 116 00:05:50.839 --> 00:05:54.120 of the world or whatever that share THEIRS. But not 117 00:05:54.120 --> 00:05:56.759 not to sound dismissive, but I'm not sure every company 118 00:05:56.800 --> 00:05:59.920 needs to share THEIRS. I think it's a huge accomplishment 119 00:06:00.079 --> 00:06:02.360 and a great thing in and of itself to build 120 00:06:02.399 --> 00:06:05.519 something for your company that suits the needs that you 121 00:06:05.680 --> 00:06:08.160 have and it doesn't need to be global. 122 00:06:08.399 --> 00:06:08.879 Honestly. 123 00:06:09.319 --> 00:06:12.319 Yeah, it's actually some interesting points I didn't consider, because 124 00:06:12.519 --> 00:06:14.600 I mean, the whole idea behind doing this is you're 125 00:06:15.079 --> 00:06:17.839 customizing something more than what you'd find in the general web. 126 00:06:17.920 --> 00:06:20.839 So I could totally see conversations of, well, we want 127 00:06:20.839 --> 00:06:23.160 to bring our logo into this component, but oh wait, 128 00:06:23.279 --> 00:06:26.079 this is like for the open Web, and what if 129 00:06:26.079 --> 00:06:27.680 they don't want our logo? Now we have to make 130 00:06:27.680 --> 00:06:30.399 this generic. And it seems like you get yourself in 131 00:06:30.439 --> 00:06:34.279 the more complexity than you cared for concerns that aren't 132 00:06:34.480 --> 00:06:36.519 specific to your company right away. 133 00:06:36.959 --> 00:06:39.959 Yeah, I will also say my last company, we didn't 134 00:06:40.040 --> 00:06:42.600 share our code publicly. So it was not open source 135 00:06:42.600 --> 00:06:44.800 and that other people could use our library, but we 136 00:06:44.879 --> 00:06:46.879 had shared it publicly so that you could go look 137 00:06:46.920 --> 00:06:48.639 it up online and you could go look at all 138 00:06:48.680 --> 00:06:51.160 of our components and like see the styles, and that 139 00:06:51.240 --> 00:06:54.759 helped us when working with freelancers and explaining things to clients. 140 00:06:54.920 --> 00:06:57.399 We used it a little in fact, for doing some 141 00:06:57.519 --> 00:07:00.600 like quick prototyping and click testing with users, which I'll 142 00:07:00.720 --> 00:07:01.480 circle back. 143 00:07:01.279 --> 00:07:04.079 To because I've got a lot to say on that one, 144 00:07:04.560 --> 00:07:06.600 but it'll I'll track us. 145 00:07:06.759 --> 00:07:09.279 But even then, just knowing that it would be out 146 00:07:09.319 --> 00:07:10.959 there on the web, we ran into some things where 147 00:07:11.000 --> 00:07:13.000 we were like, we're not really sure that we want 148 00:07:13.040 --> 00:07:17.000 to make that even visible, some questions of like IP 149 00:07:17.360 --> 00:07:20.639 or things that were super specific to our app or 150 00:07:20.720 --> 00:07:23.720 things that we wanted people to you know, pay to 151 00:07:23.759 --> 00:07:26.399 have access to, and be like, well, we are we 152 00:07:26.439 --> 00:07:28.639 giving too much away? Are we're showing too much? You 153 00:07:28.720 --> 00:07:32.120 kind of start to walk that line. I think in 154 00:07:32.160 --> 00:07:35.639 addition to that fear of generalizing the components, we ended 155 00:07:35.720 --> 00:07:38.959 up solving it there by basically creating two versions of 156 00:07:38.959 --> 00:07:41.959 the library, like a public and a private. So the 157 00:07:42.040 --> 00:07:44.680 version that we actually put out that you can type 158 00:07:44.680 --> 00:07:47.720 in the URL and see does not include some of 159 00:07:47.759 --> 00:07:51.240 the more private and specific components that we wanted in 160 00:07:51.240 --> 00:07:55.120 the library for developer use but didn't want to be 161 00:07:55.240 --> 00:07:59.600 on the on the global stage. Basically, gotcha, it's really interesting. 162 00:07:59.800 --> 00:08:03.079 So one thing that you mentioned towards the beginning was 163 00:08:03.600 --> 00:08:07.319 when you got to a point of components having very 164 00:08:07.360 --> 00:08:12.240 specific functionalities that you know generally you couldn't find in 165 00:08:12.600 --> 00:08:16.199 like an existing library. So can you give some examples 166 00:08:16.199 --> 00:08:17.240 of what that. 167 00:08:17.120 --> 00:08:20.639 Kind of functionality might be that you that you encountered 168 00:08:20.680 --> 00:08:22.519 that you're like, we just we need to build this 169 00:08:22.639 --> 00:08:26.959 ourselves because nobody else really does something like this currently. Yeah. 170 00:08:27.040 --> 00:08:29.319 I found a lot of those to be a kind 171 00:08:29.319 --> 00:08:32.799 of specific to what your company does and what you're building. 172 00:08:33.240 --> 00:08:36.120 The last company I worked at was a place called Hermann, 173 00:08:36.320 --> 00:08:39.679 and they do what's called a thinking assessment, which is 174 00:08:40.480 --> 00:08:43.279 kind of similar to Myers Briggs, which they'll hate me 175 00:08:43.320 --> 00:08:46.279 saying if they hear this, but where you kind of 176 00:08:46.320 --> 00:08:48.799 take an assessment and then it gives you some information 177 00:08:48.919 --> 00:08:51.440 back about your thinking preferences and how you tend to 178 00:08:51.480 --> 00:08:54.039 problem solve. So let's be a personality thing more of 179 00:08:54.039 --> 00:08:56.440 a thinking thing, but in order to share those results 180 00:08:56.480 --> 00:08:59.639 there's kind of a visual language and even just an 181 00:08:59.639 --> 00:09:03.919 act technical language that's used. There's a specific set of 182 00:09:03.919 --> 00:09:07.279 colors that's used to designate strengths in different areas. Those 183 00:09:07.279 --> 00:09:11.159 things were just so specific to what the Herman platform 184 00:09:11.200 --> 00:09:13.639 needed to communicate that there's no way it wouldn't make 185 00:09:13.679 --> 00:09:16.279 sense for anything like that to be in material design. 186 00:09:16.480 --> 00:09:18.039 But at the same way, there were components we were 187 00:09:18.120 --> 00:09:20.519 using over and over and over again to show people 188 00:09:20.879 --> 00:09:24.960 their strengths, their weaknesses, their dominant you know whatnot the 189 00:09:24.960 --> 00:09:29.360 way their profile broke down, their preferred methods of communication, 190 00:09:30.000 --> 00:09:32.360 the stuff that came up over and over again within 191 00:09:32.399 --> 00:09:36.200 the application that we needed to kind of get down 192 00:09:36.200 --> 00:09:40.000 and codify in that way for the ease of our developers. Yeah, 193 00:09:40.000 --> 00:09:43.120 that totally makes sense when you when you describe it 194 00:09:43.159 --> 00:09:46.080 a little bit. That's really interesting though, So when you 195 00:09:46.399 --> 00:09:49.360 are or have been working on these libraries, are you 196 00:09:49.440 --> 00:09:53.240 building the library and then also building an application that's 197 00:09:53.320 --> 00:09:55.480 using it, or have you been able to like focus 198 00:09:55.519 --> 00:09:57.840 specifically on one or the other, because it seems like 199 00:09:57.879 --> 00:10:00.879 those are two full time jobs by themselves. 200 00:10:02.559 --> 00:10:05.960 Usually it has been more not usually both times, it 201 00:10:06.000 --> 00:10:09.039 has been building both the application and the component. 202 00:10:09.080 --> 00:10:12.679 Library, which I actually think is the right way to 203 00:10:12.720 --> 00:10:15.320 do it. You're right, that is a it's a lot 204 00:10:15.320 --> 00:10:18.519 of work, and I want to be clear that I'm 205 00:10:18.559 --> 00:10:21.799 not the only one contributing to these projects on these teams. 206 00:10:22.120 --> 00:10:24.639 In both cases, I've been kind of the project lean 207 00:10:24.759 --> 00:10:26.799 and I've gotten the opportunity to kind of shape it 208 00:10:26.840 --> 00:10:29.480 and come in with that expertise and say, here's how 209 00:10:29.519 --> 00:10:30.799 we're going to do it. These are the steps we're 210 00:10:30.799 --> 00:10:33.279 going to take. But it would not have been possible 211 00:10:33.320 --> 00:10:36.320 without my teammates and the other folks that were equally 212 00:10:36.320 --> 00:10:38.840 invested in getting it off the ground and in building 213 00:10:38.840 --> 00:10:42.440 components and testing components and filling in that kind of 214 00:10:43.120 --> 00:10:46.480 knowledge and expertise that's needed. But kind of circling back, 215 00:10:46.600 --> 00:10:50.440 I think it's best to work on both, honestly, because 216 00:10:50.480 --> 00:10:52.720 you need to have a feel for how the components 217 00:10:52.720 --> 00:10:55.000 are really going to be used, and you need to 218 00:10:55.039 --> 00:10:57.840 be putting them into use to be able to kind 219 00:10:57.840 --> 00:11:00.559 of validate that they are needed, because a lot of 220 00:11:00.639 --> 00:11:03.360 times when you start you kind of think, oh, I 221 00:11:03.399 --> 00:11:06.960 need all of these components, because you know, material design 222 00:11:07.039 --> 00:11:10.960 has all of these components, but you probably don't need 223 00:11:11.759 --> 00:11:15.240 every single component that's in material design, but you know, 224 00:11:15.720 --> 00:11:18.879 designed to look like your brand. You can pick and 225 00:11:18.960 --> 00:11:22.159 choose things that you'll actually use. You can narrow down 226 00:11:22.879 --> 00:11:26.720 use cases rather than like creating everything and just hoping 227 00:11:26.759 --> 00:11:28.759 it will be used. If you're actually in the application 228 00:11:28.960 --> 00:11:31.320 and you're working with the application code all the time, 229 00:11:31.639 --> 00:11:34.120 you can get a better feel for what's really needed 230 00:11:34.159 --> 00:11:36.399 and what's not needed and what's just going to be 231 00:11:36.759 --> 00:11:38.600 filler that you'll have to maintain forever. 232 00:11:40.679 --> 00:11:44.200 So thinking of the components and developing side by side 233 00:11:44.399 --> 00:11:47.600 with another app, so are these components that live like 234 00:11:47.840 --> 00:11:51.200 in like their own repo sort of thing, and like 235 00:11:51.600 --> 00:11:55.120 is each individual app that your company uses like pulling 236 00:11:55.200 --> 00:11:59.320 them in or there's some other sort of workflow in place. 237 00:12:00.039 --> 00:12:02.120 That is how it's been set up in both cases 238 00:12:02.279 --> 00:12:05.399 is to have them in their own repo that does 239 00:12:05.480 --> 00:12:07.840 kind of come with its own lift that I know 240 00:12:08.240 --> 00:12:10.519 worries a lot of people at first, because again, when 241 00:12:10.559 --> 00:12:12.120 you're starting off, it feels. 242 00:12:11.840 --> 00:12:14.399 Like a huge task to begin with to put together 243 00:12:14.399 --> 00:12:16.240 a component library, and then you have to think about 244 00:12:16.639 --> 00:12:18.320 and I have to have this whole other repo and 245 00:12:18.360 --> 00:12:20.679 how am I going to bundle these things? 246 00:12:20.679 --> 00:12:23.240 But how am I going to export and import. Sometimes 247 00:12:23.320 --> 00:12:26.440 the easier mode is to just have a subfolder in 248 00:12:26.480 --> 00:12:29.200 your application, especially if you've got like a mono repo 249 00:12:29.360 --> 00:12:33.120 thing where all of your applications can kind of share that. 250 00:12:33.120 --> 00:12:35.080 That can be a really great place to just kind 251 00:12:35.080 --> 00:12:36.960 of get your feet wet and to kind of prove 252 00:12:37.320 --> 00:12:40.080 the need for a component library and to get other 253 00:12:40.120 --> 00:12:43.320 people invested, which is a huge, huge, huge, huge part 254 00:12:43.360 --> 00:12:45.919 of the lift. It's just getting other people to see 255 00:12:45.960 --> 00:12:48.440 the value and to get on board with the idea. 256 00:12:48.840 --> 00:12:50.919 Yeah, I'm actually wondering if you could talk a little 257 00:12:50.919 --> 00:12:54.600 bit about like the corporate politics of this, because I 258 00:12:54.720 --> 00:12:57.080 have to imagine, I think Page It's really where you 259 00:12:57.080 --> 00:12:59.559 were maybe going with this too, because like I think 260 00:12:59.639 --> 00:13:01.440 all of us on this call sort of get it 261 00:13:01.519 --> 00:13:03.919 right because we're coming from this sort of background. But 262 00:13:04.519 --> 00:13:07.480 I'm curious if you've had run into problems of trying 263 00:13:07.480 --> 00:13:10.279 to get teams, like especially in larger companies, right you 264 00:13:10.279 --> 00:13:12.679 have different teams doing different things, Like what sort of 265 00:13:12.759 --> 00:13:14.799 issues have you run into trying to get everybody to 266 00:13:15.399 --> 00:13:18.440 use these components, like contribute to them, stay consistent and 267 00:13:18.759 --> 00:13:19.399 that sort of thing. 268 00:13:19.720 --> 00:13:23.159 I think the biggest issue is getting everyone on board 269 00:13:23.159 --> 00:13:26.919 it first. Because most companies, without kind of realizing it, 270 00:13:26.960 --> 00:13:30.320 have started to build a library, without thinking about building 271 00:13:30.320 --> 00:13:33.759 a library, Almost every almost every application I've poked around 272 00:13:33.799 --> 00:13:37.639 and has that shared components folder. That is a good start, 273 00:13:37.919 --> 00:13:40.559 and it's where you should look. And if you start 274 00:13:40.639 --> 00:13:44.399 seeing that get really, really busy, then maybe that's a 275 00:13:44.440 --> 00:13:46.240 sign that a component library can be a good fit 276 00:13:46.279 --> 00:13:49.480 for you. But there's a huge lift in terms of 277 00:13:50.000 --> 00:13:54.200 splitting that stuff off, right, because once you pull those 278 00:13:54.200 --> 00:13:56.399 out into their own repo, you have to make the 279 00:13:56.440 --> 00:13:59.879 decisions in terms of what part of this component needs 280 00:13:59.919 --> 00:14:03.679 to stay, what of this is really business logic it 281 00:14:03.720 --> 00:14:07.799 needs to be in the application versus what's presentational. How 282 00:14:07.840 --> 00:14:10.279 is the refactoring process going to work. How are we 283 00:14:10.320 --> 00:14:15.080 going to handle just getting everything swapped over that first step. 284 00:14:15.279 --> 00:14:18.840 The first steps a doozy, But what I try to 285 00:14:18.879 --> 00:14:22.799 do to get people on board is to really focus 286 00:14:22.840 --> 00:14:25.840 on the outcomes, right and to kind of be realistic 287 00:14:26.000 --> 00:14:28.759 about what that first step is going to be. That 288 00:14:29.279 --> 00:14:32.000 you don't go in with delusions of grandeur that we're 289 00:14:32.000 --> 00:14:33.720 going to have this setup in a week and then. 290 00:14:33.639 --> 00:14:34.440 It'll be amazing. 291 00:14:34.679 --> 00:14:37.759 That this is going to take some upfront effort and 292 00:14:37.799 --> 00:14:40.600 that every small victory kind of along the way is 293 00:14:40.600 --> 00:14:43.440 something that we should celebrate. And in the end, we're 294 00:14:43.440 --> 00:14:46.919 aiming for this goal. We're aiming to have x number 295 00:14:47.000 --> 00:14:50.720 of components in use in the application, and it will 296 00:14:50.720 --> 00:14:53.960 help us in these specific ways. And the more you 297 00:14:53.960 --> 00:14:56.919 can kind of nail down we're making a component library 298 00:14:56.919 --> 00:15:00.960 because we need visual consistency, or we're making a component 299 00:15:01.000 --> 00:15:04.799 library to help us coordinate with the design department, or 300 00:15:04.840 --> 00:15:07.399 to help us do user testing, or to help us 301 00:15:07.960 --> 00:15:11.639 tackle accessibility issues, like the more you can set specific 302 00:15:11.679 --> 00:15:15.000 goals for your company and use the component library as 303 00:15:15.279 --> 00:15:17.879 a path to meet those rather than the component library 304 00:15:17.919 --> 00:15:20.799 being the goal in and of itself, the more you'll 305 00:15:20.840 --> 00:15:23.840 be able to give people on board with kind of 306 00:15:24.240 --> 00:15:26.759 your vision and why you're doing it and help them 307 00:15:27.080 --> 00:15:28.960 see the value in the long game. 308 00:15:29.320 --> 00:15:31.320 I really like that angle because I think every single 309 00:15:31.320 --> 00:15:34.919 company I've ever worked for has had the issue with oh, look, 310 00:15:34.919 --> 00:15:38.639 our header looks different in these eight applications in these ways, 311 00:15:38.720 --> 00:15:41.759 or what do you know, we're using seven different fonds, 312 00:15:42.000 --> 00:15:45.639 or like our button, there's no consistency. So I like 313 00:15:45.679 --> 00:15:48.039 that sort of as an inroad to making the argument 314 00:15:48.200 --> 00:15:50.919 is like it's a path to getting there rather than 315 00:15:51.039 --> 00:15:53.639 just trying to share things for sharing sake. 316 00:15:54.120 --> 00:15:57.879 Yeah, that's definitely, and in fact, that kind of discrepancy 317 00:15:57.879 --> 00:16:00.279 in the UI is one of the first steps I 318 00:16:00.360 --> 00:16:02.200 like to take in terms of sitting people down and 319 00:16:02.240 --> 00:16:05.480 helping them figure out what components will be valuable to 320 00:16:05.519 --> 00:16:08.200 start with, because again, the best thing you can do 321 00:16:08.320 --> 00:16:11.279 is to start to show that value as soon as 322 00:16:11.519 --> 00:16:14.960 humanly possible. As soon as you can start to get. 323 00:16:14.840 --> 00:16:19.000 That ROI on your library, then the more people will 324 00:16:19.039 --> 00:16:21.639 be invested in kind of snowballs, And that's the effect 325 00:16:21.639 --> 00:16:24.399 that you want. I like to encourage people to sit 326 00:16:24.440 --> 00:16:27.679 down and run basically a UI audit on their application, 327 00:16:28.200 --> 00:16:31.360 and to go through and take screenshots of all the 328 00:16:31.399 --> 00:16:33.480 different heads and all the different buttons and all the 329 00:16:33.480 --> 00:16:36.519 different dropdowns, because when you see all of those in 330 00:16:36.559 --> 00:16:39.279 one document next to each other, it's usually enough for 331 00:16:39.360 --> 00:16:42.080 people to go, oh, okay, yeah, I see what you 332 00:16:42.200 --> 00:16:45.440 made me. Maybe we do have a problem. That's where 333 00:16:45.480 --> 00:16:48.639 I can ask, because how would you go about doing 334 00:16:48.639 --> 00:16:51.799 a UI audit if you if you're you've never done 335 00:16:51.799 --> 00:16:54.399 one before, because I have not, so I'd be interested 336 00:16:54.399 --> 00:16:56.799 to learn, like, what are the steps for that? So 337 00:16:56.879 --> 00:16:58.960 credit where credit is do the idea of a UI 338 00:16:59.000 --> 00:17:02.080 audit is Brad rost Okay, so I want to throw 339 00:17:02.120 --> 00:17:04.640 that out there. He's got some really good resources on 340 00:17:05.119 --> 00:17:07.960 running one. But the way that I like to do 341 00:17:08.000 --> 00:17:10.720 it is to basically almost make it like a game, 342 00:17:11.000 --> 00:17:13.680 set some time aside and kind of make some different 343 00:17:13.680 --> 00:17:16.920 categories in like a shared board, like a mirror board 344 00:17:17.039 --> 00:17:20.000 or you know, a Google slidestock, be like, all right, 345 00:17:20.039 --> 00:17:22.240 here's the page for headers, here's the page for buttons. 346 00:17:22.279 --> 00:17:23.920 You're going to go on a scavenger hunt in our 347 00:17:23.960 --> 00:17:27.559 application and take pictures or screenshots of every single one 348 00:17:27.599 --> 00:17:29.839 that you find, and it ends up being it's kind 349 00:17:29.839 --> 00:17:31.680 of a fun thing because you go and everyone's see 350 00:17:31.720 --> 00:17:34.160 yeacking while you do it. And then when you get 351 00:17:34.200 --> 00:17:38.319 that and you have everything documented, you have the woe moment, 352 00:17:38.400 --> 00:17:42.240 which I think is important for everyone to see, like, wow, 353 00:17:42.279 --> 00:17:44.680 we have twenty of these, and then you can really 354 00:17:44.680 --> 00:17:47.079 start to talk through well why do we have twenty 355 00:17:47.079 --> 00:17:49.559 of these? Is this one serving a different purpose than 356 00:17:49.559 --> 00:17:53.200 that one? Does this do something the other one doesn't? 357 00:17:53.440 --> 00:17:55.559 Is there a feature that's a part of this? You know, 358 00:17:55.599 --> 00:17:58.759 both of these look like dropdowns, but one's actually a 359 00:17:58.880 --> 00:18:02.160 multi selector in a list, you know, and we need that, 360 00:18:02.359 --> 00:18:04.640 and that's a separate component that I dropped down, and 361 00:18:04.680 --> 00:18:07.720 that helps you kind of isolate what's happening and where 362 00:18:07.720 --> 00:18:11.160 it's being used and if there was any reason behind 363 00:18:11.160 --> 00:18:14.559 all those different versions, because a lot of times, you know, 364 00:18:14.599 --> 00:18:17.039 we think like, oh, someone was just lazy and coded 365 00:18:17.039 --> 00:18:20.119 their own styles, and there's usually like a bit of that, 366 00:18:21.200 --> 00:18:25.039 but more often it's people trying to solve different use 367 00:18:25.119 --> 00:18:28.240 cases with the skills that they have. So they see 368 00:18:28.240 --> 00:18:30.440 a button and they're like, oh, this button is almost 369 00:18:30.480 --> 00:18:33.680 the same, but I actually also need it to do 370 00:18:33.720 --> 00:18:36.359 something else when it's clicked. So you end up with 371 00:18:36.359 --> 00:18:38.759 a button that looks a little different because they took 372 00:18:38.759 --> 00:18:40.400 a button, but then they tweaked it because it had 373 00:18:40.440 --> 00:18:42.400 to do this other thing, and then you hit up 374 00:18:42.400 --> 00:18:43.200 with twenty buttons. 375 00:18:44.839 --> 00:18:46.599 Wondering could you talk a little bit about some of 376 00:18:46.599 --> 00:18:49.119 the tools you use for making this sort of thing 377 00:18:49.279 --> 00:18:52.720 possible as well? Or is this just quite literally you 378 00:18:52.759 --> 00:18:55.680 have like my company component library and then like a 379 00:18:55.720 --> 00:18:58.000 folder for each components. Are you using things to sort 380 00:18:58.000 --> 00:18:59.039 of help you build this. 381 00:18:59.279 --> 00:19:02.359 I'm a big, big, big fan of storybook in terms 382 00:19:02.359 --> 00:19:05.720 of building out your component library. They have a really 383 00:19:05.799 --> 00:19:07.960 great system. They make it really easy to pick up 384 00:19:07.960 --> 00:19:10.519 and start going in terms of organizing your components and 385 00:19:10.559 --> 00:19:13.880 seeing that youI preview and getting your documentation all in 386 00:19:13.880 --> 00:19:16.519 one place. That is definitely I think the way to 387 00:19:16.559 --> 00:19:19.079 go if you're going to have a full on library 388 00:19:19.160 --> 00:19:21.799 in its own repo, if you're kind of starting off 389 00:19:21.880 --> 00:19:23.839 a little bit more basic, like we're just going to 390 00:19:23.880 --> 00:19:26.599 have this shared folder, then I think it's okay to 391 00:19:26.640 --> 00:19:29.160 also not be swayed by all the bells and whistles 392 00:19:29.440 --> 00:19:32.799 of stuff like Storybook. Again, the more important part is 393 00:19:32.839 --> 00:19:35.720 you get it out there, get it used. Once you 394 00:19:35.839 --> 00:19:38.400 go down, once you go down the rabbit hole of 395 00:19:38.440 --> 00:19:40.920 looking for things that you can use in your component library, 396 00:19:41.119 --> 00:19:42.720 they're going to find a lot of great stuff, because 397 00:19:42.720 --> 00:19:44.759 there's a lot of great stuff out there in terms 398 00:19:44.799 --> 00:19:47.519 of right not just Storybook, but all the add ons 399 00:19:47.519 --> 00:19:48.880 that you can add to it, all the ways that 400 00:19:48.920 --> 00:19:53.039 you can customize it, whatever you want to use to output, 401 00:19:53.119 --> 00:19:55.759