WEBVTT 1 00:00:06.360 --> 00:00:11.080 Hello everyone, Welcome to React Roundup, the podcast where we keep you updated 2 00:00:11.119 --> 00:00:16.079 on all things React related. This show is sponsored by Reagun and produced by 3 00:00:16.199 --> 00:00:20.160 Pop and Davs and Onvoid. Top anddves is where we created top and deves. 4 00:00:20.120 --> 00:00:23.600 So get top and pay and recognition. We're working on interesting problems and 5 00:00:23.679 --> 00:00:29.359 making meaningful community contributions. An Onvoid offers remoste design and software development services on 6 00:00:29.399 --> 00:00:33.399 a task basis, so clients only pay when tests are delivered and approved. 7 00:00:34.399 --> 00:00:39.520 In today's episode, we will talk about Jotai, which is a library that 8 00:00:39.840 --> 00:00:45.679 exposes primitive and flexible state management for React. My name is Lucas Paganini, 9 00:00:45.719 --> 00:00:49.960 your host in the podcast. Joining me in today's episode is Chris Fruen. 10 00:00:50.840 --> 00:00:59.399 Hello everyone, Peter Osa, Hi everyone, and our special guest which is 11 00:00:59.560 --> 00:01:04.920 a core member of the Joe Thai team, Mohammed Bagger Abiyat. I hope 12 00:01:04.920 --> 00:01:08.719 I pronounced that correctly. Yeah, yeah, that was closed. That was 13 00:01:10.280 --> 00:01:12.799 closed. So hello everyone, happy to hear you here. I'm really thankful 14 00:01:12.799 --> 00:01:17.840 for the opportunity. Is my first time doing a podcast, so so thank 15 00:01:17.879 --> 00:01:23.200 you. Ease on me if something went wrong. Nor is nor Is Hey, 16 00:01:23.280 --> 00:01:26.640 folks, this is Charles Maxwell. I've been talking to whole bunch of 17 00:01:26.680 --> 00:01:30.560 people that want to update their resume and find a better job, and I 18 00:01:30.680 --> 00:01:34.439 figure, well, why not just share my resume. So if you go 19 00:01:34.560 --> 00:01:38.400 to top endevs dot com slash resume, enter your name and email address, 20 00:01:38.719 --> 00:01:42.079 then you'll get a copy of the resume that I use, that I've used 21 00:01:42.120 --> 00:01:47.560 through freelancing through most of my career, as I've kind of refined it and 22 00:01:47.560 --> 00:01:51.200 tweaked it to get me the jobs that I want. Like I said, 23 00:01:51.239 --> 00:01:55.040 top endevs dot com slash resume, we'll get you that and you can just 24 00:01:55.120 --> 00:01:59.000 kind of use the formatting. It comes in word and pages formats and you 25 00:01:59.000 --> 00:02:05.599 can just fill it in from there. Yeah, So Mohammed, why don't 26 00:02:05.640 --> 00:02:10.479 you just start with a quick pitch of what is your TIE and the use 27 00:02:10.560 --> 00:02:15.039 cases for it, and then we can take it from there. So Joe 28 00:02:15.080 --> 00:02:19.840 Tie is an atomic state management library, something similar to Recoil. I mean, 29 00:02:20.000 --> 00:02:23.960 Recoil was really on the top for a while and everyone knew it for 30 00:02:23.000 --> 00:02:30.039 a while, so the idea is similar. But like one of the reasons 31 00:02:30.080 --> 00:02:32.400 I guess we started this, or at least that she started it, is 32 00:02:32.439 --> 00:02:38.240 that we wanted to avoid having keys in our state at homes. So that's 33 00:02:38.319 --> 00:02:43.719 kind of just what's the start about, Joe. Tie is just a state 34 00:02:43.759 --> 00:02:51.240 management library that's pretty atomic and goes and goes with the atomic state management state 35 00:02:51.319 --> 00:02:57.560 management way I'm doing things, gotcha? So if you were to give some 36 00:02:57.680 --> 00:03:04.960 examples of use case is where your TIE really shines, what would come to 37 00:03:05.039 --> 00:03:08.919 your mind? Yeah? Yeah, yeah, So for a while, here's 38 00:03:08.919 --> 00:03:14.080 the things. For a while, like the React community when context was introduced, 39 00:03:15.120 --> 00:03:19.360 like everyone was saying that, just migrate to context, just use context 40 00:03:19.439 --> 00:03:24.840 everywhere. Just yeah, just keep yourself with context and move away from readogs. 41 00:03:25.479 --> 00:03:30.919 At that point, everyone was happy kind of until we face the issues 42 00:03:30.000 --> 00:03:37.039 where what were the issues? Well, contexts is like you always put it 43 00:03:37.080 --> 00:03:40.479 at the top level of your program and you just wrap your whole application around 44 00:03:40.479 --> 00:03:46.439 that. So when a state changes in your context, basically your whole application 45 00:03:46.560 --> 00:03:52.719 is going to be re rendered, and what would you do, Like some 46 00:03:52.840 --> 00:03:57.199 of the solutions were just use use memo or use use call back and stuff 47 00:03:57.240 --> 00:04:01.159 like that. So at that point we also got back to state management libraries 48 00:04:01.280 --> 00:04:06.479 because we were like, yeah, state management libraries were right in some terms 49 00:04:06.479 --> 00:04:12.639 and for some use cases where we want to like specify the rendering for a 50 00:04:12.680 --> 00:04:18.120 specific component component and not the whole application. Joe Tie really shines here because 51 00:04:18.199 --> 00:04:25.560 it got one of the most optimized rendering across like all the state management libraries. 52 00:04:26.199 --> 00:04:31.120 It's pretty atomic, it relies and uses state and use external storage or 53 00:04:31.160 --> 00:04:38.000 some API re act that I just forgot the name. What it do is 54 00:04:38.040 --> 00:04:44.399 that it would render your component on a component level and not your whole application. 55 00:04:44.600 --> 00:04:48.279 So if you have if you have a component A, if you have 56 00:04:48.319 --> 00:04:53.800 a component B and you just use the at home in component B and the 57 00:04:53.839 --> 00:04:58.480 state changes for that at home, then only component B would be rendered and 58 00:04:58.560 --> 00:05:02.519 you won't need any provider like Context. Yeah, we offer a provider like 59 00:05:02.680 --> 00:05:06.600 Context and some other libraries, but by default you won't need it. And 60 00:05:06.680 --> 00:05:11.959 for me as a as a maintainer event, I've never used it, like 61 00:05:12.120 --> 00:05:15.319 seriously, never use the provider. So first you don't need the provider to 62 00:05:15.560 --> 00:05:21.079 all of the re renders, and all of the state changes happen at a 63 00:05:21.079 --> 00:05:26.680 component level, so things are pretty optimized. And most of the times you 64 00:05:26.759 --> 00:05:30.279 would not use use memo and use callback at that point because everything is optimized 65 00:05:30.720 --> 00:05:36.720 by default. Gotcha, so correct me if I'm wrong. But what I'm 66 00:05:36.800 --> 00:05:44.560 hearing is so a lot of the optimizations that React developers usually do manually, 67 00:05:44.639 --> 00:05:48.240 such as use memmo, use callback, don't need to be written because the 68 00:05:48.399 --> 00:05:53.639 library already takes care of that. And on top of that, it also 69 00:05:53.720 --> 00:06:00.800 makes sure that the that React rerenders less, so it only re renders the 70 00:06:01.199 --> 00:06:09.680 specific component that requires that specific atom and not the entire three until it gets 71 00:06:09.720 --> 00:06:15.160 to that component, so it optimizes the rendering performance and it also reduces the 72 00:06:15.199 --> 00:06:21.120 boilerplate of the cod base. Is that correct? Yes, exactly, We 73 00:06:21.199 --> 00:06:26.720 won't like. First of all, just give to give you a disclaimer. 74 00:06:26.800 --> 00:06:32.279 I'm a member and my views don't represent the whole team and the whole implementation 75 00:06:32.439 --> 00:06:36.120 because to be honest, I got so many things wrong in the library too, 76 00:06:38.199 --> 00:06:42.560 so I might be wrong like all of the podcasts, So sorry for 77 00:06:42.639 --> 00:06:47.079 that. But around your use memo and use callback point yes, Like for 78 00:06:47.120 --> 00:06:53.600 me as someone who used the library, it helps me avoid writing use memo. 79 00:06:53.639 --> 00:06:59.040 I use callback most of the times because stage if you do it properly, 80 00:06:59.120 --> 00:07:03.560 state changes won't happen like excessively. Everything happens on a component level, 81 00:07:03.720 --> 00:07:10.199 and if that component renders so many times. Since it's a small component, 82 00:07:10.319 --> 00:07:15.079 since it's a small part of your application, it doesn't matter that much because 83 00:07:15.120 --> 00:07:20.000 it needs that state changes. So yeah, it avoids that boiler plate and 84 00:07:20.199 --> 00:07:26.680 also optimizes most of the things that you won't need to optimize yourself. Would 85 00:07:26.759 --> 00:07:29.680 use memo, you call back, and all of this stuff that you did, 86 00:07:29.759 --> 00:07:35.879 you used to do at least with React context. Gotcha? Interesting? 87 00:07:36.000 --> 00:07:43.959 Interesting? So, Chris Peter, I wonder if by hearing this description, 88 00:07:45.439 --> 00:07:50.639 if you guys remember of any previous experience, previous project where you think this 89 00:07:50.800 --> 00:07:57.839 could have been useful, and what was your approach versus what you could have 90 00:07:57.879 --> 00:08:01.480 done? What your tie? Ok? Yeah, so yeah, I actually 91 00:08:01.879 --> 00:08:07.680 use ji like, yeah, I think it's actually it's a long of my 92 00:08:07.879 --> 00:08:13.720 go through state management systems, I think after Widows Widows resistant, Yeah, 93 00:08:13.839 --> 00:08:18.720 we are. Yeah, I use Jotai for like one thing naturally, love 94 00:08:18.720 --> 00:08:22.720 about Juda is just kind of very simple, very very simple. I think 95 00:08:22.759 --> 00:08:28.199 the sense that the API is simple, right, and I kind of prefer 96 00:08:28.360 --> 00:08:33.919 using it for maybe micro font and systems systems that requiabbily. For example, 97 00:08:33.000 --> 00:08:37.399 you need to have like a form of shared states, right, you have 98 00:08:37.679 --> 00:08:41.639 like maybe two applications different applications, and then you want them to share one 99 00:08:41.759 --> 00:08:46.799 states. Right doing maybe using other kind of big state management systems like widogs 100 00:08:48.080 --> 00:08:54.080 may be kind of quite difficult to you know, it does bring some complexity. 101 00:08:54.240 --> 00:08:58.919 Rather, so this Juta is kind of simple. It's API, and 102 00:08:58.080 --> 00:09:01.360 that I think it's very easy for you to just work with it and then 103 00:09:01.759 --> 00:09:05.720 kind of what could idea sharest it with it? Yeah, for the idea 104 00:09:05.799 --> 00:09:11.559 of used memoir and we have like what Mommed said, I don't know if 105 00:09:11.600 --> 00:09:18.320 I actually like maybe starts for sub do I just kind of use juta for 106 00:09:18.440 --> 00:09:24.240 more of a simplicity, right, And I really like the idea of of 107 00:09:24.399 --> 00:09:28.159 jyota like as the stake on a bit like right, So, although I 108 00:09:28.200 --> 00:09:33.519 have a lot of questions that I use that and I actually try to understand 109 00:09:33.600 --> 00:09:37.799 the underlying principle of jotai ride. And once did I know is that your 110 00:09:37.879 --> 00:09:43.200 Jota uses work is similar to recoil right now, Usually when you want to 111 00:09:43.320 --> 00:09:46.679 kind of start your Juta app right, like you want to maybe if you 112 00:09:46.759 --> 00:09:50.879 start Jota and you need to kind of incorporate it into your application, right, 113 00:09:50.679 --> 00:09:56.039 what happens then is that you are to passing a provider class that provider 114 00:09:56.120 --> 00:09:58.840 class. Now in order to ask from moret is it something based on context, 115 00:10:00.000 --> 00:10:03.799 because for example, let's use redogs for example, now we redos, 116 00:10:03.840 --> 00:10:07.639 you do your redogs set up and so on and so forth, right, 117 00:10:07.399 --> 00:10:13.120 and then you're good to have to like imports a provider which kind of passes 118 00:10:13.240 --> 00:10:18.639 those So I wanted to ask, do you actually know what the provider dependency 119 00:10:18.759 --> 00:10:22.600 on that jewtie doors? Like, does he work, does he use does 120 00:10:22.639 --> 00:10:26.320 he use some context or is it something affected or something different? Yeah? 121 00:10:26.320 --> 00:10:31.960 I think that's just like my first question. Yeah, so if I'm getting 122 00:10:33.000 --> 00:10:39.279 the question correct, you mean that does dot I use context under the hood? 123 00:10:39.519 --> 00:10:43.759 Do you mean that, yes, to pass the state on the composition? 124 00:10:43.879 --> 00:10:46.320 Yeah, yeah, yeah, yeah, so exactly. Yeah, it 125 00:10:46.559 --> 00:10:52.320 uses use context, and it does it in an elegant way so it doesn't 126 00:10:52.360 --> 00:10:56.759 feel like you are context because you won't need it and like most of the 127 00:10:56.919 --> 00:11:01.320 times and it works like out of the bugs. But under the hood, 128 00:11:01.399 --> 00:11:07.120 Yeah, for sharing the state, it needs to use use contexts, but 129 00:11:07.399 --> 00:11:11.320 in a different way so it doesn't change the state the same way context does 130 00:11:11.399 --> 00:11:16.919 it. It has some abstraction on top of that which avoids doing so many 131 00:11:18.000 --> 00:11:22.720 state changes and does it does? It doesn't use context for the same way 132 00:11:22.799 --> 00:11:26.279 we used to do like, it doesn't use it just for sharing the state. 133 00:11:26.639 --> 00:11:31.159 It actually uses uses it for sharing the state, but it doesn't use 134 00:11:31.200 --> 00:11:37.759 it that much for changing the state itself. It uses uses it for like 135 00:11:37.600 --> 00:11:43.720 if you up that in. It uses it for like changing the scope or 136 00:11:43.320 --> 00:11:48.759 changing the initial value of like some atoms if you wanted to do that. 137 00:11:48.159 --> 00:11:52.519 But under the hood, to answer your question, yeah, it uses used 138 00:11:52.559 --> 00:11:58.840 contexts so it can share the state across the application. Okay, yeah, 139 00:11:58.039 --> 00:12:01.840 second question I get. The first I get, Yeah, I think that's 140 00:12:01.960 --> 00:12:09.000 sort. So the second question I have is on Judah is I think I 141 00:12:09.120 --> 00:12:16.480 read an article. I don't know if it's a dist from how like I 142 00:12:16.559 --> 00:12:22.279 think relating how kind of it maps the kind of nambos of the state values? 143 00:12:22.360 --> 00:12:26.320 Right? No, I think JODA causes like atoms, right, so 144 00:12:26.600 --> 00:12:31.559 let's fundamentally atoms, so it kind of says that like it kind of the 145 00:12:31.679 --> 00:12:37.639 atoms are kind of attached to the components three of like in a way like 146 00:12:37.679 --> 00:12:39.519 for example, if you're kind of calling an atom your component, you want 147 00:12:39.559 --> 00:12:45.600 to use it right in the special components right, it's was I think the 148 00:12:45.679 --> 00:12:48.360 article experience that it's not like I said, it's kind of taken it from 149 00:12:48.480 --> 00:12:54.879 a kind of a global global states, right, it's kind of getting like 150 00:12:54.639 --> 00:13:00.639 it's kind of attaching that fit to the component three of that compon that's that's 151 00:13:00.840 --> 00:13:09.240 to be the three right to react those localizing the states Valada when you maybe 152 00:13:09.360 --> 00:13:13.879 use like the atom in that, I don't know, like I I wanted 153 00:13:13.000 --> 00:13:16.960 like a better explanation that. I don't know if you have an idea of 154 00:13:16.360 --> 00:13:22.159 how the atoms kind of like how the whole data flow is right, how 155 00:13:22.320 --> 00:13:28.039 it kind of effectively stores these things that kind of yeah, I think that's 156 00:13:28.279 --> 00:13:31.279 yeah, I'm having to I don't know if you have an idea of it. 157 00:13:31.360 --> 00:13:37.159 Maybe it's some diw kin ship as well. Hey there, this is 158 00:13:37.279 --> 00:13:39.639 Charles Maxwood. I'm excited because I wanted to let you know about this thing 159 00:13:39.679 --> 00:13:43.720 that I pulled together that I had just I've been dying to have this for 160 00:13:43.879 --> 00:13:48.679 years and I never felt like I could, And then I just realized that 161 00:13:48.799 --> 00:13:50.960 there's no reason why I can't. So I'm putting together book club and we're 162 00:13:50.960 --> 00:13:56.720 going to read development focused books, career books, you know, technical books, 163 00:13:56.759 --> 00:13:58.360 whatever. The first book that we're going to do is going to be 164 00:14:00.000 --> 00:14:03.440 Clean Architecture by Uncle Bob Martin. If you're not familiar with clean code or 165 00:14:03.519 --> 00:14:07.200 some of the other stuff that Bob has done, check that out. I've 166 00:14:07.200 --> 00:14:09.399 also talked to him on the Clean Coders podcast which is on Top End Devs. 167 00:14:09.840 --> 00:14:13.159 But yeah, we're going to get on. He's going to show up 168 00:14:13.200 --> 00:14:16.080 to some of our meetings. And what I'm thinking is we'll probably have like 169 00:14:16.200 --> 00:14:20.559 five or six people part of the conversation along with Bob and I at the 170 00:14:20.600 --> 00:14:24.240 same time, and we'll just so somebody can come on, they can ask 171 00:14:24.279 --> 00:14:28.840 their question, and then we'll just rotate people through, so we'll mute one 172 00:14:28.879 --> 00:14:31.360 person, unmute another person when it's their turn to come on and be part 173 00:14:31.399 --> 00:14:35.919 of the discussion. So we'll do that for like an hour hour and a 174 00:14:35.960 --> 00:14:37.399 half. And then the other part of it that I'm putting together is just 175 00:14:37.559 --> 00:14:43.720 kind of a meet and greet gather area on gather Town. And so after 176 00:14:43.919 --> 00:14:46.639 the meetup and the call, what we'll do as we'll all go over to 177 00:14:46.840 --> 00:14:50.759 gather Town and you can just log in, walk up to a group and 178 00:14:50.840 --> 00:14:52.960 have a conversation and that way, we can all kind of get to know 179 00:14:54.039 --> 00:14:58.720 each other and make friends and get to know people across the world. One 180 00:14:58.720 --> 00:15:01.240 thing that I'm finding is that, yeah, the meetups are starting to come 181 00:15:01.279 --> 00:15:03.960 back, but a lot of people don't have the opportunity to go to a 182 00:15:03.039 --> 00:15:05.240 meetup. And I really want to meet you guys and talk to you. 183 00:15:05.399 --> 00:15:09.039 So we're gonna put all that together. We'll all be part of that book 184 00:15:09.080 --> 00:15:11.960 club. You can go to top endevs dot com slash book Club to be 185 00:15:11.080 --> 00:15:13.799 part of it, and I'm looking forward to seeing you there. The first 186 00:15:15.159 --> 00:15:18.480 book club meeting will be in December, the beginning of December. We're starting 187 00:15:18.480 --> 00:15:24.159 the first week of December, and you'll also be part of the conversation about 188 00:15:24.600 --> 00:15:26.519 which book we do next. I have one in mind, but I want 189 00:15:26.559 --> 00:15:31.919 to see where everybody's at, So there you go. Yeah, yeah, 190 00:15:31.000 --> 00:15:35.519 yeah, So it's a it's a globile state at the end. But the 191 00:15:35.639 --> 00:15:39.080 way can you hear me, guys, Yeah yeah, So it's a globile 192 00:15:39.120 --> 00:15:45.000 state at the end. And the way I look at it is it's it's 193 00:15:45.240 --> 00:15:48.639 just a smart way of doing use state, but it's a use the state 194 00:15:48.720 --> 00:15:54.159 that is global because at the end, Joe tie when you when you import 195 00:15:54.240 --> 00:16:00.080 the use atom hook and you use that and you use that hook basically under 196 00:16:00.120 --> 00:16:04.919 the hood uses use the state for your state. So that's why I say 197 00:16:04.919 --> 00:16:10.639 it. It just it just as you say it. It just attaches that 198 00:16:10.840 --> 00:16:15.559 atom to that component specifically because under the hood it uses use the state or 199 00:16:15.639 --> 00:16:21.720 I don't know, the implementation might have changed now they might have used that 200 00:16:21.919 --> 00:16:26.360 user reducer, which is just a which is just like a more complex and 201 00:16:27.440 --> 00:16:32.480 lack more flexible way I'm doing user state, but especially the same thing. 202 00:16:33.120 --> 00:16:37.720 Yeah, so under the hood it uses those hooks so it can attach that 203 00:16:37.919 --> 00:16:42.759 state and brings that state from a from an extra external source and attaches it 204 00:16:42.879 --> 00:16:48.039 to the to your component using user reducer or user state. And the way 205 00:16:48.080 --> 00:16:55.440 it does it like concurrent friendly React concurrency concurrent friendly is by using the hook 206 00:16:55.519 --> 00:17:00.120 I just mentioned previously, and the hook names I just forgot it, but 207 00:17:00.399 --> 00:17:06.240 is as far as I remember, is it's use seeing external storage or something 208 00:17:06.400 --> 00:17:11.680 like that, which which is a hook for having global states like states that 209 00:17:12.079 --> 00:17:18.279 that their source is outside of React being SYNCD with the React tree and reaction 210 00:17:18.440 --> 00:17:23.640 and daring, and that's what Jota uses. Yeah, that's cool. Yeah, 211 00:17:23.680 --> 00:17:26.279 well I think that's all the questions for me. I really love to 212 00:17:26.400 --> 00:17:30.799 ask. Might be I actually encourage a lot of people to use it, 213 00:17:33.599 --> 00:17:40.480 so yeah, crazy any question as you Yeah, I was, I was 214 00:17:40.559 --> 00:17:45.200 looking on the homepage for it here. So I'm mainly a REDUCS guy. 215 00:17:45.720 --> 00:17:52.000 Uh, if it's even feeling. Yeah, I just love REDOCS and I've 216 00:17:52.000 --> 00:17:56.319 started with REDUCS somehow, and i just love that library, to be honest. 217 00:17:56.799 --> 00:18:00.640 Yeah, exactly, Like I I even went through the whole uh you 218 00:18:00.680 --> 00:18:03.960 know, like the old school, the boilerplate everyone hated, where you had 219 00:18:03.440 --> 00:18:07.279 your separate actions and your separate reducers and all that. So and now I 220 00:18:07.400 --> 00:18:15.440 know the whole the REDUCS toolkit. But yeah, like the principle, the 221 00:18:15.799 --> 00:18:19.400 principle for Joe Tie seems it's like amazing because basically, at least for how 222 00:18:19.440 --> 00:18:23.400 I use REDUCS, it's really all you need is like you want some sort 223 00:18:23.440 --> 00:18:27.319 of global state, right like if you need local state for your components, 224 00:18:27.440 --> 00:18:30.799 use of course the built in use state. But as soon as you you 225 00:18:30.880 --> 00:18:33.559 know you want to pass state around the other components, that's where you would 226 00:18:33.599 --> 00:18:37.319 lean to any like state management. And and yeah, so far like it 227 00:18:37.440 --> 00:18:41.680 looks, it looks really nice, and just how simple, like like what 228 00:18:41.839 --> 00:18:45.920 Peter was saying, how how simple it is to set up. So I 229 00:18:45.960 --> 00:18:48.960 guess I guess the only kind of question I have would be more of like 230 00:18:48.000 --> 00:18:52.440 an architecture standpoint, because here, like of course on the example homepage, 231 00:18:52.480 --> 00:18:56.319 you show it all like you could of course put it all in you know, 232 00:18:56.440 --> 00:19:02.559 some one file with some simple components. But how would you recommend I 233 00:19:02.640 --> 00:19:06.400 guess I guess you could. Are you able to define kind of like a 234 00:19:06.519 --> 00:19:10.640 separate I guess I'm coming from the Redact REDUCS world, where like you still 235 00:19:10.720 --> 00:19:14.640 had a separate file. But but do you have any info on how you 236 00:19:14.680 --> 00:19:19.000 would tackle like organization using JOEI yeah, yeah, yeah, yeah, that's 237 00:19:19.039 --> 00:19:25.440 a that's an interesting question because I found my own tastes of doing Joe Taie 238 00:19:25.480 --> 00:19:29.480 atoms, So yeah, I would experience that in a second. Well, 239 00:19:29.559 --> 00:19:33.799 first of all, just to give a shout out to Mark, the maintainer 240 00:19:33.880 --> 00:19:37.599 of redoucs and the Redox tool kid like he just changed the way we do 241 00:19:38.160 --> 00:19:41.920 states to be honest, and he was the only one that everyone was saying 242 00:19:41.920 --> 00:19:47.720 that reducs is dead. But that man just like kept this kept all of 243 00:19:47.799 --> 00:19:53.119 the things with reducs going, so he would shout out to him and around 244 00:19:53.319 --> 00:19:57.759 the architecture. Well, first of all, we have like a few kinds 245 00:19:57.799 --> 00:20:04.240 of atoms that if a user understand that properly, like it's just simple. 246 00:20:04.400 --> 00:20:11.079 But if they understand it at that point, for the like having an architecture 247 00:20:11.319 --> 00:20:15.880 based on your your own state would be just easy. It would be that 248 00:20:15.279 --> 00:20:19.920 done out out the bugs. Well the way I do it. First of 249 00:20:19.960 --> 00:20:26.359 all, we have just like normal atoms, which would just give a value 250 00:20:26.400 --> 00:20:30.720 to them, like the initial or default value to them. And we have 251 00:20:30.559 --> 00:20:37.880 uh get her or readable atoms. I just forgot the name that those atoms. 252 00:20:37.000 --> 00:20:41.200 They don't do anything themselves. The only thing they do is just they 253 00:20:41.279 --> 00:20:47.920 read, They read an atom state from another atom. So they just for 254 00:20:48.119 --> 00:20:52.359 consuming. You cannot set values to them. They just they just for reading 255 00:20:52.480 --> 00:20:56.319 the state. And we have another way of doing atoms and which are just 256 00:20:56.480 --> 00:21:02.759 writeable atoms. Writable atoms, you cannot set values to them. They don't 257 00:21:02.799 --> 00:21:07.119 hold values to as far as I know and remember. But with them they're 258 00:21:07.319 --> 00:21:14.720 like zas stand actions or reduct actions. With those rightable at homes. Your 259 00:21:15.319 --> 00:21:22.880 their job is to just change another atoms value and you can specify your own 260 00:21:22.000 --> 00:21:26.400 way of like I don't know, setting the action or changing based on the 261 00:21:26.519 --> 00:21:33.799 value. Okay, okay, but then I guess since since they all come 262 00:21:33.920 --> 00:21:40.079 from just your library, you could just define, like you're quite flexible to 263 00:21:40.160 --> 00:21:44.400 define. You could even do just like a not not to go in the 264 00:21:44.480 --> 00:21:47.359 kind of the giant file direction, but you could start off with just a 265 00:21:47.400 --> 00:21:51.640 single file and exactly, I just do that to be honest for my all 266 00:21:51.680 --> 00:21:56.000 of my projects. Nice. Yeah, yeah, yeah. So the reason 267 00:21:56.039 --> 00:22:00.440 I love just one file is that I document everything there you can just search 268 00:22:00.640 --> 00:22:04.759 easily. Well, I separate them with comments that these are writable atoms, 269 00:22:04.920 --> 00:22:11.079 these are getter or ideble atoms. These are just normal atoms that have initial 270 00:22:11.759 --> 00:22:15.960 initial I don't know it's initial space or values. That's the way I do 271 00:22:17.079 --> 00:22:19.960 it. Cool. Yeah, yeah, very cool, I think. I 272 00:22:21.039 --> 00:22:22.240 mean, that's that's all I had. So I don't know, Lucas, 273 00:22:22.319 --> 00:22:32.480 if if you wanted to keep steering the top in terms of actual real world 274 00:22:32.640 --> 00:22:37.160 usage of Joe Tie. I don't have other questions. I do want to 275 00:22:37.240 --> 00:22:42.680 know if there are any advanced things that people aren't very aware of, but 276 00:22:42.920 --> 00:22:48.319 that you as someone that has worked in the library, You're like, people 277 00:22:48.400 --> 00:22:53.799 should know about this, but they don't. Yeah. So, so the 278 00:22:53.880 --> 00:22:56.960 thing that I wanted to mention about Joe Taie is the thing that I want 279 00:22:57.000 --> 00:23:02.880 to mention about Daishi, Like he's walk on optimizing, rendering and creating, 280 00:23:03.920 --> 00:23:08.400 creating perfect to be honest, perfect State management libraries is just phenomenal, and 281 00:23:08.599 --> 00:23:14.000 he knows how to handle this thing. So I wanted to say, the 282 00:23:14.119 --> 00:23:18.960 work that is going under under the hood Joe Tie to optimize rerenders is just 283 00:23:19.160 --> 00:23:26.200 magical, and the architecture under the hood is just it's phenomenal that I learned 284 00:23:26.240 --> 00:23:33.599 so much from that architecture and that the effort that's been into this is so 285 00:23:33.839 --> 00:23:37.440 much. It's so much and same not just with Joe Tie. It's the 286 00:23:37.519 --> 00:23:41.960 same goal. The same goes for as Usta, and the same goes for 287 00:23:41.119 --> 00:23:48.759 baal Shoe and the state many libraries that that she build, So basically, 288 00:23:48.400 --> 00:23:55.400 in terms of rerendering and optimizing renders, they're all just perfect. So the 289 00:23:55.480 --> 00:23:59.960 first thing I would use, the first thing I would use as a state 290 00:24:00.079 --> 00:24:03.839 Managy library would be Joe Tie because the advanced usage I would I would use 291 00:24:03.880 --> 00:24:11.319 it for applications that are heavy stateful what do they call it? Or their 292 00:24:11.400 --> 00:24:17.079 state just changes so many times I would use Joe Tie for that or the 293 00:24:17.559 --> 00:24:22.200 one of the things that powers Joe Tie is the integrations around it that when 294 00:24:22.240 --> 00:24:30.000 we started, when I started contributing Joe Tie, I just started contributing with 295 00:24:30.200 --> 00:24:34.640 just an Emmier integration. Like after a few months, We've seen so many 296 00:24:34.720 --> 00:24:41.640 integrations in the repo that people loved building things on top of Joe Tie, 297 00:24:41.200 --> 00:24:45.000 And at some point we just decided, oh man, we cannot just add 298 00:24:45.039 --> 00:24:49.960 integration to the to our own repot and take the responsibility. So that she 299 00:24:51.119 --> 00:24:56.599 decided to create another organization called the Joe Tie JS or Joe Thai Labs that 300 00:24:56.799 --> 00:25:02.319 has so many integrations around Joe Tide that Joe Tie tense tack query, which 301 00:25:02.359 --> 00:25:07.960 is which is which is an integration around tense tax querry or the previous React 302 00:25:07.119 --> 00:25:11.359 query. We have, I don't know, Joe Tie, your cuel, 303 00:25:11.519 --> 00:25:15.680 which is the u r qual tool around the graph duel, which is we 304 00:25:15.839 --> 00:25:21.319 have the Joe Tie Apollo which I just built, and all of these lack 305 00:25:21.400 --> 00:25:26.799 phenomenal tools and and it just powers Joe Tie. So there are so many 306 00:25:26.880 --> 00:25:30.480 things in the Joe tie JS so I just recommend people to check that out 307 00:25:30.640 --> 00:25:37.440 and see what they need if the if it's there, or I also encourage 308 00:25:37.480 --> 00:25:41.519 them to build on top of joe type because of the separation between that critible 309 00:25:41.559 --> 00:25:47.640 atoms, readable atoms, and the magic that you can do with with those 310 00:25:47.920 --> 00:25:52.839 lack terminologies is just so much. You can build like pretty much anything around 311 00:25:52.960 --> 00:26:00.960 Joe type. Gotcha, that is interesting. Okay, and do you have 312 00:26:00.279 --> 00:26:06.039 mohammed Do you have anything else that you would like to mention about yo tie 313 00:26:06.640 --> 00:26:11.720 before we start wrapping up and talk about some of the other projects we've been 314 00:26:11.799 --> 00:26:15.680 working on. Yeah. So here's the thing about joe tie is a It's 315 00:26:15.720 --> 00:26:22.119 a state management library that I would use for every React JS project you I 316 00:26:22.279 --> 00:26:26.599 build or soon to be maybe I use it for every project. Because now 317 00:26:26.680 --> 00:26:33.279 we have the Vanilla export, we just like provide lack abstractions and APIs to 318 00:26:33.440 --> 00:26:37.799 use joe Tie with any other library, and I'm really excited to see what 319 00:26:38.119 --> 00:26:45.519 people are going to build around that API. I also recommon people to check 320 00:26:45.640 --> 00:26:52.880 other other state management libraries by Daishi, Exhaustant and value Load. Everything I 321 00:26:52.039 --> 00:26:57.319 just said is just my viewpoint that my point of view, and it's not 322 00:26:57.559 --> 00:27:03.559 something that represents the team as I say. So take it easy, gotcha, 323 00:27:03.839 --> 00:27:10.200 gotcha. Okay, let's let me dissect just a little bit on the 324 00:27:10.400 --> 00:27:15.359 last thing that you said. So you mentioned the ability of other library authors 325 00:27:15.480 --> 00:27:19.279 to build on top of your TIE. Yeah, can you give me a 326 00:27:21.200 --> 00:27:26.960 bit more about that, like what what is the go with this and what 327 00:27:27.160 --> 00:27:33.240 do you hope people are going to build on top of your tie? Yeah? 328 00:27:33.920 --> 00:27:41.240 So right now, with the Venuela export is Joe, Tie now provides 329 00:27:41.319 --> 00:27:45.839 the atomic way the atomic design that it had for react is, but it 330 00:27:45.119 --> 00:27:51.039 exports it in a way so you can use it as a state management library, 331 00:27:51.160 --> 00:27:55.039 not React, not only React jas state management library, but a state 332 00:27:55.160 --> 00:28:00.279 management library with subscription features, with a subscription feature that you can subscribe to 333 00:28:00.519 --> 00:28:07.039 subscribe to value changes and state changes in a way that is usable with any 334 00:28:07.079 --> 00:28:11.319 other library. That's basically usable in JavaScript, like in JavaScript itself, so 335 00:28:11.559 --> 00:28:15.200 you can, I don't know, you can even use it in back end 336 00:28:15.640 --> 00:28:18.599 if, like if that's possible, I don't know. But the thing I'm 337 00:28:18.720 --> 00:28:22.799 excited about, and as far as I know, I just saw it before 338 00:28:23.160 --> 00:28:27.319 a few months ago, is that someone just built a solid integration around your 339 00:28:27.440 --> 00:28:33.920 thie. So that was pretty exciting to me because if we if we provide 340 00:28:33.960 --> 00:28:37.839 those abstractions, then maybe at some point we can have joe Tie as the 341 00:28:37.920 --> 00:28:48.720 state management library for any any JavaScript framework or any any project that needs tracking 342 00:28:48.920 --> 00:28:55.079 state changes or state management related things. So that's the thing I'm excited about. 343 00:28:55.200 --> 00:29:00.000 The building block that in the in the second version that Joe Tie provides 344 00:29:02.000 --> 00:29:07.759 that is indeed pretty pretty cool. Yeah, I would be very like hyped 345 00:29:07.960 --> 00:29:12.079 if somebody used the library that I worked on to build other frameworks on top 346 00:29:12.119 --> 00:29:17.519 of it. So yeah, definitely pretty cool, exactly. Yeah, it's 347 00:29:17.519 --> 00:29:21.880 a it's a pretty cool thing, like if you. One of the things 348 00:29:21.960 --> 00:29:27.079 that motivates me about developer development and programming in general is just to provide a 349 00:29:27.119 --> 00:29:33.359 building block for for another one to build on top of that. And seeing 350 00:29:33.519 --> 00:29:37.799 that coolest stuff being built is just so it's it's a good feeling, to 351 00:29:37.920 --> 00:29:42.680 be honest, and I'm kind of proud of that to be along Daishi and 352 00:29:42.759 --> 00:29:48.880 the Joe Tai team uh in that journey. I'm not that I'm not an 353 00:29:48.920 --> 00:29:55.160 active contributor anymore though I'm a member of the team, but I learned so 354 00:29:55.400 --> 00:30:00.960 much from the team, from Daishi and from like other members. So yeah, 355 00:30:00.000 --> 00:30:03.759 I'm pretty excited and I'm pretty rey proud about that. Definitely nice. 356 00:30:04.039 --> 00:30:07.559 Nice. Have you ever wished that you had a group of people that were 357 00:30:07.640 --> 00:30:11.880 just as passionate about writing code as you are? I know I did. 358 00:30:11.039 --> 00:30:14.599 I did that for most of my career. I'd go to the meetups, 359 00:30:14.640 --> 00:30:17.920 I try and create other opportunities, and it was just really hard, right 360 00:30:18.359 --> 00:30:19.720 the meetups. I got some of that, but they were only like once 361 00:30:19.880 --> 00:30:22.839 or twice a month, and it was just really hard to find that group 362 00:30:22.880 --> 00:30:27.720 of people that I connected with and really wanted to talk about code a lot, 363 00:30:29.039 --> 00:30:30.240 Right, I mean, I love writing code. I think it's the 364 00:30:30.440 --> 00:30:37.440 best. And so I've decided to create this community and create a worldwide community 365 00:30:37.519 --> 00:30:40.319 that we can all jump in and do it. So we're going to have 366 00:30:40.799 --> 00:30:44.640 two workshops every week. One of those or two of those every month are 367 00:30:44.680 --> 00:30:45.960 going to be Q and A calls right where you can get on you can 368 00:30:47.000 --> 00:30:49.680 ask me or me and another expert questions. The rest of them are going 369 00:30:49.720 --> 00:30:55.359 to be focused on different aspects of career or programming or things like that. 370 00:30:55.519 --> 00:30:59.799 Right, So it'll go anywhere from like deployments and containers all the way up 371 00:30:59.799 --> 00:31:03.279 to managing your four oh one K and negotiating your benefits package. Well, 372 00:31:03.319 --> 00:31:07.200 we'll cover all of it, okay, And then we're also going to have 373 00:31:07.440 --> 00:31:11.200 meetups every month for your particular technology area. So we have shows about JavaScript, 374 00:31:11.240 --> 00:31:15.559 to react, angular view, and so on. We're gonna have meetups 375 00:31:15.640 --> 00:31:18.519 for all of those things. I'm going to revive the freelancer show. We'll 376 00:31:18.559 --> 00:31:22.400 have one about that right so you can get started freelancing or continue freelancing if 377 00:31:22.400 --> 00:31:26.720 that's where you're at. And I'm working on finding authors who can actually do 378 00:31:26.119 --> 00:31:33.640 weekly video tutorials on some thing for ten minutes that's related again to those technology 379 00:31:33.720 --> 00:31:36.839 areas, so that you can stay current keep growing. So if you're interested, 380 00:31:36.920 --> 00:31:41.519 go to topendevs dot com slash sign up and you can get in right 381 00:31:41.559 --> 00:31:45.039 now for thirty nine dollars. When we're done, that price is going to 382 00:31:45.119 --> 00:31:48.839 go up to seventy five dollars, and the thirty nine dollars price gets you 383 00:31:49.240 --> 00:31:56.519 access to two calls per week. The full price at one hundred and fifty 384 00:31:56.559 --> 00:31:59.599 dollars, which is going to be seventy five dollars over the next few weeks. 385 00:32:00.119 --> 00:32:02.480 That price is going to get you access to all of the calls and 386 00:32:02.599 --> 00:32:07.039 all of the tutorials and everything else that we put out from top Endevs, 387 00:32:07.039 --> 00:32:10.440 along with member pricing for our remote conferences that are coming up next year. 388 00:32:12.000 --> 00:32:16.960 So go check it out topendevs dot com, slash sign up. So let's 389 00:32:17.039 --> 00:32:23.720 do a round of promos before we wrap things up, So Muhammed, generally, 390 00:32:24.079 --> 00:32:30.079 this is a place where we just shamelessly plug the things that we're working 391 00:32:30.200 --> 00:32:36.319 on and that we want to bring more publicity to them. So, for 392 00:32:36.440 --> 00:32:40.359 example, I'm just going to peck Onvoid, which is a company that we 393 00:32:40.440 --> 00:32:45.559 were just mentioning at the beginning of the show. So they provide remote design 394 00:32:45.640 --> 00:32:49.240 and software development services, which is not the new a lot of companies do 395 00:32:49.359 --> 00:32:53.720 that, but they have a task based billing system that allows their clients to 396 00:32:53.960 --> 00:32:59.960 only pay after the tasks are delivered and approved, which is a lot of 397 00:33:00.400 --> 00:33:05.440 risks for them that most companies would never dare to try out, and it 398 00:33:05.559 --> 00:33:09.480 really gives a ton of security to the client because they know that things are 399 00:33:09.559 --> 00:33:14.559 going to be delivered on budget and they're going to be delivered on the quality 400 00:33:14.599 --> 00:33:19.440 that they expect because it needs to be approved before avoid gets paid, So 401 00:33:20.519 --> 00:33:23.559 my promo today is just going to be onvoid. So Mohammed, what do 402 00:33:23.720 --> 00:33:28.079 you have in mind that you would like to promote, perhaps some of your 403 00:33:28.480 --> 00:33:32.839 own content or projects that you're working on. Yeah, sure, I love 404 00:33:32.920 --> 00:33:38.920 that part of the podcast because I always want to termously plug my own tools 405 00:33:39.000 --> 00:33:44.799 and the things I woke on. So the first thing I've been contributing to 406 00:33:45.000 --> 00:33:49.960 million js, I don't think it needs any more publicity because it's already famous, 407 00:33:50.759 --> 00:33:55.480 So that one I'd like to like becoming people to check it out. 408 00:33:57.279 --> 00:34:04.359 Second, I'm working with Daishi also on wa ku, which is the minimal 409 00:34:04.559 --> 00:34:09.760 RSC implementation reacts over component's implementation. That's just the new thing that I'm really 410 00:34:09.840 --> 00:34:15.920 excited about and I want to see where it goes. So we're also working 411 00:34:15.000 --> 00:34:19.960 on that. So check it out on Walkoo Do Gig and see the beautiful 412 00:34:20.000 --> 00:34:24.159 website website the Candy Code team built around it. So I guess that's it. 413 00:34:24.599 --> 00:34:29.800 So oh, Also, I just want to say follow my own Twitter 414 00:34:29.880 --> 00:34:36.199 also, that's the that's the most changees thing I wanted to mention. Definitely, 415 00:34:36.840 --> 00:34:39.360 can you send the link to your Twitter? I'm going to send in 416 00:34:39.480 --> 00:34:45.039 the comments section two. But yeah, so in the meantime, how about 417 00:34:45.079 --> 00:34:50.360 you, Peter, Okay, so most most really, so I tell a 418 00:34:50.360 --> 00:34:53.880 little bit about your tai before. I think that's what probably share in the 419 00:34:54.000 --> 00:34:59.760 chat. So because I kind of us this, yeah most of the time, 420 00:34:59.840 --> 00:35:04.039 So let's wrote something about it that I think I'll just share that. 421 00:35:04.440 --> 00:35:08.719 I think that's just that's just that's my mind, all right, And how 422 00:35:08.760 --> 00:35:15.199 about you, Chris. I am again gonna post my code video project. 423 00:35:15.239 --> 00:35:19.440 I don't know if I have any stars or any sign ups, but I 424 00:35:19.480 --> 00:35:23.639 don't really care. That's okay, It's in super beta, but I'm excited 425 00:35:23.679 --> 00:35:28.599 to see where it goes. Basically, it should be or will be, 426 00:35:28.679 --> 00:35:36.400 a framework where you can partially automate or even completely automate your software course creation 427 00:35:37.360 --> 00:35:42.760 and maybe eventually someday maybe any video, any sort of tutorial video that you 428 00:35:42.960 --> 00:35:50.519 need to record. So I invite everyone to check it out. I'd be 429 00:35:50.599 --> 00:35:55.880 sure to use that tool because I'm also interesting. It's interested in, like 430 00:35:57.000 --> 00:36:00.639 with the courses and things like that, to teach people about my own learnings. 431 00:36:00.760 --> 00:36:06.079 Not that I know that much because I don't know nothing, but I'm 432 00:36:06.119 --> 00:36:09.960 interested in sharing what I currently know to other people, so that tool is 433 00:36:10.519 --> 00:36:14.280 is pretty amazing, So thank you so much for that. By the way, 434 00:36:14.400 --> 00:36:19.199 for anyone who is interested in that project from Chris, you should definitely 435 00:36:19.320 --> 00:36:23.079 check out our latest episode, the one previous to this one, because we 436 00:36:23.239 --> 00:36:29.280 talked a lot about that, especially at the end of the show because coincidentally, 437 00:36:29.480 --> 00:36:32.679 the guest in the previous episode was also building something similar, so we 438 00:36:32.760 --> 00:36:37.239 ended up talking a lot about this. So in for interested be sure to 439 00:36:37.400 --> 00:36:44.079 check out the previous episode. All right, yeah, sure, everyone, 440 00:36:44.440 --> 00:36:49.440 Thank you so much. Mohammed, thank you. You just said before that 441 00:36:49.559 --> 00:36:52.880 this was your first podcast. I hope this has been a pleasurable experience. 442 00:36:53.320 --> 00:37:00.760 It definitely was for us. I think you were very easy a guest in 443 00:37:00.840 --> 00:37:06.679 the sense that you would definitely dominate the knowledge and you were able to transmit 444 00:37:06.760 --> 00:37:10.679 that in a very easy to understand and digestive a way to congratulate you for 445 00:37:10.840 --> 00:37:16.000 your datics. It was really really good, and yeah, everyone, thank 446 00:37:16.079 --> 00:37:20.119 you so much. And I just don't want to get to the next one.