GitHub Open Source Friday, 19 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Handle Component State Machine Logic with Zag.js - Open Source Friday #opensource

Description

Creator of Chakra UI and Zag.js, Sage (Segun Adebayo), experienced inconsistencies when he tried to support various JavaScript frameworks with Chakra UI. To remedy his pain points, he learned a lot state machines and developed another side project called Zag.js.

Watch this video to learn how Zag.js works!

0:00 - What is Zag.js
1:36 - Motivation for creating Zag.js
3:09 - How Sage learned about state machines
3:36 - Why it’s called Zag
4:36 - Zag supports multiple frameworks
5:22 - Framework agnostic
8:08 - Demo plan
11:37 - Demo
14:08 - Visualizing state logic
19:39 - Accessibility with Zag
21:41 - Q&A
23:41 - Fave food
27:39 - Follow us for more!

Join @blackgirlbytes live for Open Source Fridays at https://www.meetup.com/github/.

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Sage, what about you show us um zac js, which is your new project, actually tell us, tell us a little bit about what zag is and then jump into the demo.

B

Yeah for sure um really, nice demolizer, I think that's awesome, to see and actually watch yeah um I mean zacchaeus is also like, I would say like such as an extension or an extension project from check for ui, um just like lazar described. um It was right. Now is primarily a react library, um basically, but then we also have some folks working on the vgs library. So those are two different like javascript frameworks that we're building on top of.

B

But then, as I guess like as we as we continued maintaining chakra ui, um I mean you start to notice that there are a couple of nuances between these frameworks. It's like it gets like. If you wanted to be. Let's say you wanted to build a dialogue or a menu component or drop down menu. You probably have to write quite a lot of things and quite a lot of complex codes.

B

That's like, if you showed it to your colleagues, you even feel embarrassed because it's quite complex I mean it's so hard to understand, uh which we, we managed to figure this out within chakra ui. uh But I think that, like over time, we started to see lots of like uh inconsistencies and we probably just have to like keep manually orchestrating like the on click on focus and blower, and all of this event, unless orchestrating them together into like a unified system, uh was pretty hard and it turned out to be a copy and paste theme.

B

So we have the react team. We have the view team. So the view team basically goes into the react project copy over the logic for a popover or a dialog component paste it into view, and maybe just try to tweak all the use state and use ref to sort of just use the view terminologies or the view syntax.

B

But then the issue then starts to arise where, if there's a bug in react, how do we pipe that back into view? uh Then it feels like okay? Do I have to keep sending like a twitter dm to the view, guys, hey guys, we just fixed the ball. Can you like help us fix it as well as you, uh so that sort of turned out to be like a huge, a huge mass um and that, from that process we learned this. It would be really hard for us to serve more jurassic frameworks.

B

If we struggle with just react and view and then there's lots of people sending mediums like, can we have to create your wife or sevelt or for solid js, I'm like okay right now, I just trying to keep up with reacting view. I cannot imagine like going into multiple frameworks.

B

I guess we'll all be dead if we did that um honestly yeah, so what we ended up doing was like trying to think deeply about like how can we model the logic of all our components in in a way where it's like completely agnostic of all these frameworks, and then we can take all of this component logic and just like put them into each framework and no matter what the framework is. It's very easy to integrate the logic of that component into each framework like that.

B

So that's basically the motivation uh for building with state machines um and I think, like watching lots of like videos about state machines from the folks at stately and david koshy. Taking lots of courses really just helped me understand this concept and so like we got into. I just got into like the mode where I'm like. I'm just gonna, try to build something with this and see how it goes, and I think, like eight eight to ten months um afterwards, I mean it turns out to be okay.

B

I think I'm not just building something with this. I'm actually shipping something with this. Let's just put it out, there call it in zag and uh we call the names, obviously by definition, because zag basically means a sharp change in direction and that's exactly what we did.

A

With the product I like the name, okay, I see- and I like that I like that you came up with that solution, because I could totally understand how overwhelming it would be if someone's like. Hey, can you implement this for this language and this framework and you're like whoa whoa whoa like this is a lot but.

B

Yeah yeah exactly so, let me uh let me share my screen and walk you guys through, like my current state of the world as far as like zack is concerned, hopefully maybe I can also try to copy from github's ui to sort of like prototype, something just like laza yeah.

A

That was impressive.

B

