Paul: Hi there and welcome to PodRocket. I'm your host, Paul. And today we have Segun Adebayo, also known as Sage and Segun is a software engineer at Vercel, currently working on a very interesting react component library called Chakra UI, excuse me. Welcome to the podcast. Segun Adebayo: Yeah. Thank you so much, Paul. I mean, it's such a pleasure to be here. Thank you for having me. Paul: Yeah. Thanks for coming on. We just did another podcast recently about front end interfaces and component libraries, and what it's like from a design system engineer's standpoint about building one of these out, and they were actually bringing up Chakra UI talking about how it is one of the fastest ways that you can get an accessible and really well methodical design out. I mean, who would've thought whenever you started your career, that you're going to be on a podcast that somebody's going to go, "Hey, that thing you made, like other people are talking about and it's awesome good." Because it is awesome. So when do you start thinking about Chakra UI, is this something, a project that are you still working on? And when did it come to your idea to make it? Segun Adebayo: Yeah, for sure. By the way, thanks for the remark. I mean, working on Chakra UI has been like a huge privilege and I'm definitely grateful to work on a project like this. So I would say the idea for Chakra UI maybe came to me, I think it'd be like five years ago from now. Basically I was working on, I was working with a couple of colleagues, so just a quick recap, I used to freelance remotely. So at the time I used to work as a product designer and then I design UIs with Figma and Sketch. And then I had like lots of colleagues because I work remotely I had like two or three different teams that I work with simultaneously. So I go in there and then I just design it in a Figma and I'm pretty much done. Segun Adebayo: So if you give me in a whole week, I can spend two days in a week to finish up the design. And if I ship that off to my engineering colleagues, if it took me two days, it's a high chance, you would take them two weeks, if not two months to actually get that design live in production. So, I mean, learning through that painful journey of taking design to code, sort of help me and spike the initial idea of like, "What if we could build a tool that could help engineers go just as fast as design basically? How can we help people write code at the speed of design?" Which is the common phrase I like to use when I describe Chakra UI? And not just help them write code, help them write composable accessible code out of the box. Segun Adebayo: So that was like the initial challenge that I had with Chakra UI. And it started of as a side experiment, let me just try to see if this could work out and showing it to two of my friends back then now literally saw light bulb in the eyes like, "Dude, this is actually really cool. Why can't you just take this? And like, I mean, blow it up beyond what it is right now." I was literally very scared at the time to be honest, but then I just took the thing I'm like, "Okay, what does blowing it up mean? Does it mean maybe I just use this in my project and just keep it and so no one knows about it or does it mean taking it out there to the public in spite of the fear to see if other people would use this library." So I decided to take second route and today it's history basically, as they say. Paul: So back in the day, five years plus ago, before Chakra UI, you were working at the designer level. So you were thinking about how's the user going to interact with my components with the platform and then actually drawing them out in Figma and getting them ready for developers who would then implement your designs or were you actually writing the components in the JavaScript to implement your designs? Segun Adebayo: At the time I was mostly just doing the design, so it was largely doing the design, designing the components and the variants of that component, documenting those variants in Figma and then shipping them off with Envision, basically just like take all those tools and just like put it out there and then watch it develop and take that design and turn that into code. So initially it was just pure UI design work. Segun Adebayo: And I think that one of the key things that I've learned from, I mean, being a designer, which is a huge privilege if you ask me, is that you can take a lot of the design practices you can fold them up and actually bring them into code. So it's like, I think that there's lots of amazing functionalities in tools like Figma, for example. These days you see there so many amazing features in Figma imagine if you could take all of those amazing features and make them available to developers in code, you can imagine they kind of speed on productivity that would yield. Paul: So, and I imagine you're coming from a very design first approach here because you were a designer first. So you probably you have all these ideas and standards and just you went through the gamut with what could be right and wrong as a designer. Now you're bringing that into code. Because I feel like normally in component libraries I've used and seen, it's people who already write websites who are making UI library to just like make it fast and easy sort of. It's coders who are making this, but now you're a designer who's stepping into the code realm. So it probably has... Do you think that there are some ways that Chakra UI immediately differentiates it differentiates itself from something like Material UI or Bootstrap? And if you could touch on some of those? Segun Adebayo: Yeah, for sure. I mean, most of these tools definitely survey a purpose most of the time. So I know in this engineering field software engineering in general, it's literally about trade off pros and cons. You just have to consider all of them. So I think Chakra UI, there's a slight difference between a component library and just a styling frameworks. I think that's like a clear cut difference there. So if you take something like Bootstrap, for example, I'll put that in the bucket of more like a styling framework. They do have a couple of JavaScript in there to help you, but they're largely dependent. So by giving you the tools to help you style your components faster. Segun Adebayo: On the other end of the spectrum, you have component libraries. So these are whole full blown ecosystem of components that you can actually use to actually create a website or an app. So it comes with state management, it comes with accessibility, it comes with styling, it comes with like all of these different type script, server side range concentrations. So it goes on and on like that. So this is a full blown suite of components. And I would say maybe I'll put Chakra UI and Material UI in that box. Segun Adebayo: When it comes to like, what really differentiates Chakra UI, I'd say I lean heavily on my design background, just like you said. So it's like, there's a lot of things that I learned working with different clients, working on different design projects that I'm then like taking all of those knowledge and experience and bringing them into code. There's a common joke should like, should designers know how to code? I think if designers knew how to code, it would really help that collaboration process. I think that if designers eventually become developers, there'll be a lot better developers than the typical fine engineers that we have today. Paul: I also feel like design feels like one of those things that uses that side of your brain that is more creative and that side of the brain the earlier on, I mean, you could do anything at any point in life, but my weird own personal belief is that earlier on in life that you start doing something creative, the more you just live and breathe and really understand that element, whether it be like music or something. So design, if you start there and then you move into development, I can imagine how you just totally look at development differently, less modular and less rigid. Paul: That's one problem I have whenever I try to put together a website, we were chatting before the podcast start. I was saying, "Yeah, all my websites look like trash." I do it as a developer and I'm making everything in boxes and modular and stuff, and just lacking that design background. So do you think if people came from design as a more standard approach into computer programming, would that change the web or do you think it could really reach into all breadths of how software is written in design? Segun Adebayo: Yeah, I think I would say design can help and design can, having some sort of design experience can enhance that development workflow. I would not say it's a core requirement to sort of get into engineering, but you'd definitely be a better developer if you had some design experience, because one of the key things, or one of the key ingredients when it comes to design to develop my workflow is speaking the same language as designers and product managers. And the only way that you can do that is if you have some deep experience in design, or you know de lingual of design and can speak the same language as other people. And I think that design gives you that, one of the key things is being creative and using your imagination to bring something into life before even drawing the first rectangle on the screen. Segun Adebayo: So basically, I think that part of your brain is also helpful when you're trying to solve difficult problems. You can basically imagine the component before you actually make it. And I think that helps with things like API design. How should you name stuff? I'm just like, if you can imagine and think about, and put yourself in the shoes of the person that's going to use it, which is empathy in the design language. Basically, if you just practice a bit more empathy, which I mean is heavily, consumed if you are a designer, you basically have to be in the shoes of the person that's going to use the app or the website, and try to design from that perspective. I think doing that a lot would help you be a better developer for sure. Paul: But you should write a book someday. You should write one of those, like O'Reilly programming books that all the pros write or something. It'll be called like A Designer's Approach to Computer Programming, and then we can start to change the world one sale at a time. Segun Adebayo: For sure. Paul: So let's actually talk about some details about this awesome UI component library and framework that you made, Chakra UI, get into the details a little bit more. What's one of the ways that you're approaching design and an API for people to use laying out their components that you are employing with Chakra UI that you think is missing or misconceived, or it's a paradigm that just like you were like, "Okay, I'm going to make this and I'm going to do it right this time." What's an area like that you try to tackle in Chakra UI? Segun Adebayo: Yeah, that's an interesting question. I would say there are two main areas that we try to tackle. And I think this literally comes from, again, just thinking about when people want to build applications, what do they really need? What do they need in the short term? What do they need in the long run when they have a much larger team, when they have like much funding, the team is super big now it's like, I think those are two different phases of a company or a startup basically. Segun Adebayo: So if we see it from that perspective, we see that when you are just starting out, basically what you need is a set of components that can like help you move really fast. And obviously, depending on the type of application you're building, you basically want to make sure that it's teamable, it's accessible, it's really easy to use. So starting out, you just want to get these little legal bricks or legal blocks and just like put them together to make your website look amazing. So that is like the first criteria. How can we basically give people the set of tools and components that they need to build their website to the applications with speed? At the beginning, obviously. Segun Adebayo: And then as you go down the line, it sort of switches from, I want to build a website really fast to now I have a team that can actually manage and orchestrate a design and the UI of my application. How do we create a structured system? This is where the term design system then comes into play. Now, how do we create some sort of like live brilliant system of our brand of our identity to make sure everything looks consistent, everything looks coherent and cohesive across the application. Then comes the themeing aspect of a design of a framework basically. So Chakra UI takes this initial phase of giving you the building blocks you need to build really fast, and then when you grow to... Also giving you the set of tools that you need to build the design system from ground up. And basically, you can easily switch design systems between brands if you have a multi-brand application, for example. So all of these different needs are baked into Chakra UI from the very beginning. Paul: And do you feel like the way that Chakra UI handles this living, breathing ecosystem is... Where do you think it shines the most in terms of it its ability to grow or its ability to... Does it like plug into Figma? Is there cool connectors in ways to extend the design system? Like what are some ways that people can extend it once they get up and running with it? Segun Adebayo: Yeah, for sure. So Chakra UI has it's immune system, largely developer focus for now. I mean, hopefully in the future, I'll be able to plug into design tools and be able to pick all the tokens and send them over to code. That'll be really cool. But right now it's largely developer focus API. So we have like a theme API that feels very similar to the way Figma works these days. So it's basically, you have a component, component has different visual styles or variants. So if you have a button, the button can be solid, it can be outlined or it can also have different sizes, right? So it can be small, it can be large, and then it goes on and on like that. So basically we design this type of like API within Chakra UI to say, if you want to build the design system using Chakra UI this is our theme in API, which looks very similar to, how you would do that within Figma or Sketch or any design tool. Emily: Hey, this is Emily, one of the producers for PodRocket. I'm so glad you're enjoying this episode. You probably hear this from lots of other podcasts, but we really do appreciate our listeners. Without you there would be no podcast. And because of that, it would really help if you could follow us on Apple Podcasts so we can continue to bring you conversations with great devs like Evan You and Rich Harris. In return, we'll send you some awesome pod, rocket stickers. So check out the show notes on this episode and follow the link to claim your stickers as a small thanks for following us on Apple Podcasts. All right. Back to the show. Paul: What are some areas that you're looking to tackle next in terms of development Chakra UI? Are there any components that you don't have yet that are close on the list? Are there any shifts in new ways we theme things or areas that people have requested that you don't think Chakra UI will ever go in? Segun Adebayo: Yeah, I think Chakra UI has like endless possibilities here, but it's like, I think the core focus that we have right now that two main areas, one of them is multi framework. So the people that are like Chakra UI is heavily reacts right now. We have a small team of folks trying to help us get view up and running, but that's been not as fast as we want, but basically like how do we... We also have quite a bunch of people that are asking for react native. It's like, "Okay." This is getting really interesting because like for every single component we build for every single API we create, we need to start to think beyond react and start to think like a whole ecosystem and trying to provide the same set of APIs, across different frameworks. Segun Adebayo: So this has been one of the biggest challenges so far and to solve that, one of the things we've done recently is to think about like, what are the different parts of a component library that we currently have? And we know that the two key areas are the logic of the component and the styling of that component. So if we can take these two things and put them apart and then try to figure out like, how do we solve these key pieces in a way that is not exactly tied to any framework? Segun Adebayo: So we started off with the logic piece. If you wanted to design a dropdown or a menu component, there's so many, there's so much like keyword, accessibility, focus management, and all of those things you need to take into consideration when you're building a component like that. Segun Adebayo: So the question then becomes, how do we model the logic of something like a menu component in a way that is truly framework agnostic that we can share across all these different JavaScript frameworks? So to help us like get farther in that direction, we launched a new library called ZagJS, which basically is a state machine based library. So Statecharts basically is a long leading concept that's been around for years, but it's just getting introduced to the webspace in general. So we're taking ideas from this industry, from this pattern, and then using this to build a model or component logic to help us get, I mean, achieve this goal super fast. Segun Adebayo: So that's, that's one part of the equation. The other half is styling. Styling is the other bit where we're looking into ways to make sure our styling solution is super fast and efficient. Specifically Chakra UI is based on CSS-in-JS right now. So it basically means that there's a little bit of run time overhead if you have a super performance sensitive application. But I mean, quite frankly, most apps never really get to experience this, except you're building something that literally renders 1 million times in the second. And then it's like, then it becomes like super obvious. But I think that either ways, I think we need to strive to boost the performance and keep improving that and stretch as far as become. Segun Adebayo: So that's one other key area that we are looking into and at the same time, try to make it framework agnostic. So these are the key challenges that we are faced with right now. I think that they are forward thinking challenges in the sense that once it's solved, it's basically solved forever. So basically if there are new frameworks that come up in the next five years, we don't have to start rewiring or rewriting everything in our framework to actually support that. We basically have two systems that are framework agnostic and conserve basically every developer out there. Paul: I mean, it sounds like you're solving a very grandiose thing here. I mean, the problem at hand is realistically, how do we make a platform for a design system that is framework agnostic. And now you're answering all these very meta questions about the way we hash out information and organize it in this modern development landscape. I'm pretty sure correct me if I'm wrong, but if you make a way to make it framework agnostic in the vision that you have, you could slap another component library on there and build it with that same paradigm and make another one that's completely framework agnostic once you solve these challenges. Segun Adebayo: Exactly. This is very similar to the way design works as well. I mean, if you wanted to design a mobile application or you wanted to design a website, Figma literally doesn't care about that. It's just like going there, drag the frame for the iPhone or drag the frame for the desktop and just design based on how you can imagine literally. I think that's two same ideas, the same ideas we want to bring into the web as well, where you don't have to be tied into like a specific framework, like react or view, you can basically think more broadly about like, how do I want to model this system or how do I want to style this system? Basically, I think that's a really great long way in helping shape the future of design systems in general. Paul: Do you think that your project Chakra is tackling this general idea faster than the other big name component libraries out there right now? Segun Adebayo: I mean, I don't have like inside gist into what's going on in all this have big names, for sure, but I mean, I probably would not have a thorough enough answer to that, but we're doing our best to go with our own pace because at the end of the day, it's open source, right? So it's open source you have a bunch of like, I mean, dedicated maintainers that want to help you build a thing. So it's like we just keep going at the pace that we can to actually achieve this goal. But either way I think it'll be really nice and awesome to see other people try to tackle with the same set of problems so we can learn from ourselves and so improve and grow faster together. Paul: Now, did you open source it just because of the general notion that, "Oh, if you open source something, you get these dedicated contributors and it'll be the best it can be." Are there any other reasons why you open source it? Because I know for example, to harp back on Material UI, they have a paid like pro version or something like that I know you can subscribe to. So what are your motivations for making Chakra for an open source? Segun Adebayo: Yeah. I mean, I think that when it comes to motivation, the whole different set of topic, like when you bring in motivation and open source, I think those two words are very big. And when combined together, there's a whole lot of things that go into those two topics in there. But I would say like for me, Chakra UI started more like a passion project. I just had this idea. I thought it would be super cool to actually try out a different approach to the idea. So most of my colleagues mentioned to me that they tried Material CSS and even Material UI and it was pretty hard to tweak the styles or make it work the way they wanted. Segun Adebayo: And it's like, I just thought about, so imagine if it was possible to be the system like that is like super easy, just as flexible as Figma. And you can basically style it the way you want. Like, it doesn't matter if this button component was made in Figma as a component, you can bring that component and detach the component, change the styles anyhow you want. So imagine if you could bring this experience into code, how would that look like? So Chakra UI is just like the first attempt to actually bring this imagine solution to the world to see if this could actually work. But so far, I think it's doing pretty well, but definitely I have ideas to improve it even more. I'm excited to see where that leads. Paul: I think a lot of times what we could call opinionated frameworks, such as what I would probably consider Chakra UI or Material UI. Sometimes they get a bad rap of people saying "Oh, you're pigeonholed into just doing this one thing." And the fact that you're specifically mentioning no, we want to make this composable, changeable, easy for a developer to customize it, is really paramount to making an opinionated framework like awesome. I like opinionated frameworks personally just because I'm not a designer. So using them is really simple, but there is a huge pain point that you mentioned, which is like Material UI, like, oh gosh, trying to override stuff in that framework. It just like, it can turn into like a three hour head scratcher of like, "Why is my explanation point important, not applying." And then you want to like flip the table. So having that ability to override compose make things custom as much as you want, I think is really exciting to hear about in a opinion first framework like Chakra because you can step in and have it look great like you said, right off the bat. Segun Adebayo: Yeah, exactly. Paul: And then move into more customization. Segun Adebayo: Yeah, exactly. I mean this definitely like not to bring down the folks at Material UI, but I think that Material UI is a great framework. I mean, I do see that they're making efforts to actually make this system actually more composible. So I just had to like drop that in because like every at the end of the deal we learn from each other, we try to grow as an ecosystem. So different frameworks is basically equal to different approaches to the same problem. So it's just, I mean, we're trying to learn from each other. And I think for Chakra UI, it's a little bit interesting because like again, when we imagine the phase of a company, I always think about it from the growth stage of a company. At the end of the day, it might feel like it's a single developer that is using check credit but usually if your product or your idea is successful, it quickly move from a single person to two to 20 to 300. And then the goal is how do I make sure my framework actually scales all the way to the end, regardless of how big this company grows? Segun Adebayo: And we start with like opinion first, which is like, we have like a way of doing things, for example, you can easily spin up your own button component by using the Chakra UI box component, add some styles to that, and then you're done. You've made your own button component, right? I mean, that's an opportunity where you design a button, but then as you grow in size, you have your own design team, you have your own design system for your company that's a way you want to work. You want to stay away from the opinions and be able to model your system the way you want. And then we want Chakra UI to be able to get out of the way at that point and just give you a very simple basic API that you can work with to be your own opinions on top of. So these two different ideas is basically what's behind Chakra UI today. And I think that this contributes a whole lot to why people love it, why people use it, but then these ideas will definitely improve over time even more. Paul: Is Chakra UI being used in any arms or tributaries of Vercel right now? Segun Adebayo: Yeah. Right now I just joined recently so I mean, when I got in, obviously no at the moment, but hey, never can tell what will happen in the future. Paul: Yeah. I feel like Vercel is known to get into open source projects either grandfather them in or use them and contribute as support contributors to them. So yeah maybe it'll end up there sooner than you think. Segun Adebayo: Yeah, for sure. I'm excited. I'm definitely like I'm open to them looking forward to that happening obviously. Paul: Are there any cool uses of Chakra UI that you might want to point viewers to if people want to go look at a really good use case of it? Segun Adebayo: Yeah, for sure. Give me a moment. Let me jus pull up a document that shows all the different use cases. I know a couple of websites that used Chakra UI today. I'll probably drop a link to a few of them, but then one of them is stockx.com. And then we also have Bitwarden on the password manager. That's also like a pretty cool use case of Chakra UI. Segun Adebayo: And then when I came here, so currently I reside in Dubai, so one of the things that brought me over here to Dubai is there's a big eCommerce company sponsored by the Dubai government that basically wanted to start off with a big design system from the start. So I basically came in to help integrate Chakra UI into the core of the product. And now is the second biggest eCommerce company, the UAE. So that website is tradeline.com. I'm going to send the link as well. So that is like a full Chakra UI website with RTL support baked in. Coming here and doing the work here basically helped me also get Chakra UI credit, working in RTL, right to left languages like Arabic and Hebrew and things like that because it literary helped me burden my scope a bit more and further than just English. Paul: Now, this company that you mentioned in the UAE you said they wanted to start out from the get go with a big, well thought out design system. What do you think of that approach that they took? Because I know a lot of people, they say like you want to start quick and iterate and then understand how your like layout and components sort of behave with your customer use case or your internal use case and then go from there. Do you think that it is time well spent to really buckle down and figure out the design system from day zero like that? Segun Adebayo: Yeah, I would say when I came in, I think the company was two months old and they already had some walk in system prototype without the design system. So I would say maybe that counts for the idea you're talking about. So it's like, "Okay." But then, I mean, it was like, I mean two months old, zero customers. So it's like, okay. I'm not sure if that really counts a hundred percent, but I think it definitely counts for prototyping your idea really fast. And then coming in, I'd say like the answer really depends on the company and the ambition here. The ambition is slightly different because this is a company backed by government that's like, they're going to give you everything you need from a moneys' perspective from strategy perspective is going to be big already. So you're not trying to test the market to see if you're going to grow or stuff like that. Segun Adebayo: So if the ambition is really big, then it makes sense to actually make sure you get the foundations right before the company explodes from 20 people to 10,000 people in just like one or two years, so I say you have to actually get those foundations right. Paul: All right. Well we're getting up on time here, Sage, is there any resources that you would want to point our listeners to if there's like YouTubers that use Chakra UI that have good tutorials, good documentation or anything like that? Segun Adebayo: Yeah, for sure. I mean a few things we have like an egghead course on Chakra UI, so you can go there, just get to egghead.io, type in Chakra UI in there, you see like a full blown course. Next year's with Chakra UI and just the plain old Chakra UI for beginners course. And there's also another website called chakrauiforbeginners.com. You can actually go in there to actually learn the basics of Chakra UI and get started pretty fast. But working on a course for design system folks was like, how do you build a design system from scratch to Chakra UI? That's something we're also working on. Earlier, when I talked about our approach to making sure we model component logic in a framework agnostic way, we released a framework last month called ZagJS. So you can go to zagjs.com to see- Paul: Can you spell that for me? Segun Adebayo: How ZagJS. So it's a Zag, zagjs.com. Paul: Got you. Okay, thank you. Segun Adebayo: So that's it. So you can go on there to see what that looks like. I mean, how do you model components with Statecharts and State machines? If you're curious, can go in there to see the framework we built around that. I think that's about it to get started with Chakra UI. Paul: Great. And is there any shoutouts you want give or any socials you want to drop if some people like Twitter they'll give to reach the followings? Segun Adebayo: Yeah, for sure. You can follow me on Twitter @thesegunadebayo, or you can search for Sage and I mean, you probably like see me in a few sages on Twitter in there. And I think that you can, I mean, for shoutouts, I definitely want give a huge props to the Chakra UI team. I always tell is almost every time I talk in public because I think that Chakra UI and the vision that we have is pretty big. And because it's open source, there's a tendency that you might want to bond out in that process because we're trying to solve a very, very big problem. So it's like, I mean, just getting that passion and motivation to keep going in open source is pretty hard, right? I definitely always love to give a shout out upon the spotlight to the core maintainers of Chakra UI able to reactive view. I said, this is a shout out for me. Thank you guys. Paul: That's a awesome shout out. Well, thank you for your time for coming on and talking about Chakra UI and your experiences as a designer and engineer Segun, it was great having you on. Segun Adebayo: Yeah. Thank you so much for having me, Paul. I think I enjoyed this. Paul: Awesome take care. Kate: Thanks for listening to PodRocket. You can find us @PodRocketpod on Twitter, and don't forget to subscribe, rate and review on Apple Podcast. Thanks.