1 00:00:06,759 --> 00:00:09,960 Speaker 1: Hey everybody, and welcome back to another episode of Adventures 2 00:00:09,960 --> 00:00:12,679 in Angular. I'm your host, Charles max Wood, and this 3 00:00:12,759 --> 00:00:15,919 week we're talking to Freddie Montees. I hope I uh 4 00:00:16,480 --> 00:00:21,600 spanishized that enough. Now, Freddie, you're a coast know you 5 00:00:21,640 --> 00:00:24,480 said you were a Venezuelan developer living in Costa Rica 6 00:00:24,600 --> 00:00:28,039 and you work on Angler. You work for dot cms 7 00:00:28,199 --> 00:00:30,920 front end developer. Of course you said just a front 8 00:00:31,000 --> 00:00:33,479 end developer. But I always find that there's more to 9 00:00:33,560 --> 00:00:35,920 the story than just that when I get to talk 10 00:00:35,960 --> 00:00:38,920 to people, and yeah, I ran across this article where 11 00:00:38,920 --> 00:00:41,880 you were talking about managing angular state and your components. 12 00:00:42,520 --> 00:00:44,640 Speaker 2: And usually when people think about. 13 00:00:44,399 --> 00:00:46,640 Speaker 1: That stuff, they're thinking, oh, okay, I'm going to go 14 00:00:46,759 --> 00:00:49,560 and I'm just going to use NNGRX and blah blah 15 00:00:49,560 --> 00:00:53,000 blah blah. And then I use the word overkill and 16 00:00:53,039 --> 00:00:55,560 I offend people. And so we'll dive in and we'll 17 00:00:55,560 --> 00:00:57,479 talk about that. But before we do that, I'm kind 18 00:00:57,520 --> 00:00:59,920 of curious what your journey into Angular was. 19 00:01:00,079 --> 00:01:01,159 Speaker 2: How did you get into Angular? 20 00:01:01,200 --> 00:01:03,280 Speaker 1: And then we can kind of start talking about state 21 00:01:03,399 --> 00:01:05,040 and Angular and all that stuff. 22 00:01:05,159 --> 00:01:08,079 Speaker 3: Yeah, so I got into Angular kind of by accident 23 00:01:08,400 --> 00:01:11,040 two years ago. In dout CMS. We were trying to 24 00:01:11,040 --> 00:01:13,920 figure it out how do we do the UI of 25 00:01:14,040 --> 00:01:16,480 the back end, and we were trying to figure it 26 00:01:16,519 --> 00:01:18,879 out which technology was the best for our use case. 27 00:01:19,719 --> 00:01:22,560 I was proposing React at that point. 28 00:01:23,200 --> 00:01:26,439 Speaker 2: Oh no, I'm just kidding, yeah. 29 00:01:26,040 --> 00:01:28,599 Speaker 3: And my boss was like, oh, we need to use 30 00:01:28,640 --> 00:01:30,480 Angular blah blah blah, and I was like, yeah, I mean, 31 00:01:30,760 --> 00:01:33,359 I'm okay with with both. I was a little bit 32 00:01:33,400 --> 00:01:37,640 concerned with the technical learning curve at that point, but 33 00:01:37,760 --> 00:01:40,640 then we got some help with from a contractor that 34 00:01:41,239 --> 00:01:44,159 supposedly to have a lot of information about Angular. At 35 00:01:44,200 --> 00:01:48,239 that point, I'm talking about Angular was in like Alpha something, right, 36 00:01:48,319 --> 00:01:50,760 it wasn't even leased yet, You're not even close to 37 00:01:50,799 --> 00:01:53,719 be released, So we decided to go with Angular. The 38 00:01:53,799 --> 00:01:58,239 contractor basically did most of the job, like everything, and 39 00:01:58,280 --> 00:02:00,840 I keep working and other stuff. I wasn't working enough 40 00:02:00,840 --> 00:02:03,879 and Angular. But at some point the contractor has to 41 00:02:03,959 --> 00:02:07,200 leave and they literally just put the project in my lap, 42 00:02:07,319 --> 00:02:09,479 like just just like that, and I have to learn 43 00:02:09,560 --> 00:02:13,840 it from from like I don't know anything into Okay, 44 00:02:13,879 --> 00:02:18,560 here's a full blown project that has a lot of everything. 45 00:02:19,000 --> 00:02:23,400 So I kind of learned while just doing I didn't 46 00:02:23,439 --> 00:02:25,960 have enough chance to like, oh, let me build this 47 00:02:26,039 --> 00:02:29,080 little app. First I didn't have that, but after I 48 00:02:29,159 --> 00:02:31,360 kind of like, I feel like Angela, you have to 49 00:02:31,400 --> 00:02:34,639 click with it somehow, like put your head around it. 50 00:02:34,919 --> 00:02:39,800 After you do that, everything is fairly fairly easy to do, right. 51 00:02:40,080 --> 00:02:42,879 Speaker 2: Yeah, it's funny because that's how I learned. 52 00:02:43,080 --> 00:02:45,479 Speaker 1: Like I'll go buy a course and I'll get about 53 00:02:45,479 --> 00:02:48,960 halfway through it and then I'm like, okay, I'm dangerous now, 54 00:02:49,039 --> 00:02:50,639 and then I'll just go and fiddle with it. 55 00:02:51,479 --> 00:02:55,800 Speaker 3: Well, the documentation of Angula is so good. It's really 56 00:02:55,840 --> 00:02:58,919 I don't think, yeah, I don't think that occurs will 57 00:02:58,960 --> 00:03:02,199 do better than the real documentation. Every time someone asked 58 00:03:02,240 --> 00:03:04,240 me like, oh, I want to learn anger, what course 59 00:03:04,280 --> 00:03:06,639 I should go? And I just go to the documentation 60 00:03:06,719 --> 00:03:08,759 and try to do the hero's tutorial. 61 00:03:08,560 --> 00:03:09,840 Speaker 2: And that's it. Yeah. 62 00:03:09,879 --> 00:03:13,719 Speaker 1: Absolutely, So, yes, you get in you're kind of figuring 63 00:03:13,719 --> 00:03:16,879 this stuff out sort of on your own. You know 64 00:03:16,960 --> 00:03:19,360 what point did you feel like you were? I guess 65 00:03:19,759 --> 00:03:21,360 kind of proficient at this So. 66 00:03:21,439 --> 00:03:24,719 Speaker 3: At that point, I really understand how components work, like 67 00:03:24,840 --> 00:03:27,840 components on the sense of UI components not related to 68 00:03:27,879 --> 00:03:30,360 any frameworks, So that kind of gave me a really 69 00:03:30,400 --> 00:03:32,800 nice idea. Okay, cool, I need to build components. I 70 00:03:32,800 --> 00:03:35,240 need to make sure how it works. But one of 71 00:03:35,319 --> 00:03:39,039 the pain points was understand this concept of smart components 72 00:03:39,039 --> 00:03:42,360 and dumb components or containing components, you know, UI components 73 00:03:42,800 --> 00:03:47,360 that thin because when I get them the project everything 74 00:03:47,560 --> 00:03:51,439 was smart, right, And we have components that do fetch, 75 00:03:51,719 --> 00:03:55,120 that do HDP request everywhere, that handle a bunch of 76 00:03:55,360 --> 00:03:59,000 inputs and outputs, and we kind of follow the same pattern. 77 00:03:59,319 --> 00:04:01,520 But at some point is when with the app keeps 78 00:04:01,560 --> 00:04:03,879 growing and growing, it was getting mensured and messaging, and 79 00:04:03,960 --> 00:04:06,360 we use components, We're getting harder and harder. So at 80 00:04:06,360 --> 00:04:07,919 some point I was like, we need to stop this 81 00:04:08,120 --> 00:04:09,960 and we need to find a better way. I mean, 82 00:04:10,280 --> 00:04:12,319 it doesn't have to be this way. There should be something. 83 00:04:12,800 --> 00:04:14,919 And we start reading about and we find this post 84 00:04:15,039 --> 00:04:19,399 and this article about smart components, dumb components or container components, 85 00:04:19,720 --> 00:04:23,800 and we start shifting into that route and things start 86 00:04:23,839 --> 00:04:27,480 getting a little bit easier. Definitely, the other kind of 87 00:04:27,959 --> 00:04:31,560 thing that I think everyone struggled about the first time 88 00:04:31,800 --> 00:04:33,639 they touched and you are coming from a front and 89 00:04:33,680 --> 00:04:38,040 developer perspective is rgedally yes, but then after you kind 90 00:04:38,040 --> 00:04:42,480 of wrap your head around the pops up or observable pattern, 91 00:04:42,560 --> 00:04:45,600 whatever you want to call it. It's just very easy. 92 00:04:45,920 --> 00:04:48,879 Speaker 1: Yeah, absolutely, So how long have you been doing Angular 93 00:04:48,920 --> 00:04:51,959 at this point for like four years? Okay, good deal, 94 00:04:52,240 --> 00:04:54,839 And I guess now we're going to kind of transition 95 00:04:54,920 --> 00:04:56,639 towards the state conversation. 96 00:04:57,199 --> 00:04:59,120 Speaker 2: What prompted you to write this blog post? 97 00:04:59,560 --> 00:05:03,800 Speaker 3: So besides not having container components of separation of components, 98 00:05:03,800 --> 00:05:06,439 we didn't have a stage a state management system in 99 00:05:06,480 --> 00:05:09,120 place in the act right we just rolled where we 100 00:05:09,240 --> 00:05:13,360 were basically inherent from and we were building new features 101 00:05:13,399 --> 00:05:16,439 stuff like that, we were handling, we were handling their states. 102 00:05:16,439 --> 00:05:20,399 We just properties, like you know, not caring about too much. 103 00:05:20,439 --> 00:05:22,759 But at some point we have to create a page 104 00:05:22,759 --> 00:05:26,120 builder and that have a lot of state and a 105 00:05:26,160 --> 00:05:28,920 lot of moving parts, and we just try to build 106 00:05:28,920 --> 00:05:30,879 it as we were. We were just doing it with 107 00:05:31,040 --> 00:05:34,279 properties and service and stuff like that. But the the 108 00:05:34,399 --> 00:05:37,560 UI keeps getting out of sync all the time, and 109 00:05:37,800 --> 00:05:40,360 there wasn't an issue, and do you really know where 110 00:05:40,800 --> 00:05:43,879 it was getting out of sync from? It was really 111 00:05:43,920 --> 00:05:47,160 hard to track what's going on in the whole thin 112 00:05:47,680 --> 00:05:49,720 And at that point we're like I mean we need 113 00:05:49,759 --> 00:05:53,079 to find a stage a state management system. This is 114 00:05:53,120 --> 00:05:55,680 definitely not this is not going to a scale. We're 115 00:05:55,680 --> 00:05:58,639 going to run into so much problems. And the first 116 00:05:58,639 --> 00:06:01,680 thing was what everybody does, right, I mean an your X. 117 00:06:02,279 --> 00:06:04,319 Everyone is like, okay, we need to put an your 118 00:06:04,439 --> 00:06:07,639 X on this, but it's not. When you're working on 119 00:06:07,680 --> 00:06:10,199 a team, you got to make sure that everybody on 120 00:06:10,240 --> 00:06:12,519 the team is on board with whatever library you're going 121 00:06:12,560 --> 00:06:15,199 to put and especially if it's something that big as 122 00:06:15,279 --> 00:06:19,319 an YOURX or as important as state state management in 123 00:06:19,360 --> 00:06:22,360 an app. So at that point we're like, oh, this 124 00:06:22,519 --> 00:06:25,000 is too much work, this is too much boiler play. 125 00:06:25,079 --> 00:06:27,040 We're just doing this for the page builder. They have 126 00:06:27,160 --> 00:06:31,079 to be something else. And we started looking around and 127 00:06:31,120 --> 00:06:33,480 this there is this approach to handle the state that 128 00:06:33,879 --> 00:06:38,199 it's called like push based architecture. The idea behind it 129 00:06:38,240 --> 00:06:41,680 is that instead of just just asking data from the 130 00:06:41,720 --> 00:06:46,040 services to just subscribe to one observable and you led 131 00:06:46,079 --> 00:06:49,240 the service to handle the state basically, and you just 132 00:06:49,240 --> 00:06:52,839 subscribe to to unobservable that is your state inside your component, 133 00:06:53,199 --> 00:06:56,439 and everything that happens to change the state happened inside 134 00:06:57,199 --> 00:06:59,879 the service. So we took that approach, but we build 135 00:06:59,879 --> 00:07:04,560 it the services ourself. We use you know, reply subject 136 00:07:04,680 --> 00:07:07,800 or subjects, behavior subject, all those sort of things, and 137 00:07:08,439 --> 00:07:13,439 that basically gave us a really good page builder. We 138 00:07:13,439 --> 00:07:15,720 were able to handle in the state in one place, 139 00:07:16,040 --> 00:07:18,879 one sort of truth, and everything went well. So at 140 00:07:18,920 --> 00:07:22,480 that point we kind of build our own component store 141 00:07:22,800 --> 00:07:26,079 without knowing that component story was coming up. It was 142 00:07:26,160 --> 00:07:27,360 before component store. 143 00:07:28,160 --> 00:07:29,720 Speaker 1: I want to stop you here for just a second 144 00:07:29,800 --> 00:07:32,079 because i mean I've kind of gone down the same 145 00:07:32,199 --> 00:07:35,399 road a little bit. I mean I'm not as experienced 146 00:07:35,399 --> 00:07:37,839 as you are with Angular, but I've gone down this 147 00:07:37,920 --> 00:07:40,839 road with React. I've gone down this road with with Angular, 148 00:07:41,040 --> 00:07:43,720 and yeah, i mean you get to a certain point 149 00:07:43,759 --> 00:07:46,759 because yeah, your your natural inclination. 150 00:07:46,439 --> 00:07:46,920 Speaker 2: Is to do it. 151 00:07:47,000 --> 00:07:50,079 Speaker 1: You started out doing right where you're you're passing props 152 00:07:50,120 --> 00:07:53,519 through and you have things propagate back up when you 153 00:07:53,560 --> 00:07:56,120 when you have events, and then you know, state kind 154 00:07:56,120 --> 00:07:59,480 of just flows back down as it needs to, and 155 00:08:00,120 --> 00:08:01,720 that works up to a certain point, and then yeah, 156 00:08:01,800 --> 00:08:04,839 things kind of get complicated enough there's enough moving and 157 00:08:04,879 --> 00:08:07,680 everything has to notify everything else to where yeah, you 158 00:08:07,680 --> 00:08:11,240 get complicated, and yeah, I've reached for the reducs I've 159 00:08:11,240 --> 00:08:14,920 reached for the NNGGRX, and yeah, it gets complicated. And 160 00:08:15,000 --> 00:08:17,519 that's why I use the term overkill sometimes when I'm 161 00:08:17,519 --> 00:08:20,920 going because yeah, it got way complicated, way fast, and 162 00:08:20,920 --> 00:08:23,480 it's like there's all this overhead and it's like, Okay, 163 00:08:23,519 --> 00:08:25,240 how much of this am I doing to just get 164 00:08:25,399 --> 00:08:28,959 NGRX or REDUCS or something else to work versus actually 165 00:08:29,000 --> 00:08:31,439 getting what I need out of this tool? And so 166 00:08:32,120 --> 00:08:33,960 I guess I'm getting a little bit lost at this 167 00:08:34,000 --> 00:08:37,879 point though, in how you're implementing your observables in order 168 00:08:37,919 --> 00:08:38,720 to get this to work. 169 00:08:39,000 --> 00:08:41,399 Speaker 3: Now, at the end, what we did was one service. 170 00:08:41,519 --> 00:08:45,399 We did one various specific service just under the state 171 00:08:45,480 --> 00:08:47,480 of the page, of the page fielder and the page 172 00:08:47,519 --> 00:08:50,879 builder components. It was just one big container component that 173 00:08:51,120 --> 00:08:55,360 just handled all the children. Oh interesting what subscribed to 174 00:08:55,519 --> 00:08:59,360 just one observable and every time that observable it was 175 00:08:59,440 --> 00:09:03,120 just an object, right, and every time that object change, 176 00:09:03,399 --> 00:09:06,080 it just gets propagated all the way down to other children. 177 00:09:06,600 --> 00:09:10,440 Before that, every children have their own little object and 178 00:09:10,519 --> 00:09:13,080 try to change, but they also have to change parts 179 00:09:13,120 --> 00:09:16,679 on the parents object. And that when we start getting 180 00:09:16,919 --> 00:09:19,919 basically lost and getting a lot of UI inconsistency and 181 00:09:19,960 --> 00:09:20,639 stuff like that. 182 00:09:20,879 --> 00:09:24,480 Speaker 2: Right, So how does that work? I'm trying to kind 183 00:09:24,519 --> 00:09:25,159 of envision this. 184 00:09:25,279 --> 00:09:28,120 Speaker 3: So it's basically let me give you an example. So 185 00:09:28,240 --> 00:09:30,279 you create a service, right, A regular service is just 186 00:09:30,279 --> 00:09:34,200 an injectable as and basically that service is just an object. 187 00:09:34,200 --> 00:09:36,799 You create an interface for that object. And so let's 188 00:09:36,799 --> 00:09:39,039 say you have a button and you know a list 189 00:09:39,759 --> 00:09:42,320 of elements, so that state or that object will have 190 00:09:42,360 --> 00:09:45,360 an array and maybe a loading mi state, right, and 191 00:09:45,399 --> 00:09:48,320 then in your component, and then you export one observable 192 00:09:48,679 --> 00:09:52,200 with that interface, right, and then as your parent component, 193 00:09:52,600 --> 00:09:55,799 you just subscribe to that observable. That's it. That's what 194 00:09:55,840 --> 00:09:57,519 you do. And then when you subscribe, you use a 195 00:09:57,559 --> 00:10:00,679 synpipe and you just take the data, just pass it 196 00:10:00,720 --> 00:10:03,600 down to profits. Like if you have a table listing component, 197 00:10:03,720 --> 00:10:06,120 you pass the array to the table list the component. Right. 198 00:10:06,600 --> 00:10:08,440 And then if you if you have like a button 199 00:10:08,480 --> 00:10:11,279 to reload the data when you click the button in 200 00:10:11,320 --> 00:10:15,480 the container component. Instead of just like calling the service 201 00:10:15,559 --> 00:10:17,960 and subscribe and wait further response and change the list, 202 00:10:18,080 --> 00:10:21,440 you just call a method inside the service that you created. 203 00:10:21,559 --> 00:10:24,600 You just call it, right, that method will be in 204 00:10:24,679 --> 00:10:28,080 charge to go do the HGTP request and update the 205 00:10:28,200 --> 00:10:33,240 state inside that service and that state once you upgraded, 206 00:10:33,279 --> 00:10:35,679 you do that. When once you're updated, you do a 207 00:10:35,799 --> 00:10:38,720 next and it will propagate, it will subscribe on the 208 00:10:38,799 --> 00:10:42,879 component will be updated. We're getting new fetch fetch a data. 209 00:10:43,000 --> 00:10:43,320 Speaker 2: Okay. 210 00:10:43,720 --> 00:10:47,279 Speaker 3: So that is basically push based architecture. It's it's instead 211 00:10:47,279 --> 00:10:51,120 of the component asking for the data, he just said, okay, 212 00:10:51,159 --> 00:10:54,039 load data, and I'm just gonna wait and inside the 213 00:10:54,080 --> 00:10:56,440 service to do whatever you need to do to get 214 00:10:56,440 --> 00:11:00,480 the data, transform it, filtered, whatever, and then you send 215 00:11:00,480 --> 00:11:02,919 it back down through the ex serval. 216 00:11:03,519 --> 00:11:07,279 Speaker 1: Gotcha, and so then once so so each component then 217 00:11:07,360 --> 00:11:10,440 is subscribed to the observable that points back to the 218 00:11:10,480 --> 00:11:10,840 big thing. 219 00:11:11,759 --> 00:11:15,440 Speaker 3: The idea is having just one container component subscribe, right, 220 00:11:16,200 --> 00:11:21,600 and then that component will pass down the. 221 00:11:20,480 --> 00:11:24,320 Speaker 2: Pieces of the state to their children's I got you, okay, 222 00:11:24,360 --> 00:11:24,879 and you make. 223 00:11:24,799 --> 00:11:27,879 Speaker 3: Sure that those children are just UI components or dumb 224 00:11:27,960 --> 00:11:30,000 components that they just start waiting for data. 225 00:11:30,000 --> 00:11:33,000 Speaker 1: They're not doing anything, just waiting right, So as soon 226 00:11:33,000 --> 00:11:36,000 as that data changes, then they just update themselves. 227 00:11:36,039 --> 00:11:38,559 Speaker 3: The whole three, the whole three. Yeah, you're using a 228 00:11:38,639 --> 00:11:42,120 scene introd using a sink pipe in the top level component. 229 00:11:42,360 --> 00:11:44,320 You don't have to care about unsubscribed, you don't have 230 00:11:44,360 --> 00:11:45,879 to care about change detection. 231 00:11:45,639 --> 00:11:48,440 Speaker 2: Or anything, right, right, because that's all just built in. 232 00:11:49,039 --> 00:11:51,039 Speaker 3: That's just angular nature. 233 00:11:51,320 --> 00:11:53,440 Speaker 1: Right, So as soon as the state changes, everything just 234 00:11:53,440 --> 00:11:58,039 goes and you're right, yeah, that's really slick. 235 00:11:58,919 --> 00:12:01,240 Speaker 3: Yeah, that was the idea behind this, because we have 236 00:12:01,360 --> 00:12:04,120 this option, or we have yet, oh we have the 237 00:12:04,120 --> 00:12:06,480 other options. That was like, okay, let's put r X 238 00:12:06,600 --> 00:12:10,759 in and let's start doing you know, reducers and actions and. 239 00:12:10,600 --> 00:12:13,120 Speaker 2: All the right and it's a lot. 240 00:12:13,200 --> 00:12:15,480 Speaker 3: I mean, it's a lot. And also I was concerned 241 00:12:15,519 --> 00:12:18,080 that I had one experience on redocs and flocks like 242 00:12:18,320 --> 00:12:23,120 flogs way way all ancient times, but the other my 243 00:12:23,279 --> 00:12:27,159 other team members, they didn't have too much experience with it. 244 00:12:27,639 --> 00:12:30,159 And I was like, this is going to definitely reduce 245 00:12:30,399 --> 00:12:34,360 my team speed, and oh yeah, we didn't have the chance. 246 00:12:34,480 --> 00:12:38,480 I mean, I didn't have the luxury of doing that 247 00:12:38,840 --> 00:12:39,480 at that point. 248 00:12:39,879 --> 00:12:40,080 Speaker 2: Right. 249 00:12:40,159 --> 00:12:42,440 Speaker 1: So I guess, is this a pattern that you had 250 00:12:42,480 --> 00:12:44,799 seen somewhere else or is this something you just kind 251 00:12:44,799 --> 00:12:47,279 of iterated to to the point where you found some 252 00:12:47,279 --> 00:12:47,679 of the work. 253 00:12:48,600 --> 00:12:51,759 Speaker 3: I saw a couple of posts about that, but I 254 00:12:52,240 --> 00:12:53,720 never I mean, like, for example, if you're going to 255 00:12:53,720 --> 00:12:56,960 the Angular documentation, even though it's really good, their approach 256 00:12:57,039 --> 00:13:00,480 is like, your components need to ask data from service 257 00:13:00,559 --> 00:13:04,559 and subscribe to it and update their properties and that's it. 258 00:13:04,559 --> 00:13:06,519 They don't tell you that there is this other way. 259 00:13:06,840 --> 00:13:09,080 Some smart people you start writing posts about it, and 260 00:13:09,120 --> 00:13:12,080 I keep seeing those. It's like, this looks interesting, but 261 00:13:12,120 --> 00:13:15,919 it's so different than the Angular documentation proposed that I 262 00:13:15,960 --> 00:13:18,440 was a little scared to use it. I was like, 263 00:13:18,600 --> 00:13:20,759 this is kind of I thought at first it was 264 00:13:20,840 --> 00:13:24,120 kind of like an experiment, so I was like, I 265 00:13:24,120 --> 00:13:27,279 don't know if this is you know, really angu recommend it, 266 00:13:27,320 --> 00:13:30,159 blah blah blah. But then I just test it, and 267 00:13:30,200 --> 00:13:32,919 when I tested, it feels so good. And also it 268 00:13:33,000 --> 00:13:35,919 was easier to test your your unit testing and am 269 00:13:36,279 --> 00:13:40,600 get easier because your components is just rendered differently depending 270 00:13:40,639 --> 00:13:43,759 on the stage you passed to it, and there is 271 00:13:43,840 --> 00:13:46,519 used to assert for HTML elements based on the state 272 00:13:46,600 --> 00:13:49,240 and you can change it and then you test all 273 00:13:49,279 --> 00:13:52,720 the all the HGTP requests in the service. It feels 274 00:13:52,480 --> 00:13:54,399 for me, it feels more natural. 275 00:13:54,799 --> 00:13:56,799 Speaker 2: Yeah, that it does. It feels very natural. 276 00:13:57,480 --> 00:14:00,279 Speaker 1: It's just not something that I think I would have 277 00:14:00,320 --> 00:14:02,320 necessarily come up with on my own, but it feels 278 00:14:02,320 --> 00:14:02,919 so elegant. 279 00:14:03,639 --> 00:14:03,879 Speaker 2: Yeah. 280 00:14:03,919 --> 00:14:05,639 Speaker 3: I didn't come over with my own either. I just 281 00:14:05,679 --> 00:14:08,879 start googling around and trying to ask people working in 282 00:14:09,240 --> 00:14:13,559 bigger Angular apps that face similar problems, and they said, yeah, 283 00:14:13,600 --> 00:14:15,799 you gotta go push based, you gotta go push based. 284 00:14:16,200 --> 00:14:19,840 And then what happened was I was I was listening 285 00:14:19,919 --> 00:14:23,120 to Juana, He's a Google developer expert, and he was 286 00:14:23,120 --> 00:14:26,919 talking in an Angular confidence no confidence a meetup in Colombia, 287 00:14:27,519 --> 00:14:30,399 and I was hitting him and he said something like 288 00:14:31,000 --> 00:14:33,639 eighty percent of the Angular apps don't. 289 00:14:33,440 --> 00:14:36,120 Speaker 2: Need any r apps mhm. 290 00:14:36,000 --> 00:14:39,080 Speaker 3: And I was like, well, I kind of. I was like, 291 00:14:39,159 --> 00:14:41,320 I've been thinking this for the past two years, but 292 00:14:41,360 --> 00:14:45,919 I wasn't feeling really secure saying that because people normally, 293 00:14:46,120 --> 00:14:48,080 when you said something like that, I mean, that goes 294 00:14:48,200 --> 00:14:53,759 against the norm establishment for saying every lid it's like, no, 295 00:14:53,960 --> 00:14:55,639 let me prove you why you're wrong, blah blah blah 296 00:14:55,639 --> 00:14:58,440 blah blah. And I didn't want to say anything because 297 00:14:58,480 --> 00:15:01,519 I'm not, like, I don't who like just fighting in 298 00:15:01,519 --> 00:15:04,879 Twitter over technology at all. So I was like, I'm 299 00:15:04,919 --> 00:15:07,080 just gonna try to try to do what's best for me. 300 00:15:08,039 --> 00:15:08,240 Speaker 2: Right. 301 00:15:08,480 --> 00:15:10,720 Speaker 3: And when I hear him, which is is a Google developer, 302 00:15:10,759 --> 00:15:13,960 experts he has been doing AMR for more time than me, 303 00:15:14,840 --> 00:15:18,600 and he probably do Angula with bigger apps than me, 304 00:15:18,799 --> 00:15:21,519 I was like, okay, so I'm not crazy, I'm right. 305 00:15:21,600 --> 00:15:26,240 So I start googling around again, and turns out that 306 00:15:26,600 --> 00:15:30,960 the ANTIOX people, the same people that create the states 307 00:15:31,000 --> 00:15:35,000 management library that everyone's pretty much everyone used, they create 308 00:15:35,039 --> 00:15:39,919 a second library that is called component store, right, and 309 00:15:40,039 --> 00:15:42,200 I start okay, and I was like, okay, this is interesting. 310 00:15:42,279 --> 00:15:44,159 Let me see this. So they have two libraries. They 311 00:15:44,159 --> 00:15:49,879 have ANJIRX store an ANJRX component store right right, So 312 00:15:50,200 --> 00:15:55,559 there there's similar, but they attack two different problems. 313 00:15:55,639 --> 00:15:55,799 Speaker 2: Right. 314 00:15:56,120 --> 00:15:59,080 Speaker 3: The ANJR store, which is the one that everyone uses 315 00:15:59,080 --> 00:16:02,759 all the time, it goes through your global state. So 316 00:16:02,879 --> 00:16:05,080 if you have a big app that have like a 317 00:16:05,240 --> 00:16:08,600 user information on the top bar and the left you 318 00:16:08,639 --> 00:16:11,559 have to keep your menu on sync blah blah blah. 319 00:16:11,799 --> 00:16:15,559 You can you can use components. You can use the store, right, 320 00:16:15,679 --> 00:16:18,240 let's call it the global store. But if you have 321 00:16:18,320 --> 00:16:22,559 a big component that have their own state, and that 322 00:16:22,759 --> 00:16:26,279 state it's going away. When you change your RL, what 323 00:16:26,320 --> 00:16:30,159 they recommend is you use component store, right, so that 324 00:16:30,159 --> 00:16:33,120 that's basically what you're saying, and what component store does 325 00:16:33,279 --> 00:16:36,840 is what I did. Manually. They did they create a library. 326 00:16:36,919 --> 00:16:39,679 On top of that, you create a service extending the 327 00:16:39,720 --> 00:16:42,679 service that they're creating, the component store, and you have 328 00:16:42,799 --> 00:16:46,120 three components here. You have three methods. You have select 329 00:16:46,320 --> 00:16:49,759 which basically allows you to select pieces of your state. 330 00:16:50,240 --> 00:16:53,879 You have update method to update your state, and you 331 00:16:53,960 --> 00:16:57,480 have an effect method that basically what you do is 332 00:16:57,519 --> 00:17:00,879 it updates your state, but you do some before that 333 00:17:01,159 --> 00:17:04,519 to update your state, for example an ACTP request. So 334 00:17:04,599 --> 00:17:08,319 those three main components, it's basically what I was doing 335 00:17:08,720 --> 00:17:13,400 in my hand crafted service to manage the state. So 336 00:17:13,440 --> 00:17:15,519 I was like, okay, this is what I did, but 337 00:17:15,599 --> 00:17:17,720 this guys are way smarter than me. It was like 338 00:17:17,759 --> 00:17:20,640 a team of three people and they were working really 339 00:17:20,759 --> 00:17:24,400 not really really good, really hard on the library. So 340 00:17:24,480 --> 00:17:27,079 I started testing around. I reached to them on Twitter. 341 00:17:27,160 --> 00:17:31,000 They were really responsive, and I just started using it 342 00:17:31,400 --> 00:17:36,400 and it works flawless. So yeah, from my point of view, 343 00:17:37,119 --> 00:17:39,160 if you were like me and you have a big 344 00:17:39,200 --> 00:17:42,519 app that you don't have a state management library, instead 345 00:17:42,519 --> 00:17:46,960 of just jumping to engrx reduce your actions everything. You 346 00:17:47,000 --> 00:17:50,559 should first try to handle your state locally in the 347 00:17:50,640 --> 00:17:54,680 component and then when you really did. After you do that, 348 00:17:54,960 --> 00:17:57,640 you're gonna notice, oh, this is what I need or no, 349 00:17:57,759 --> 00:18:01,480 I need a level of a global a more global component. 350 00:18:01,799 --> 00:18:05,039 Then you start looking into end your ex store. So 351 00:18:05,079 --> 00:18:07,640 that's kind of my recommendation and my take off of this. 352 00:18:07,799 --> 00:18:11,000 And I talked with these guys over Twitter. They review 353 00:18:11,240 --> 00:18:15,240 my post on in depth, so they were there. I mean, 354 00:18:15,279 --> 00:18:18,839 they created ther x store. They definitely know that it 355 00:18:18,960 --> 00:18:22,680 wasn't I'm not gonna say enough, but it was probably 356 00:18:22,920 --> 00:18:25,559 way more that most apps really need. 357 00:18:25,880 --> 00:18:27,039 Speaker 2: Yeah, it makes total sense. 358 00:18:27,559 --> 00:18:30,640 Speaker 1: So have you moved your app over to the component 359 00:18:30,680 --> 00:18:31,559 store or have you? 360 00:18:31,759 --> 00:18:36,799 Speaker 3: Yeah? Yeah, we did that. We just moved everything. Recently, 361 00:18:36,839 --> 00:18:40,440 we have to create the feature of creating editing templates 362 00:18:41,160 --> 00:18:44,839 and we use component in store from scratch, and it 363 00:18:44,960 --> 00:18:49,319 was like super easy. Everyone understand it. They understand. I 364 00:18:49,319 --> 00:18:51,400 mean they have to read a couple of posts about 365 00:18:51,559 --> 00:18:55,000 push based architecture just to wrap their head around it. 366 00:18:55,319 --> 00:18:58,119 But they were able to do co review, ask me questions. 367 00:18:58,200 --> 00:19:00,559 Because I was in charge of implementing the first version 368 00:19:00,599 --> 00:19:04,480 of it. We had like a meeting and I answered 369 00:19:04,519 --> 00:19:07,200 their questions and everything. And recently we have to create 370 00:19:07,240 --> 00:19:11,279 another app to handle the CD and and since we 371 00:19:11,359 --> 00:19:13,759 established that we need to handle the state with using 372 00:19:13,799 --> 00:19:16,960 component store, one of the developers to the job. He 373 00:19:17,160 --> 00:19:19,680 just do it. He didn't, you know, had a lot 374 00:19:19,680 --> 00:19:20,440 of potent with it. 375 00:19:21,000 --> 00:19:24,680 Speaker 2: Awesome. So what's next for you as far as exploring 376 00:19:24,880 --> 00:19:26,759 state within an Angular application? 377 00:19:27,119 --> 00:19:30,640 Speaker 3: Well, at this point in my main Angular app, I 378 00:19:30,640 --> 00:19:33,759 mean the update I develop every day, we're at a 379 00:19:33,799 --> 00:19:36,759 point where where every we call it portle it whe 380 00:19:36,880 --> 00:19:40,720 it's basically every section. It's easier to handle it with 381 00:19:41,000 --> 00:19:44,240 Component store. We don't have a big global estate, right, 382 00:19:44,279 --> 00:19:47,000 we don't have to handle too much on the global state. 383 00:19:47,400 --> 00:19:49,680 So for now we're going to stick to component store 384 00:19:50,240 --> 00:19:55,079 until we realize that we need a global store. But 385 00:19:55,240 --> 00:19:58,160 for now it's more than enough for what we're doing. 386 00:19:58,400 --> 00:19:58,799 Speaker 2: I gotcha. 387 00:19:59,279 --> 00:20:01,440 Speaker 3: We haven't found a wall that says, oh, you've got 388 00:20:01,440 --> 00:20:04,079 to go through the global store now, we haven't get 389 00:20:04,160 --> 00:20:04,640 there yet. 390 00:20:05,000 --> 00:20:05,559 Speaker 2: Makes sense. 391 00:20:06,279 --> 00:20:08,519 Speaker 1: Do you have any recommendations for people who are trying 392 00:20:08,519 --> 00:20:13,799 to implement or pull in the component store. Is it 393 00:20:13,880 --> 00:20:17,359 pretty simple or are there gotchas that people run into. 394 00:20:18,200 --> 00:20:21,160 Speaker 3: There's some gadgets, but more than goatchets. It's like because 395 00:20:21,160 --> 00:20:24,079 you're changing the shift of how you build components. It's 396 00:20:24,160 --> 00:20:26,680 kind of like a little bit hard. But basically, when 397 00:20:26,720 --> 00:20:30,519 you create a component store service is one to one 398 00:20:30,559 --> 00:20:32,880 to the component, right. It's not like you're going to 399 00:20:32,920 --> 00:20:37,119 reuse that that service in another component. It's literally one 400 00:20:37,119 --> 00:20:39,160 to one. In fact, you have to put it in 401 00:20:39,200 --> 00:20:43,359 the providers a rate inside the components, right, because you 402 00:20:43,440 --> 00:20:46,680 want to create an instant just for that component. So 403 00:20:46,759 --> 00:20:49,599 that's important to understand. And the other thing that you 404 00:20:49,599 --> 00:20:52,960 need to understand is like all the logic is going 405 00:20:53,000 --> 00:20:58,119 to your component store, right, So your component, we only 406 00:20:58,160 --> 00:21:02,880 subscribe to some and that's it. He doesn't have to 407 00:21:02,920 --> 00:21:06,599 do anything else. All the logic of the hgtpretyques you 408 00:21:06,640 --> 00:21:10,839 have to do. Or you know, if you're subscribed to 409 00:21:10,839 --> 00:21:13,920 like website events or something like that, your subscribe on 410 00:21:13,960 --> 00:21:17,440 the service and all those events that change the state 411 00:21:18,160 --> 00:21:21,519 that stay change in the service and it just gets 412 00:21:21,519 --> 00:21:25,400 propagated to the component. So your component, your container component 413 00:21:26,000 --> 00:21:30,240 ends to be just a dumb component. Subscribe to a service, 414 00:21:30,599 --> 00:21:35,200 it doesn't do anything else. So make sure that you 415 00:21:35,480 --> 00:21:37,640 understand that your component now is not going to have 416 00:21:37,680 --> 00:21:40,240 to do is not going to do anything. Just subscribe 417 00:21:40,279 --> 00:21:43,279 to some data and using a sympath. That's it. That's 418 00:21:43,319 --> 00:21:46,039 your idea behind it. If you feel like, oh, I 419 00:21:46,039 --> 00:21:50,119 need to add this service into this component into the component, 420 00:21:50,559 --> 00:21:54,319 you're probably doing it wrong, right it goes in the 421 00:21:54,359 --> 00:21:57,480 other service. I will say, just try with little experiments 422 00:21:57,680 --> 00:22:02,160 first before jumping to it. And also, I think that 423 00:22:03,400 --> 00:22:05,160 one of the problems that I saw while I was 424 00:22:05,200 --> 00:22:07,079 trying to implement this on my team, it was like 425 00:22:07,160 --> 00:22:10,480 they they didn't understand that every time you create a 426 00:22:10,519 --> 00:22:14,160 property in your component that is going to render in 427 00:22:14,240 --> 00:22:17,279 the HTML, or maybe even it doesn't render in DHTML, 428 00:22:17,440 --> 00:22:20,799 that's a state. That's the state of their component because 429 00:22:20,880 --> 00:22:23,599 that's going to change on the life cycle of the component. 430 00:22:24,160 --> 00:22:25,759 And I see a lot of people that don't see 431 00:22:25,759 --> 00:22:27,480 it that way. They say, no, it's just a property 432 00:22:27,519 --> 00:22:29,559 that I need to print out in the HTML. Yeah, exactly, 433 00:22:29,599 --> 00:22:32,079 that's your state, even if it's just one property. Is 434 00:22:32,079 --> 00:22:34,640 that a state? I guess because the way videos and 435 00:22:34,680 --> 00:22:39,279 flow and flox work, people think that states are just 436 00:22:39,400 --> 00:22:41,799 objects and they're not. It could be anything. 437 00:22:42,160 --> 00:22:42,640 Speaker 2: Yeah. 438 00:22:42,680 --> 00:22:45,559 Speaker 1: Absolutely, How does this affect testing. Does it make the 439 00:22:45,599 --> 00:22:47,559 components easier to test or harder to test? 440 00:22:48,480 --> 00:22:52,559 Speaker 3: It's easier because your component now is attached to one service, right. 441 00:22:52,640 --> 00:22:57,640 It's one service, so your component is just rendering data. Right, 442 00:22:57,720 --> 00:23:00,400 So what you can do is you you can mock 443 00:23:00,839 --> 00:23:04,559 when you're testing. You can mock your store component. Sorry, 444 00:23:04,680 --> 00:23:07,799 your store. It's called the store because component store, but 445 00:23:07,839 --> 00:23:10,519 it's your service. You just mock it and you mock 446 00:23:10,559 --> 00:23:13,279 the response of it, right, so you don't have to 447 00:23:13,279 --> 00:23:17,240 care about doing extra requests or market initiative requests or anything. 448 00:23:17,319 --> 00:23:20,799 You just mock the state and you to test your component, 449 00:23:20,880 --> 00:23:23,319 you have to make sure that okay, so the state 450 00:23:23,559 --> 00:23:27,759 is true folds one to three, and that you render 451 00:23:27,799 --> 00:23:31,720 insite my component this element with one to three, the 452 00:23:31,720 --> 00:23:34,880 other element with you know true. When it's full, it 453 00:23:34,920 --> 00:23:38,519 doesn't render. So you just assert HTML, make sure that 454 00:23:38,759 --> 00:23:41,599 passing the props down and stuff like that. On the 455 00:23:41,880 --> 00:23:45,640 on testing the components gets easier. On testing the service, 456 00:23:46,119 --> 00:23:48,839 it's kind of good. I'm not gonna say hard, but 457 00:23:48,920 --> 00:23:51,759 you have to make sure that the idea behind these 458 00:23:51,799 --> 00:23:55,319 testinies testing the services, okay, you have to make sure 459 00:23:55,359 --> 00:23:59,599 that if you're if your store fetch data from another service, 460 00:24:00,039 --> 00:24:02,359 so you have to test that that that service gets called, 461 00:24:02,519 --> 00:24:04,839 and then you have to monck the response, and then 462 00:24:04,880 --> 00:24:08,000 with that response, you have to assert that the state 463 00:24:08,079 --> 00:24:10,319 that the US state is what it's supposed to be 464 00:24:10,400 --> 00:24:14,119 depending on the response of the of the other service. 465 00:24:14,519 --> 00:24:17,559 So it's just asserting that the object of the state 466 00:24:17,680 --> 00:24:20,359 change based on the responses of other. 467 00:24:20,200 --> 00:24:24,960 Speaker 1: Services, right, Yeah, that makes sense. Yeah, I'm just trying 468 00:24:24,960 --> 00:24:28,279 to think through any other implications. I mean, the only 469 00:24:28,279 --> 00:24:30,200 other thing I'm thinking of is like look and feel 470 00:24:30,240 --> 00:24:33,880 and styling. But it seems like you can dynamically add 471 00:24:33,920 --> 00:24:36,640 and remove classes just like you normally would in a component, 472 00:24:36,720 --> 00:24:41,680 so it's yeah, it's straightforward, and your behaviors are all 473 00:24:41,759 --> 00:24:44,400 managed and you can manage those based on the state 474 00:24:44,440 --> 00:24:45,240 that you have in there. 475 00:24:45,359 --> 00:24:46,759 Speaker 2: So yeah. 476 00:24:46,839 --> 00:24:48,759 Speaker 3: In fact, the whole idea is if you have a 477 00:24:48,799 --> 00:24:52,559 big component, you use an key container to wrap everything. 478 00:24:53,039 --> 00:24:56,920 You you a sinc your angie if and a sink 479 00:24:57,480 --> 00:25:01,000 on the top level of the angie H and then 480 00:25:01,039 --> 00:25:03,119 you get a static property that you can print down 481 00:25:03,200 --> 00:25:05,799 inside and all the other elements ahmo that you have 482 00:25:05,880 --> 00:25:08,480 to use, so you don't even have to to subscribe 483 00:25:08,559 --> 00:25:12,759 multiple times to subscribe once using a sinkpie, and that's it. 484 00:25:13,319 --> 00:25:15,640 The component is just gonna sit there waiting for new 485 00:25:15,680 --> 00:25:18,920 direct data to come in and you change. Detection will 486 00:25:18,920 --> 00:25:19,799 take care of everything. 487 00:25:20,160 --> 00:25:21,680 Speaker 2: That sounds so slick. 488 00:25:21,680 --> 00:25:25,680 Speaker 3: Even in performance level is way way better. 489 00:25:26,000 --> 00:25:27,920 Speaker 2: Oh really, is it that much? Is it that much 490 00:25:28,000 --> 00:25:28,640 more performance? 491 00:25:29,359 --> 00:25:31,880 Speaker 3: Because yeah, because you just have to subscribe to once 492 00:25:33,400 --> 00:25:37,160 and once that change, everything in the three change, right. 493 00:25:37,200 --> 00:25:39,480 I mean, if if everything in the three change right, 494 00:25:39,519 --> 00:25:43,359 because if the object is some inner elements or inner 495 00:25:43,400 --> 00:25:45,680 properties of the object doesn't change that you're passing to 496 00:25:46,119 --> 00:25:50,279 specific components inside as shalds of your components, those are 497 00:25:50,319 --> 00:25:53,319 not going to trigger the re render, so they can 498 00:25:53,400 --> 00:25:56,960 just change specific parts of the of the element. I mean. 499 00:25:57,000 --> 00:25:58,960 The thing is that it's it's super weird the first 500 00:25:59,000 --> 00:26:01,440 time you get into it, But once you get into 501 00:26:01,480 --> 00:26:04,160 it and you do your first one, you're like, why 502 00:26:04,200 --> 00:26:06,680 I haven't been done this since state one? It doesn't 503 00:26:06,720 --> 00:26:10,079 make sense to Yeah, it's literally like. 504 00:26:10,079 --> 00:26:13,640 Speaker 2: That, uh huh. Yeah, Because you always. 505 00:26:13,279 --> 00:26:16,039 Speaker 3: Hear people saying your component needs to be simple, your 506 00:26:16,039 --> 00:26:18,920 component needs to have make sure that are small, blah 507 00:26:18,920 --> 00:26:20,759 blah blah. But then when you have okay, cool. I 508 00:26:20,759 --> 00:26:23,640 can do small components, but at some point you're like, Okay, 509 00:26:23,759 --> 00:26:27,279 all these small components are going to be inside this 510 00:26:27,519 --> 00:26:31,279 big component that juggling twenty of them. All these small 511 00:26:31,359 --> 00:26:34,640 components have two or three inputs, two or three outputs, 512 00:26:34,680 --> 00:26:36,279 and then when you have ten of them, you have 513 00:26:36,359 --> 00:26:39,799 to handle thirty inputs and outputs in just one component. 514 00:26:40,119 --> 00:26:43,519 And that component is the component that gets really tricky 515 00:26:43,559 --> 00:26:47,000 to handled. That big component, that parting component that wrap 516 00:26:47,079 --> 00:26:49,640 all the other small shildrens, and that is a component 517 00:26:49,640 --> 00:26:50,839 that you create a store. 518 00:26:50,599 --> 00:26:53,160 Speaker 2: For, right, and you create the store for that. 519 00:26:53,799 --> 00:26:56,039 Speaker 1: I'm still kind of trying to wrap my head around 520 00:26:56,240 --> 00:26:59,480 why that would be more performant than maybe using n 521 00:26:59,519 --> 00:27:02,359 GR for some of these other stores, but or even 522 00:27:02,480 --> 00:27:04,960 just using properties. But I guess at the end of 523 00:27:05,000 --> 00:27:07,920 the day, yeah, it just propagates down. You don't have 524 00:27:07,960 --> 00:27:08,880 to do any of the work. 525 00:27:09,200 --> 00:27:12,359 Speaker 3: Yeah, yeah, I don't know. Maybe you I don't know 526 00:27:12,359 --> 00:27:15,079 if you found this issue where you're kind of like 527 00:27:15,119 --> 00:27:18,319 in the eng on in it you subscribe to a 528 00:27:19,640 --> 00:27:21,960 to the method of a service and you want to 529 00:27:22,039 --> 00:27:24,799 use a sink pipe, so you create an observable property 530 00:27:24,880 --> 00:27:28,000 in your in your component, and then you pass that 531 00:27:28,039 --> 00:27:30,759 property in the HTML. But then at some point you 532 00:27:30,799 --> 00:27:33,039 want you need to update that data, So how do 533 00:27:33,119 --> 00:27:35,440 you do that? And you I see people that what 534 00:27:35,519 --> 00:27:38,440 it does is it reassigned the observable to the same 535 00:27:38,480 --> 00:27:39,799 property inside of method. 536 00:27:40,240 --> 00:27:41,680 Speaker 2: Oh okay, right, are you. 537 00:27:41,599 --> 00:27:43,559 Speaker 3: Think that you avoid completely that year? 538 00:27:44,160 --> 00:27:46,279 Speaker 2: Right? That makes Yeah? 539 00:27:46,359 --> 00:27:47,920 Speaker 1: Yeah, I'm gonna have to go play with this and 540 00:27:47,960 --> 00:27:49,480 just kind of get my head around it a little 541 00:27:49,480 --> 00:27:49,839 bit further. 542 00:27:49,880 --> 00:27:51,200 Speaker 2: I guess. Yeah. 543 00:27:51,240 --> 00:27:55,640 Speaker 3: There several YouTube iidias about it. You just google Component Store. 544 00:27:56,359 --> 00:27:58,880 There are like four or fives where Alex the creator 545 00:27:59,319 --> 00:28:02,720 explain everything way better than me and shows you how 546 00:28:02,720 --> 00:28:03,200 to do it. 547 00:28:03,559 --> 00:28:03,920 Speaker 2: Yeah. 548 00:28:04,119 --> 00:28:07,160 Speaker 1: Alex a terrific guy too. It is all right cool. 549 00:28:07,480 --> 00:28:09,480 Was there anything else that we should go into on this. 550 00:28:09,599 --> 00:28:12,039 I mean we've kind of covered testing and most the 551 00:28:12,039 --> 00:28:15,359 other areas related to this, and they see I love 552 00:28:15,400 --> 00:28:16,160 that It's so simple. 553 00:28:16,440 --> 00:28:18,599 Speaker 3: Yeah. So you're gotta make sure that you define your 554 00:28:18,680 --> 00:28:22,480 state correctly, right, I mean, it doesn't necessarily whatever it's 555 00:28:22,519 --> 00:28:25,880 coming from your servers from your servers turns in to 556 00:28:25,960 --> 00:28:28,599 be the state. So you're got to make sure that 557 00:28:28,640 --> 00:28:31,599 you define the interface of the state in an easier 558 00:28:31,640 --> 00:28:34,480 way for you to render right. So that's kind of 559 00:28:34,519 --> 00:28:36,680 like and then when the data comes from the server, 560 00:28:36,839 --> 00:28:38,920 you just map it filtered to whatever you need to 561 00:28:38,960 --> 00:28:41,240 do to turn it into the state ob here you 562 00:28:41,279 --> 00:28:43,920 want to use. That's one thing I've been hearing. The 563 00:28:43,960 --> 00:28:46,519 other thing that I heard that I that this guy's 564 00:28:46,599 --> 00:28:51,400 recommended me was not using bullions for loading. So not 565 00:28:51,559 --> 00:28:54,519 using like it's loading through it's loading falls blah blah blah. 566 00:28:54,640 --> 00:28:58,319 They say that you can use an andom that have 567 00:28:58,480 --> 00:29:01,440 like do you state like in it loading and loaded? Yeah, 568 00:29:01,480 --> 00:29:03,720 there is, there is a whole article about that. I 569 00:29:03,720 --> 00:29:06,559 don't have that on my hand right now, but it 570 00:29:06,640 --> 00:29:08,839 is plain really good how it works and why it's 571 00:29:08,880 --> 00:29:12,680 work better like this. And then because like when you 572 00:29:12,720 --> 00:29:16,559 load the page the first time, your first your first 573 00:29:16,759 --> 00:29:20,720 idea will be, oh, it's loading right. So I load 574 00:29:20,759 --> 00:29:24,200 the page in the browser and it's quote unquote loading right. 575 00:29:24,279 --> 00:29:27,400 It's not loading, it's just in it right. You haven't 576 00:29:27,480 --> 00:29:30,200 load the first time loading is when you're loading second 577 00:29:30,279 --> 00:29:34,720 batches of data. Okay, So that's kind of the the 578 00:29:34,839 --> 00:29:37,519 idea behind this. So you have like an inn state, 579 00:29:37,759 --> 00:29:41,519 like Okay, how do I how this page looks like 580 00:29:41,680 --> 00:29:44,200 when I'm in the innit state when no data it's 581 00:29:44,240 --> 00:29:47,640 being loaded, not even the first time, right, So that's 582 00:29:47,720 --> 00:29:51,119 kind of the idea of this that makes sense. Yeah, Okay, 583 00:29:51,119 --> 00:29:53,240 you can have as many selectors as you want. 584 00:29:53,119 --> 00:29:55,839 Speaker 2: So you can have a big state, right. 585 00:29:55,759 --> 00:29:58,119 Speaker 3: Like you have a bunch of properties. But then you 586 00:29:58,160 --> 00:30:01,400 want to pick and you know, literally use the pick 587 00:30:01,599 --> 00:30:05,079 the operator that it is to just select specific parts 588 00:30:05,160 --> 00:30:07,640 of it that you can then pass down to the component. 589 00:30:08,200 --> 00:30:10,039 Speaker 1: That makes a lot of sense because then you're not 590 00:30:10,160 --> 00:30:14,680 passing this giant data structure. Yeah, you're telling you just 591 00:30:14,680 --> 00:30:15,720 the part that cares about. 592 00:30:16,160 --> 00:30:18,039 Speaker 3: Yeah, you can just part you can just pick a 593 00:30:18,279 --> 00:30:22,440 very specific, very specific part to it. To update the state, 594 00:30:22,680 --> 00:30:25,839 you just use a spread operator exactly the same way 595 00:30:25,839 --> 00:30:30,319 you do with reducs. Not a deal there, And make 596 00:30:30,359 --> 00:30:34,319 sure that when you need to do something before updated state, 597 00:30:34,759 --> 00:30:37,839 make sure you use an effect because the effect allows 598 00:30:37,880 --> 00:30:42,559 you to pipe all the all those requests and then 599 00:30:42,599 --> 00:30:45,960 at the end you do the state update. Yeah, that's 600 00:30:45,960 --> 00:30:49,119 pretty much it. It's not it's not a huge it's 601 00:30:49,119 --> 00:30:51,759 not a huge thing that you have to recomment. It's 602 00:30:51,799 --> 00:30:54,559 not like if if we were talking just about dr 603 00:30:54,720 --> 00:30:57,359 X store and not componing store, we'll probably have to 604 00:30:57,400 --> 00:31:01,119 be here two hours just trying to explaining all the 605 00:31:01,200 --> 00:31:04,000 concept behind it. These are to just and you're good 606 00:31:04,039 --> 00:31:04,279 to go. 607 00:31:04,680 --> 00:31:06,920 Speaker 1: Yeah, yeah, And I think I think that's mostly my 608 00:31:06,960 --> 00:31:10,039 aversion to NGRX is that I think there's a place 609 00:31:10,079 --> 00:31:13,359 for it. But yeah, it's just all the mental overhead 610 00:31:13,400 --> 00:31:16,079 to it, and and I like that this is something 611 00:31:16,079 --> 00:31:18,000 that I can kind of get my head around in. 612 00:31:18,119 --> 00:31:20,519 Speaker 2: A half hours, basically how long we've been talking about it. 613 00:31:21,240 --> 00:31:24,279 Speaker 3: Yeah, I mean the boiler play behind your and your 614 00:31:24,319 --> 00:31:26,960 ex stories is a lot to take. 615 00:31:27,079 --> 00:31:29,119 Speaker 2: Yeah, yeah, it is cool. 616 00:31:29,559 --> 00:31:32,880 Speaker 1: Well, the last segment of this show is picks, and 617 00:31:32,880 --> 00:31:35,279 that's essentially just shout outs about stuff that we like 618 00:31:35,359 --> 00:31:37,720 that we want to call out. I'm going to throw 619 00:31:37,759 --> 00:31:40,319 out a few picks and then I'll give you a turn, 620 00:31:40,359 --> 00:31:41,960 so you can shout out about stuff that you like. 621 00:31:42,319 --> 00:31:43,960 A couple of things that I want to throw out 622 00:31:43,960 --> 00:31:46,480 there really quickly. So one of them. One of the 623 00:31:46,480 --> 00:31:48,799 things that I've been working on lately for devchat dot 624 00:31:48,839 --> 00:31:53,440 tv is premium podcast feeds. And so I know some 625 00:31:53,440 --> 00:31:56,400 folks don't particularly like having ads in the shows, and 626 00:31:56,480 --> 00:31:58,960 so I'm giving folks the option of subscribing to premium 627 00:31:59,000 --> 00:32:01,079 feeds that don't have the ads them. And then I'm 628 00:32:01,079 --> 00:32:04,240 also working on putting together some premium shows that don't 629 00:32:04,240 --> 00:32:07,039 have ads in a meta rights you just pay out right, 630 00:32:07,079 --> 00:32:08,920 and the only way to get them is to pay 631 00:32:08,960 --> 00:32:10,440 for them, right. The one that I'm working on right 632 00:32:10,480 --> 00:32:13,200 now is an audio dot an audio diary where I 633 00:32:13,279 --> 00:32:15,359 just kind of talk about what I'm working on for 634 00:32:15,440 --> 00:32:17,880 devchat dot tv, and then you can just kind of 635 00:32:17,960 --> 00:32:19,839 keep tabs for the people that are kind of super 636 00:32:19,880 --> 00:32:22,839 fans of the shows, right, and so it's like, hey, 637 00:32:22,839 --> 00:32:24,119 this is what I'm working on, and this is what 638 00:32:24,119 --> 00:32:25,240 i'm doing and stuff like that. 639 00:32:25,559 --> 00:32:27,279 Speaker 2: The tools that I'm using for that, I'm just gonna 640 00:32:27,279 --> 00:32:27,720 put them out there. 641 00:32:27,759 --> 00:32:28,920 Speaker 1: I don't know how many people are going to be 642 00:32:28,960 --> 00:32:32,359 super interested in it, but I'm using hero dotfm to 643 00:32:32,440 --> 00:32:36,000 host the feeds, and I'm using thrive cart as the 644 00:32:36,039 --> 00:32:38,000 shopping cart, and then I'm tying it all together with 645 00:32:38,079 --> 00:32:42,920 Zapier Zapier dot com and it's working out pretty well 646 00:32:42,960 --> 00:32:46,480 so far. I'm pretty happy with it, and yeah, that's 647 00:32:46,519 --> 00:32:48,200 all coming together. You can go to dev chat dot 648 00:32:48,240 --> 00:32:50,799 tv slash Premium to get the shows. 649 00:32:51,359 --> 00:32:51,839 Speaker 2: The feeds. 650 00:32:51,880 --> 00:32:54,640 Speaker 1: The premium feeds are all ten dollars a month and 651 00:32:54,720 --> 00:32:57,200 you can go pick those up. But yeah, so if 652 00:32:57,240 --> 00:32:59,440 you don't want the ads, that's how you do it. 653 00:32:59,640 --> 00:33:02,359 And then and then I've also been training for a marathon. 654 00:33:02,359 --> 00:33:04,599 I'm gonna be running a marathon in about a month, 655 00:33:05,000 --> 00:33:07,920 and that's gonna be here in Utah Vlley. I live 656 00:33:07,960 --> 00:33:10,599 in Utah Valley, so it's not that far from here 657 00:33:10,880 --> 00:33:14,240 where I'm gonna be running it. And anyway, I'm pretty 658 00:33:14,279 --> 00:33:16,519 excited about it. I've been following a program that I 659 00:33:16,559 --> 00:33:19,519 bought on training Peaks, and so you go to training 660 00:33:19,519 --> 00:33:23,039 peaks dot com. I have been paying for the subscription 661 00:33:23,240 --> 00:33:25,640 plan on there, and what that does is it just 662 00:33:25,680 --> 00:33:28,359 allows you to pull the training programs in and then 663 00:33:28,440 --> 00:33:32,240 rearrange them and it syncs up with my Garmin watch, 664 00:33:32,960 --> 00:33:35,079 which I use to kind of do the pacing. 665 00:33:34,759 --> 00:33:35,559 Speaker 2: And stuff like that. 666 00:33:36,039 --> 00:33:38,000 Speaker 1: And so all I have to do is go in 667 00:33:38,079 --> 00:33:41,720 and select training, select my workouts, tell which one I'm doing, 668 00:33:42,400 --> 00:33:44,880 and I'm good to go. Right, I just go run it. 669 00:33:45,440 --> 00:33:48,680 And it's really nice. The weather's been nice lately. As 670 00:33:48,680 --> 00:33:51,319 long as I take my allergy pills, running outside is terrific. 671 00:33:51,519 --> 00:33:54,039 And so I've been really really happy with that, and 672 00:33:54,079 --> 00:33:56,599 I'm really excited to go out there. 673 00:33:56,680 --> 00:33:58,000 Speaker 2: This will be my second marathon. 674 00:33:58,559 --> 00:34:00,759 Speaker 1: Twenty six miles is a long way to run, but 675 00:34:01,240 --> 00:34:04,160 it is anyway, it's it's a lot of fun. 676 00:34:04,480 --> 00:34:05,559 Speaker 2: Have you run America early? 677 00:34:06,359 --> 00:34:10,639 Speaker 3: No? Never. I can barely do three miles. That's kind 678 00:34:10,639 --> 00:34:12,719 of my that's kind of my end. Go okay, like 679 00:34:12,760 --> 00:34:15,920 I'm doing three miles. I'm good right now. Yeah, I'm 680 00:34:16,159 --> 00:34:19,360 super nice. My ultimate goal is to do an iron Man. 681 00:34:19,519 --> 00:34:21,840 So it's like one hundred miles, right. 682 00:34:22,000 --> 00:34:24,199 Speaker 2: And iron Man is one hundred and forty miles. 683 00:34:25,079 --> 00:34:28,320 Speaker 1: It's what it's twenty's it's a marathon, so it's one 684 00:34:28,360 --> 00:34:32,119 hundred and it's twenty six point two miles run. It's 685 00:34:32,119 --> 00:34:35,679 a two and a half mile swim, and it's one 686 00:34:35,800 --> 00:34:39,000 hundred and ten point three miles or something like that. 687 00:34:39,039 --> 00:34:40,360 Speaker 2: Bike ride, So. 688 00:34:40,519 --> 00:34:43,599 Speaker 3: Yeah, they're here in Costa Rica. They do it, and 689 00:34:43,639 --> 00:34:46,559 they do it like next in the beach and they 690 00:34:46,599 --> 00:34:49,480 then jump to a bicycle in the mountain. So it's 691 00:34:49,559 --> 00:34:54,719 really crazy. So it's like it's hardcore hardcore definitely, it. 692 00:34:54,800 --> 00:34:55,519 Speaker 2: Is no joke. 693 00:34:55,760 --> 00:34:58,480 Speaker 1: And yeah, it's funny too because one of my neighbors 694 00:34:58,480 --> 00:35:02,599 did did it, and yeah, he weighs about sixty or 695 00:35:02,639 --> 00:35:07,599 seventy pounds less than I do, and I'm just imagining, yeah, yeah, 696 00:35:07,639 --> 00:35:09,719 I'm definitely gonna have to drop a few more pounds 697 00:35:09,719 --> 00:35:11,800 in order to be able to drag myself all over 698 00:35:11,840 --> 00:35:15,280 the place like that. But I figured that marathon was 699 00:35:15,320 --> 00:35:17,239 a good place to kind of get back into shape 700 00:35:17,239 --> 00:35:20,480 for it, So I'm planning on doing that. I think 701 00:35:20,519 --> 00:35:22,760 after I do that, I'll probably do a half iron Man, 702 00:35:22,800 --> 00:35:25,599 which is about seventy miles, and then we'll kind of 703 00:35:25,599 --> 00:35:28,360 see where things are sitting there and then kind of 704 00:35:28,400 --> 00:35:30,639 finish out the training. But the nice thing is is 705 00:35:30,639 --> 00:35:33,960 with training Peaks, and they have the iPhone app too, right, 706 00:35:34,039 --> 00:35:36,480 and so the apps just talk to each other, the 707 00:35:36,480 --> 00:35:39,039 iPhone app for Training Peaks, in the iPhone app for 708 00:35:39,079 --> 00:35:41,559 the garment, and then you just sink via bluetooth to 709 00:35:41,599 --> 00:35:45,079 your watch. The nice thing is is that you can 710 00:35:45,119 --> 00:35:48,280 get a training program for the iron Man stuff too 711 00:35:48,280 --> 00:35:50,840 write And so I can go online and I can 712 00:35:50,880 --> 00:35:54,199 find an iron Man seventy point three, which is the 713 00:35:54,199 --> 00:35:58,400 half iron Man race that I want to go run, right, 714 00:35:58,880 --> 00:36:01,000 and then once I have that date, then I can 715 00:36:01,039 --> 00:36:03,760 go find a training program that gets me too ready. 716 00:36:03,880 --> 00:36:06,679 About on that date. And so then what I do 717 00:36:06,800 --> 00:36:08,800 is I go in and I put the training program 718 00:36:08,840 --> 00:36:11,400 in and then I tell training peaks when the race 719 00:36:11,480 --> 00:36:14,480 is and it'll actually adjust the training program as long 720 00:36:14,519 --> 00:36:17,360 as I'm close so that I'm ready when it's time 721 00:36:17,400 --> 00:36:20,159 to go. And then and then I just have to 722 00:36:20,159 --> 00:36:22,880 follow the program, right, And so it's like, go swim 723 00:36:22,920 --> 00:36:25,559 this day, go run this day, go bike this day. Right, 724 00:36:26,000 --> 00:36:29,199 and I got I mean, I've I've had to spend 725 00:36:29,199 --> 00:36:32,800 some money, right because I have a running power meter. 726 00:36:32,880 --> 00:36:35,199 Speaker 2: I've got a biking power meter that I've got to 727 00:36:35,199 --> 00:36:35,920 put on my bike. 728 00:36:36,559 --> 00:36:39,599 Speaker 1: And then you know, swimming is just swimming, and yeah, 729 00:36:39,719 --> 00:36:42,920 you just get in and you do the work. But anyway, 730 00:36:42,920 --> 00:36:46,400 I've really been getting into the training and really enjoying it. 731 00:36:46,719 --> 00:36:49,360 And then yeah, so those are kind of the tools 732 00:36:49,360 --> 00:36:51,360 of the trade there. And then the last thing that 733 00:36:51,360 --> 00:36:54,679 I'm gonna pick So I am diabetic, and so it's 734 00:36:55,000 --> 00:36:57,360 I've been getting into the Keto diet. I've kind of 735 00:36:57,360 --> 00:37:00,159 done Keto off and on for a while. But the 736 00:37:00,199 --> 00:37:03,840 thing about keto is is that so if you're diabetic. 737 00:37:03,320 --> 00:37:05,000 Speaker 2: Your issue is controlling your blood sugar. 738 00:37:05,960 --> 00:37:10,400 Speaker 1: And so the nice thing about the keto diet is 739 00:37:10,480 --> 00:37:13,400 since you're not eating carbs, or not eating very many carbs, 740 00:37:13,679 --> 00:37:16,360 because everything has some carbs in it, even meat has 741 00:37:16,360 --> 00:37:19,679 some carbs in it, right, just not very many carbohydrates. 742 00:37:20,000 --> 00:37:22,880 So because you're not eating very many carbohydrates, you're not 743 00:37:22,920 --> 00:37:25,559 dealing with the fluctuations in your blood sugar, which is 744 00:37:25,599 --> 00:37:28,239 the problem for diabetics. And I feel a ton better 745 00:37:28,280 --> 00:37:29,960 when I'm sticking to it. One of the things that 746 00:37:30,000 --> 00:37:32,440 I've been buying that I've really been loving that has 747 00:37:32,440 --> 00:37:35,159 helped me out a lot is the Built Bar. And 748 00:37:35,480 --> 00:37:38,639 it's funny because I started buying them and then they 749 00:37:39,400 --> 00:37:41,280 move their factory and they moved it right next to 750 00:37:41,320 --> 00:37:44,119 my kids school, and so I didn't realize it. But 751 00:37:44,119 --> 00:37:47,639 they're a local company, and they taste like candy bars. 752 00:37:47,679 --> 00:37:50,000 I know they have sugar substitutes in it. Some keto 753 00:37:50,079 --> 00:37:55,559 purists are like, no sugar substitutes. But for the most part, 754 00:37:55,880 --> 00:37:58,440 I mean, they taste terrific. If I just need a treat, 755 00:37:58,519 --> 00:38:01,079 I just eat one and I'm just like, all right, 756 00:38:01,159 --> 00:38:02,880 I had a goodie. But for the most part, then 757 00:38:02,920 --> 00:38:06,000 you know, I can go back to eating the meats 758 00:38:06,039 --> 00:38:09,280 and the eggs and the and the fatty stuff, the nuts, 759 00:38:09,320 --> 00:38:12,239 the cheeses, all that good stuff, and it's it's really 760 00:38:12,239 --> 00:38:12,800 really good. 761 00:38:13,280 --> 00:38:14,960 Speaker 2: So I'm gonna shout out about that. I have a 762 00:38:14,960 --> 00:38:16,519 whole bunch of picks for Keto stuff. 763 00:38:16,559 --> 00:38:18,599 Speaker 1: I'll probably wind up picking that over the next while, 764 00:38:19,079 --> 00:38:20,440 but but those are my picks there. 765 00:38:20,679 --> 00:38:24,519 Speaker 2: So anyways, nice, Yeah, okay, how about you. You got 766 00:38:24,519 --> 00:38:25,559 stuff to shout out about? 767 00:38:25,880 --> 00:38:28,599 Speaker 3: Yeah, I got mine. So it's way different than yours, 768 00:38:28,880 --> 00:38:32,280 but it's it's kind of in the same. So okay, 769 00:38:32,800 --> 00:38:36,199 So I didn't exercise much, so I need to start 770 00:38:36,199 --> 00:38:38,159 from the Betty scratch. And I found this app that 771 00:38:38,239 --> 00:38:42,119 is called from Couch to five K. It's literally like 772 00:38:42,320 --> 00:38:45,280 from doing nothing until they put you in a in 773 00:38:45,400 --> 00:38:48,480 a in a training that you get to five K. 774 00:38:49,239 --> 00:38:51,119 So I start doing that and it took me like 775 00:38:51,360 --> 00:38:55,119 onto and a half two times today, so and it 776 00:38:55,239 --> 00:38:58,000 worked great for me. Five five K right now it's 777 00:38:58,079 --> 00:39:01,519 like pretty good. I feel way better now. I really 778 00:39:01,559 --> 00:39:03,840 recommend it just I don't know if it's an Android 779 00:39:03,920 --> 00:39:06,159 version of it, but it's an iOS version and but 780 00:39:06,199 --> 00:39:08,599 it basically what it does is based on the time 781 00:39:08,639 --> 00:39:11,639 you put it to it. They said, okay, start walking. 782 00:39:11,960 --> 00:39:14,960 I don't know, two minutes and then run one minute, 783 00:39:15,239 --> 00:39:17,639 and then two minutes one minute, and then the next day. Okay, 784 00:39:17,679 --> 00:39:20,440 now do the other way around. Run two minutes, walk 785 00:39:20,480 --> 00:39:23,159 one minutes, and that's and then it goes up up 786 00:39:23,199 --> 00:39:25,800 in the intensity at the point that you just run 787 00:39:26,000 --> 00:39:28,400 five k, you know, go through five k in just 788 00:39:28,400 --> 00:39:31,760 one really nice, really really nice. And the other thing 789 00:39:31,800 --> 00:39:35,960 I'm gonna pick is Wasiluck West Luck is this smart 790 00:39:36,039 --> 00:39:40,159 lock I recently buy one is the wislog is the 791 00:39:40,280 --> 00:39:43,199 cheapest log that I can found, but I really like 792 00:39:43,239 --> 00:39:46,920 why it's the brand. I have cameras and logs and 793 00:39:47,000 --> 00:39:49,599 all the little things, and I just put it in 794 00:39:49,639 --> 00:39:52,199 the in the main door on my on my house 795 00:39:52,719 --> 00:39:55,519 and it works really nice. It was super easy to install. 796 00:39:55,679 --> 00:40:00,199 The app works perfectly, and I'm trying to build I 797 00:40:00,320 --> 00:40:05,800 built that no j Guess Library unofficial API because I 798 00:40:05,920 --> 00:40:09,119 need I need to do some experiments with it. Because 799 00:40:09,760 --> 00:40:13,599 my mom owns mini markets here in Costa Rica and 800 00:40:13,639 --> 00:40:16,599 with the COVID pretty much all of them got closed. 801 00:40:17,159 --> 00:40:21,920 So we're trying this idea of having like mini markets 802 00:40:21,960 --> 00:40:26,800 without employees. Oh interesting, So yeah, So my my genius 803 00:40:26,880 --> 00:40:31,280 idea is basically do Amazon go in the third world basically. 804 00:40:31,840 --> 00:40:34,880 So the idea behind it is people will get into 805 00:40:34,920 --> 00:40:38,360 the front door of the store, store work, work. I mean, 806 00:40:38,519 --> 00:40:39,920 they're not gonna be in the street. They're gonna be 807 00:40:39,960 --> 00:40:43,119 inside residents, right, and they just hit a button in 808 00:40:43,159 --> 00:40:46,800 their phone that would be an app that I'm writing 809 00:40:47,559 --> 00:40:50,960 that wild checked. If the user lives in the condo, 810 00:40:52,000 --> 00:40:55,159 it will open the door. It will set up the 811 00:40:55,159 --> 00:40:58,079 POS system ready with a person that just opened the 812 00:40:58,079 --> 00:41:00,960 door to make sure that when they get the invoices 813 00:41:01,159 --> 00:41:04,039 is on their name and they can just pick their things, 814 00:41:04,920 --> 00:41:08,440 barcode scan it and just place their credit card and 815 00:41:08,840 --> 00:41:12,480 to go, then the door will be closed. So that's 816 00:41:12,519 --> 00:41:14,880 kind of the idea that I'm working right now. And 817 00:41:15,000 --> 00:41:16,639 why is luck is helping me a little bit that 818 00:41:16,719 --> 00:41:21,639 I was able to sniff the request and just replicated 819 00:41:21,719 --> 00:41:22,920 and J yes. 820 00:41:22,639 --> 00:41:27,840 Speaker 1: So nice. What tool are you using to stiff the request? 821 00:41:28,239 --> 00:41:29,239 Speaker 3: I use Charles. 822 00:41:29,639 --> 00:41:31,920 Speaker 2: Charles such a good tool. I've used. 823 00:41:32,039 --> 00:41:34,440 Speaker 3: Charles is amazing. Yeah, yeah, it's amazing. 824 00:41:35,039 --> 00:41:36,039 Speaker 2: It's really good stuff. 825 00:41:36,239 --> 00:41:41,719 Speaker 1: Yeah, anything named Charles has to be awesome, right, probably. Yeah, 826 00:41:41,800 --> 00:41:43,599 this is why I reached back and pat myself on. 827 00:41:44,119 --> 00:41:46,880 Speaker 4: Anyway, they they I didn't know I used them, I 828 00:41:46,960 --> 00:41:51,280 use the like since two tenty thirteen, but they recently 829 00:41:51,440 --> 00:41:53,599 well I don't know how recently, but they now they 830 00:41:53,639 --> 00:41:54,719 have an iOS app. 831 00:41:55,079 --> 00:41:55,880 Speaker 2: I can realize that. 832 00:41:56,360 --> 00:41:59,320 Speaker 3: Yeah, so before you have to pro see your phone 833 00:41:59,440 --> 00:42:02,519 to your computer, yes, and all the sniff in there 834 00:42:02,760 --> 00:42:06,119 and then if you have to do SS certificate, it 835 00:42:06,239 --> 00:42:08,800 was nice. Blah blah blah. Now they have an iOS app, 836 00:42:09,000 --> 00:42:12,639 which kind of I was like surprised Apple accept that, 837 00:42:12,920 --> 00:42:15,920 but I don't know. Apple is just weird. So basically 838 00:42:16,000 --> 00:42:18,400 you have the exact same experience on the on the 839 00:42:18,440 --> 00:42:20,639 app that you have in the desktop. So I was 840 00:42:20,679 --> 00:42:23,000 able to just sniff this thing around and check it 841 00:42:23,039 --> 00:42:26,239 out the requests, the headers and everything, and I just 842 00:42:26,280 --> 00:42:29,519 put a small note library that I'm able to just 843 00:42:29,599 --> 00:42:32,960 lock and unlock the phone. That sorry, the. 844 00:42:32,960 --> 00:42:36,800 Speaker 1: Luck nice, very nice. Yeah, Charles is super handy. I 845 00:42:36,800 --> 00:42:38,960 didn't know they had an iOS app. That's that's gotta 846 00:42:38,960 --> 00:42:40,239 be nice too, because. 847 00:42:40,239 --> 00:42:41,280 Speaker 3: It is super nice. 848 00:42:41,400 --> 00:42:42,480 Speaker 2: Yeah, very cool. 849 00:42:42,519 --> 00:42:45,079 Speaker 1: Well, if people want to connect with you, Freddie, where 850 00:42:45,079 --> 00:42:46,280 do they find you online? 851 00:42:46,480 --> 00:42:50,920 Speaker 3: I'm mostly on Twitter. My Twitter handle is f Monthes 852 00:42:51,559 --> 00:42:55,400 like Freddy Montes, just the f months. I twittered Spanish, 853 00:42:55,519 --> 00:42:58,239 but if I get, you know, questions in English, I 854 00:42:58,280 --> 00:43:01,199 will be more than happy to answer them. I share 855 00:43:01,599 --> 00:43:05,920 tips about design, web design and web development all the 856 00:43:05,960 --> 00:43:08,239 time on Spanish. I was doing that in English, but 857 00:43:08,280 --> 00:43:13,320 then I realized that there are so many content in English, 858 00:43:13,480 --> 00:43:16,280 and people here in Latin America is trying to learn 859 00:43:16,559 --> 00:43:20,400 web development and programming, but language is a big barrier here. 860 00:43:20,559 --> 00:43:24,679 I honestly thought that that was in the past, but no, 861 00:43:24,840 --> 00:43:28,199 there's still people struggling to learn English. So for me 862 00:43:28,280 --> 00:43:29,599 to try to help it, it's like, Okay, I'm going 863 00:43:29,679 --> 00:43:32,519 to try to share some content in Spanish, and it's 864 00:43:32,519 --> 00:43:35,079 been really good, so I'm always there and also on 865 00:43:35,119 --> 00:43:39,880 Instagram saying at f months and I gave up basically 866 00:43:39,920 --> 00:43:42,639 everywhere on f months everywhere. 867 00:43:43,000 --> 00:43:43,559 Speaker 2: Nice. Yeah. 868 00:43:43,559 --> 00:43:45,599 Speaker 1: I have a really good friend that he was in 869 00:43:45,639 --> 00:43:47,639 the Ruby community, but he was seeing the same thing 870 00:43:47,679 --> 00:43:50,559 a lot of people. English was just not cutting it 871 00:43:50,639 --> 00:43:53,880 for him for whatever reason, you know, whether it was 872 00:43:54,519 --> 00:43:58,960 specific knowledge or specific language, they just didn't speak it 873 00:43:58,960 --> 00:43:59,760 well enough or whatever. 874 00:44:00,239 --> 00:44:00,880 Speaker 2: And so he was. 875 00:44:00,800 --> 00:44:06,079 Speaker 1: Putting out Ruby content in Spanish and people were just 876 00:44:06,119 --> 00:44:09,239 eating it up like crazy because it was it was 877 00:44:09,280 --> 00:44:12,360 something that they could consume that was natural for them, 878 00:44:12,559 --> 00:44:14,960 and so yeah, we definitely need more of that out 879 00:44:14,960 --> 00:44:17,159 there for people who don't speak English. 880 00:44:17,360 --> 00:44:21,440 Speaker 3: Yeah, free code con reasently translate the whole side in 881 00:44:21,480 --> 00:44:23,639 the Spanish all the programs. 882 00:44:23,960 --> 00:44:26,400 Speaker 2: Yeah, that's amazing, That is amazing. 883 00:44:26,800 --> 00:44:29,760 Speaker 1: Yeah all right, cool, Well let's go ahead and wrap 884 00:44:29,840 --> 00:44:33,039 up here. Thanks for coming. This was terrific conversation and 885 00:44:33,039 --> 00:44:36,119 hopefully some folks go check out Component store and see 886 00:44:36,159 --> 00:44:38,000 what it has to offer for them and 887 00:44:38,039 --> 00:44:39,760 Speaker 2: Folks until next time, max out