All right cool- uh I have my screen up now, so I said this is zac jay's website um zxjs is pretty much in beta, but I think we're getting pretty close to stability.

B

um So what zac js is is a set of component logic built by state machines that you can actually use across multiple frameworks right so right now we have support for react view and solid js right, but to help you guys understand what this means. Let's assume you wanted to build a number input like this, where you probably have to like increment the number I mean your designer sent you a custom design for a number input like this and you're wondering like how do I build this out right now?

B

Like I mean I have to go into react, set up use, stages, effect and all the things all the use hooks to sort of like build something like this uh pretty fast. uh Most of the time you end up being super buggy and you have to write lots of tests to cover those.

B

But then what we've done with zag is to model like all of the logic, for that number input component uh into a javascript state machine which is completely framework agnostic, and then we have a framework binding what we call that, basically, the reactivity framework, uh we just create helper methods like use, machine and use setup for each framework, so you can set up like take the framework agnostic layer. Stick it onto the framework itself and you have something that just works.

B

So so here in react. You have this like exact js number input. We have zgs react uh a couple of hooks to sort of set up the component, and then we expose what we call the api, which is basically the interface that you use to interact programmatically with the number input component, and then it goes on and on to multiple frameworks as well. So this is an example. If you just the gsx version of you and if you're, all in like yeah, go ahead.

A

um um Time and- and me too are curious if you can go full screen and zoom in just a little bit more because the the words are a little light. It's yeah, that's that looks better for me, just yeah cool cool cool. Thank you. Keep going yeah.

B

That's: okay, yeah! That's fine! um So if you are, I mean, if you have ujs, um I mean I mean developer, you can also use within vgs as well. We have the gsx syntax and the sfc single file component, syntax of view, and you can basically get the same thing working in view with just a few lines of code and get exactly the same functionality uh same for newly released, solid js as well right.

B

So all of this all of these frameworks are supported out of the box and you can get like features like this working all right, so zac js features quite quite a bit of component. So let's say on your website: you need to upsell like input like some code. Some I mean some code has been sent to you via sms some otp codes. You can basically like use that component.

B

uh The pin input component here to implement that within your project and as you can expect, it works across like all the different frameworks as well, and it's just a few lines of code when you're done all right.

B

So this is so this sort of like the core idea behind being able to model the component logic um in in isolation, um not tied to any specific framework and then sticking that on to the reactivity helper methods like use, machine and use setup to sort of like connect that to your framework itself, all right so um to help to help to help make this like super super relatable.

B

um What I have here is the github ui. So what we're going to do is let's try and see if we can model uh this, like code drop down right here right. So we have the code button here when you click on that it brings up this. uh This is called the detail and the summary, but this is so like a disclosure element, so it's a like a pop over. Maybe we can call that a popover when you click on this trigger.

B

It shows the pop of our element and within that pop-up element, you have two tabs um local tab and code spaces tab, which is basically what you use to spin up a local instance or a cloud instance of that repo right. So, let's see if we can use that to sort of model, these two systems, I'm not going to write in live code, obviously because that would take a lot of time, I'm just going to walk you guys through what I've been able to set up like model really quickly.

B

Okay, cool all right. So um so the first thing we want to note here is uh this looks like a fairly easy component like after all, it's just I mean it's just a drop down. I click on it and then it shows up like that, and I can click on this one as well and it sort of switches to the tab. But this is a combination of two different patterns right and the first pattern is a disclosure pattern, which means something is not visible and when you click on the trigger it becomes visible right.

B

So that's like a disclosure pattern in here and for that we could potentially use the popover component logic to sort of manage that, uh and then we also have the tabs pattern, which is also a disclosure pattern as well, which you sort of used to hide and show content, but then based on different type triggers.

B

Basically, so you have the local tab and you have a code spacing stuff. So as simple as the component looks, it sort of combines two different patterns, the disclosure pattern and the tabs pattern in one right.

C

Absolutely not.

B

Yeah, it has a lot going on then, if you look closely again there's another one in here, which is another top pattern in there as well, but we're not going to get into all that detail. We just want to show how to set up the pop-up wire and then set up like the tabs button right here, all right. So if we head over to that docks, we have two two different patterns.

B

We can use there's a pop-over here, which is basically that disclosure, but we just we just saw uh the first one- has a trigger and it has like the pop of our content itself. uh So that's gonna be like the first half of the equation and we're gonna like self steal the code from here and just like use that for the first half and then the second half is the tabs button.

