WEBVTT 1 00:00:06.480 --> 00:00:09.320 Hello, and welcome to another episode of Adventures in Dutnet. 2 00:00:09.320 --> 00:00:11.720 I'm Sean Klaper. You're hosted with me today. Your two 3 00:00:11.759 --> 00:00:15.119 co hosts Wylou Hey, why good? The snow is finally 4 00:00:15.160 --> 00:00:19.440 melting so I can almost see my grass, all right? 5 00:00:20.160 --> 00:00:22.440 Or are the co hosts Caleb Wells, Hey, Caleb. 6 00:00:22.399 --> 00:00:27.000 Hey, guys, how's it going good? Good? Yeah, we got 7 00:00:27.039 --> 00:00:30.559 down into the thirties today, like thirty three, I think, 8 00:00:30.760 --> 00:00:35.799 right right above freezing with with rain, which is always beautiful. 9 00:00:35.920 --> 00:00:37.920 But I guess that's what you get in Normans, right, 10 00:00:38.600 --> 00:00:40.600 you're not going to all that often. 11 00:00:41.119 --> 00:00:42.840 Has it ever snowed there while you live there? 12 00:00:43.000 --> 00:00:47.000 Yes, yes, yes, that's okay, once or twice, but it 13 00:00:47.039 --> 00:00:50.520 doesn't stick, right, it's just yeah, yeah, you see it 14 00:00:50.560 --> 00:00:53.880 coming down, but yeah, it's it is rare. But if 15 00:00:53.920 --> 00:00:56.840 you go to the North Shore, it's right. We're in 16 00:00:56.920 --> 00:00:59.200 the Bowl of New Orleans and you have light contra 17 00:00:59.240 --> 00:01:02.679 trains to the north of US in the North Shores suburbs. Yeah, 18 00:01:02.799 --> 00:01:05.200 they get snow every three or four years or so. 19 00:01:06.040 --> 00:01:09.719 It's just far enough north, I guess. But yeah. 20 00:01:10.159 --> 00:01:14.239 Anyway, all right, so you're you're doing a double duty today, Caleb, 21 00:01:14.359 --> 00:01:17.840 So you're You're right, you're also a guest. I think, well, 22 00:01:17.879 --> 00:01:20.079 you know last a couple of times, so you're probably 23 00:01:20.120 --> 00:01:20.519 good at it. 24 00:01:21.519 --> 00:01:23.400 Well, I think last time you guys said I had 25 00:01:23.400 --> 00:01:25.319 some work to do and you weren't sure if you 26 00:01:25.400 --> 00:01:31.719 were invite me back. Well, I figured, right why I 27 00:01:31.799 --> 00:01:35.959 did the last episode on the whole power platform, so 28 00:01:36.319 --> 00:01:38.959 I figured I could I could take a stab at 29 00:01:39.000 --> 00:01:42.719 some Blazer stuff, which right there, there always seems to 30 00:01:42.719 --> 00:01:46.200 be something new in Blazer Land because it just keeps 31 00:01:46.239 --> 00:01:50.640 picking up steaming momentum and new features and functionality and 32 00:01:50.680 --> 00:01:53.599 ways of using it. And so today I actually thought 33 00:01:53.599 --> 00:01:56.120 we could talk a little bit about Blazer and job 34 00:01:56.200 --> 00:01:59.560 script interrupt, right, and one of the big go ahead. 35 00:01:59.719 --> 00:02:02.120 Yeah, all these states that we really haven't covered that. 36 00:02:02.200 --> 00:02:05.519 You know, we've covered the basics and new features and 37 00:02:05.519 --> 00:02:08.080 things like that and previous shows, but we really haven't 38 00:02:08.080 --> 00:02:12.039 gone into the interrupt part of it and maybe working 39 00:02:12.080 --> 00:02:15.199 with other frameworks and things like that. So, yeah, it 40 00:02:15.280 --> 00:02:17.159 sounds interesting. Where should we start. 41 00:02:17.439 --> 00:02:19.800 So I think probably one of the reasons why we 42 00:02:19.840 --> 00:02:22.719 haven't talked about job scripin or op and maybe it 43 00:02:22.759 --> 00:02:25.639 doesn't get as much fanfarees R at the whole point 44 00:02:25.639 --> 00:02:30.080 of Blazers and I have to do JavaScript right, or 45 00:02:30.120 --> 00:02:32.800 at least that that was one of its big selling points. 46 00:02:33.080 --> 00:02:36.319 But yeah, so we should start off with when should 47 00:02:36.319 --> 00:02:37.120 you use interrupt. 48 00:02:37.319 --> 00:02:42.879 Well, you're going to have to use it in certain instances. So, right, 49 00:02:43.120 --> 00:02:48.439 the web assembly standard doesn't currently have full access to 50 00:02:48.479 --> 00:02:51.879 the DOM and so that means you're going to have 51 00:02:52.599 --> 00:02:57.400 limitations when it comes around things like geolocation or local 52 00:02:57.439 --> 00:03:01.240 storage that kind of stuff, right, And so what you 53 00:03:01.280 --> 00:03:02.639 end up have to do is you have to go 54 00:03:02.680 --> 00:03:06.039 through jobscript through those What I think most people don't 55 00:03:06.080 --> 00:03:10.680 realize is that in order for your page to load 56 00:03:10.879 --> 00:03:13.319 and for the Blazer to get the web assembly and 57 00:03:13.360 --> 00:03:16.439 the WASM and all that up and running, it actually 58 00:03:16.479 --> 00:03:19.439 talks through JavaScript to talk to the don to get 59 00:03:19.479 --> 00:03:22.080 all this stuff set up in the UI updated. So 60 00:03:22.120 --> 00:03:24.199 you use the jobscript, whether you realize it or not. 61 00:03:24.639 --> 00:03:28.199 Down the road, as they evolve web assembly, which they're 62 00:03:28.240 --> 00:03:31.680 planning on doing and giving it more access and bringing 63 00:03:31.719 --> 00:03:34.240 in a line with jobscript, some of this will go away, 64 00:03:34.680 --> 00:03:38.759 but there are instances where where it's needed and you're 65 00:03:38.800 --> 00:03:42.560 going to have some form of jobscript layer to get 66 00:03:42.719 --> 00:03:46.360 some of this functionality. So the next thing when it 67 00:03:46.400 --> 00:03:51.719 comes to this stuff is Blazer has interface for a 68 00:03:51.800 --> 00:03:57.680 GAS runtime which allows you to invoke functions, make asynchronous 69 00:03:57.840 --> 00:04:00.919 calls back and forth. It allows you to send and 70 00:04:01.000 --> 00:04:04.879 retrieve data, right, which which is doing behind the scenesy way. 71 00:04:04.919 --> 00:04:08.960 But you're going to need for this functionality, and that 72 00:04:09.039 --> 00:04:13.319 led us to try a proof of concept which has 73 00:04:13.360 --> 00:04:18.439 been done before, and that is taking web components and 74 00:04:18.480 --> 00:04:22.079 getting those to work inside of Blazer. And when I 75 00:04:22.079 --> 00:04:27.920 say web components actually mean the HTML definition which I 76 00:04:27.920 --> 00:04:28.680 can actually read it. 77 00:04:28.759 --> 00:04:28.879 Right. 78 00:04:28.920 --> 00:04:31.800 It's a set of features that provide a standard component 79 00:04:31.879 --> 00:04:36.959 model for the web, allowing for encapsulation and interoperability of 80 00:04:37.040 --> 00:04:40.399 individual HTML elements. And so the idea is you end 81 00:04:40.519 --> 00:04:44.480 up creating your own custom tags, very similar to how 82 00:04:44.480 --> 00:04:47.040 you do it at Angular or React or view, and 83 00:04:47.519 --> 00:04:50.519 you inject those into the page the same way that 84 00:04:50.600 --> 00:04:54.000 Blazer does. Kind of the component model a setup, right. 85 00:04:53.920 --> 00:04:56.639 So is it basically The advantage of that is that 86 00:04:56.800 --> 00:05:01.079 it is framed with Yes it is. It's like you know, yeah, yeah, 87 00:05:01.199 --> 00:05:02.360 so that's how you can angle it. 88 00:05:03.319 --> 00:05:08.000 Yeah, it's right. It's basically HTML and jobscript and if necessary, 89 00:05:08.040 --> 00:05:10.879 if you want it, you can bundle CSS in there too, 90 00:05:11.279 --> 00:05:16.279 and it's portable. All the current browsers will recognize this 91 00:05:16.439 --> 00:05:21.040 content as long as you provide it the actual files 92 00:05:21.360 --> 00:05:23.920 to load that content, and it'll work out of the 93 00:05:23.959 --> 00:05:28.279 box in any application pretty much. It's actually an interesting 94 00:05:28.519 --> 00:05:31.360 side note is that Angular io their website where they 95 00:05:31.439 --> 00:05:35.319 do all their documentation and workflows, the majority of that 96 00:05:36.079 --> 00:05:40.319 is Angular Web components. And the reason being is you 97 00:05:40.360 --> 00:05:42.800 can manage this website and you can be a doc 98 00:05:42.879 --> 00:05:47.800 writer or do tutorials and not have to know necessarily 99 00:05:47.800 --> 00:05:49.759 how to build your own Angular app or all the 100 00:05:49.759 --> 00:05:51.959 intricacies that go into a web component. You just know 101 00:05:52.000 --> 00:05:55.959 the inputs and outputs and you can build stuff that way. 102 00:05:56.480 --> 00:06:01.079 And Angular calls this Angular elements. What it ends up 103 00:06:01.079 --> 00:06:04.639 being is a web component. So what we did was 104 00:06:04.920 --> 00:06:08.959 we already have several Angular applications running because we have 105 00:06:09.079 --> 00:06:11.519 a couple of teams inside the company. We have a 106 00:06:11.519 --> 00:06:14.959 couple of teams that are contract and the contract teams 107 00:06:15.199 --> 00:06:18.319 have been doing mostly Angular stuff. And so and I 108 00:06:18.319 --> 00:06:20.879 think I've told you guys, we've got like between services 109 00:06:20.920 --> 00:06:23.560 and apps, we've got like one hundred it's a ridiculous number. 110 00:06:23.680 --> 00:06:27.279 They're wanting to consolidate that down and when I was hired, 111 00:06:27.319 --> 00:06:30.560 we decided that we wanted to move forward using Blazer 112 00:06:31.079 --> 00:06:36.199 right because the majority of our internal team is dot 113 00:06:36.319 --> 00:06:39.839 Net Framework or dot Net and c sharp focus, and 114 00:06:39.920 --> 00:06:43.879 Blazer gives us that ability to be able to learn 115 00:06:44.120 --> 00:06:46.759 its version of Razor and then be able to use 116 00:06:46.800 --> 00:06:49.160 our Sea sharp knowledge and kind of right go to town. 117 00:06:49.480 --> 00:06:53.160 But we had to figure out a bridge between Angular 118 00:06:53.240 --> 00:06:56.879 and Blazer and or they wanted a bridge. Right. For instance, 119 00:06:56.920 --> 00:07:00.680 if we have this Angular application that has a bunch 120 00:07:00.720 --> 00:07:03.000 of components and we want to be able to reuse 121 00:07:03.000 --> 00:07:06.160 those until we can rebuild them in Laser, how are 122 00:07:06.199 --> 00:07:08.839 we going to do that? And we actually got a 123 00:07:08.879 --> 00:07:12.160 working model which is which is really interesting because you 124 00:07:12.560 --> 00:07:16.480 end up doing a deep dive into a job inter 125 00:07:16.560 --> 00:07:19.879 ops inside of Blazer. And so what you do is 126 00:07:20.560 --> 00:07:24.680 you have your your normal Angular components. They're doing their 127 00:07:24.839 --> 00:07:29.160 their stuff inputs, outputs, the ventomitters, and there are certain 128 00:07:29.160 --> 00:07:30.879 steps you have to take inside of Angular to be 129 00:07:30.879 --> 00:07:34.279 able to export these, but you can export them as 130 00:07:34.519 --> 00:07:40.319 custom components web components, and then you reference the javascripts, 131 00:07:40.360 --> 00:07:45.079 the polypills and the Angular code as well as your 132 00:07:45.279 --> 00:07:48.519 elements and at the bottom of your index and then 133 00:07:48.639 --> 00:07:54.480 you can reference those tags in any of your Blazer components, right, 134 00:07:54.720 --> 00:07:57.879 And they can be as simple as an Angular component 135 00:07:58.439 --> 00:08:03.120 that takes an input, and when when the website loads, 136 00:08:03.360 --> 00:08:07.279 the Angler component is themeless. Right. You have an Angular 137 00:08:07.319 --> 00:08:11.279 input and you pass in a variable like your name 138 00:08:11.560 --> 00:08:16.720 into that the property on that tag, and when the 139 00:08:16.720 --> 00:08:19.959 the browser loads up, the angler is transparent. You really 140 00:08:19.959 --> 00:08:22.920 can't tell just by looking at it what's Angular and 141 00:08:22.920 --> 00:08:26.319 what's not. And it's going to show you your name 142 00:08:26.439 --> 00:08:30.000 that came from Blazer into the Angular component, right, and 143 00:08:30.040 --> 00:08:33.440 that's I guess, yeah, it's a it's a web component 144 00:08:33.480 --> 00:08:36.720 at that point, yes, yep, yeah, and that's all finally good, right, 145 00:08:36.759 --> 00:08:39.840 But that's that's kind of got limited use, right. Most 146 00:08:39.840 --> 00:08:42.120 of your Angular components are going to be more complex 147 00:08:42.519 --> 00:08:45.320 and so right, we had to actually do some tests 148 00:08:45.360 --> 00:08:49.240 where we're passing in like Jason data, right, or you 149 00:08:49.320 --> 00:08:53.360 get a call you call an API from Blazer, and 150 00:08:53.440 --> 00:08:55.879 you need to be able to pass those objects into 151 00:08:56.120 --> 00:08:59.679 this web component. And it's really interesting how how they've 152 00:08:59.720 --> 00:09:03.720 done this, because what you end up doing is you 153 00:09:03.799 --> 00:09:07.240 have your own custom JavaScript where you can write, you 154 00:09:07.279 --> 00:09:10.000 can build your own functions that hang off the dom 155 00:09:10.559 --> 00:09:13.720 and if you need to talk back and forth, you 156 00:09:14.159 --> 00:09:17.440 not only pass in this object this data, but you 157 00:09:17.519 --> 00:09:20.679 pass in a dot net reference and it's actually called 158 00:09:20.759 --> 00:09:25.559 dot net reference, and it's a reference to this component 159 00:09:25.679 --> 00:09:30.360 or the contents of that Blazer component. And so if 160 00:09:30.399 --> 00:09:34.080 you say you have a chart widget, right, that's an 161 00:09:34.080 --> 00:09:36.639 Angular and you like the way it looks and likes 162 00:09:36.639 --> 00:09:40.159 the functionality, but there's functionality built into it. Right, you 163 00:09:40.279 --> 00:09:44.840 click events or filtering or whatever, right, you can actually 164 00:09:44.840 --> 00:09:47.360 have that loaded on the screen, and when you do 165 00:09:47.720 --> 00:09:51.159 button events, it's going to admit those events. You're going 166 00:09:51.200 --> 00:09:52.600 to have an event listener. It's just going to trigger 167 00:09:52.639 --> 00:09:57.080 those events and actually return the data to Blazer through 168 00:09:57.120 --> 00:10:00.679 that dot net reference. And the Blazer can manipulate code 169 00:10:00.720 --> 00:10:03.519 outside of the web component to do whatever you want 170 00:10:03.559 --> 00:10:07.799 to do. So there's there's a lot of power that's 171 00:10:08.120 --> 00:10:11.759 built into it. One thing that we're going to have 172 00:10:11.799 --> 00:10:14.240 to figure out as we go, right, is our existing 173 00:10:14.279 --> 00:10:18.759 Angular components. They're not dumb components, right. They typically have 174 00:10:18.960 --> 00:10:21.840 a good deal of functionality, and they may be calling 175 00:10:22.440 --> 00:10:26.879 their own Angular services right using RxJS or whatever. And 176 00:10:27.440 --> 00:10:29.960 we're going to have to look at how how we're 177 00:10:29.960 --> 00:10:32.399 going to manage that because the Angular services we're not 178 00:10:32.440 --> 00:10:35.360 going to bring over, right, They're not going to be 179 00:10:35.399 --> 00:10:38.840 compiled into the component. And there's no way, at least 180 00:10:38.919 --> 00:10:41.879 that I found this point to be able to manage 181 00:10:41.879 --> 00:10:44.559 them separately. So we're gonna end up having to do 182 00:10:44.639 --> 00:10:49.759 those API calls in that state management in Blazer or 183 00:10:49.799 --> 00:10:55.279 in c sharp classes versus doing them in Angular services. 184 00:10:55.720 --> 00:10:59.639 What about the payload, Like, is each Angular element that 185 00:10:59.639 --> 00:11:02.480 you can added to a webpone have basically the entire 186 00:11:02.720 --> 00:11:04.559 Angular framework on that you could? 187 00:11:05.000 --> 00:11:10.200 I wouldn't, I would advise against it. Yes, yeah, Payler 188 00:11:10.320 --> 00:11:12.559 is something you have to factor in. And that's actually 189 00:11:12.919 --> 00:11:18.279 where when you build out the Angular elements, right, and 190 00:11:18.320 --> 00:11:21.080 you get your disk folder, you can determine how the 191 00:11:21.159 --> 00:11:24.440 job script is broken up. And what I've done is 192 00:11:24.840 --> 00:11:29.600 I have two jobscript files that are strictly Angular based, right, 193 00:11:29.639 --> 00:11:32.720 the polypills that it needs for certain browsers, and then 194 00:11:32.720 --> 00:11:36.000 the Angular code which is just main gs between the 195 00:11:36.039 --> 00:11:38.399 two of those, right, it's you know, maybe a little 196 00:11:38.440 --> 00:11:41.320 over a meg. And then I have a separate jobscript 197 00:11:41.360 --> 00:11:44.879 file that actually houses all of the web components. And 198 00:11:44.919 --> 00:11:47.200 of course that file can get fairly large. Depending on 199 00:11:47.200 --> 00:11:50.679 how many you have or you're pulling in and there's 200 00:11:50.720 --> 00:11:55.360 really no tree shaking for that. But that job script 201 00:11:55.399 --> 00:11:58.879 can then reference the separate polyphyl and main and not 202 00:11:59.039 --> 00:12:03.519 have that load every single time. Now, freach Blazer component, 203 00:12:03.559 --> 00:12:06.639 you go into that job script, those web components script 204 00:12:06.639 --> 00:12:09.919 had to be initialized. But in my testing it's really 205 00:12:10.399 --> 00:12:15.159 there's really no performance difference between it and Blazer. Of 206 00:12:15.200 --> 00:12:18.320 course we haven't done you know, extreme edge cases or anything, 207 00:12:18.399 --> 00:12:20.639 but it performs well at this point. 208 00:12:20.799 --> 00:12:23.039 So it's really the main use of it is just 209 00:12:24.120 --> 00:12:27.840 for bringing over components that you don't have in Blazer. 210 00:12:28.600 --> 00:12:31.240 Could it be you know, like third party components that 211 00:12:31.279 --> 00:12:35.120 they read it wrote it for some for some jobscript framework, 212 00:12:35.200 --> 00:12:37.840 like maybe some Bootstrap components or things like that, and 213 00:12:37.919 --> 00:12:39.960 you can interrupt with those with Blazer. 214 00:12:40.159 --> 00:12:43.759 Yeah, yeah, if you if you needed to, you definitely could. 215 00:12:44.120 --> 00:12:47.919 Like like I said earlier, right, Blazer is growing elites 216 00:12:47.960 --> 00:12:51.080 and bounds and the dishes they're adding to it in 217 00:12:51.120 --> 00:12:53.919 the features, so there there are a ton of components 218 00:12:53.919 --> 00:12:57.639 that will do anything you could do or almost anything 219 00:12:57.720 --> 00:13:00.799 you can do in an Angular or React, boot Strap 220 00:13:01.440 --> 00:13:05.240 or whatnot. But I do see this as a is 221 00:13:05.559 --> 00:13:08.960 for people who have a lot of SPA frameworks, a 222 00:13:09.000 --> 00:13:11.200 lot of job script apps and they want to transition. 223 00:13:11.559 --> 00:13:13.600 This is kind of a bridge, or it could be 224 00:13:14.000 --> 00:13:16.840 the One of the interesting things about doing that SITS 225 00:13:17.159 --> 00:13:20.120 is some of the additions they've added a Blazer is 226 00:13:20.159 --> 00:13:24.919 you can now actually export Blazer components as web components 227 00:13:25.120 --> 00:13:28.080 and then we use them in Angular or React apps 228 00:13:28.120 --> 00:13:31.200 if you want to, or any app. Right, so it 229 00:13:31.279 --> 00:13:34.240 goes both ways, but I see right, they're trying to 230 00:13:34.279 --> 00:13:37.519 make it as easy a transition as possible if you 231 00:13:37.600 --> 00:13:40.799 want to transition and you and the majority of your 232 00:13:41.200 --> 00:13:44.200 developer knowledge is in c sharp. One of the other 233 00:13:44.240 --> 00:13:47.159 interesting things that we ran across, at least I find 234 00:13:47.159 --> 00:13:50.759 the interesting, but I'm also a designer UI guy, is 235 00:13:51.320 --> 00:13:54.759 you can have an Angular app that, for instance, say 236 00:13:54.840 --> 00:13:59.320 is using material design right in the material INPM packages 237 00:13:59.360 --> 00:14:03.039 and all that stuff, and you can actually change the 238 00:14:03.480 --> 00:14:08.399 styling in those components to use Bootstrap styling, but never 239 00:14:08.519 --> 00:14:12.200 install Bootstrap and Angular. And when you create the web components, 240 00:14:12.519 --> 00:14:15.200 you have Bootstrap running a Blazer and you add that 241 00:14:15.279 --> 00:14:19.639 Angular component the web component, it's going to pick up 242 00:14:19.679 --> 00:14:22.759 the Bootstrap CSS because it has the right styles. Install 243 00:14:22.799 --> 00:14:27.120 itself appropriately for Bootstrap, without Bootstrap ever being inside of 244 00:14:27.120 --> 00:14:30.519 the Angler application, and vice versa. You can not have 245 00:14:30.639 --> 00:14:34.720 material inside a Blazer at all, right, because especially with 246 00:14:35.000 --> 00:14:39.519 material for Angular, you can get beyond just the CSS, right, 247 00:14:39.639 --> 00:14:42.559 they have their own web components that have job script 248 00:14:42.600 --> 00:14:44.720 and all that extra stuff and on where when you 249 00:14:44.759 --> 00:14:49.080 click on an input, the title or the field goes 250 00:14:49.159 --> 00:14:52.600 up above the input. All that functionality. You can get 251 00:14:52.639 --> 00:14:57.200 that in Blazer through Angular without ever having to install 252 00:14:57.240 --> 00:15:01.240 any material stuff inside of Blazer application, which is is 253 00:15:01.279 --> 00:15:05.559 an interesting workaround. I guess if you again, if you're 254 00:15:05.639 --> 00:15:08.600 trying to transition, you're trying to match up styles between 255 00:15:08.960 --> 00:15:10.159 two disparate apps. 256 00:15:10.519 --> 00:15:12.559 So do you see the use case of this as 257 00:15:12.639 --> 00:15:17.000 more like like like what you're doing basically converting legacy 258 00:15:17.320 --> 00:15:21.519 apps into run on like new Blazer apps, or do 259 00:15:21.080 --> 00:15:24.960 you kind of foresee maybe like maybe you have two 260 00:15:25.000 --> 00:15:27.440 teams or one one team working on a Blazer and 261 00:15:27.440 --> 00:15:31.559 then one team developing like new Anglar like Angler components 262 00:15:31.559 --> 00:15:34.080 and all that stuff into and tnvert into web components 263 00:15:34.440 --> 00:15:35.639 in that second. 264 00:15:35.720 --> 00:15:38.879 Yeah, I think I think both are perfectly valid use 265 00:15:38.919 --> 00:15:42.759 cases because right in a lot of cases, you may 266 00:15:43.200 --> 00:15:45.559 have a React app that you have new intention of 267 00:15:45.639 --> 00:15:49.000 converting the Blazer, Right, but then you have a whole 268 00:15:49.080 --> 00:15:51.080 separate team that's creating a new app and they're like, hey, 269 00:15:51.120 --> 00:15:53.399 we want to do this in Blazer, but we want 270 00:15:53.440 --> 00:15:55.519 to be able to use some of our existing components 271 00:15:55.600 --> 00:15:58.440 and manage the look and feel. Right, you could cherry 272 00:15:58.480 --> 00:16:01.440 pick and I'm not sure how we are actually builds 273 00:16:01.440 --> 00:16:04.039 their web component, sure if they have that functionality, But 274 00:16:04.519 --> 00:16:07.279 an angular you can cherry pick the components you want 275 00:16:07.840 --> 00:16:11.159 impullment a Blazer and vice versa. Right, if you end 276 00:16:11.240 --> 00:16:16.039 up building this awesome grid and Blazer with all the 277 00:16:16.039 --> 00:16:20.080 functional that you want, filtering, sorting, whatever, and you want 278 00:16:20.120 --> 00:16:22.039 to be able to reuse it, you can reuse it 279 00:16:22.320 --> 00:16:25.720 inside a reactor angular app. I do see this more 280 00:16:25.759 --> 00:16:28.320 as it's your code, use it the way you want 281 00:16:28.320 --> 00:16:31.200 to use it kind of thing, right, And so the 282 00:16:31.639 --> 00:16:34.840 I guess the possibilities really are end list just depends 283 00:16:34.960 --> 00:16:37.480 on how your like you said, how your teams are 284 00:16:37.519 --> 00:16:41.120 set up, what's your area of expertise, and where what 285 00:16:41.240 --> 00:16:44.159 your roadmap roadmap is where you're looking to go. And 286 00:16:44.200 --> 00:16:47.240 there's a few other things in Blazer and Dot and 287 00:16:47.279 --> 00:16:50.080 at six that I think people are going to begin 288 00:16:50.159 --> 00:16:53.480 to use more and more become more common as people 289 00:16:53.559 --> 00:16:58.000 get used to all the additions, because honestly, there's a 290 00:16:58.080 --> 00:17:02.200 ton of changes from five that that exists. I mean, 291 00:17:02.399 --> 00:17:06.119 if you're if you're migrating, it's pretty straightforward. But the 292 00:17:06.319 --> 00:17:10.440 but the functionality that you can do and in how 293 00:17:10.519 --> 00:17:14.960 you can segment out your jovascript has changed, Right, you 294 00:17:15.000 --> 00:17:20.319 can isolate jobscript to a specific Blazer component. You can 295 00:17:20.359 --> 00:17:26.519 also now with that six initialize some job script before 296 00:17:26.720 --> 00:17:30.079 the Blazer app is even loaded, and Blazer knows how 297 00:17:30.079 --> 00:17:34.279 to take that job script that content and initialize it 298 00:17:34.319 --> 00:17:37.519 properly so you don't have to wait to get access 299 00:17:37.559 --> 00:17:40.319 to the dom. So there's all kinds of cool stuff. 300 00:17:40.640 --> 00:17:46.000 I appreciate the effort they put in to making Blazer 301 00:17:46.480 --> 00:17:49.839 work with job script as well as they have, so I. 302 00:17:49.839 --> 00:17:51.720 Think that's the only way for it to succeed, to 303 00:17:52.039 --> 00:17:55.599 be honest, Like Lazowski's been around for so long, there's 304 00:17:55.640 --> 00:18:01.400 that such a big ecosystem of developers and andsting components 305 00:18:01.400 --> 00:18:03.440 and all that stuff, you really can't get away with 306 00:18:03.559 --> 00:18:05.559 having a front way that doesn't interrupt with it. But 307 00:18:05.720 --> 00:18:07.599 it's seed, so it's actually really good to see it. 308 00:18:07.839 --> 00:18:10.240 This is happening. You see what you're doing? Is it 309 00:18:10.319 --> 00:18:12.480 like it sounds like it's pretty totton edge like Is 310 00:18:12.519 --> 00:18:15.400 this like based on like some sort of Microsoft kind 311 00:18:15.400 --> 00:18:17.200 of pattern that they're published or have you kind of 312 00:18:17.200 --> 00:18:19.599 dislike experimented and just done your own thing? 313 00:18:19.640 --> 00:18:23.640 And so it's I don't think it's something they've officially published. 314 00:18:23.960 --> 00:18:26.400 But like I said, I'm not the first one that 315 00:18:26.480 --> 00:18:30.160 came up with this. There's actually Dan Roth actually has 316 00:18:30.319 --> 00:18:34.160 a GitHub rebolt out there that he dubbed a blangular, 317 00:18:34.359 --> 00:18:37.799 which is blazer and Angular. It's three years old. It's 318 00:18:38.400 --> 00:18:42.559 it's it's fairly ancient when it comes to development, but 319 00:18:42.559 --> 00:18:44.960 but it gives you the idea of how you get 320 00:18:45.000 --> 00:18:48.000 things to work. And I also found I found a 321 00:18:48.039 --> 00:18:52.599 resource on think texture where they did something similar. I mean, 322 00:18:52.880 --> 00:18:54.799 I can add these links to the show notes for 323 00:18:54.839 --> 00:18:57.400 those who are interested, but right so, so it was 324 00:18:57.400 --> 00:18:59.200 one of the things I took a couple of odds 325 00:18:59.200 --> 00:19:01.960 and ends pieces here and there, saw how they did it, 326 00:19:02.000 --> 00:19:04.319 and was able to build on it to kind of 327 00:19:04.519 --> 00:19:07.240 meet our initial needs. I'm sure that's going to grow, 328 00:19:07.599 --> 00:19:11.200 right as we figure out the Angular service stuff in 329 00:19:11.319 --> 00:19:14.440 our XJS but it's been it's been an interesting project. 330 00:19:14.480 --> 00:19:16.480 It's been a lot of fun. And I actually have 331 00:19:16.519 --> 00:19:18.200 a proof of concept that I need to get up 332 00:19:18.200 --> 00:19:20.000 on GitHub. I just haven't done it yet because I 333 00:19:20.000 --> 00:19:22.039 got to clean it up and you know, remove all 334 00:19:22.119 --> 00:19:23.680 the company related stuff. 335 00:19:24.480 --> 00:19:28.880 So so, what kind of lessons have you learned doing this? 336 00:19:28.960 --> 00:19:30.640 You know, are the things that you can't do or 337 00:19:30.759 --> 00:19:32.039 things you have to watch out for. 338 00:19:32.480 --> 00:19:36.599 Well, yeah, it's I guess technically there are very well there. 339 00:19:36.640 --> 00:19:39.240 I was gonna say, there's very few limitations when it 340 00:19:39.279 --> 00:19:42.960 comes to this, but it's it's more of being smart 341 00:19:42.960 --> 00:19:44.880 about how you use it right. I mean, you could 342 00:19:44.960 --> 00:19:48.359 jam five angular components into one page and me passing 343 00:19:48.400 --> 00:19:50.400 all this data and stuff in and maybe the performance 344 00:19:50.440 --> 00:19:53.000 tanks because there's just too much going on and there's 345 00:19:53.079 --> 00:19:55.960 just too much talking back and forth. I also, I 346 00:19:55.960 --> 00:19:58.279 would recommend if you're doing this right and you had 347 00:19:58.559 --> 00:20:00.160 you had, one thing you have to do with this 348 00:20:00.319 --> 00:20:01.920 is you're gonna have to write your own custom job 349 00:20:01.920 --> 00:20:04.960 script to allow Blazer and your web components to talk. 350 00:20:05.440 --> 00:20:08.240 So you're gonna have to know jobscript if you if 351 00:20:08.279 --> 00:20:12.000 you really want to get into this, and a suggestion 352 00:20:12.160 --> 00:20:16.519 there is right don't. Don't hang a bunch of functions 353 00:20:16.720 --> 00:20:20.359 right off the dom. Right, don't use global variables, don't. 354 00:20:20.640 --> 00:20:24.440 I mean, all this is common jobscript stuff. How you 355 00:20:24.640 --> 00:20:28.759 keep things clean and perform it. Right, create a create 356 00:20:28.799 --> 00:20:31.720 your own module hanging off the dom and put all 357 00:20:31.759 --> 00:20:35.200 your functions inside of that. And right, you're gonna have 358 00:20:35.279 --> 00:20:37.640 to keep in mind the not so much as the 359 00:20:37.720 --> 00:20:43.079 security implications, but right, job Script and Blazer right have 360 00:20:43.240 --> 00:20:46.960 their own access to the dom, to the browsers. And 361 00:20:47.039 --> 00:20:50.599 so you know, you might come across an issue where 362 00:20:51.160 --> 00:20:53.720 you know there's a mismatch there and you're not getting 363 00:20:53.920 --> 00:20:56.680 the results or the look and fill you won't and 364 00:20:56.680 --> 00:20:59.200 and if that happens, then yeah, you're gonna have some 365 00:20:59.279 --> 00:21:03.359 interesting deep and digging into your angular app and making 366 00:21:03.400 --> 00:21:06.319 sure that there's no issues there, and then how Blazer 367 00:21:06.359 --> 00:21:08.640 interrupts with that. I do think maybe this is a 368 00:21:08.640 --> 00:21:12.359 little a little bit of the wild wild West. You know, 369 00:21:12.440 --> 00:21:16.519 it's you're kind of you're rolling your own But I 370 00:21:16.559 --> 00:21:22.039 do see the possibilities and the functionality that you can 371 00:21:22.079 --> 00:21:25.680 get out of this, especially between multiple teams, to be 372 00:21:25.759 --> 00:21:26.680 worth the investment. 373 00:21:26.880 --> 00:21:29.640 So yeah, you probably don't want to put your angular 374 00:21:29.759 --> 00:21:33.079 elements into every row of a grid that's got a 375 00:21:33.200 --> 00:21:35.559 hundred thousand elements or something like that in there. So 376 00:21:35.599 --> 00:21:38.240 that's agree always something not smart to do. 377 00:21:38.519 --> 00:21:40.880 Right, So I think again, like you just said, a 378 00:21:40.880 --> 00:21:43.039 lot of it comes down to common sense and knowing 379 00:21:43.079 --> 00:21:47.799 your limitations, because right the whole point is getting a 380 00:21:48.000 --> 00:21:51.839 quality application out to your clients or your users that 381 00:21:51.880 --> 00:21:56.920 has good performance with as little development time on you 382 00:21:57.240 --> 00:22:03.119 as is reasonable. And again, I long term, I wouldn't 383 00:22:03.119 --> 00:22:06.640 take an Angular app, export all these components Angular elements 384 00:22:06.960 --> 00:22:09.920 and then plug them into their own separate Blazer components 385 00:22:09.920 --> 00:22:12.000 and just call them the day and you know, and hey, 386 00:22:12.000 --> 00:22:15.200 here's here's your new app. Here, you've got Blazer running, 387 00:22:15.319 --> 00:22:17.599 but it's really still just Angular. I would take that 388 00:22:17.680 --> 00:22:22.440 next step and then convert those web components to actual 389 00:22:23.160 --> 00:22:27.200 sea sharp Blazer components. But for us, I think it's 390 00:22:27.240 --> 00:22:30.319 going to be a good bridge going forward. And it's 391 00:22:30.359 --> 00:22:34.519 interesting because our contract teams actually did a demo last 392 00:22:34.559 --> 00:22:37.440 week or two weeks ago going over this proof of concept, 393 00:22:37.720 --> 00:22:40.880 and even though most of them are very familiar with Angular, 394 00:22:41.319 --> 00:22:43.880 they also have dot net c sharp background and seven 395 00:22:43.880 --> 00:22:46.559 of them were like, man, I've been I've been looking 396 00:22:46.599 --> 00:22:49.400 forward to this, like when do we get started? So 397 00:22:49.720 --> 00:22:52.200 it's going to be good and I'll keep out updated 398 00:22:52.359 --> 00:22:55.359 on the on the status. We'll see, we'll see how 399 00:22:55.400 --> 00:22:55.839 it goes. 400 00:22:56.000 --> 00:22:59.680 And it sounds be exciting, sounds like it's really cutting edge. 401 00:22:59.559 --> 00:23:02.640