Tim Tries: Chakra UI with Jonathan Bakebwa

in today's tim tries episode i am having a look at chakra ui view but because i don't actually know how those component libraries work i've actually never used one i thought it would be worthwhile to ask jonathan bakewa the creator of chakra ui to take me through it so we are looking at it together and with that extra context that i gained i will actually try chakra ui i am really excited let's roll [Music] i think we are good ready i'm ready as always all right in the intro i probably said your name completely wrong so every time i do a video with someone i ask them can you please say your name the way it's supposed to be pronounced my name is jonathan baker oh i don't think i was i was not that far off anyways so in this video it's not really an interview but it's kind of like one it's more like the tim tri series where i try something new that i've never tried before but then in this time it's special because i am now doing this with the author of the thing i'm trying which is kind of special right so of course we're talking about chakra ui um would you mind telling the audience what chakra ui is and then maybe why you think you felt like building this thing why was it needed cool um so chakra ui is a component library that allows you to build accessible web view vue.js web applications um with ease and it also gives you the ability to modify the the visuals of the components without much complexity so you get the added advantage of accessibility because all the components are are built with a tight adherence to the wai aria spec for authored components and you also don't have to lock into one design system so you can if you if you care about design if you care about the appearance of your components uh checker ui is a library that i think will interest you all right now that we know a little bit more about chakra ui why not just try it right this is the part of the tim tries where you will either see me sweat be salty or happily surprised honestly i don't really know where i'll land on this because it's probably one of the first times i've ever tried to use something like chakra so i decided why not rebuild the header of my website and maybe this hero component with these text elements and this extra image here just let's just do that part and see how it goes so currently there is a local host next running with chakra this is completely empty and i thought based on a bit of reading i did on the framework let's start with some of the documentation side of things right so there's a whole bunch of stuff you can look at like there's some style props on the boxes so this is like margin of 2 and that margin of 2 then goes into some sort of specification of what 2 means somewhere so i'm going to have to learn all that a little bit what i'm interested in is now is this the customizing of the theme this is also what you see in tailwind where you can basically set your own colors your own spaces your own fonts in this case also my own breakpoints and this is a pretty interesting part about this and as you can see here there's this theme provider that you that is added to the app and i sorted in nuts that's already added so when you look at my code base i'm loading my font which is latto and i also just load it in the head of next i just load it from google now so it's easy and then um my website has a bunch of different blues and i have five of them and then we have red and yellow so i just set up my color so we can actually use them now inside when i we know in my code let's remove this stuff and we need a box right c box um please bear with me for when i make typos i know live coding isn't the easiest i'm just gonna try right so um for now let's just put my name in it and there it is okay so this background it needs to have a background so i just saw on the docs it's just bg like when you go here i just went to the the box documentation and there we have background and we have width and padding so i'm going to just look at this and kind of use it so my background is going to be blue 2 which is blue too which is like a nice dark one then um we're gonna need some padding i'm just gonna do number four because i think that might be one of their standard numbers oh there we go color is white there we go and then if you look at my website there's this little one pixel border here so i think what i should do is border color equals blue three border bottom equals one pixel no idea if that worked let's inspect oh there it is one pixel solid okay well because there's nothing below it's hard to say but that actually worked so i'm kind of going off of just standard css and it seems to work so they're shorthand because i can probably also write padding here and then it does the same thing okay so there's some smart shorthand or i can write whatever i want and then it chooses for me i don't like how it formats this stuff let's just come on okay whatever um okay so now inside of course we have my little logo here and then my text here that is bold and whatever so let's first steal that logo open this image oh this is actually base64 oh you know what i'm just gonna steal the base64 so i think what we'll need is inside this thing so we have another box and that box is actually aligned to the left and inside it flexes with those two things so why don't we go with another box and then it should display flags and then inside we want an image [Music] approximately 10 hours later i think i did it i didn't go into too many details but i think it's there now i probably sped this video up by a lot because it took me a while to actually code everything anyways so i did decide to go with the aspect ratio box around the little logo in the header but i managed you know to use the aspect ratio also for the hero i added a bunch of boxes my titles everything is there and you know what not a single line of css was written everything was done with just this thing and you know what it's not that much code and probably if i split this up in actual few components and then use chakra stuff it can also be pretty clean i guess so when you look at the results so this is my actual website and this is not a result so as you can see it didn't really specify the the sizes as much but you know it's decent it's really pretty close um i'm pretty happy with that result um i think if i put some actual time into this i can probably use it um for real however um i it's not my favorite outcome of how the html looks then again who looks at the html if this thing works really well and it's still cementing and it's still like accessible we're good to go all right back to the interview and imagine like i'm imagining right because like i said when we were discussing this before i'm a bit old-school i just use html because html is well it's i don't even know how old it is but there you go it works yeah so now you came up with a bunch of components that then output to that html but did you feel like you needed that or did you only need that because of the because of the birth of react and few like frameworks that you just added smart stuff or did you feel like html didn't have enough what's the the thinking there um html is not that so that html doesn't have enough it's just that it's taxing um in terms of like time uh in terms of the uh cognitive like um resources you need to associate to like encapsulating like behavior like if you don't have like the the ability to create units and i think this is where like i think frameworks assist this kind of behavior uh very very well like view or like react so um that was one of the the motivation it's not that html doesn't have it like you said it all like you know ends up being html in the browser um but you know having javascript having a programming language behind encapsulating like accessibility um for for a specific component certainly makes it a lot easier so you don't have to rewrite um these behaviors um for yourself so you talk about accessibility like you mentioned a couple of times and you know what i am really for that like for me everything is accessibility first but what i've learned over the years that accessibility is not always just component driven it's more component in context driven so how do you manage things like focus loops inside pop-ups and these kind of things with the ui library that actually has only components how does that work yeah that's actually true so like when it comes to um accessibility like there's uh different kinds of it like there's the part for cognitive um related accessibility router accessibility this is where things like keyboard management comes in you have they're using the correct you know area area attributes as well for for representing state and so because of these like different um let's say spheres or different facets of implementing accessibility um it also it gives it it also introduces a bit of complexity because and this is probably why not all people who write components uh do access implement the accessibility to the to the exact spec because it's just complicated to do but the advent of compute component driven design allows us to define the context of the component and also allows us to encapsulate this behavior um within this component the javascript that's related with it so um with chakra ui it was it was uh actually i was really very thankful for this concept of component driven design because it allows us to encapsulate all this behavior in a single unit that you can always uh have the the assurance that okay i will always have uh a focus trap inside the model uh every time i use it so um yeah that's that's that's how it was um as i was able to like [Music] i am actually very interested because you made some really good points and you know what i think a lot of people have in mind oh i'm going to make a framework i'm going to try this and then fail and never push through but you actually finished or at least there's a release right people use it yeah so i'm actually very interested to see how it holds up against my old school standards but also against how it fits in the view context so man i really want to thank you for taking the time to explain this to me i know we kept it relatively short but that also allows me to now actually go in try this and film myself struggling trying to understand what you've what you've done but i'm assuming there's good documentation and everything so um thanks again man thanks for joining you know your own is mine and if you do run into any like issues i mean feel free to tweet at me um oh man i will don't worry [Laughter] yeah thank you so much for uh accommodating me i appreciate it cool man i hope to speak to you soon cheers bye cheers bye