B

So basically you can serve like uh it's also a disclosure pattern, but you can see that it has different tabs and you can navigate with them both both with the mouse and with the keyboard arrows who's. Like left, arrow right, arrow keys. You can use that to navigate um the tabs.

B

All right, so we're going to take these two patterns match them all into one component there. So, let's suppose, record and see how we can model this really quickly. It's just going to be a walkthrough um of everything. I've done here so here in the app of this component. This is a vit project. I've just set up like vid young createvit and that sets up with project and then I've gone ahead to like set up a model.

B

These patterns, um all in one all right, and if you look into the package.json uh you see that we have. uh We have zach.js tabs, which is the tabs pattern. Anxiety is popover installed and obviously, as lazar already showed, all the chakra ui goodies in there as well all right. So right here you see the button here we have the pop-over and we have the tabs and tabs within the pop-up are just like. We saw in the github ui right.

B

So, let's see what's going on in the pop-up light itself, uh it probably looks like I mean why I mean why it seems the problem about interaction seems quite complex, but we just have a few lines of code and that's largely because um zac js takes care takes care of most of the logic in there. So I walk you guys through what's happening within this component, all right. So the first one is.

B

We grab this arcgis proper logic, um and I want you guys to probably like think about this um a little bit deeply uh and you know when we, when we saw the github ui we sort of clicked on this. It opens the proper uh they pop over content, so this serves as the trigger for that pop-up virus.

B

So when you click on that, the content shows up, but there's a lot of things, there's a lot of other things going on behind behind the scenes, instead of just aside from just like a click- and I mean it's open, true or false, um going on there and to visualize that we have like this interesting, like stitch out diagram to show you like.

B

This is all the logic that's going on within the pop of a component itself right, so the tenant of the state machine is a component has multiple states, and they I mean they have like clearly defined transitions between these states um in there as well. So the popover is, I mean, includes like the open stage, the closed stage, and there are lots of events that can trigger that concept that cause the machine to go between different states and that's the that's the core tenant of the state machine.

B

It's a predictable system of different states and transitions, and events between these states so you're not trying to sort of like figure out like put some consumer log in your used effect and try to see like what's going on. Why is the component not working? uh We are basically trying to sit down and go top down, which is modeling the system and then using that system uh within within your application right.

B

So this is like the just to give you a quick overview of like what's going on within the pop of r itself, so we have this visualization in place to help us track bugs. So it's like- uh maybe that's maybe like there's some events, that's not meant to happen or some some conditions that we need to put in place before going between states.

B

So this just helps us visualize the logic instead of having to read through like a lot of lots of lines of code, I think that visual visual programming basically gives you a lot of more advantage um over like trying to scan through the code and, like you just faint, if you don't understand, what's going on yeah, so that's so that's kind of like what's happening there right so so to bridge through this, uh because I know that we're mostly run out of time.

B

um We have like this uh used machine hook which basically like takes takes like the logic from the popover. So this is again. This is the framework agnostic logic. It's just javascript code has nothing to do with any framework. It's just model vista machine pattern. uh So in here we so you have this used machine, which is like the one that connects that javascript code with the framework itself.

B

um So here we have like we just put in the proper dot machine uh which basically gives us all the functionality, and here we're basically changing the positioning of of the proper wire itself, because if we switch over to github, you can see that so, like uh the popover. Has this very specific position into the trigger itself right, so we need to of like also configure that correctly, so we set the placement to be. Like I mean we want the content to show at the bottom end of the trigger.

B

Basically right, so that's that's exactly what's going on there and then the second bit is the api right. The api again is the interface between the machine and your ui all right, so the machine leaves up here. Your ui leaves down here. They love this lots of things that you need to be able to take care of, such as the on click, the on focus on blower and all of these different events, and it becomes really tricky trying to like explain to to you as an engineer to figure out like okay. What do you use?

B

Do you use on click or on mouse down or on pointer down? It's like, oh, my god. This is so complex. Let me just write my react anyway. I don't.

B

I don't want to think about all of this so instead of having, instead of bothering people without like without tasks, what you've done is we take care of all the nitty-gritty details, such as, like the attributes and the event handlers we basically just like take care of them within this api interface, and we just say, take this object and spread that object onto your component so on to your element and we're going to like provide all the all the attributes and even analyze automatically right.

B

