The Future of Chakra UI (with Segun Adebayo)

[Music] good morning everyone good afternoon good evening to wherever you're tuning in from my name's lee and you're joining us for another live stream uh if you haven't seen i've been doing a series of live streams where i'm bringing on guests to chat about anything and everything from design systems component libraries the future of the front end shout out to pedro for our last live stream where we dived into stitches it was very cool and really anything just a chance to get some guests on and talk about all sorts of different topics and today i'm very excited to bring on segun aka sage who is the creator of the award-winning library chakra ui he's an a ui engineer who is passionate about design systems accessibility and bridging the gap between design and code which i am also very passionate about um he's also a die hard narato fan so we can we could talk a little bit more about that too i first connected with him when he launched chakra ui i was just blown away by how good it was and i proceeded to use it to immediately rewrite my site and i'm also a proud uh contributor to the project and a supporter so really appreciate all the support that he has given me as well and i've used it for a few courses that i've made too so i'm a huge fan of chakra really excited to talk today so everyone please give a warm welcome in the chat and a round of applause for sage how's it going hey lee how's it going great great i'm doing i'm doing really well as we talked a little bit it's been a busy week but i'm i've been looking forward to this chat quite a bit um there's so much we can talk about today yeah awesome i've been also looking forward to these chats and it's like so many so many thoughts in my head to share with everyone with the community about the future of chakra ui i'm like so excited to be here the best part too we have a ton of fans in the chat of chakra who are really excited to learn more today looking forward to this conversation yeah thank you so much to everybody who's joining in we really appreciate y'all awesome so many chats awesome so the way this will work is we're going to chat just a little bit and then feel free to ask questions in the comments and we'll make sure that we have time to answer everyone's questions and um talk a little bit more about what chakra will look like so maybe just first to kick things off there's probably a few people tuning in who haven't heard of shocker ui before and they're not sure what we're talking about today so for those people could you maybe just give a quick overview of what trucker ui is and why they should care about it awesome yeah so it's a typically when i describe chakra ui i always say chakra ui is a very simple composable and accessible component library that gives you all the building blocks you need to build your website or your application with speed so it's more like you can go from idea to execution and to a live product at like the speed of light absolutely and it's it's amazing to me too that correct me if i'm wrong but chakra was your first big open source project right yeah for sure i mean i think i always say this most of the times like chakra ui literally like opened up the github world for me just like i never used to be so active and open source or even development in general but then like launching chakras sort of helped me learn mastered lots of things like uh the number of things i had to keep track of in my head each day it's like it's like a whole lot right so i mean definitely i'm really excited for that as well which is really impressive to me because of the amount of things you have to learn to not only publish a library publish a package to mpm but then all of the development that goes with it learning about accessibility and best practices you know growing the community to answering people's questions that's a job in and of itself and just trying to connect with people and educate them what do you think has been one of the most rewarding parts about doing that or one of the most interesting parts about just kind of growing that shocker community and seeing people use it in the wild to build really cool things yeah i think i think it's been a really interesting journey for me and i mean it's interesting that we are talking today because one of the things i wanted to tell you on this live stream i think that's there's an i think there's an article you wrote on medium i think at the time you used to work at hyvee and then you said like wrote like it's like a long series about like how to publish a component library how to create one and how to test i think that i'm not sure if i have the reference to the article but honestly i can tell you that that article really helped me um get off the ground really quickly so like i mean this is me just shouting out to you yeah for that yeah for sure so like to talk about the chakra journey i think it's been really rewarding uh for me i'd say like i always feel like i think when i launched chakra ui i was pretty nervous if this if this would be like a good solution or a good idea in the first place because i had a couple of friends at a time and then they were like i mean are you sure you want to make this open source like there's so many people that are going to talk about that to you if it doesn't work out or if it doesn't make sense it's like people are going to judge you out there if if it's not good right well i decided to take the risk and i think i think i would say like i made you i made a great decision to do that because of these side effects of that which is like all of the amazing people have gotten to meet all of the amazing opportunities i've gotten and so far and all the core contributors that join the team and people who volunteer their time to keep maintaining this library and it's like you literally sit and observe these people and it's like this is so amazing to see um how people are able to help themselves without any incentive i mean i mean in the mix of that so i feel like the community has been really awesome um shout out to all the core contributors which are quite wise like these guys literally like help me just like focus on the core of chakra itself and just help me undo all awarded integrities and github issues and discussions and bug fixes and discord and like so many things that happen at the same time and i think it's usually a challenge to keep up with everything that's why like having a trusted team kind of helps you and saves you a lot of time so yeah for sure i'd say like i if i were to do this again i'll say i'll still do it time and time again because the benefits definitely outweighs the cost so like i'm happy for that amazing and i love this comment too because i mentioned i made two courses that use chakra and i'm glad that we've kind of helped each other out i've helped people learn i've helped people learn about chakra and you've also helped me make these courses way faster than i ever could so i really appreciate that um one thing that's interesting to me is shocker started out as just a react component library and it's expanded now to view right yes for sure yes so we have um we have journalist analysts working on the view version of chakra ui and yesterday during our call we talked about how interesting how interesting it started right so chakra ui launched september 2019 then i think a month after jonathan reached out to me that i mean i'd love to create the view version for this and i just like okay free i mean sure do i mean just do whatever you want and then it's i mean i think i got i was quite surprised to see that i think close to three or four months later i mean we started it started to look like the view was coming together and i was like oh this is really interesting i mean it's interesting to find someone who literally understands the core of a library and is able to create that in vue.js or in the different uh let's say it is in a different framework so that's like pretty amazing so shout out to jonathan for that yeah he is incredible um could you talk maybe a little bit about what underlying technology chakra is built on like what are some of the the libraries that you use or the concepts that you use for people who don't know anything maybe about css or css and js or things in that nature yeah for sure so i think i'll start with the concepts and then i'll go through technologies so like uh the high so the high level concepts that we use in chakra ui literally came from my experience as a designer right so i used to work close to six years ago i used to work as a product designer and i just like make a ton of things in figma and sketch and put together lots of design uh so i mean when i worked as a designer one of the core admin tenants or principles of design is literally um composition right so like ease of comp composing components together ease of overriding components in figma sketch if you have like uh libraries or if you have like uh figma components it's really easy to like override properties and it's kind of like so i think i took ideas from that from sigma specifically so i would say like shout out to the figma design team as like super cool i mean i use fig i used to my whole lot and i think the initial idea of making chakra really compostable came from sigma um to to to take that over to the development land i mean i i started to notice this like rise in utility classes uh started from turkey on css to tailwind css to bootstrap and it's like so many different frameworks in there that provide like really useful like shorthand classes i mean to be able to style your components with ease right so uh i i thought that that was a pretty cool idea and i think after a while i stumbled upon this thing called like start system and i was like oh this is interesting so i just saw this utility classes like last week and this week i'm seeing style system okay that's cool let me try to delve in to see what's in here and then i i think i was really attracted to the idea that it was possible to do that in javascript and honestly i can admit that at the time i never knew there was 18 core css in js just i was just purely doing research and then going deep that was when i started to realize that okay this i mean these are two different paradigms i mean in when it comes to like styling your modern application so i think i think i'm pretty excited for that so when it comes to like the technologies that we use in chakra ui just like i mentioned style system is one of that and on top of style system we we currently use emotion to sort of help us like translate these styles to class names and sort of append that to the dom node uh at the moment and over time we are starting to like also leverage some bits and pieces from x-state because we are pretty excited about sleep machines so i'm happy to share some of the eating jams we have coming in chakra that's awesome that's super exciting i'm excited to talk a little bit more about the future one thing i want to talk about quickly though is when you were getting started with chakra you talked about how the components that you were building were actually ins and like the underlying ideas were inspired by some of the work you were doing with career lift so maybe you'd want to talk a little bit about that and and let people know what career lift is oh yeah for sure i mean uh that's that's a very interesting question because i mean most of the time when i talk i really mentioned careerlift so i'm happy to share today so careerlift is more like it's it's a web application that helps you build your resume with speed whereas you're building a resume these days when it comes to applying for jobs uh i think one of the one of the very obvious factors like maybe 2 out of 100 job application gets i mean get i mean become successful i would say so it's like it takes a ton of effort to just create custom resumes for like all of these different hundred job positions and honestly even though we keep saying things like you should tailor your resume to the job when you have to apply 200 jobs it's like i mean you most likely will throw away that advice after a while so like i just wanted to figure out the solution to be able to help people uh be without all these different resumes with speed so yeah that is literally where the idea of chakra actually started if i'm going to be honest so at the time when i was trying to get into react and get into like javascript and css and js i thought that the best way the best way of doing that is working on your own product or building something by yourself right and this is one of the things i always tell people sort of getting started in technology and i mean engineering in general like the easiest way to learn or maybe not the easiest the hardest actually if the fastest way to learn is to build something uh with what you know at the moment right so i decided to take that as a challenge to build career lift with two of my friends cola and biola and it turned out to be a pretty interesting journey um the first mvp was really completely crap from if i'm going to be honest and after a while we decided to reinvent the wheel at the time i was still doing on design so i decided to get into like the front-end things a bit more and then i just i built like a mini component library for that product so i call that career leads chakra that's literally where the name was extracted from so so that's that was it so we still have like the live story book ops like so many beautiful components we used to make this application and then after a while i decided to like i mean this component library looks really nice for career lift what if i pick some pieces of that and make that open source so that's like where the journey into chakra started i loved what you said about as you were building a product you realized there was the opportunity to extract those components and and make that better because i think that a lot of people don't realize that in the process of building that's when you understand how the actual consumers of whatever the tool you're building would feel the api or the what's good and what's bad and that's when you develop that empathy for understanding how to use your library so the people who build the tools and then use their own tools i think succeed the most because they really know what's going well what's not going well and how to how to make improvements really quickly yeah that makes that makes a lot of sense and one of the one of the ideas i usually have in mind is when you build something you always most likely build something else or when you for example when you try to produce a really nice piece of furniture you actually also produce sawdust like if you produce the waste that comes from that is also useful for something else right so most of the time building a product there are different pieces of that you could actually like leverage and sort of give to other people and that's going to be valuable so when we talk about the future of chakra one thing before we get into the future future to talk about is the somewhat recent release of version 1.0 i'm curious what it was like for for you all maintaining the library as you went from a pre-release to kind of standardizing and solidifying what the apis for the components were what the over arching like ideas of the of the component library were and how you got to that 1.0 yeah for sure i think one of the one of the key concerns we had that had to like that led to a lot of work to v1 is literally things i mean things around seeming uh how do i like theme these components in a way that is custom to my application um chakra ur comes with some beautiful default uh component and everything looks really good but then it starts to break down when you want to like i mean add your own design to this component and then we had to sort of like sit down to kind of think about like how can we make this possible we literally tried out close to 12 different ideas on how to make this teaming possible and like we took ideas from different design tools we took ideas from different like existing libraries and literally even went out of javascript to see like our other possible languages we kind of like think about this sort of composition ideas and like we kind of tried everything and i we just set up i don't know processes on how we want to approach this problem um that's one of the key thing we wanted to solve i mean i think another challenge at the time was typescript it's like that dude is that that dude is a monster yeah it's always like a lot of things and like people i mean the pre-release v0.8 i mean use a lot of javascript and like uh i mean hundred thing type definitions and that's like a huge pain to maintain because like here's just some type definition files that someone just helps us to write and i had to do a lot of mana review and testing for most of this and it was pretty painful so migrating to typescript i was also like a huge challenge for us at the time and i mean these are the two core ideas and also improving accessibility for the components these are the three obviously three core areas that we try to focus on uh for v1 i'd say it's been like a huge um it's been a huge success so far uh by far one of the biggest challenges this thing called the ass prop uh it's like this polymorphic prop called the ass which literally for those that are not aware helps you literally change the instance of the element that shows up in your dom so if you are using this box component or some generic component and you say as div or as uh image or as form you're able to sort of change the underlying dumb node that gets rendered so making that work in typescript with some interesting interesting typescript i'll say gymnastics most of the time oh no oh my internet did my internet cut out there a little bit i think that was me yeah okay oh i'm sorry about that my wi-fi must uh must have been not friendly so you're talking about the as prop and it being polymorphic and how difficult that is i'm back okay it sounds like um those in the chat heard what you said so i'm sorry yeah they did i'm sorry i cut out there for a second but yeah that's definitely a difficult challenge and i think that people underestimate the difference between writing typescript for a library and writing typescript for a consumer code because the library code is a lot more difficult there's a lot more things you have to consider i'm terrible at typescript like i'm a complete typescript novice so yeah that's that's a huge challenge um con congrats for doing that because that's a lot of work indeed for sure i think v1 was i think v1 getting the v1 was pretty stressful i'm glad i must admit this specifically because i remember at some point everyone on the team literally ran out of steam uh battling with typescript and it's like i literally had to sort of just like leave most the things i was working on at the time to just like make sure i defeat this typescript battle yeah and luckily i mean it turned out to be a success so i'm happy for that awesome well are you let's uh let's talk now about maybe the future of chakra ui we can have you share your screen and and go through some of that and why while you're pulling that up i'll just say shout out to everybody joining in the chat we're really excited to have you here i see a few questions that we'll come back to at the end of the chat but we really appreciate you all joining in and chatting today this is a really quick question we can answer now it's from narado isn't it [Laughter] uh live stream about how i need to get more into the anime game so yeah for sure um yeah awesome so you want to talk about maybe just the future and where you feel like the library is going to go in the next six months to a year and yeah for sure i'm happy to share uh so i'm i'm particularly like really excited to talk about the future of chakra because like at the current state of chakra i think we've really done a really amazing job uh to help people uh view their applications with speed i mean every time i see people reach out to me on twitter on linkedin just telling me thank you for making this library and i mean i'm able to see the impact on how it's literally helping people launch their mvps really fast i think like i'm really proud of everything we've done so far but in general as with every technology there's always a way to make it better right there's always like a way to improve it over time so like when it comes to like making a library an open source library in general this the challenge of always staying ahead of the game or always innovating or always improving that over time and that can be pretty challenging but most of the time just having a clear sense of vision where you want it to go in the next couple of months and years i mean kind of helps guide even the core team members that join the team all right so i'm going to share my team on my screen now to just like give like everyone a rough idea of where i think chakra is going to go and hopefully this gets people excited so let's see i'm really excited just to hear not only about the future but also what what it will look like in future projects that i do are future courses so it's it's definitely very exciting awesome uh i assume you can see my screen do you want to confirm can you see my screen yeah yeah i can see it it's coming in clear awesome okay cool so uh so right now at the current set of chakras we use a lot of like style system logic and emotions team provider to generate class names and it kind of helps us like get ahead and help people build their applications really fast uh i mean one of the downsides or one of the trade-offs to that at the moment is just the runtime footprint of doing this expensive calculation over time so we are trying to tackle this problem in the next six to one year six months to one year roughly to really boost the performance of chakra ui and make chakra ui literally what i mean take chakra right away should be and literally help us like help people build things even fast right so uh we have these four four four arms that we are trying to focus on for the next six to six months to one year and this could definitely take way longer because hey i mean just like we always do most of the time we make the mistake of like underestimating how much work is involved in most of the things so this is this is definitely not a promise it's gonna take six months to one year but we're gonna do our best to make this happen all right so i'm gonna talk about like each of these four arms pretty quickly um so we i mean ideally we want to get chakra to a place where it's a really great component system that works across mobile and web right so this mobile web paradigm is one of the things we are aiming we're aiming for and what i mean by that is we want to get chakra to work effectively at least for these top four platforms which is react view preact and react native so these are the these are the core areas we are targeting i mean chakra to sort of like try to dominate over over the coming years right and the first thing i'm really excited to talk about is the state machine so i always call it the rise of the machines right which means like uh so it's like uh we were really excited about the future of like state modeling and state charts in general i think i think this has a place in the future not just for chakra but for web development in general so typically we always call our role like software engineering like front-end engineering but i always think that the engineering part of that thai tool is always like missing sometimes right so it's like i think state machines can get us back to this real engineering where we get to model the state or the logic of a component once and use it literally everywhere so just like react says like i mean write it once and use everywhere state machines would say like model the logic of this component once and use it everywhere right so we the goal is because it's going to take a lot of time to put a react code to view and to pray out and to react native instead of doing all of that work i mean duplicating all of that work across these different frameworks we have some interesting ideas on how to model the logic of these components and just like use these machines across these different frameworks and we have an iraq prototype of this and i'm really excited for where this goes next right so the core ideas here is we want to model component logic so if you're designing an accordion or a model or a pin impute component and all of this is really described in your state chart using the still chart makes it easy to visualize the component logic and find bugs and help people contribute fairly easily without having to write some if else switch statements just to patch the code to make it work and things like that so we want to keep make sure the components are pretty stable over time and literally get rid of any react specific code because internal things that we do is one of the code that we write right now um it's purely it's mostly javascript if you ask me and i think we can sort of extract those into sleep machines right so that gives us access to some really interesting testing tools that comes with amazing libraries like xstate which we can use to test the different state and possible events that can change the state of a component right so that is one area we're really excited about another area we're excited about is accessibility factories and the reason why we have this separate right now is because like all of these different target platforms reacts react native product and view um have different ways they handle accessibility well we could say reactory and project are almost like pretty similar so there's not much so we can literally sum this up as web and like mobile native which is react native and the way all of the attributes for accessibility works across them across these different frameworks are kind of different so we are going to have some set of accessibility factories that help us produce the proper area attributes the proper interaction code uh proper gesture code that sort of leads to correct accessibility uh ensure that voiceover works correctly there's proper contrast checks and literally any any anything that can help us get like the best accessibility for our components across the web and mobile native all right so these are the this is the second area and the third area would be like style engine so at the moment we rely a lot on like team provider and we rely a lot on style system um in next coming months we want to literally get rid of these as much as possible and just rely heavily on css variables most of the time when i think about this i feel like um the concept of team provider was actually good for a specific time and i would say this specific time would be like the pre-css variable era where css variable wasn't support wasn't like supported acro across multiple browsers so i think provider really served this purpose and but i think looking forward because i think like most browser most browsers now support like css custom properties pretty well i think it's it's high time we kind of start switching towards this instead because this significantly reduces any performance or runtime issues um that is sort of associated with css and js in general right and and then another like another like really interesting issue would be like how to properly persist color mode so like all of your light mode and dark mode fans out there um that they don't want to see any flash of white or any flash of like dark when i want to switch to light and things like that make sure that the color mode persists correctly and figure out like strategies to make this work um another really interesting experiment we are currently trying to explore um is to sort of like make css engineers like the true era it should be which is like trying to figure out how we can extract some styles i mean possibly not every cell but a couple of styles at due time and maybe just this would this would leave the runtime footprint to be very low possibly only where you are doing some like uh prop interpolation like if else and you want to change some styles and just like rely on uh rely on the build time to help us do at least eighty percent of the work and just leave you twenty percent on time uh it's usually a trade-off right so uh we're looking for we're looking to like figure out ways to like really really boost the performance of like css and js in general right and then the last thing would be like the variance system this um from it from a designer standpoint this is one of the key things that really made platforms like figma and platforms like framer really succeed these days because we see that it's really easy to compose create new variants and compose new variants for any component and it kind of like makes it really really fun to build components so chakra ui in the past has made it easy to like style any component override any components you use the button you can change the background color and do anything you want and it works pretty well but i think we want to in the future we want to start to take a more structured and methodological approach to sort of styling com components and that's why we would most likely introduce this variant system and for anyone who is curious the variant system is just a way to define the styles of a component across different uh you what what a variant could mean the size a variant could mean the visual appearance whether it's like solid or outline a variant could be one is like state which is like over active or disabled and things like that pretty much uh we want to keep this as close as possible to how design tools implement this uh so that we kind of like again bridge the gap between design and engineering and then the last part which is like the motion part which is a really really crucial part as well i mean things have to feel really smooth and natural and sort of like natural when you interact with components so um from from entry and exit transitions to touch and gestures and feedback when you use react native for example there are different touch interactions you have to respond to and making that work pretty well and accessible at the same time consider pose a very interesting challenge uh when it comes to building components for the web i think it's like we kind of have some hacks to walk around this like i mean you listen to transition end or animation end and you can do most of the gymnastics you want to do but i would say like i mean getting this working pretty well with accessibility is usually the tren um is usually the challenge across these different frameworks and we have it in mind to you um to tackle this um but i control this out there that this is not one of our strong suites as as a team at the moment so there's anyone who thinks he's a geek i mean in this area and you think that you know a lot about motion and transition and animation i mean feel free to reach out to me we were happy to like i mean have you joined the core team to help us explore this area so yeah this is sort of like a full picture of where we're going it's going to take a long time to sort of get to this state but we think that building components literally com comprise of these four different areas and very truly we get to the point where like it's a true joy to build components and we get the performance and the developer experience that we want that's incredible i love how it is a complete solution not only for just doing components but for thinking about all the facets of building a modern web application from doing animations with motion and doing state machines and basically providing joy to the developer making it easy for them to create these great experiences i think it's great that that the north star or the vision for for what y'all are working on is trying to include as much of as much of that as you can directly in the framework i think that will go a long way especially for people who are just getting started and they're trying to find you know recommendations or best practice on how to do things having all of that in a kind of a centralized place i think goes goes a really long way yes for sure i mean there's like in general it's gonna take like a lot of work together um to happen or to come to life but i think at the moment we have almost all of the ingredients that we need um to be able to design this kind of solution so for sure i'm excited to see i mean how soon we can get this out but i'm really i'm also i can also say that we are going to like take little steps to get there and i'm really happy to see where this lives it's all about the iteration right like it's know where you're gonna get to but in the same time you know slowly and iteratively get there with with the core team as you kind of chunk out these different pieces i think that's really awesome and i also think it's awesome that you talked about how having better integration with the tools that people are already using to design so tools like figma or other design tools where you have these variants or you have these other types of components and helping you bridge that gap between those who are doing the design and those who are doing the code i think that really helps unlock a lot of productivity on teams when those designers and coders are working together or even ideally they're the same people you know the people who can design can code and the people who can code can also design i think that's a great place to be at yeah i think so i mean i think the general idea we also like i mean we thought about at some point during our team meeting is literally like the idea of like getting designers into like to to be interested in code at least in some way but maybe not write code directly but to be able to like interact with the ideas and concepts that exist in like the i'll say the medium they are designing for right so if i'm a designer and i'm designing for mobile i want i would like to get the designer that's kind of working on a mobile app and the developer that wants to develop that to have some sense of i mean come on ground when it comes to ideas and concepts and language specifically so that it doesn't feel like a foreign language that hey i just send you some figma design and you just like do whatever you want i mean i'm not interested so we are we're looking at the possibility of having some sort of playground where um it's kind of easy for developers and designers to sort of interact and share ideas so i think that's that's definitely going to be useful as well and it's it's really awesome the transition here to a comment in the chat i was looking at asking about is it possible to design these components in the browser or how can you do that and one tool i think it's really cool i'm sure you've seen this tool before but it's called open chakra and it's a community made tool that allows you to pull in some of these components and kind of like build them in a drag-and-drop way what are your thoughts on this i think it's really neat yeah i think it's pretty cool i mean i know the team that worked on this and i'm always constantly blown away by the work that i do on open chakra i mean i'm not i'm not even involved in the maintenance of this project but i see that this project constantly evolves like really fast and anyone who is looking to build any component on the fly in the browser i think this is a pretty amazing tool um i mean it obviously is it doesn't work exactly as figma sketch like you're used to but i think it can get you pretty far really fast that's super cool so when we think too about the future of chakra i think it's important also to talk about how you can build your applications even faster from full marketing pages to full sas applications by the way this is awesome how fast it's growing that's it's totally incredible um i really like what y'all are doing with shocker ui pro i think it'd be fun to talk about this a little bit just speeding up the delivery for people to get their marketing pages out of the box or get sas components out of the box all these different components that are designed so well i think that's the thing that i enjoy the most you all did a really incredible job with giving these great designs and providing them you know different screen widths and making this code you know react or view compatible right out of the box i mean there's so much so much great stuff here you want to talk about this a little bit yeah for sure i think it already did a good job anyway yeah i was sure so i think i mean the idea behind chakra ui pro is to i mean sort of take your ui to the next level and help people be more productive so by default there are so many things i mean even though chakra ui helps you get get started pretty fast i mean you can you can start a new chakra ui project and it just like you can get started make your own designs really fast i think i mean generally it still takes some time right so even if you want to build a simple page you're still going to spend some time um to sort of walk around the design buy the videos and typography and all these different design decisions that can maybe help i mean take close to six to eight hours to be done with just one page where it says like instead of doing all of that we decided to okay let us try to be a bit more proactive and be able to like provide these design solutions uh to people who use chakra ui already and just just have them like tweak only a few things so we try to like go into every single detail that's possible and as usual when you want to think about this kind of page designs a common issue is being like making it accessible as well right and making sure you use the proper html markup and making sure you under focus and all of these different things at the same time i think when people build application most of the time these are things that that can't be easily skipped right we just decided to like take the time and the paint build all of these things and because i'm based in dubai and i'm in the middle east uh one of the key things i've seen that's been like top of mind is rtl so right to left right a bunch of people over here they don't exactly relate well with left to right languages and left to right layouts and that's because a bunch of them are local people um not local in the sense that they don't know what's going on but they just prefer things to be written in their language and india and they prefer content to be sort of relatable to them from a cultural standpoint right so that places a lot of demand on on open source libraries and frameworks because hey you have to take care of right to left right so because because of this extra work that's involved in changing things from left to right to right to left we decided to also add that to chakra ui pro by default so if you can take the component code and use it to your or your hundred percent guarantee that's going to work pretty well in light and dark mode your 100 percent granted is going to work in left to right and right to left layout and you literally don't have like anything to do other than customize this to suit your brand and suit your design and i think it's it's easy to underestimate too how much work it is to roll something like rtl support yourself it's a lot of work to make your your components in your application accessible all across the globe so it's awesome that that's included directly with what you're providing because i think it's something that i would love to see more sites support and i know that a lot of people are asking for that as well too so that's that's really awesome um yes for sure nice well i'm gonna scroll up a little bit here in the chat thanks to everybody who's joining in and leaving comments we really appreciate y'all and i'll just try to i'll try to pull some out and see some some comments that we can talk about some questions we have um let's see here's a good one what was the biggest challenge in um you know bringing chakra to life and what was a non-technical challenge maybe uh um but i mean i think i mean in orders of magnitude i'll see the technical challenges a lot more yeah so i mean i mean it took a lot of effort from the technical side and the reason why i see this is like um getting typescript getting the monorepo getting like all of this working together pretty well getting jess to be happy i mean writing your tests in a way that walks across like all of the different packages and also building the websites and the docs in the same place and like making everything all work together i mean that's that's a lot of work to do so i'd say like the technical literally outweighed the non-technical um i would say like for for non-technical i think the biggest issue has been so far i'm helping people and literally like attending to give up issues and trying to fix bugs and trying to understand the problem trying to triage an issue uh i think that that has been the most challenging part and also getting new new members to join the team because we have right now because checkered ui is pretty popular um recently we averaged close to 1.8 million developers worldwide i've used a downloaded chakra ui and that literally gives it gets me excited and it also gets me nervous because like i mean i know that like people are going to run into different use cases and different issues and like people are going to come straight away to discord or github create an issue and then like just dump it in there and then it's like but we we don't exactly have enough manpower to undo all of the different things we want to do so it's like this process of getting people on board to help to help us like fix all of all these different issues or even take the library to a different level in general and now that we're talking about the future of chakra you are now we see that there are different areas that requires different different expertise level and not even to talk about the education part of things because when you build a library like this you want to educate people as well you want the right good docs to help them understand all the different concepts so these are the non-technical bits of things that i think is i mean it's a challenge we are trying to solve and we are still solving i mean i don't think it's going to end anyway but we keep doing our best i i would agree the the technical work that you all have done is is really really impressive i think there's a related question about just how did you manage to to figure out the type script and javascript work i know that you had to learn a lot of new things as you were working through this yes yes for sure so uh so i see this question about like how do you how did i learn javascript on typescript uh i mean in detail with typescript is like it's really interesting because like when you get into like i mean one of the biggest things i can recommend anyway it's like you can go to the front and master us there's a huge ton of courses out there i think there's one specifically from mike north about like a production ready type script i think you want to take it's pretty long and can be boring it's like just take the time i mean to sort of learn and go through the course to really understand the details in typescript i mean i think i can throw that out there for anyone who is curious because this course really helped me um i mean that's the easy part of typescript and then there's a part that really can blow your head away um if you're not like careful with it so it's like i think might not just help me unlock these parts that helps me do some wizardry with typescript and um and then also like i made a ton of a ton of trial and error with typescript i don't think there's one way to solve a typescript challenge there's like a ton of things you're gonna have to try and they're gonna hit your roadblock a lot of times and uh it's very interesting because you can finish your javascript code in one day and then spend the next two weeks trying to solve the typescript part of the problem yeah and it's really unfair but i mean that's it that's where we find ourselves these days i mean writing library code most of the time yeah that's awesome and it's funny too to see pedro here talking about other complexity from typescript that they're working on with stitches so big shout out to you for for wrangling through that and just the difficulty in that the polymorphism of the as prop it's definitely a a challenge yeah that's that's like that's like the badge of honor for anyone walking on the library these days like also also that you already kind of touched on this because you already talked about the future and and react native support which will be coming which is awesome we have some people who are using chakra with next which is awesome um any any thoughts on the future of something like a pagination component would that be something that you would think about adding yeah i mean interestingly we plan to make our like our roadmap public very soon so it's kind of like gonna be obvious you you're gonna see the upcoming components and the upcoming ideas and concepts we're working on so we're going to make that open in public but what i can tell you now is uh we're very careful what we work on now because of this that new direction we are going right if we if we decided if we decide to add like pagination and carousel and all of these different components in there and then we start to rewrite this component logic in state machines it's like but we're trying to do like double work at the same time and because we're such a small team i think would most likely want to start embracing state machines and then when we arrange some sense of stability we'll definitely add more and more components because we're sure this is not going to be rewritten in some framework or some library it's a state machine it's just javascript code there's definitely fans of x state and state machines in the in the comments so i think everyone's really excited that that's on the future roadmap especially react native support as well too so that's that's really awesome and even what you talked about with css variables too here's the question about maybe have you thought through what actually implementing css variables will look like is that something where you'll kind of roll a custom javascript solution or is that still in the research phase yeah interestingly it's not exactly in the research phase with css variables so uh if anyone is curious you can i mean head over to the repo and i mean i took some time this week because i have like pretty free time this week and like just try to like create an initial draft of what this is gonna look like so we have like a pr open in there to sort of like just share the different concepts and ideas and we're able to do this without like any breaking change in library um in general so it's like this idea works i'd say and we're definitely going in this direction and once it's properly and thoroughly reviewed and we're sure that everything works pretty well that's awesome there's some some love in the comments for the interactive docs i do love the design of the website and the documentation i think was one of the things that really actually sold me on the library at first because i was able to read through there understand not only how to use the components but also kind of why you made them and what the accessibility reasons were and how they were implemented which i think was great and yeah the interactive part of it is great we also have some some fans of the templates which is good some people who are using it in their personal sites which is awesome um and yeah the chakra ui website uses does it use the react version yeah for sure we i mean it uses the react version i think one of the things i can see here is there's a different website for the view version as well which is view.chakraui.com you can go there that uses the view version and i mean it's the view component library so feel free to like go in there to dig in uh i think i mean my my guess is the person that asked this question also like i mean is curious about view so like go ahead to check the view component library and see let me see what it looks like awesome thanks to everybody who's joining in we appreciate y'all joining especially those who are even joining in late still we we love having you here a request for a file upload file component um you can probably build your own right now right but something like that would be would be kind of cool too and it's more opinionated but like you said you got to think about balancing new components with where you want to take the the future of the library and things like state machines and motion transitions and yeah yeah exactly i mean i'm happy i mean usually when i see this kind of request i always tell people i'm happy to work on this i mean the only thing though is if you're willing to like open a pr i mean to add this component library i'm happy to share ideas and thoughts on how to design the api and how to under accessibility but when it comes to me doing the work directly i mean i think i would rather want to spend more time trying to shape up the future of the library and just think about the overarching ideas and concepts i'd like to move forward uh in the library but sure we also have members of the core team that are able to help you and support you to add these components as well so feel free to go in there open an open apr and just like share some initial drafts of what you have in mind and we'll be happy to help you make it live one question that i have is how can we as a community as a as developers and designers how can we get other engineers and developers to care more about accessibility a big step is including things like this directly in the frameworks that people are using so that you know it makes it easy for them to just get that stuff out of the box how do we then ensure that when they're applying this in their application we can get them to care about you know correctly using headings or making sure that there's skip navigation or all the different things that you can do to provide these accessible experiences i'm curious if you have any thoughts on is there any way to incentivize that that's that's an interesting challenge i've been thinking about it sometimes as well uh because one of the key problem is like even though like all of these libraries and chakra ui itself is accessible by default i mean this doesn't mean that your application the applications you build with them would be accessible by default and what i mean by this is like the way you use the components and the way you compose them together might have some bad accessibility implications in them whereas the only way i i honestly when i thought about this the only way i thought that this could be solved is to set up i mean have some form of like validator for accessibility that you can actually run through your application and just like check that everything looking pretty good um from i mean from a general accessibility standpoint um i think that that's the best we can do but i mean i think also getting like the developers to be involved in like open source contribution i mean specifically to libraries that care about accessibility it's one like little trick that you can use to get people to care about it and what i what i mean by this is if you can get your developers to contribute to chakra ui or to any of these existing libraries that care about accessibility in the process of contributing you're gonna get a lot of pushback because like hey you did this wrong this is not accessible you need to tweak this for us to be able to merge in your pr and then you're gonna have to do like lots of back and forth but if you are very patient with that process there's a high chance that you're gonna learn a lot um just by getting people to review your pr code um i mean i think you would even learn more than going to take some course because the people that build these libraries have gone neck deep into learning about accessibility and they could literally throw you some eating gems just by reviewing the pr absolutely i feel personally like i've learned a lot just from trying to contribute back to libraries whether that's anything in the react space or in the next gs space and just hearing from the people who know it best like you said getting their expertise on what i did terrible what i did good and trying to help me learn more such that the next time i contributed the next time i come back i have that knowledge and i can kind of do things a little bit better so i really i enjoy that tip a lot yeah for sure hey everyone who's joining especially if it's late where you're at we appreciate you joining hey everyone this is a this is an awesome question is there any kind of unofficial or official um figma plug-in or library for using the components that would be something cool i've seen some similar things like this before yes i think there's like an unofficial figma plug-in or not exactly if you might plug in by figma templates that has components and colors and stuff in there uh i i recently stumbled on like a really awesome dude called javier and we made it like a youtube video about like it's kind of working on like it's semi official templates i mean for figma and i think he has gone into a whole lot of detail so shout out to him if you're watching this uh and the reason why i'm trying out him specifically is just because he has volunteered to help us get this to get this figma official key out there to every every designer that wants to learn more about chakra ui and get into the system there is also a shout out for the discord community so if you want to learn more about about chakra you can go there and connect with lots of people who are willing to contribute and ask questions and and talk about what components will be added and what the future is um yeah if there's any more questions here we can we can quickly answer them but i also want to make sure that i'm mindful of your time i know it's later over in dubai it's early in the morning for me here but i'm glad that we were able to to find a time where we could both chat i do really appreciate you coming on here today and talking it was it was great to hear about just the future where you want to take things some of your history and backstory for how you got here i feel like i've learned a lot so i do really appreciate it yeah that's really awesome too yeah i mean i'm also happy to share this i mean every single time i tell people like i mean if you want me to talk about the story of chakra i'm down every single time so just let us reach out to me and let me know i'm happy to tell you the story a hundred times amazing well um with that i think we'll wrap up the stream for today thank you everybody who joined in the chat we really appreciate you leaving questions and and tuning in and thank you for joining really appreciate it let's do it again sometime yeah for sure thank you so much for having me here i think i really enjoyed this chats like more like two friends chatting and like it felt really natural to me absolutely absolutely well uh i'll have to take another course with chakra now i mean i i have to it's just yeah for sure thank you so much awesome well thank you everyone we appreciate it bye

Channel: Lee Robinson

Views: 7,167

Keywords:

Id: I5xEc9t-HZg

Length: 56min 48sec (3408 seconds)

Published: Fri Feb 26 2021