1 00:00:06,759 --> 00:00:10,560 Hey, everybody, thanks for coming to another episode of Adventures and Angler. 2 00:00:10,759 --> 00:00:16,480 I'm the host Aarreon Frost, and on our panel we have Brian Love Hello 3 00:00:17,039 --> 00:00:20,440 in Europe, in Wales, women Wales, and I should say as the 4 00:00:20,480 --> 00:00:27,559 well say hi aii. You know that's what they said to me, Hi 5 00:00:27,640 --> 00:00:31,600 Hi. All right, that's cool, all right, and then that's all 6 00:00:31,640 --> 00:00:35,640 on the panel today we're paneled light right, it's a lot of pressure on 7 00:00:35,679 --> 00:00:42,560 Brian, that's all right. For our guests, we got Thomas Hello, 8 00:00:42,960 --> 00:00:46,439 you want to go ahead and introduce yourself? Sure? So, hi everyone. 9 00:00:46,560 --> 00:00:50,960 My name is Stormstram and yeah, I'm a Google the Open Expert Angler 10 00:00:51,240 --> 00:00:56,240 contacting in Switzerland, working on open source writing loo post trading angler stuff like 11 00:00:56,280 --> 00:01:00,320 this. How'd you say your last Namely, it's not my real name. 12 00:01:00,359 --> 00:01:07,599 It's just like the online Oh yeah yeah, I didn't know, yeah, 13 00:01:07,719 --> 00:01:11,400 pseudonym. Yeah yeah, it's like it was like very long time ago, 14 00:01:11,480 --> 00:01:15,200 like when I was creating like my first Gmail account, and then somehow like 15 00:01:15,239 --> 00:01:17,640 I created all the accounts based on that, and I was kind of too 16 00:01:17,680 --> 00:01:19,840 late to switch it back, so I kind of stick with it. So 17 00:01:19,840 --> 00:01:26,319 what's your real name? It's Tomash. Hey, Hey, okay, yeah, 18 00:01:26,640 --> 00:01:30,400 hery, where's that from? Basically it sounds German, but like I'm 19 00:01:30,400 --> 00:01:34,959 from Slovakia, Okayah. In the Middle Ages, they were actually like a 20 00:01:34,000 --> 00:01:40,680 lot of German like migrants into those areas which is now in Slovakia because there 21 00:01:40,680 --> 00:01:42,760 was like a lot of like silver mines and stuff like this, and also 22 00:01:42,799 --> 00:01:47,000 there was like this black plague you know, which killed like three quarters of 23 00:01:47,079 --> 00:01:49,560 Europe and then kind of it was like all empty, so they were like 24 00:01:49,640 --> 00:01:55,000 running around and like repopulating. So the yay, let's go over there late 25 00:01:57,239 --> 00:02:00,560 West, Let's go back to the West. We went to parties. Yeah, 26 00:02:00,959 --> 00:02:07,759 I'm coming back all right. Well, hark alight, it's easier. 27 00:02:08,240 --> 00:02:19,199 That's confused to people, is the Okay. So you're kind of an expert 28 00:02:19,199 --> 00:02:23,639 on in your elements, right, like a web component things with angler. 29 00:02:23,919 --> 00:02:25,599 Yeah, well I'm not would not say like expert, but let's say I 30 00:02:25,639 --> 00:02:30,520 spend like quite some time lately like working with elements and like trying to figure 31 00:02:30,520 --> 00:02:32,199 out like how to use them the best way and stuff like this. Right, 32 00:02:32,840 --> 00:02:37,520 Brian, do you think he's an expert? You know, he looks 33 00:02:37,560 --> 00:02:40,199 like an expert. I mean, he looks pretty serious. Yeah, I'm 34 00:02:40,199 --> 00:02:45,240 gonna say, I think you're an expert. I don't think many people have 35 00:02:45,400 --> 00:02:50,800 done a lot with uh with web components and stuff. So if you spend 36 00:02:50,840 --> 00:02:53,240 a serious amount of time, I think that you qualify as an expert. 37 00:02:53,560 --> 00:02:58,159 It was like back when ja query started, I had dorged around with it 38 00:02:58,240 --> 00:03:00,719 for like two months, and people were like, oh, a gentleman is 39 00:03:00,719 --> 00:03:08,599 an expert. That's a very good metaphor you kind of auar elements expert for 40 00:03:08,719 --> 00:03:13,159 right now and for right now, that's a very good designation, like for 41 00:03:13,280 --> 00:03:16,960 right now, for this very sure. But anyway, like I think it's 42 00:03:17,479 --> 00:03:21,280 right, yeah, yeah, because it can. The thing is like it 43 00:03:21,319 --> 00:03:24,439 can really solve like some some use cases and some problems which are like very 44 00:03:24,439 --> 00:03:29,400 hard to solve the otherwise, let's say, so they can be pretty useful 45 00:03:29,439 --> 00:03:34,360 in those kind of situations. Are some of those situations that you're using any 46 00:03:34,360 --> 00:03:37,520 of your elements for? Yeah, right, So so the thing is like, 47 00:03:37,919 --> 00:03:40,319 I mean, if you if you're working like a huge enterprise organization with 48 00:03:40,439 --> 00:03:45,479 tons of developers or let's say tens of teams and hundreds of developers, then 49 00:03:45,560 --> 00:03:49,159 usually you have a couple of options, right, So either you are building 50 00:03:49,199 --> 00:03:53,360 like some crazy model of it, and that most people and organizations realize that 51 00:03:53,439 --> 00:03:57,639 this doesn't really go anywhere, or maybe you go like very fancy and like 52 00:03:57,680 --> 00:04:00,080 you go for like a model reports. I was listening actually this morning a 53 00:04:00,120 --> 00:04:03,639 podcast with or something actually the Adventures in Angler about modern reports, and many 54 00:04:03,680 --> 00:04:06,639 people do that. But there is kind of like also a dis thurd way 55 00:04:06,680 --> 00:04:10,840 where you can go like for kind I call it like multi SPA. So 56 00:04:10,879 --> 00:04:15,879 you have let's say twenty to fifty or even like US eighty plus applications and 57 00:04:15,919 --> 00:04:18,759 they kind of look the same, and they are basically integrated using a standard 58 00:04:18,879 --> 00:04:23,000 HTML hyperlinks, and if they are like fast enough, then for users it 59 00:04:23,040 --> 00:04:26,600 can be pretty simless experience. Right, So you do one flow in one 60 00:04:26,639 --> 00:04:30,160 and another another one and you continue here and there and it all kind of 61 00:04:30,199 --> 00:04:33,759 works. But usually in case of this kind of solution like multi SPA, 62 00:04:33,920 --> 00:04:40,000 it happens to be so that there are like some components which are used across 63 00:04:40,240 --> 00:04:45,639 many of those spas. Right, So let's say let's imagine like some document 64 00:04:45,639 --> 00:04:48,199 doc here where you need like to browse some documents for like the case or 65 00:04:48,240 --> 00:04:54,279 something like this, So and then these kind of reusable components or like kind 66 00:04:54,279 --> 00:04:59,160 of sub applications are usually implemented using like library, like a standard legual library. 67 00:04:59,360 --> 00:05:01,560 So you can do it nowadays with agular coli of ENGI packagery, of 68 00:05:01,639 --> 00:05:05,639 a great build. Everything is amazing, and I mean you can have like 69 00:05:05,759 --> 00:05:11,560 even a very good CI pipeline. So basically whenever you release a new version 70 00:05:11,560 --> 00:05:15,160 of the library, it can trigger like a build of all the consumers. 71 00:05:15,279 --> 00:05:19,399 So you basically rebuild all these pass and maybe you even deploy them into like 72 00:05:19,439 --> 00:05:26,319 some test environment. But I highly doubt that all this organizations can continuously like 73 00:05:26,399 --> 00:05:30,920 deliver every of those up like to the prod, like with every little change. 74 00:05:30,040 --> 00:05:33,240 So usually some of the newer apps they go like straight through, but 75 00:05:33,360 --> 00:05:36,759 like there is always like some legency, maybe like some hybrid aps. It's 76 00:05:36,759 --> 00:05:40,959 not like the green field if it's like some big organization which exists for like 77 00:05:41,000 --> 00:05:45,240 a decades. So and in that case, what can happen is that some 78 00:05:45,319 --> 00:05:48,680 of those consumers applications of that library will not be deployed and you will get 79 00:05:48,759 --> 00:05:53,720 multiple versions of that library in the PROD, which may or may not cause 80 00:05:53,759 --> 00:05:56,959 problems depending on the APIs and so on and so on like let's say, 81 00:05:57,480 --> 00:06:01,560 or complicate your back end dramatically because it has to support multiple versions of like 82 00:06:01,639 --> 00:06:06,839 the API to retrieve the data because this library could not have been like released 83 00:06:06,839 --> 00:06:11,920 properly. Or even if you have let's say, like some state synchronization between 84 00:06:11,959 --> 00:06:15,439 those sputs like because of that component, this can cause serious problems because if 85 00:06:15,480 --> 00:06:19,399 the component or like the state which is holds changes, it will not be 86 00:06:19,439 --> 00:06:23,920 compatible and stuff like this. So these are like some real life problems which 87 00:06:23,959 --> 00:06:28,480 I encountered in these kind of organizations. And this can be really solved with 88 00:06:28,680 --> 00:06:31,560 elements, So it's kind of specific. Then again, I can imagine that, 89 00:06:31,600 --> 00:06:34,759 like in this basic organization is not so rare. Let's say, Yeah, 90 00:06:35,240 --> 00:06:41,279 I just wanted the people listening to know that when he said eighty apps 91 00:06:41,319 --> 00:06:44,560 on the page, he said it with a straight face. Yes, sure, 92 00:06:45,439 --> 00:06:47,480 I was here you're talking about I've heard this term kind of thrown around, 93 00:06:47,480 --> 00:06:49,639 and I've seen a couple of talks about it, but I still can't 94 00:06:49,680 --> 00:06:54,480 honestly wrap my head around it completely. But there's this idea of like micro 95 00:06:54,639 --> 00:06:58,319 front end architecture, right, And is that what you're kind of referring to 96 00:06:58,439 --> 00:07:00,480 when you talk about having like multiple apps all on the same page, run 97 00:07:00,480 --> 00:07:03,120 at the same time. No, no, no, So this is a 98 00:07:03,199 --> 00:07:09,319 very good question because so microfront and is like you have a one shell and 99 00:07:09,399 --> 00:07:13,279 this loads multiple SPUs and we will get to that later. Okay, so 100 00:07:13,279 --> 00:07:16,639 that's like microfrontas that's like the most hip thing and like depends, but sometimes 101 00:07:16,639 --> 00:07:19,839 a great way to do things. Sometimes it doesn't match. What I was 102 00:07:19,839 --> 00:07:25,800 speaking about is like multispo So like to reiterate that, imagine you have like 103 00:07:26,319 --> 00:07:32,079 eighty standalone Angular applications who live on their own context, got it? Okay, 104 00:07:32,240 --> 00:07:36,560 right, you're switching between them exactly, and as you follow the business 105 00:07:36,560 --> 00:07:41,399 flow, you switch between them. So they in isolation can be small, 106 00:07:41,759 --> 00:07:46,040 maintainable. You can throw them away or implement them with React or with view 107 00:07:46,079 --> 00:07:49,000 whatever as you want to evolve, or with web components or with Angular fifteen 108 00:07:49,040 --> 00:07:53,680 who knows, like how old it gets. From the consumer point of view, 109 00:07:53,680 --> 00:07:58,040 they look like one huge portal, but actually those that are independently deployed 110 00:07:58,040 --> 00:08:01,199 applications, and currently we have more than eighty of those, let's say, 111 00:08:01,519 --> 00:08:05,720 and then if those applications share those components, is when it can happen. 112 00:08:05,920 --> 00:08:09,959 Yeah, right, So now I'm loading up those components every time. There's 113 00:08:09,959 --> 00:08:13,600 no caching, and I can have multiple versions. Yes, so the cashing 114 00:08:13,800 --> 00:08:18,160 maybe that's also kind of an issue, but usually you have a good network 115 00:08:18,199 --> 00:08:22,480 in the enterprise environment. But the problem is these multiple versions. This can 116 00:08:22,560 --> 00:08:26,639 really like make your day a bad experience when you are dealing with side kind 117 00:08:26,680 --> 00:08:31,800 of like synchronization bugs. Then like this is a bit older kind of state. 118 00:08:31,159 --> 00:08:35,120 And then like to get the overview because you know the version of the 119 00:08:35,480 --> 00:08:39,080 of the apps or the applications themselves which are deployed, but do you know 120 00:08:39,559 --> 00:08:43,080 every version of every sublibrary of every deployed application stuff like this, so it 121 00:08:43,080 --> 00:08:46,960 gets pretty complex. That's the name are exactly. So we will build like 122 00:08:48,000 --> 00:08:50,679 some kind of like custom dashboard to actually track these kind of things. But 123 00:08:52,360 --> 00:08:56,879 yeah, in these kind of situations, you can really get a big wins 124 00:08:56,039 --> 00:09:01,519 using elements because once you are using an element or like any kind of web 125 00:09:01,559 --> 00:09:05,639 component basically doesn't need to be angular element. But I mean angular element is 126 00:09:05,679 --> 00:09:09,919 like just just easier to reread than value of web components. Suddenly you don't 127 00:09:09,960 --> 00:09:13,200 have a dependency on the library, so you actually don't need to rebuild anything, 128 00:09:13,559 --> 00:09:18,399 and the component itself is deployed as element somewhere as a bundle, and 129 00:09:18,480 --> 00:09:22,000 those consumer applications just consume it as a UURL. And because it's like this, 130 00:09:22,720 --> 00:09:26,840 if I deploy this document DOSIA or whatever that is as a new version, 131 00:09:28,200 --> 00:09:31,279 all these pass will get it immediately because the urals stayed the same. 132 00:09:31,759 --> 00:09:39,360 So my question is I'm sitting listenings and I'm thinking I don't need this necessarily, 133 00:09:39,080 --> 00:09:45,440 right, but some people do. So what's my lateness test? Like 134 00:09:45,519 --> 00:09:50,440 what questions can I ask myself to be Like OI, should I listen to? 135 00:09:50,120 --> 00:09:54,440 Should I do what Thomas is talking about? Like? What are the 136 00:09:54,679 --> 00:09:58,399 things to ask yourself? What are the scenarios I can look forward to say, 137 00:09:58,960 --> 00:10:03,720 OHI my bed time to get into what Thomas is talking about. That's 138 00:10:03,720 --> 00:10:09,399 a very good point. So for this thing in particular, Like the first 139 00:10:09,480 --> 00:10:15,320 question is am I in this multispast scenario? So I am having multiple independent 140 00:10:15,399 --> 00:10:20,639 applications running which kind of look the same and are implementing business flow which you 141 00:10:20,799 --> 00:10:22,720 just like switch from one up to another. So that's like the first thing. 142 00:10:24,279 --> 00:10:28,080 Second thing is if I am in this scenario, are there some components 143 00:10:28,120 --> 00:10:33,399 which are shared across these applications? Let's say like a document editor or like 144 00:10:33,440 --> 00:10:37,120 a let's say customer profile or something which is kind of always the same and 145 00:10:37,200 --> 00:10:43,039 provides this context in all those applications. It's always the same, but like 146 00:10:43,159 --> 00:10:46,399 you know, you have to display it in these various contexts. So and 147 00:10:46,480 --> 00:10:50,559 in these kind of cases this may be a good approach. Another thing which 148 00:10:50,559 --> 00:10:54,480 we were exploring is like every application has like this header right where you have 149 00:10:54,600 --> 00:11:00,840 like some basic stuff like alerts and like maybe like some tasks for a workflow 150 00:11:00,879 --> 00:11:03,879 for employees and stuff like this. This also usually is always the same in 151 00:11:05,000 --> 00:11:09,399 all those applications and can communicate just by like passing some small context in terms 152 00:11:09,399 --> 00:11:13,919 of like okay, this is the case ID or stuff like this. So 153 00:11:13,960 --> 00:11:16,679 how does this compare to So you listen to Victors who came on our show 154 00:11:18,120 --> 00:11:22,200 and talked about mono repos and how it can share code using libraries, and 155 00:11:22,279 --> 00:11:24,519 you know, they've got this fantastic tool I've used and Victor was kind of 156 00:11:24,519 --> 00:11:28,000 really talking about called an X and now that makes it possible to do some 157 00:11:28,080 --> 00:11:33,559 of this. How does what you're talking about compare Like, why did you 158 00:11:33,679 --> 00:11:37,240 perhaps or the companies the clients that you're working with she used to go this 159 00:11:37,360 --> 00:11:39,399 route versus like a mono repo and can you share a little bit of that 160 00:11:39,519 --> 00:11:45,879 backstory with us. So the thing is also what was what Victor was saying, 161 00:11:46,039 --> 00:11:48,600 is even if you have mono repo and like let's say you use it 162 00:11:48,639 --> 00:11:52,679 with not about ethics, and then let's say you just rebuilt and the retail 163 00:11:52,720 --> 00:11:56,399 is like the affected things based on the dependency graph, as he said, 164 00:11:56,519 --> 00:12:01,960 like the deployment and the like the like creation of the artifacts and then like 165 00:12:01,000 --> 00:12:05,440 the deployment of the artifacts. It's kind of like two separate things in the 166 00:12:05,519 --> 00:12:09,320 narmal world as far as I remember. So basically, as you run your 167 00:12:09,360 --> 00:12:15,320 built, maybe you rebuild the affected projects based on library change, and then 168 00:12:15,440 --> 00:12:20,879 the artifacts gets to some repository whatever can be docta imagis can be just like 169 00:12:20,159 --> 00:12:24,320 zip files whatever that is. And then there is kind of like the separate 170 00:12:24,399 --> 00:12:28,399 process where you decide like when to release stuff. Even if you use mono 171 00:12:28,480 --> 00:12:33,720 repo, and if you don't have like synchronized deployment cycles of all these applications, 172 00:12:33,720 --> 00:12:37,799 you can get the same problems. So you still can get to a 173 00:12:37,840 --> 00:12:43,039 situation when some application was deployed and some not if you deploy everything always, 174 00:12:43,080 --> 00:12:46,519 you will not have this problem. If everything is done with the feature flags 175 00:12:46,519 --> 00:12:50,799 only and you always go with everything to pro you will not have this problem. 176 00:12:50,840 --> 00:12:54,600 And that would be a solution in terms of like our organization where I'm 177 00:12:54,600 --> 00:13:00,159 currently helping. The decision was based also based on like experience and already like 178 00:13:01,039 --> 00:13:03,519 the kind of workflow they were having, and like there is a momentum over 179 00:13:03,559 --> 00:13:07,799 a couple of years and so on and so on, so like they didn't 180 00:13:07,840 --> 00:13:11,639 really have this freedom. Okay, let's now do a total revolution and like 181 00:13:11,679 --> 00:13:16,399 go with NX. Got it. So their starting point was like this huge, 182 00:13:16,480 --> 00:13:20,480 huge monolith. It's like all these eightiespos were basically inside right, and 183 00:13:20,519 --> 00:13:24,639 then like the first first step was kind of like modulized. Then take it 184 00:13:24,759 --> 00:13:28,320 apart to make it at least a bit maintainable. And who knows, like 185 00:13:28,440 --> 00:13:31,799 what the future holds about it's like all nice and modulized. Maybe it can 186 00:13:31,879 --> 00:13:35,840 be brought back into mono Apple, we will see. Tell us a little 187 00:13:35,840 --> 00:13:39,639 bit more about how you're using angular elements in these scenarios and and all these 188 00:13:39,679 --> 00:13:41,879 products. I just also want to be clear all the projects that you're talking 189 00:13:41,879 --> 00:13:46,519 about these eighties spots. They're all Angular applications, right, yeah, not 190 00:13:46,679 --> 00:13:50,000 like mixed with react or view or so now, no, it's timesler and 191 00:13:50,279 --> 00:13:54,919 like angular jas and hybrids. Got it? Okay, So I just want 192 00:13:54,919 --> 00:14:00,159 to make sure that I'm understanding what you're saying you're doing, just to make 193 00:14:00,200 --> 00:14:05,759 sure we're clear. You have like one app that's kind of like the shell 194 00:14:05,879 --> 00:14:09,879 maybe the header and the footer, and then you're loading different apps in the 195 00:14:09,919 --> 00:14:13,799 main content or no, no, what are you doing? Are they different 196 00:14:15,039 --> 00:14:18,559 ur ls entirely or what is going on? So I have the same origin 197 00:14:20,120 --> 00:14:24,279 and I have different than after that, after slash, I have different contexts, 198 00:14:24,600 --> 00:14:30,240 and there is like some proxy and those are eighty standalone Anglar applications. 199 00:14:30,399 --> 00:14:35,600 That is, so like my app dot com slash A, my app dot 200 00:14:35,879 --> 00:14:41,840 use the editor case product whatever that is, Okay, multiple spats, and 201 00:14:41,919 --> 00:14:48,320 they implement business flows that we navigate from one another using hyperlinks because they all 202 00:14:48,360 --> 00:14:52,000 live on the hyper links. And just so I understand, each hyperlink will 203 00:14:52,039 --> 00:14:56,919 do a full page load to another SPA, right, Okay, Okay, 204 00:14:56,200 --> 00:15:01,759 I'm understanding. Okay, But because it's Angler fast enough, because modern Angler 205 00:15:01,840 --> 00:15:05,840 can start like in subsecond times, it's like five hundred milliseconds and basically if 206 00:15:05,840 --> 00:15:09,000 you put some static template which kind of look like this original layout, so 207 00:15:09,039 --> 00:15:13,639 that's not a problem. And you're doing this for enterprise, so that people 208 00:15:13,720 --> 00:15:16,399 are doing this from workstations on like a network connection. Okay, Right, 209 00:15:18,000 --> 00:15:26,360 so you've got a bunch of different spas that link to each other and they 210 00:15:26,759 --> 00:15:31,159 use similar components. So if I go to like the you know, the 211 00:15:31,240 --> 00:15:35,360 first SPA, it might have the same button in the same model from every 212 00:15:35,360 --> 00:15:39,759 other SPA. Yes, but I would say it's more like on the level, 213 00:15:39,799 --> 00:15:43,879 not like of these atomic components like a button, but more like on 214 00:15:43,000 --> 00:15:48,320 components customer profile or like a case or like a document editor, so something 215 00:15:48,360 --> 00:15:52,600 like a bigger chunks or bigger chunks too. Yeah. Yeah, instead of 216 00:15:52,639 --> 00:15:56,519 sending someone over to a different spot for their customer profile, maybe I just 217 00:15:56,600 --> 00:16:03,399 have one customer profile component that can be used among the multiple spats, because 218 00:16:03,440 --> 00:16:07,559 it's usually for these kind of things which you need contextually very often just to 219 00:16:07,600 --> 00:16:11,559 be able to do your work. Yeah, and then I'm guessing a lot 220 00:16:11,600 --> 00:16:18,679 of on top of just component sharing, you're probably also sharing services to do 221 00:16:18,720 --> 00:16:22,000 the communication with the back end. So in that particular case like this. 222 00:16:22,200 --> 00:16:25,559 As I said, this component is kind of like bigger. So let's say 223 00:16:25,639 --> 00:16:27,759 let's concrete example, like it's like this, this document does here, so 224 00:16:27,879 --> 00:16:33,399 like for a case or for whatever reason, contextually needs some documents. So 225 00:16:33,440 --> 00:16:37,960 and this is implemented using Angular elements. So this is totally self contained. 226 00:16:37,000 --> 00:16:41,519 It has its own backundary services, it has its own interceptors and stuff like 227 00:16:41,559 --> 00:16:45,919 this. Yeah, and all it needs is to get like some small context 228 00:16:45,000 --> 00:16:49,919 from the parent usually like some case idea or stuff like this. And maybe 229 00:16:51,000 --> 00:16:52,840 you can pole the case idea out of the URL. Maybe I don't know, 230 00:16:52,919 --> 00:16:57,799 right, like just patent pass it through like a standard component input. 231 00:16:59,320 --> 00:17:03,319 Yep, yeah, you're an Angular element, okay, exactly. And I 232 00:17:03,400 --> 00:17:08,720 have this this customer profile component like this big reusable Angular element. Right, 233 00:17:08,720 --> 00:17:11,920 it's kind of self contained with its services and knows how to do its own 234 00:17:11,960 --> 00:17:17,400 AHTTV interceptors. So I have these big, reusable, shareable components. And 235 00:17:18,160 --> 00:17:22,680 to Brian's question, Brian's like, well, why don't you build this with 236 00:17:22,920 --> 00:17:29,000 NX so that the customer profile gets built into your bundle. But what you're 237 00:17:29,039 --> 00:17:32,640 saying is I don't want to include it in the bundle. I want to 238 00:17:32,680 --> 00:17:37,319 deploy that Angular element to its own URL, and then you just load it 239 00:17:37,720 --> 00:17:42,160 real time as the website loads. You don't actually bring it in at build 240 00:17:42,160 --> 00:17:47,000 time. You load it at runtime for the clients. So those are the 241 00:17:47,079 --> 00:17:52,160 two main differences between what actually last week. Last week was Victor right, 242 00:17:52,200 --> 00:17:55,640 Ryan's right. So that's kind of funny that we have these two kind of 243 00:17:56,079 --> 00:18:00,559 I'm not I don't know if they oppose each other, but they're different elementary 244 00:18:00,799 --> 00:18:03,720 complimented. I would say, the other kind of approach that I've seen, 245 00:18:03,960 --> 00:18:06,000 you know, I know, we want to get into kind of how you're 246 00:18:06,039 --> 00:18:08,839 actually using this and you're using these structural directors and stuff. The other proach 247 00:18:08,880 --> 00:18:12,480 that I've seen, and Victor briefly mentioned it is, you know, because 248 00:18:12,519 --> 00:18:18,160 you're all all your eighty spas are all Angular, you could go the route 249 00:18:18,200 --> 00:18:21,319 of like, oh, I'm actually going to create a library, like an 250 00:18:21,519 --> 00:18:26,599 NG library, build that and then publish that up to artifactory or a private 251 00:18:26,680 --> 00:18:30,640 MPM repository and then consume that. Again, it would be bill time, 252 00:18:30,839 --> 00:18:34,960 but you basically consume that by importing that into your NG module and the imports 253 00:18:36,039 --> 00:18:38,559 right and say bring in this module that does the customer profile, and now 254 00:18:38,599 --> 00:18:44,200 I have that app h customer profile valuable in my Anglo application that I can 255 00:18:44,279 --> 00:18:47,599 use. But you're not going either of those or two approaches. You're saying, 256 00:18:47,680 --> 00:18:49,440 let's go with an element that's a customer element, and then we're not 257 00:18:49,519 --> 00:18:55,599 even really relying on Angular exactly. So what you describe was our starting point, 258 00:18:56,119 --> 00:19:00,839 okay, the standard library, and we imported all those consumers and during 259 00:19:00,880 --> 00:19:03,559 the build time it was integrated and that was working quite well. But then 260 00:19:03,599 --> 00:19:08,359 there was this problem that even though we could guarantee that they all get all 261 00:19:08,400 --> 00:19:12,000 these consumers with this newest version of the library get deployed, let's say, 262 00:19:12,039 --> 00:19:15,680 to test environment at the same time, so we don't have any compatibility issues, 263 00:19:17,519 --> 00:19:22,079 not all of those applications go exactly at the same time to plot for 264 00:19:22,200 --> 00:19:26,839 various reasons. So it's not like perfect continuous delivery or how to call it. 265 00:19:26,160 --> 00:19:30,960 Well, that makes sense. You can't deploy all the spas at the 266 00:19:30,000 --> 00:19:33,279 same time, right, That wouldn't make sense. You kind of could if 267 00:19:33,279 --> 00:19:37,200 you had really like a perfect process and perfect like feature toggling and all these 268 00:19:37,279 --> 00:19:41,359 kind of things in like ideal world, maybe you could. But at least 269 00:19:41,400 --> 00:19:45,960 in our organization. This is not the reality. So some things can go 270 00:19:45,079 --> 00:19:48,640 to straight there, and some things are like let's say released once a week, 271 00:19:48,960 --> 00:19:53,000 that's like the longest timelts. But with your approach, I don't have 272 00:19:53,119 --> 00:20:00,480 to deploy the spas together because the spas, they're all loading the component from 273 00:20:00,599 --> 00:20:07,400 a real a single production location. So the second I deploy my element, 274 00:20:07,000 --> 00:20:11,680 all the spas, whether they've released in the last year or not, are 275 00:20:11,720 --> 00:20:15,960 gonna get my latest thing right exactly. So I'm gonna tell you why I 276 00:20:17,160 --> 00:20:22,279 like this approach and why I think it's good for some scenarios. I feel 277 00:20:22,279 --> 00:20:30,000 like Thomas, you've embraced the intention of the Web Component API. The Web 278 00:20:30,039 --> 00:20:37,359 Component API was made, I think, to load bundles at runtime and not 279 00:20:37,519 --> 00:20:42,720 necessarily webpack them in at build time, and so I think that you've embraced 280 00:20:44,400 --> 00:20:49,279 that intentionality of that API better than like an nx Mono REPO bringing in at 281 00:20:49,319 --> 00:20:55,079 build time webpack scenario. Right, So I like it. I think it's 282 00:20:55,279 --> 00:20:59,920 good in some scenarios, not all, but in the scenarios where it fits. 283 00:21:00,440 --> 00:21:03,279 I think this is a fantastic idea, and I love that you've wrapped 284 00:21:03,279 --> 00:21:07,240 it up so that other people could use it, because these are hard problems 285 00:21:07,279 --> 00:21:12,759 to solve, right, And I love that if I get in that scenario, 286 00:21:14,160 --> 00:21:18,759 I now know you've walked down that path and have a production ready app 287 00:21:18,960 --> 00:21:22,079 that's kind of gone through a lot of the pains I might have ended up 288 00:21:22,160 --> 00:21:25,200 in, like instead of having to set my dumbster on fire accidentally, maybe 289 00:21:25,200 --> 00:21:29,720 you've kind of solved some of those. There are some fires too, there 290 00:21:29,759 --> 00:21:37,319 are some fires sold else. That's cool. I like this different approach. 291 00:21:37,359 --> 00:21:41,839 I think it's a good idea. I think cool. As you said, 292 00:21:41,920 --> 00:21:45,599 no, like there are different requirements, different environments with different histories, and 293 00:21:45,680 --> 00:21:48,960 like if you're starting fresh, maybe you can go for one thing when you 294 00:21:49,000 --> 00:21:55,200 have like some like history and like some environments which you cannot just like imagine 295 00:21:55,200 --> 00:21:57,000 it's not there. Maybe this can help. It all depends, And it's 296 00:21:57,039 --> 00:22:00,960 as you said, like it's always good to have multiple options to approach like 297 00:22:02,000 --> 00:22:04,640 a single problem, so and you can just pick what seats are the best. 298 00:22:06,240 --> 00:22:08,200 Cool. I think this far in the podcast, we've done a pretty 299 00:22:08,240 --> 00:22:11,480 good job. At least I feel like I understand what you're saying, and 300 00:22:11,519 --> 00:22:15,960 I hope that we're breaking it down on levels. We're all level. Engineers 301 00:22:15,960 --> 00:22:21,119 of all levels can can understand this. So my question is it sounds like 302 00:22:21,799 --> 00:22:27,000 you've bundled this up and it's ready for you people to share what you've done. 303 00:22:27,240 --> 00:22:32,440 If I wanted to get in on some of this action, where can 304 00:22:32,480 --> 00:22:34,839 I go to learn more about kind of what you've done, as we didn't 305 00:22:34,839 --> 00:22:40,200 really get into details yet, but basically like to do this, you have 306 00:22:40,240 --> 00:22:42,119 like kind of two options. So if you build an element and you serve 307 00:22:42,160 --> 00:22:47,680 it like from some URL, you can basically include a script tag with a 308 00:22:48,039 --> 00:22:52,359 URL in your like head section of your page so that it means it loads 309 00:22:52,400 --> 00:22:57,119 before you start using that tag in your templates and your components and your consumer 310 00:22:57,200 --> 00:23:03,279 angler application. And that will just great, but this may make your startup 311 00:23:03,319 --> 00:23:06,480 time worse because it's all this extra javaska we'll have to load. So and 312 00:23:06,519 --> 00:23:11,119 because of that reason, I basically build a library, which makes this very 313 00:23:11,200 --> 00:23:15,319 lazy and like as lazy as it's possible, because it kind of waighs for 314 00:23:15,440 --> 00:23:21,039 loading of this bundle to the latest possible moment, which is when the component 315 00:23:21,079 --> 00:23:23,960 tries to render that element, so it can be not just with the routing 316 00:23:25,039 --> 00:23:26,480 that like, Okay, I go to some route as it's usually standard with 317 00:23:26,519 --> 00:23:32,480 Angular, it can be just hidden behind the ng if for example, so 318 00:23:32,559 --> 00:23:36,400 when it's behind the end, if it's not rendered an until you kind of 319 00:23:36,400 --> 00:23:40,359 click on some button or some other kind of interaction which says that condition in 320 00:23:40,440 --> 00:23:44,920 the ng if true, which renders that tag, it will be postponed. 321 00:23:44,960 --> 00:23:48,680 The loading of the element bundle will be postponed until that time. And this 322 00:23:48,920 --> 00:23:55,000 was implementing the library called Angular Extension Slash Elements, which you can find like 323 00:23:55,039 --> 00:23:59,519 on githop. And it also has like a dog's website with like examples where 324 00:23:59,519 --> 00:24:03,960 it can play around. So what it does is like you can basically there 325 00:24:03,000 --> 00:24:08,079 is some showcase where you like can load in this kind of way like material 326 00:24:08,119 --> 00:24:14,240 web components or like ionic stuff or like some stencil built stuff, any kind 327 00:24:14,240 --> 00:24:17,759 of web component which lives on some UL basically so you can play around. 328 00:24:18,440 --> 00:24:22,079 And there are also like some contributions already for community. Because it started like 329 00:24:22,359 --> 00:24:29,880 very simple that basically pass the URL of that element bundle into the directive which 330 00:24:30,079 --> 00:24:33,599 does all the work. But this was kind of annoying when you kind of 331 00:24:33,640 --> 00:24:37,359 wanted to use an element which is repeated multiple times, and then this erl 332 00:24:37,480 --> 00:24:40,880 was like this long string like in your template multiple times. So there was 333 00:24:40,920 --> 00:24:45,039 already a couple of community like pull requests which for example, add the feature 334 00:24:45,119 --> 00:24:49,839 that you can pre configure URLs for the text in your module. So you 335 00:24:49,880 --> 00:24:55,880 can have like a lazy elements module for feature, and you say, okay, 336 00:24:55,960 --> 00:25:00,160 my document editor teg will come from this you and stuff like this. 337 00:25:00,839 --> 00:25:04,480 There are even like more stuff coming. So for example, we want to 338 00:25:04,759 --> 00:25:08,960 add a flag that it's possible to set each of those element bundles should be 339 00:25:10,000 --> 00:25:15,279 preloaded, for example, or like let's say we want to specify that when 340 00:25:15,319 --> 00:25:18,400 the element bundle is loading, you want to show like a loading template, 341 00:25:18,440 --> 00:25:22,960 so let's say some spinner or in case it fails, we can also show 342 00:25:22,960 --> 00:25:26,160 like some error template. And this is already possible, like to specify the 343 00:25:26,200 --> 00:25:30,440 directive itself, but we also want to add a possibility to specify this globally 344 00:25:30,480 --> 00:25:37,839 for example. So let me ask a question because I'm seeing I'm seeing a 345 00:25:37,880 --> 00:25:45,079 scenario where in a really complicated multi SPA enterprise scenario where you have a leg 346 00:25:45,200 --> 00:25:49,880 up over over certain kind of the other way the web back way of doing 347 00:25:49,920 --> 00:25:57,079 things. So let's say my SPA I'm on Team A and we're building SPA 348 00:25:57,720 --> 00:26:04,359 A right, and our spot A is going to use your customer profile component, 349 00:26:06,000 --> 00:26:08,880 right, and we're going to load it as a remote web component like 350 00:26:08,960 --> 00:26:12,839 what you're talking about. You know, if Team A, if we're building 351 00:26:14,000 --> 00:26:22,160 Angular eight, we haven't upgraded to nine yet, but your customer profile component 352 00:26:22,400 --> 00:26:29,960 is on nine already. It's okay to have mismatched versioning because it's it's an 353 00:26:30,119 --> 00:26:33,559 encapsulated app. Is that true? Or am I wrong? Or is that 354 00:26:33,599 --> 00:26:38,200 true? You're right, it's totally isolated. In that scenario. I'm ensuring 355 00:26:38,559 --> 00:26:45,279 both A I don't have version conflicts and b everyone has the latest version of 356 00:26:45,319 --> 00:26:49,400 the component regardless of where that the app is deployed recently. That's true. 357 00:26:49,559 --> 00:26:53,799 Yeah, So the only only kind of issue my encounter is related with like 358 00:26:53,880 --> 00:27:00,440 the zone JITs. So if you're writing like a new anglad Element scratch, 359 00:27:00,480 --> 00:27:03,079 I would highly recommend like to goes all less. And if you're writing something 360 00:27:03,160 --> 00:27:08,799 new kind of can if you are converting already existing Angular implementation to Element, 361 00:27:08,799 --> 00:27:14,519 which is also a valid use case, there are like some possible pitfalls like 362 00:27:14,720 --> 00:27:21,599 relating to zone jays. So basically it's it's very contrived like things coming together 363 00:27:21,640 --> 00:27:26,759 at the same time. When basically you kind of your element has an input 364 00:27:26,319 --> 00:27:30,759 and your apparently is setting some values to that input, and that's all right. 365 00:27:30,799 --> 00:27:33,480 This works perfectly. And let's say then you are displaying that in your 366 00:27:33,519 --> 00:27:37,519 template in your element or do some stuff with engine on changes, this also 367 00:27:37,559 --> 00:27:42,240 works perfectly, no problem at all. The problem starts when in that on 368 00:27:42,519 --> 00:27:49,039 changes you basically emit a new value of a stream, and let's say that 369 00:27:49,119 --> 00:27:53,400 new value of a stream will be then transformed into a back end request, 370 00:27:55,000 --> 00:27:59,160 and this back end requests will give you some value in some times short time 371 00:27:59,160 --> 00:28:06,200 in the future, this will not trigger and unfortunately because that stream will run 372 00:28:06,319 --> 00:28:10,920 in the parent zone, not in the element zone. So this is something 373 00:28:11,039 --> 00:28:15,279 very very specific. Like I basically open the issue on Agua repository on GitHub. 374 00:28:15,319 --> 00:28:21,240 I was discussing this with the Gli Passion or passion or how we pronounce 375 00:28:21,279 --> 00:28:23,640 the guy's name, who is kind of like the maintainer of Zone Jays, 376 00:28:23,680 --> 00:28:30,119 and he bent very like in depth on that and explained why exactly this happens 377 00:28:30,160 --> 00:28:33,799 in that issue and that he will like explore further like how to deal with 378 00:28:33,839 --> 00:28:38,440 it the best way. But momentarily, what he recommends is in those kinds 379 00:28:38,440 --> 00:28:44,559 of cases, what you can do is to share the parent consumer application engie 380 00:28:44,680 --> 00:28:48,720 zone with the element, so you can basically pass it to the child and 381 00:28:48,799 --> 00:28:52,079 all these problems disappear. So this is also what we are doing, and 382 00:28:52,119 --> 00:28:56,799 this is also documentary on the doc website, where is also the link to 383 00:28:56,839 --> 00:29:00,640 that kidab issue. If you are interested in the intricate sis of like elements 384 00:29:00,720 --> 00:29:06,599 zone and addicts how they come together, you can explore that there. If 385 00:29:06,640 --> 00:29:12,200 I wrote an on push and my input changes, and I funnel that input 386 00:29:12,279 --> 00:29:17,039 into a stream into some RX thing that's going to go to the back end, 387 00:29:18,599 --> 00:29:25,200 and my component has on push turned on right for the change detection strategy, 388 00:29:25,640 --> 00:29:30,920 then when that HTTP request comes back and I've used the acinc pipe, 389 00:29:32,039 --> 00:29:36,359 I should re render. So I wouldn't have this issue if I do it 390 00:29:36,359 --> 00:29:38,599 that way, right, So there's ways around what you're talking about. True. 391 00:29:40,680 --> 00:29:44,359 So unfortunately, the thing is like even if you use on push and 392 00:29:44,400 --> 00:29:48,000 even if you use acink pipe, actually what ASIN pipe does is there is 393 00:29:48,039 --> 00:29:52,359 like this internal call like change detection mark for changes, but actually it doesn't 394 00:29:52,400 --> 00:29:57,400 work without the zone. You still need somebody to trigger the detecting of changes. 395 00:29:57,440 --> 00:30:00,720 So like, if you don't want to share let's say the parent zone, 396 00:30:00,720 --> 00:30:07,160 which is also possible, you can basically include a workaround which will call 397 00:30:07,319 --> 00:30:14,400 explicit change the texture change detector detect changes method. So marking for changes is 398 00:30:14,400 --> 00:30:18,319 not enough. You have to do exactly. This is exactly the reason why 399 00:30:18,400 --> 00:30:21,519 even if you used one push and acid pint, which kind of should work, 400 00:30:22,079 --> 00:30:23,640 will not work. Like we try that. Unfortunately it's not the case. 401 00:30:25,319 --> 00:30:29,759 So I would need to kind of defensively programmed in streams. Yeah, 402 00:30:29,799 --> 00:30:33,920 I probably need to use some tap that does a change detection, forces the 403 00:30:33,000 --> 00:30:37,480 change detection exactly. Yeah, that's the one way to do it. Yeah, 404 00:30:37,599 --> 00:30:40,599 sure, yeah, so yeah, that would be like a second option, 405 00:30:40,720 --> 00:30:42,559 like if you don't mind this, like instead of like sharing parent zone 406 00:30:42,599 --> 00:30:45,480 like because maybe well, I mean, if your if your parent is not 407 00:30:45,480 --> 00:30:48,759 angler, you don't have this problem at all anyway. You get wrongs only 408 00:30:48,799 --> 00:30:52,279 if there is no zone, so that's okay. But yeah, if your 409 00:30:52,319 --> 00:30:55,440 parent is angler and you don't want to share zone, you can still do 410 00:30:55,519 --> 00:31:02,119 this and explicitly trigger change. I mean, ultimately, if this section is 411 00:31:02,119 --> 00:31:07,039 only happening you know once in a while, and by one time once a 412 00:31:07,160 --> 00:31:10,279 second, that's really not that big of a deal, right, Like, 413 00:31:10,920 --> 00:31:14,240 especially if it's only once per back in request, like that's not gonna happen, 414 00:31:14,279 --> 00:31:17,640 but once every two or three minutes, so exactly. So in our 415 00:31:17,720 --> 00:31:22,319 case, it was like only once couple of minutes when basically the context changed 416 00:31:22,319 --> 00:31:25,839 and we had to load like a different customer profile or something like this. 417 00:31:26,160 --> 00:31:29,240 So this can be even once every ten minutes or something like this. So 418 00:31:29,279 --> 00:31:32,720 that's not the performance issue at all. No, no, but I can't 419 00:31:32,720 --> 00:31:37,000 imagine cases where it would be. All right, we got a few Oh 420 00:31:37,039 --> 00:31:40,839 wow, wait, do we just get the voice of a ghost? Who 421 00:31:40,880 --> 00:31:45,160 is that? Hello? Hello, it's Peter Baker Darwin. Who is that? 422 00:31:45,079 --> 00:31:52,200 It's Shy coming to your life from my car in Israel? Oh nice, 423 00:31:52,960 --> 00:32:00,640 welcome. Continue continue you're in the end of the episode because thanks for 424 00:32:00,680 --> 00:32:07,319 stopping by though. All right, So my last question was the Angular elements. 425 00:32:07,400 --> 00:32:12,319 I think it's found a great home for like NG upgrade. Like if 426 00:32:12,319 --> 00:32:15,119 you're trying to upgrade an angular jess app and you're trying to do like a 427 00:32:15,119 --> 00:32:21,279 bottom up approach, and so you you know, build the bottom leaf nodes 428 00:32:21,319 --> 00:32:25,319 in angular and then you wrap them into angular elements and then you consume that 429 00:32:25,400 --> 00:32:30,920 with angular jests. I think that's found a great home there. I haven't 430 00:32:30,960 --> 00:32:37,079 heard of too many other people using it because currently the size of those elements 431 00:32:37,160 --> 00:32:42,359 is huge because you have to bring in Yeah, and if you even do 432 00:32:42,400 --> 00:32:46,559 the router link in the most router, which is huge, and like the 433 00:32:46,640 --> 00:32:52,039 angular elements right now are just big. I'm guessing you've done some looking into 434 00:32:52,200 --> 00:32:57,920 IVY to say ivy's going to change the angular elements story by x How does 435 00:32:57,960 --> 00:33:01,160 IVY affect what you're talking about, like my concern about the bundle sizes. 436 00:33:01,880 --> 00:33:06,160 Okay, that's very good point. So first of all, like currently let's 437 00:33:06,160 --> 00:33:08,920 say Angular seven or eight without iv like when you start, like you start 438 00:33:09,000 --> 00:33:14,839 like at around one hundred and thirty seven kilobytes like Hello World. So depending 439 00:33:14,839 --> 00:33:16,599 on the use case, maybe too much, maybe not too much. But 440 00:33:16,680 --> 00:33:21,559 as you said, like once you start adding stuff like router and like your 441 00:33:21,599 --> 00:33:23,839 own libraries and whatever that is, then it can grow, like just like 442 00:33:24,000 --> 00:33:28,119 HTP client and the whole HTP module, HTP back and stuff like this. 443 00:33:28,680 --> 00:33:30,599 But the truth is like, yeah, if you like, if you are 444 00:33:30,599 --> 00:33:35,200 like in this kind of enterprise, environment and you end up like around three 445 00:33:35,240 --> 00:33:37,200 hundred four hundred kilos, it's not such a big deal. Plus if it's 446 00:33:37,279 --> 00:33:42,359 laidy loaded, lazy loaded and is cashed by like the server and stuff like 447 00:33:42,400 --> 00:33:45,079 this, it's kind of okay. But yeah, like for other use cases, 448 00:33:45,119 --> 00:33:49,440 more like in public Internet, this could cause issues. So the IVY 449 00:33:49,599 --> 00:33:53,279 will make this better. So the thing is there is like this amazing article 450 00:33:53,400 --> 00:33:58,759 from Monfreschtire who kind of goes in depth on that. So the thing is 451 00:33:58,839 --> 00:34:02,079 currently in Anglar, we have this helper function which is called like create Angular 452 00:34:02,119 --> 00:34:07,760 element or something like this. So basically passing a component and this helper function 453 00:34:07,880 --> 00:34:14,519 will do all this heavy lifting for you. That it basically wraps that angular 454 00:34:14,519 --> 00:34:17,360 component as a custom HTML element, so it has to do all these like 455 00:34:17,400 --> 00:34:23,360 bindings between attributes and then the component inputs and know when to trigger the change 456 00:34:23,360 --> 00:34:28,119 detection for example. Also a very big feature. What it does for you 457 00:34:28,280 --> 00:34:32,920 is it enables you to pass also complex objects, not just like primitive things 458 00:34:32,960 --> 00:34:37,519 like strings and numbers, but it alls to pass in objects and stuff like 459 00:34:37,519 --> 00:34:40,519 this. And this is done currently, but this is the old style. 460 00:34:40,559 --> 00:34:45,960 This is without IVY and basically the elements will get much better once this helper 461 00:34:46,039 --> 00:34:52,599 function creates angular element from a component is implemented using ivy, which will be 462 00:34:52,719 --> 00:34:57,719 an upcoming feature most likely. And this article which I mentioned from like montford 463 00:34:57,760 --> 00:35:01,440 Shire is basically explode how this could look like. So he kind of rites 464 00:35:01,480 --> 00:35:06,320 it by hand, this wrapper with the help of Ivy, and then he 465 00:35:06,360 --> 00:35:09,159 gets like to I think like fifty kilobytes got it. Yeah, And one 466 00:35:09,159 --> 00:35:12,599 of the things that like Frost he was bringing up was like, you could 467 00:35:12,639 --> 00:35:15,639 have angular elements that are different versions, right or maybe ones on nine, 468 00:35:15,760 --> 00:35:20,199 ones on a, ones on seven or whatever it is, you would likely 469 00:35:20,239 --> 00:35:23,000 still I mean even with ivy I guess Ivy's future anyways, but you'd still 470 00:35:23,000 --> 00:35:27,599 be paying that bundle size because you've got to bring in the entire run time 471 00:35:27,920 --> 00:35:31,199 right of Angular whatever that is the should be client or whatever you're doing the 472 00:35:31,280 --> 00:35:35,639 route. And so if you've got these different versions, you've got this issue 473 00:35:35,639 --> 00:35:38,480 as well. But what you're kind of saying is in an enterprise scenario, 474 00:35:39,159 --> 00:35:44,960 maybe this solution is a win because it saves money and allows teams to work 475 00:35:45,000 --> 00:35:49,400 together and all this kind of thing they can develop in isolation. Yeah, 476 00:35:49,400 --> 00:35:55,480 they could exactly isolation without how multimillion dollar deploy system to do all right kind 477 00:35:55,559 --> 00:36:00,440 of deployment cycle. And plus like you have a caching so actually cashing of 478 00:36:00,519 --> 00:36:05,400 element cannot be like with standard edgediplication because usually I have like this hash in 479 00:36:05,440 --> 00:36:08,320 a file name, but the element bundle has to always be called the same, 480 00:36:08,320 --> 00:36:10,800 so you can have like a stable link, right, So and to 481 00:36:10,840 --> 00:36:15,000 do that you basically have to implement like e tax on our server. So 482 00:36:15,079 --> 00:36:17,719 if you are I don't know how people know like the e tax, but 483 00:36:17,800 --> 00:36:22,639 basically it's the way where you make like it is tiny, tiny request like 484 00:36:22,719 --> 00:36:28,599 the ETag hash which was calculated for you beforehand to the server and the server 485 00:36:28,719 --> 00:36:31,400 tells you okay, this this change or not. So in enterprise scenario, 486 00:36:31,480 --> 00:36:35,960 usually you get cashed after the first request and then it's just your cashed or 487 00:36:36,079 --> 00:36:40,119 it's just a three or four not modified response exactly exactly. So this is 488 00:36:40,159 --> 00:36:44,480 not really a big deal if you don't have like these millions of new users 489 00:36:44,519 --> 00:36:47,599 every day. If it's just this recurring couple of thousands which get cashed very 490 00:36:47,639 --> 00:36:52,119 fast, and then it's like no problem. Yeah, one thing I would 491 00:36:52,159 --> 00:36:55,760 like to mention before we end, Like so this solution has we spoke about, 492 00:36:55,800 --> 00:37:00,400 like it's like for this kind of like a sub application. But actually 493 00:37:00,760 --> 00:37:04,480 what is also possible nowadays, like this library which we discussed, is to 494 00:37:04,519 --> 00:37:07,840 do like a proper microfrontens and to enable that. Like the biggest problem with 495 00:37:07,880 --> 00:37:12,880 that was if you even if you layserloaded the element, you still kind of 496 00:37:12,920 --> 00:37:15,960 had to hardcode that element into Angular templates. You had to say, like 497 00:37:16,280 --> 00:37:21,719 my document editor, and then okay, you could dynamically set the UURL where 498 00:37:21,760 --> 00:37:24,400 to load a bundle, but you already had to like commit to that that 499 00:37:24,559 --> 00:37:29,519 in this place, in this template there will be a document editor or something 500 00:37:29,599 --> 00:37:32,239 like this. And this kind of sucks because with the micro front ends, 501 00:37:32,280 --> 00:37:37,119 maybe you want to make it really like configurable so based on whatever, what 502 00:37:37,280 --> 00:37:40,159 kind of user, what kind of customer, what kind of context you want 503 00:37:40,199 --> 00:37:45,840 to load different apps. So and this was not really matching that well. 504 00:37:45,000 --> 00:37:47,800 So there is like this new feature which kind of is a bit hecky, 505 00:37:47,840 --> 00:37:52,000 but it's kind of possible because the directive takes it away from the from the 506 00:37:52,039 --> 00:37:58,559 real dome. It makes it into template. You basically can dynamically set the 507 00:37:58,679 --> 00:38:01,559 tag name and when it it puts it back, it will be that new 508 00:38:01,639 --> 00:38:05,679 tag which you configured. So for example, document editors, you start like 509 00:38:05,719 --> 00:38:08,360 with a deef or with a span or whatever, and once when you put 510 00:38:08,360 --> 00:38:13,760 it back, it certainly will be like my organization document editor and this works. 511 00:38:13,880 --> 00:38:19,199 This works in Angular and the browser will pick up that teg as a 512 00:38:19,199 --> 00:38:23,039 custom element and instantiated and everything works. So this really enables you to do 513 00:38:23,159 --> 00:38:29,039 fully configurable micro frontains where you can even like load the configuration from the back 514 00:38:29,119 --> 00:38:32,280 end or like even pass it like however you like, and then basically build 515 00:38:32,320 --> 00:38:37,800 it up through euros and custom tags wherever you want. So this is already 516 00:38:37,800 --> 00:38:44,599 available today using your Angular elements or excuse me, Angular dash extensions for such 517 00:38:44,719 --> 00:38:50,440 elements package right, yes, hackey in a way that like, I don't 518 00:38:50,480 --> 00:38:54,199 know all the implications of this, all the all the implications that's all tested, 519 00:38:54,280 --> 00:38:57,719 but give it a try. No, No, it works. It 520 00:38:57,800 --> 00:39:00,440 works. That's not a problem. It works. I just don't know if 521 00:39:00,480 --> 00:39:04,639 it could break in the future because it kind of depends on how Anglar does 522 00:39:04,679 --> 00:39:08,679 Megie templates. Ah, Okay, so it's tightly coupled to the way Anglar 523 00:39:08,760 --> 00:39:14,119 does Engie templates. Let's put it that way, gotcha. Gotcha. Yeah, 524 00:39:14,320 --> 00:39:17,719 that's funny. All right. Well, Thomas and some people listening are 525 00:39:17,719 --> 00:39:22,079 going to gravitate to this, you know, they're going to feel the need 526 00:39:22,239 --> 00:39:23,960 for each other. So where can we go to find out more? And 527 00:39:23,960 --> 00:39:27,519 where can we go to get a hold of you? Right, So, 528 00:39:27,920 --> 00:39:30,039 if you want to like discuss these kind of things, just pit me on 529 00:39:30,079 --> 00:39:35,480 Twitter, like at Thomas tryan. And the library itself, like of course, 530 00:39:35,559 --> 00:39:39,360 is on the kitab so it's like Anglar Dash extension slash elements and that's 531 00:39:39,480 --> 00:39:44,320 also like the website, so okay, like a website is also hosted on 532 00:39:44,360 --> 00:39:49,320 GitHub, so it's Angular Dash Extensions, dot kitup ioslash elements. I guess 533 00:39:49,320 --> 00:39:52,519 we can put the link like the description of the of the podcast so that 534 00:39:52,599 --> 00:39:54,440 they can just click on it. But if you just if you just google 535 00:39:54,519 --> 00:39:59,760 for Angular Dash Extension slash elements, you will definitely find something and there will 536 00:39:59,760 --> 00:40:02,400 be more links. Okay, can you put that into the show, into 537 00:40:02,440 --> 00:40:07,880 the chat on the right, of course, and then can you also link 538 00:40:07,920 --> 00:40:09,400 to your Twitter account because we want to make sure people can get a hold 539 00:40:09,440 --> 00:40:13,920 of you. Right. So I think that was great. I actually learned 540 00:40:13,920 --> 00:40:15,920 a lot and I appreciate that you came on and took the time to break 541 00:40:15,920 --> 00:40:20,159 this down for me. To be honest, before we started, I didn't 542 00:40:20,239 --> 00:40:23,559 understand the benefits, but you you peeled it back in a way that I 543 00:40:23,599 --> 00:40:30,559 actually now understand why this would be super beneficial. So I'm going to go 544 00:40:30,559 --> 00:40:34,800 ahead and give this a try because I think I have a scenario where this 545 00:40:34,920 --> 00:40:37,440 might this might work. So I appreciate you coming on and checking it out. 546 00:40:37,440 --> 00:40:38,719 So thank you very much, man, thank you very much. Happy 547 00:40:38,719 --> 00:40:43,119 to hear that. Let's get on to the picks, Brian, you got 548 00:40:43,119 --> 00:40:45,800 some picks you want to go first? I do. I got to pick. 549 00:40:45,079 --> 00:40:50,800 My pick is No to Atlanta and Angie Atlanta coming up in February, 550 00:40:51,199 --> 00:40:54,159 so I think tickets just are on sale now, so if you want to 551 00:40:54,239 --> 00:40:59,079 check that out, you can go online and grab your tickets for our next 552 00:40:59,199 --> 00:41:02,960 year's event. Note Atlanta, Yeah, which is combined with Anglan. If 553 00:41:02,960 --> 00:41:07,199 you are going to Angilanta, Angilanta I think is Wednesday, Thursday, Friday, 554 00:41:07,239 --> 00:41:09,599 and then not Atlanta is going to be Monday, Tuesday, Wednesday, 555 00:41:09,840 --> 00:41:13,119 and so there's going to be a full stack day in the middle of the 556 00:41:13,159 --> 00:41:17,039 week. And if you're doing note on the back end and you're doing angler 557 00:41:17,119 --> 00:41:20,360 on the front end. This might be a conference for you to kind of 558 00:41:20,400 --> 00:41:30,679 check out. That sounds cool. Oh, the voice is shy hunting you. 559 00:41:30,800 --> 00:41:36,519 Awesome. I've been listening all the time I've been here. You're watching 560 00:41:36,599 --> 00:41:46,559 us. He's behind you right now. Don't you have any picks, bro, 561 00:41:47,199 --> 00:41:52,119 I have one pick. So my pick is a medium blog ofsan l 562 00:41:53,440 --> 00:41:59,960 Basal, which is an Israeli Angular blogger, which is just finished the meeting 563 00:42:00,119 --> 00:42:07,119 with is a good friend and he writes tons and tons of really really valuable 564 00:42:07,239 --> 00:42:13,800 articles on Angular and also does a few open source projects. So I will 565 00:42:13,880 --> 00:42:17,320 put a link. I will write you when I get back home, Frosty, 566 00:42:17,679 --> 00:42:23,800 but it's Nathan L and b A S A L. That's my pick. 567 00:42:24,639 --> 00:42:30,000 Thanks man. I appreciate you freaking us out and reminding us that you're 568 00:42:30,039 --> 00:42:38,800 always watching. That's awesome, all right. So my pick is, uh. 569 00:42:39,280 --> 00:42:43,920 A lot of people will remember kind of react Gate from a few weeks 570 00:42:43,960 --> 00:42:46,599 ago, and one of the things that came out of there was some books 571 00:42:46,679 --> 00:42:53,039 that that some people said to read books in the react that's interesting. Yeah, 572 00:42:53,079 --> 00:42:57,239 so they yeah, they said read. You know. Tatiana Mac was 573 00:42:57,280 --> 00:43:00,440 like, hey, read some of these books, and I I felt like, 574 00:43:00,519 --> 00:43:02,079 yeah, I need to read some of these books. One of them 575 00:43:02,320 --> 00:43:07,320 is my pick. It's called How to Be Less Stupid About Race and it's 576 00:43:07,400 --> 00:43:10,719 on the show notes page if you want to go check it out. But 577 00:43:12,440 --> 00:43:20,079 I'm reading this book and like chapter two, I'm crying, and it's a 578 00:43:20,119 --> 00:43:25,280 real kind of I don't know, it's an awakening of sorts. It's a 579 00:43:25,320 --> 00:43:29,480 hard book for me to process. But it's a good book, I think 580 00:43:29,519 --> 00:43:34,360 for a lot of people to read, especially if you live in a country 581 00:43:34,400 --> 00:43:40,679 where people think racism doesn't exist anymore, or racism continually is getting downplayed. 582 00:43:42,280 --> 00:43:47,360 This book is fantastic. And I'm at a point where I realized, I'm 583 00:43:47,400 --> 00:43:53,800 realizing right now everything I was ever taught about race in America was not true. 584 00:43:53,920 --> 00:43:58,519 And it's hard to process that. Like, but it's a good book, 585 00:43:58,599 --> 00:44:00,639 is all I'm gonna say. I'm gonna let other people make their own 586 00:44:00,639 --> 00:44:04,280 conclusions. But great, great books. So that's where I'll leave that. 587 00:44:04,920 --> 00:44:07,079 Thomas, do you have any do you have any picks? Right? So 588 00:44:08,000 --> 00:44:10,960 to lift it up a bit or maybe not, Like, so the thing 589 00:44:12,039 --> 00:44:14,880 is not like I grew up like in the in the nineties. Let's say 590 00:44:14,880 --> 00:44:17,199 I was the teenature and at that time, like there was like this shut 591 00:44:17,280 --> 00:44:22,679 out of music like called new metal. So maybe some of the listeners are 592 00:44:22,760 --> 00:44:27,039 like acquaintance with that, so like stuff like system of down Corner and Slipnote, 593 00:44:27,239 --> 00:44:30,599 and the thing is like Slipnotes, Like the band just released a new 594 00:44:30,639 --> 00:44:37,000 album like twenty years after and it's actually really epic. I was so surprised, 595 00:44:37,000 --> 00:44:39,119 like they still like really have it, at least from my subjective point 596 00:44:39,159 --> 00:44:42,960 of view. So if you are a fan and you didn't listen to it 597 00:44:43,000 --> 00:44:45,679 like in a long time because it's kind of like old, give it a 598 00:44:45,760 --> 00:44:50,320 try and see, like if it still does for you too, the new 599 00:44:50,360 --> 00:44:54,159 slipnot. Yeah, I really like that. Well, Thomas, thanks for 600 00:44:54,199 --> 00:44:57,559 coming on. I had a good time. I feel like I learned a 601 00:44:57,599 --> 00:45:01,119 lot. If anyone has any questions, head over to Twitter reach out to 602 00:45:01,159 --> 00:45:06,519 Thomas. John is t R A J A N. It's just Thomas to 603 00:45:06,639 --> 00:45:10,960 John Thomas, without an h just tm as asking questions. He's super responsive. 604 00:45:12,000 --> 00:45:14,760 He's one of the Angelo g ds who really loves engaged with the community, 605 00:45:14,840 --> 00:45:19,239 so feel free to to pulverize them with questions. So so, yeah, 606 00:45:19,800 --> 00:45:23,000 thanks for coming on, and Brian and Shy thanks for coming on. 607 00:45:23,280 --> 00:45:30,239 And remember always remember I'm watching you, whoever you are. And listen there 608 00:45:30,440 --> 00:45:38,239 I'm watching you. Yep. No and TV listeners, we'll say thanks for 609 00:45:38,320 --> 00:45:42,760 coming and until next time, peace, peace,