So that's what the api interface means there, and this is basically a copy paste of like the gsx or the html structure of the pop-up element, all right, so um so the next one here are the tabs. I will spend so much time here, but any key thing here is: we have the tabs as well coming from zach.js tabs um and in here we have like two. We have two tabs right because we you can see that we have like a trigger group down here.

B

uh The first trigger group is local, so let's switch over to the github interface again and we click the code. You can see that there are two tabs local um code spaces right, zero um again we just put like the trigger.

B

So we have these functions that helps us like sort of know, the kind of properties to spread onto the trigger so get trigger props we pass in the local and we put the text in there. Second, one we pass in code species and put text in there as well right so that unused the tab triggers then for the content we have here the content for uh for locale. So that means, when you click local. uh What would you like to show right?

B

So here we have like the very basic like clone command um and then um copy input field. If you switch back again to the ui, we have clone. We have this input field here, so like copy the command and in code spaces. We have quite some fancy, looking ui in there for codespaces and that's exactly what we have in here all right.

B

So um so that's like a speedrun of the code setup and if you go back to the app like all that is happening within the app is the composition of these two different patterns into one all right. um So, let's see what this looks like um in practice, so I have the vgs up running here um again, I'm just focusing I'm gonna try to zoom in maybe some more so like we can.

A

B

Yeah yep all right, so we can see here we have the code button and when we click on that, uh you can see that sort of like shows up, um shows us, like the local tab, spaces tab. So this first interaction is the pop-over pattern uh and then, if you click on code spaces as well like I'm super zoomed in so you can see that. But if I zoom out a bit, um you can see like we have, like the the code spaces tab showing up as well all right. So again, I click here.

B

Click here and I click outside it's going to close the pop-over and the really really cool part about all of this. Is it works whether you use your mouse to interact with this or you use your keyboard right. So.

C

So that's that's like good for accessibility.

B

Yeah, exactly so, accessibility is sort of taken care of for you, so you don't have to think about it at all and that's the these are what some of the benefits that state machines have to offer, because we can model accessibility into the components. So you don't have to think about them at all as an engineer.

B

So so what I'm going to do here is um um huntry, I'm going to tab on the code and press enter, so uh I think, for some reason, that's not that's, probably not showing up, and if you see that I'm I mean I'm using I'm sort of answering here, I'm using the left and right um the left and the right arrow keys to sort of navigate between the tabs and if I hit escape, it's gonna like close that pop over completely and sort of take focus back to the button.

B

If I press enter now, it shows the popover and again the local tab automatically gets selected and we can use the left and right keys again to go between them and so like hit escape again to close that right. So what we've seen now is a combination of like these two different patterns, all powered by state machines.

B

No styling involved, like we just used circular ui, to style this, uh but what we've done is we took like primark, agnostic logic, tied it into react and use that to build this really nice pattern that exists in github to clone your code basis right and all this part by zag.

A

Awesome, I'm really impressed with this. I'm definitely gonna try zag out, because I have had moments where I I feel like I'm trying to manage a lot of states and I'm like if this happens then do this and it's just a lot. So I'm definitely gonna try this out. I'm I'm impressed and I love that. Thank you for these demos y'all putting in github like slanted in there.

A

Yeah awesome are.

B

A

I didn't see any questions in the chat y'all any like questions or thoughts on on zag. If not um I we could so. I I like to do some fun wrap-up questions. I know lazarus like he doesn't have uh someone said questions.

D

Oh yeah at least one uh somebody asked if angular is coming.

B

um I'm not sure if I have an answer to that, I don't have angular angular experience, but if there's anyone that has like some angular experiments able to help us out, I'm happy to guide um to sort of like provide angular support for these components.

A

That sounds like awesome time you, it sounds like you know, angular hop in there and help them out.

A

um Let me see if there was anything else uh it doesn't.

D

A

Like anything else, oh oh, this was still for the chakra ui stuff. Someone said the styles for each color mode are set on the root body level right.

B

Yes, actually um so yeah, so all of the styles are I mean, even though I mean laza showed the tokens and the semantic tokens all of those are processed into raw css properties. um So we use very little javascript in that process. Everything you saw in lazar. Basically, it's the root selector and a bunch of css variables. um That's what everything all translates to under the hood right. So it's not some magic. uh It's basically just like attaching all these styles to the root here.

A

Awesome perfect, all right, I will let's, let's wrap up. um I'm gonna ask the questions. I always ask all of y'all and then I'll promote um the stuff you all want to promote, especially um the code sandbox. I completely forgot about it because lazarus um demo had me hooked, but I'll do it in a second. So my first questions to y'all is like: what's your favorite food has nothing to do with tech or anything, but just just be curious.

B

Also, do you want to go.

E

All right uh all right, so I'm gonna think for five minutes and then no probably uh I'm a classic guy, so I would say burger um yeah. I enjoy a good burger yeah.

A

Burgers are good filling yeah tasty, I always say my favorite is roti but like y'all probably don't know what that is. It's, like I mean there's indian roti, but I like um it's caribbean style roti. I guess because my family's from the caribbean- um but I describe it to some people as like a burrito but a curry, burrito peruvian people will be mad at me. If they ever heard me say that.

A

um What about you sage and.

B

Yeah for me, it's like, I think my favorite food is one of the local food we actually make in africa. um It's it's sort of like a vegetable source um with um some like it's called, like, pounded, yam. Basically, it's like there's this solid form or something like cassava or yam. Basically, and then we have a really nice vegetable source um that that goes with that. So it's like one of the best each time I get this like I'm on 100 stage mode each time. So it's like.

A

um um Someone said how about baby back ribs to lazar and well.

A

Also, um this is a chakra ui question, someone said: would you use the data? Let me show it on here: would you use the data part equals for css selectors with chakra two.

B

um Yes, that's a good question. I mean for chakra ui. We have like. All of this I mean zagreus is built to integrate seamlessly with chakra ur. I think this question has a lot to do with arcgis and how it connects to checkpoint ui. um So it's like we, we carefully build zags, so it just works seamlessly with chakra.

B

So you don't have to use this selector to style, but what you've done is for other css frameworks like people, folks that want to write a raw css or sas or towing or any other like styling solution. You can basically like use these selectors to find elements, so I didn't get the chance to demo that but hey. uh If you ask the question that means you know. So that's the answer.

A

Awesome, thank you and then someone said nando and someone said that west indian people are mad yeah. I mean I know that so some of us, indian people will be like. Why are you saying that but yeah I know like um my family's from guyana, so a lot of our culture is very like influenced by like indian food culture too, um but pachi wanna hear about you. What's your favorite food? Is it like brazilian food or something.

D

um Actually, it's potato, like french fries mashed potato baked with it. I love how versatile potato is. You know.

B

D

Sad that they're, not vegetables and they're, not more healthy, because okay cool those potatoes all day. You know I.

A

Love potatoes. Oh I like them good. It can be made into anything french fries like home from home, fries mashed potatoes. Just everything is so good for okay, cool. All right, um we've been going on for a while, um so stuff to promote for y'all. I know the code sandbox. Let me show it up on here.

A

So if you all wanted to check out more go deeper into that chakra us code sandbox, I know I had them on a time constraint. So if you wanted to go deeper into it, here's the link right here- and I know apache also had put it in the chat- um also go ahead and follow them. I don't know if y'all want to put your your handles on or your twitter handles or anything else you want to promote into the chat.

A

Cool I'm about to post bazaars twitter follow from there follow me to blackgirlbites on twitter. You know and follow pochi. I think your name is apachecodes on twitter as well and yeah. uh If there's nothing else from y'all any other last comments or words, you want to say.

B

uh On my side, no I'll, probably just also like want to like wrap it up by I mean appreciating both of you guys, apache thanks for having us- and I mean github now, and always I'm always grateful for for github. um So I think that I mean I mean I think that going forward, we have huge plans as chakra ui to actually like grow and build even more tools uh to serve like help bridge the gap between design and code.

B

This is like the core vision that we have as chakra ui and I'm really excited to have folks like laza, and I mean on the team as well to help push this forward. um So that's just it's also. It's just like live on stream telling you thank you.

A

Awesome, what said, do you have a code send back the sandbox of the zag example or, like maybe a github repo or something.

B

um I don't have it it's pure, it's purely local, but I'm happy. I'm gonna push it out and maybe like post out my tweezers. So just follow me I'll, pull it out as well.

A

Awesome thank you and thank you so much for for joining us. Like I know you were saying thank you to github, but, like I really just appreciate you taking the time. I know it's night time for both of you, um so I really appreciate you hopping on and also thanks. Pochi you're super helpful um with just like navigating the chat. I realized, I wasn't even paying attention to it for a really long time. So, thank you so much and thank you to everyone.