| Topic | Presenter | Summary | Duration | Tags | Quiz | Captions |
| ------------------------------------------ | ----------------------------- | -------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------- | ---- | -------- |
| ASP.Net Core 3 & Angular 9 Book, Chapter 5 | Chris Black and Chris Reddick | Chapter 5 of the ASP.Net Core 3 and Angular 9 book is discussed at length. | 1:06:13 | #FridayDevTrainings, #ASP.Net, #ClarityTraining, #FridayTrainings | N/A | |00:00:00.290 --> 00:00:03.820 - So we're going to jump right into the fetching and 00:00:03.820 --> 00:00:06.997 - displaying data, so we're just kind of going on 00:00:06.997 --> 00:00:09.115 - continuing on with ourangularand.net core in 00:00:09.115 --> 00:00:10.174 - EF core book. 00:00:11.610 --> 00:00:15.918 - Those of you who have ******** and have the source code just 00:00:15.918 --> 00:00:19.508 - feel free to follow along. If you don't, that's completely 00:00:19.508 --> 00:00:24.534 - fine as well. We can just follow along on my screen here. So what 00:00:24.534 --> 00:00:29.919 - we did last time is we set up the data and we set up the 00:00:29.919 --> 00:00:34.227 - database and hooked up the middleware which is F core is RM 00:00:34.227 --> 00:00:38.176 - and we did some migration migrations and then we also see 00:00:38.176 --> 00:00:39.253 - that our database. 00:00:40.800 --> 00:00:44.739 - So, uh, will cover that really quickly just to kind of go over 00:00:44.739 --> 00:00:48.375 - that again, um. And where that data came from? And then how 00:00:48.375 --> 00:00:51.708 - we're going to essentially fetch it on the front end. And 00:00:51.708 --> 00:00:55.344 - I'm going to preface this with this book is using, sorry? Oh 00:00:55.344 --> 00:00:58.980 - yeah, absolutely no problem. Let me see if I can zoom on 00:00:58.980 --> 00:01:03.222 - this guy here, so I'm going to go into this. Just, you know, I 00:01:03.222 --> 00:01:05.646 - haven't well. I have had experience with angular 00:01:05.646 --> 00:01:05.949 - material. 00:01:07.570 --> 00:01:10.920 - And the material module I haven't had as in depth 00:01:10.920 --> 00:01:14.605 - experience with like the the page ability, so I'm not super 00:01:14.605 --> 00:01:18.625 - well versed on it, but we're going to get through it together 00:01:18.625 --> 00:01:21.975 - 'cause it's super cool fun stuff. So basically where the 00:01:21.975 --> 00:01:25.995 - data is coming from? Like we kind of learned and went over 00:01:25.995 --> 00:01:30.350 - last time is we have this little nice XLSX or Excel file. And 00:01:30.350 --> 00:01:34.705 - then in our uh, let's see I think it was in our controllers. 00:01:34.705 --> 00:01:39.060 - We should have a seat controller and then we had this nice little 00:01:39.060 --> 00:01:44.000 - import. The method here on this, uh, get request that basically 00:01:44.000 --> 00:01:49.352 - just grabs dot XLSX, Excel file and then shoves all that data 00:01:49.352 --> 00:01:55.596 - into our database. So let's just take a look at that just to make 00:01:55.596 --> 00:02:00.502 - sure. So here's our world cities or world cities, countries and 00:02:00.502 --> 00:02:04.962 - then will just make sure that we also have cities. 00:02:14.100 --> 00:02:19.284 - So, uh, you probably can't read all these sensors so small, but 00:02:19.284 --> 00:02:25.764 - we will have our ID, name of the city are. I don't know why we 00:02:25.764 --> 00:02:31.380 - have AC 2, but we have that and we have the latitude, longitude, 00:02:31.380 --> 00:02:35.268 - longitude and country ID, which seems just to be. 00:02:36.110 --> 00:02:41.104 - OK, so this is probably a foreign key to our, uh. 00:02:41.690 --> 00:02:44.354 - Countries table, let's just check on that really quick. 00:02:45.020 --> 00:02:49.063 - That's great, so yeah, it looks like our country ID is a foreign 00:02:49.063 --> 00:02:53.106 - key to our country. Stable, cool. So we know that all of our 00:02:53.106 --> 00:02:56.527 - data is there and that it's all seated in everything from 00:02:56.527 --> 00:03:01.192 - Chapter 4, so we're going to get in to Chapter 5 and just kind of 00:03:01.192 --> 00:03:04.613 - roll through this pretty quickly on the front end here. Don't 00:03:04.613 --> 00:03:08.967 - have a whole lot of time to roll through this, but I will cover 00:03:08.967 --> 00:03:13.632 - quite a bit. So in CV, just as a side note For Anyone, if you 00:03:13.632 --> 00:03:17.364 - guys want you can go get this database from SQL D 2016. 00:03:17.880 --> 00:03:20.496 - A SQL 2016 it's called Tianji 00:03:20.496 --> 00:03:24.972 - underscore cities. And it's up to date with chapter five with 00:03:24.972 --> 00:03:28.908 - seated data. Just please make a copy of it instead of directly 00:03:28.908 --> 00:03:32.844 - connecting to it if you would. Thanks back to you all, right? 00:03:32.844 --> 00:03:36.780 - So, uh, we're just going to roll through here, and this is 00:03:36.780 --> 00:03:39.404 - basically just, you know, we're just implementing JSON. 00:03:39.404 --> 00:03:43.012 - Everybody is pretty familiar with Jason as we work with it 00:03:43.012 --> 00:03:46.948 - all the time. The back end does some nice JSON serialization for 00:03:46.948 --> 00:03:51.212 - us. I think we went over that in the last training as well. 00:03:52.030 --> 00:03:56.020 - I'm actually use it this one. OK so it looks like it is actually. 00:03:56.020 --> 00:04:00.295 - The smell is kind of wrong. So um, as we all know we use camel 00:04:00.295 --> 00:04:04.570 - case on the front end and we use Pascal case on the back end. All 00:04:04.570 --> 00:04:07.990 - it is is just a camel case is actually in this case. 00:04:08.880 --> 00:04:12.380 - Using Pascal case, which is interesting, but so this would 00:04:12.380 --> 00:04:16.580 - be camel case, right? And then the skull case would be like 00:04:16.580 --> 00:04:17.630 - this of course. 00:04:19.050 --> 00:04:22.812 - So, uh, basically, uhm. I think this kind of covers the 00:04:22.812 --> 00:04:26.574 - increase. You might be a little bit better at explaining this 00:04:26.574 --> 00:04:30.336 - whole thing, but it's just a dlink.net core is dealing with 00:04:30.336 --> 00:04:34.440 - JSON output San just helping this kind of know what to expect 00:04:34.440 --> 00:04:38.202 - in the form of JSON. Whatever it comes over the wire. 00:04:40.390 --> 00:04:44.394 - Yeah, I'm sure they are kind of going over and it goes into more 00:04:44.394 --> 00:04:48.398 - into the back end code a little bit later, but just let me know 00:04:48.398 --> 00:04:52.116 - if you want and I've got everything spun up on my end too 00:04:52.116 --> 00:04:54.976 - with the detail showing and Visual Studio. OK, cool. I'm 00:04:54.976 --> 00:04:58.694 - definitely going to help you in 'cause I yeah, I'm just like you 00:04:58.694 --> 00:05:02.126 - know it does. The cool JSON thing where it does this stuff. 00:05:02.790 --> 00:05:06.966 - Um, so I'm gonna go ahead and start this application and this 00:05:06.966 --> 00:05:11.838 - should boot up my back end. And it also should bring up my my 00:05:11.838 --> 00:05:12.882 - front in here. 00:05:13.570 --> 00:05:16.690 - And this will take a second just to compile, and it's compiling 00:05:16.690 --> 00:05:19.810 - not only in the back end, but it's also compiling the front 00:05:19.810 --> 00:05:23.450 - end here and will let spinning. Will kind of take a look at this 00:05:23.450 --> 00:05:28.144 - book really quick. Cool, uh, so just rolling over this first 00:05:28.144 --> 00:05:31.488 - component. We're all pretty familiar with, uh, our 00:05:31.488 --> 00:05:32.742 - typescript by now. 00:05:34.690 --> 00:05:38.430 - And here's the application, so we know we had this city 00:05:38.430 --> 00:05:42.170 - component, and then there's a cities HTML and the whole bit 00:05:42.170 --> 00:05:46.250 - will jump into that here in a second and then just are 00:05:46.250 --> 00:05:49.650 - different different components. So I'm just going to click on 00:05:49.650 --> 00:05:53.390 - the cities component, click on this link and basically all this 00:05:53.390 --> 00:05:57.470 - is is a grid and we're pretty familiar with grids. This is 00:05:57.470 --> 00:06:01.550 - just a pageable grid with the material module so and we should 00:06:01.550 --> 00:06:05.630 - be able to filter it. So if I want to say ABBA. 00:06:05.770 --> 00:06:08.890 - It should, you know, just filter it there. Maybe maybe they have 00:06:08.890 --> 00:06:10.190 - Beirut or something like that. 00:06:10.870 --> 00:06:13.928 - No, I do not. Uh, Yeah, but basically we're just filtering 00:06:13.928 --> 00:06:17.542 - it on the front end. We're not doing any. You know, heavy duty 00:06:17.542 --> 00:06:20.322 - API calls every second or anything like that, and it's 00:06:20.322 --> 00:06:23.936 - just all page on the front and you can see that it's getting 00:06:23.936 --> 00:06:26.716 - literally all of the results from the database and feeding 00:06:26.716 --> 00:06:30.886 - into this table. So let's take a look at the code to see how this 00:06:30.886 --> 00:06:34.778 - is happening. So I'm going to do is put this on this side and 00:06:34.778 --> 00:06:36.724 - we're going to take a look at 00:06:36.724 --> 00:06:40.551 - our application. So just kind of jumping into the code. Uhm, 00:06:40.551 --> 00:06:43.899 - we're going to look at our application, so it's going to be 00:06:43.899 --> 00:06:47.526 - in our source folder. We know that the disk folder is going to 00:06:47.526 --> 00:06:51.432 - be over on this side, so we're going to go into the app itself 00:06:51.432 --> 00:06:54.501 - and then into our cities component, which is just at the 00:06:54.501 --> 00:06:58.128 - root as the same level generally is, your app module will be all 00:06:58.128 --> 00:07:01.755 - your components, so will jump in there and take a look at what's 00:07:01.755 --> 00:07:05.382 - going on. So the first thing we're going to look at, and the 00:07:05.382 --> 00:07:07.335 - way that they built this out, is 00:07:07.335 --> 00:07:11.090 - they. Uh, just have an interface at the component level, since 00:07:11.090 --> 00:07:15.055 - this is a really small app, we don't need to share this city 00:07:15.055 --> 00:07:18.410 - component all over the place. You know, if you're building a 00:07:18.410 --> 00:07:21.460 - larger application, you could have this interface and you know 00:07:21.460 --> 00:07:25.425 - in a file that would be outside of your components, so you could 00:07:25.425 --> 00:07:31.210 - you know. Use that interface as a type as a duck type throughout 00:07:31.210 --> 00:07:35.610 - the application and just kind of like we covered previously with. 00:07:37.080 --> 00:07:40.501 - Type script we get what's called a. You know duck types 00:07:40.501 --> 00:07:43.922 - from interfaces. So duck type is essentially is is. If it 00:07:43.922 --> 00:07:47.654 - quacks like duck and it looks like a duck, it's probably a 00:07:47.654 --> 00:07:51.697 - duck right? So that's kind of what we call it and bring that 00:07:51.697 --> 00:07:55.429 - over into the front end code. So we use interfaces as types, 00:07:55.429 --> 00:07:59.783 - just so we kind of have that nice check to make sure that we 00:07:59.783 --> 00:08:01.649 - have less bugs at compile time. 00:08:03.710 --> 00:08:08.221 - So we can see that all of our properties on our interface city 00:08:08.221 --> 00:08:11.691 - or all required. There's no question marks or any funny 00:08:11.691 --> 00:08:15.855 - business happening here. Uhm, so we just need ID name lat, long 00:08:15.855 --> 00:08:20.713 - launch. I don't know it it added Extra G in there but we have 00:08:20.713 --> 00:08:22.448 - lanja tude and Country ID. 00:08:23.770 --> 00:08:28.320 - So we'll see how that's used in our cities dot component TS, and 00:08:28.320 --> 00:08:32.520 - this is the logic for our component. Just kind of have we 00:08:32.520 --> 00:08:36.720 - covered in the past and it's up we're using, you know. Obviously 00:08:36.720 --> 00:08:40.920 - the E S6 import for the modules. All these are different modules 00:08:40.920 --> 00:08:44.070 - and JavaScript modules and everything like that, so we're 00:08:44.070 --> 00:08:47.920 - pulling in these JavaScript modules to be able to use them 00:08:47.920 --> 00:08:51.770 - by destructuring them here. And as we talked about before, you 00:08:51.770 --> 00:08:53.520 - can either destructeur them like 00:08:53.520 --> 00:08:56.294 - this. With this object restructuring or you can import 00:08:56.294 --> 00:08:59.510 - all of it like if we did something like this, it will 00:08:59.510 --> 00:09:02.994 - kind of give us a little red squiggly because we have to give 00:09:02.994 --> 00:09:06.746 - it an alias. So we could say it like this too and it's still 00:09:06.746 --> 00:09:08.086 - going to work for us. 00:09:09.760 --> 00:09:13.340 - So let's just go ahead and undo that bad here. 00:09:14.250 --> 00:09:19.060 - Nice, OK, so uh, we can see what we're bringing in. All this 00:09:19.060 --> 00:09:23.130 - stuff is just, you know, really basic stuff from angular core 00:09:23.130 --> 00:09:27.200 - were, you know component will already be here. Inject is kind 00:09:27.200 --> 00:09:31.270 - of dependency injection that we talked about last time and then 00:09:31.270 --> 00:09:34.970 - we get another another module view child from angular core. 00:09:34.970 --> 00:09:39.410 - We're familiar with HTTP client and HTTP Rams. We use that in 00:09:39.410 --> 00:09:43.850 - our last kind of example there and then this map table data 00:09:43.850 --> 00:09:45.700 - source Matt Paginator in Page 00:09:45.700 --> 00:09:50.050 - events. Bring that in from the material module itself. So like 00:09:50.050 --> 00:09:55.042 - I said, I'm not very familiar with a lot of stuff in the 00:09:55.042 --> 00:09:59.266 - material. UM library, so we kind of walked through that together. 00:09:59.266 --> 00:10:03.938 - But the. Lisa is pretty easy to understand here at the top that 00:10:03.938 --> 00:10:07.766 - we're getting a sort of page event paginator and table data 00:10:07.766 --> 00:10:11.942 - source here just brought in. So walking through the rest of this 00:10:11.942 --> 00:10:15.680 - code. Um, were just declaring our component saying what the 00:10:15.680 --> 00:10:18.870 - selector is. We can call us whatever we want. Just whatever 00:10:18.870 --> 00:10:22.060 - makes most sense. Obviously, in Ceph we would call it safe 00:10:22.060 --> 00:10:25.250 - cities, or you know Seth Grid cities or something like that. 00:10:25.250 --> 00:10:29.020 - Since our application is showing it as a grid. So we could call 00:10:29.020 --> 00:10:32.790 - it something as simple as that. Just so you know stuff, and you 00:10:32.790 --> 00:10:36.270 - know what component is just by you know, just by hearing the 00:10:36.270 --> 00:10:38.590 - name of it, you just want it to 00:10:38.590 --> 00:10:42.563 - be that simple. And then we're feeding it our template URL to 00:10:42.563 --> 00:10:46.441 - the view that we wanted to go to, and then a styles URL, and 00:10:46.441 --> 00:10:49.765 - then you'll notice on the styles URL. We kind of covered this 00:10:49.765 --> 00:10:51.704 - before as everything is encapsulated in angular 00:10:51.704 --> 00:10:54.751 - components. You can bring in different styles if you want. If 00:10:54.751 --> 00:10:58.075 - you wanted to bring in some main styles for, like the entire 00:10:58.075 --> 00:11:01.399 - website so you don't have to rewrite code. And like re type 00:11:01.399 --> 00:11:05.277 - any kind of code and that whole bit, you can just bring in that 00:11:05.277 --> 00:11:08.324 - style and then you'll want to bring in your component styles. 00:11:08.324 --> 00:11:09.986 - If you have any like particular. 00:11:10.120 --> 00:11:13.912 - Overrides if you will. If you want to do at the component 00:11:13.912 --> 00:11:17.072 - level. Otherwise, here were only bringing in the styles for 00:11:17.072 --> 00:11:20.232 - this particular component just to keep it encapsulated so you 00:11:20.232 --> 00:11:23.392 - don't get that style bleed, and this component could like 00:11:23.392 --> 00:11:26.236 - affect other components or something like that. So without 00:11:26.236 --> 00:11:29.080 - explicitly bringing in CSS from other components, it's not 00:11:29.080 --> 00:11:33.504 - going to lead to this one, and vice versa. So we get that nice 00:11:33.504 --> 00:11:34.452 - little in Capsulation. 00:11:36.410 --> 00:11:40.100 - And then we're all pretty familiar here. Um, with what's 00:11:40.100 --> 00:11:43.052 - going on we're declaring our cities component. We're 00:11:43.052 --> 00:11:48.218 - exporting it so we can pick that up and import it in our app 00:11:48.218 --> 00:11:51.908 - module components so we can import it into our application. 00:11:51.908 --> 00:11:56.705 - We're also going to be exporting this so we can import it into 00:11:56.705 --> 00:12:00.764 - our angular router so we can do something like the functionality 00:12:00.764 --> 00:12:04.823 - up here. So whenever we hit this city's route, our application 00:12:04.823 --> 00:12:08.720 - knows. To feed it this, uh component and it's feeding it 00:12:08.720 --> 00:12:12.140 - the you know. Obviously the HTML, CSS and the typescript 00:12:12.140 --> 00:12:16.244 - logic behind it and all of those nice lifecycle hooks that we 00:12:16.244 --> 00:12:20.006 - kind of talked about baked into angular cores. Well, just kind 00:12:20.006 --> 00:12:25.136 - of out of the box, so we kind of talked about the in it on 00:12:25.136 --> 00:12:29.582 - whenever it dies on destroy and all those kind of in the middle. 00:12:31.170 --> 00:12:34.459 - Then again, everybody is pretty familiar with this little bit at 00:12:34.459 --> 00:12:37.449 - the top, or just declaring our variables. What we're basically 00:12:37.449 --> 00:12:41.037 - going to be using here, and we have our nice little access 00:12:41.037 --> 00:12:44.625 - modifiers that we use in type script that we stole from C 00:12:44.625 --> 00:12:48.213 - Sharp another back end languages because we like to do that on 00:12:48.213 --> 00:12:52.100 - the front end because it just looks so nice. We just have to 00:12:52.100 --> 00:12:56.970 - have our own. Uh, and then as you can see here, it's kind of 00:12:56.970 --> 00:13:01.170 - like the same thing that you see on the back end. We know that 00:13:01.170 --> 00:13:04.770 - displayed columns going to be an array of strings, and then we're 00:13:04.770 --> 00:13:07.770 - instantiating that array with the strings. That's going to be 00:13:07.770 --> 00:13:11.370 - we're calling our cities and it's going to be this Matt table 00:13:11.370 --> 00:13:14.970 - data source and then our generic is going to be sitting here. 00:13:16.250 --> 00:13:20.122 - And then just kinda scrolling down. Um, looks like we don't 00:13:20.122 --> 00:13:22.938 - have access modifiers on these, which is fine. 00:13:25.380 --> 00:13:27.680 - Let's see. And. 00:13:29.190 --> 00:13:32.479 - This view child decorator I'm not super familiar with, but we 00:13:32.479 --> 00:13:36.665 - can just hover over the top of it and I'm assuming this is just 00:13:36.665 --> 00:13:40.253 - being able to view the child. We kind of look up documentation 00:13:40.253 --> 00:13:44.140 - there. I haven't used view child a whole lot so I don't really 00:13:44.140 --> 00:13:47.728 - want to speak out of bounds or anything like that or say 00:13:47.728 --> 00:13:51.316 - anything wrong, but we can kind of jump into see how that's 00:13:51.316 --> 00:13:54.605 - being used. It looks like it's just definitely has something to 00:13:54.605 --> 00:13:57.894 - do with the scope of this paginator Here. Next line we 00:13:57.894 --> 00:14:01.482 - this is where we bring in that dependency injection of the base 00:14:01.482 --> 00:14:05.695 - URL. From our configs that we kind of made in the previous 00:14:05.695 --> 00:14:09.270 - lesson that we kind of talked about, and we're also bringing 00:14:09.270 --> 00:14:13.170 - the HTTP client and then again we want to bring in our 00:14:13.170 --> 00:14:16.095 - dependency injection and inject it all in the constructor 00:14:16.095 --> 00:14:19.673 - otherwise. It would not be available in our component, so 00:14:19.673 --> 00:14:23.785 - if we try to put this in RNG on and it it would not be available 00:14:23.785 --> 00:14:26.612 - in our component, we wouldn't have access to this base URL. 00:14:27.290 --> 00:14:31.437 - Um, so then we get that nice to the Lifecycle. Look for in 00:14:31.437 --> 00:14:36.222 - Gianna net with the logic that we want to do so. You want to do 00:14:36.222 --> 00:14:39.731 - all your heavy lifting on and on the initialization of your 00:14:39.731 --> 00:14:42.921 - component in energy on in it. Otherwise you're putting too 00:14:42.921 --> 00:14:46.111 - much strain on your constructor. You only want your constructor 00:14:46.111 --> 00:14:48.982 - for bringing in different services, so we're bringing in 00:14:48.982 --> 00:14:52.810 - HTTP client here and then you only want to do your dependency 00:14:52.810 --> 00:14:55.681 - injection. Otherwise if you're not bringing in services or 00:14:55.681 --> 00:14:58.871 - anything like that you want to do your actual logic. 00:14:58.990 --> 00:15:02.266 - On the the load of the component in your in G on a net. 00:15:05.440 --> 00:15:10.172 - So the rest of this stuff, what kind of just like skip over this 00:15:10.172 --> 00:15:14.566 - one for a second, and then we're going to look at this function 00:15:14.566 --> 00:15:18.960 - so we know that this except an event and it's of type page 00:15:18.960 --> 00:15:22.678 - event that we're bringing in from an interface from one of 00:15:22.678 --> 00:15:26.058 - the material libraries modules. I should say building out our 00:15:26.058 --> 00:15:31.128 - API route, which we saw kind of on the back end and we can take 00:15:31.128 --> 00:15:33.156 - a look at that controller, but 00:15:33.156 --> 00:15:36.545 - basically. You know anything on the back end is gonna start with 00:15:36.545 --> 00:15:39.990 - API and then this is just a get for getting all the cities. 00:15:41.590 --> 00:15:45.572 - And then we're building out our params with this indexer here. 00:15:45.572 --> 00:15:50.278 - So we're setting our page index size or a page index or page 00:15:50.278 --> 00:15:53.898 - size passing in sort columns with this nice little Turner 00:15:53.898 --> 00:15:58.966 - here. So this sort is true. Then we're going to pass in. The sort 00:15:58.966 --> 00:16:03.310 - is active. If not, it's going to just return that default sort 00:16:03.310 --> 00:16:07.292 - column. Same thing here. This sort is true. We're going to 00:16:07.292 --> 00:16:11.274 - have that nice sort direction. Otherwise it's just going to be 00:16:11.274 --> 00:16:12.608 - the. Default sort order. 00:16:13.230 --> 00:16:17.382 - A building out the filter query params Here. Uhm, so, uh, we're 00:16:17.382 --> 00:16:20.496 - just sticking on the default filter column, default filter 00:16:20.496 --> 00:16:24.302 - query and that's at the top there and then. Finally building 00:16:24.302 --> 00:16:28.454 - out something that is familiar to us, or at least to me. 00:16:29.060 --> 00:16:32.744 - Um, an we're building out our nice little call, so we kind 00:16:32.744 --> 00:16:36.428 - of went over this last time as well. This is just the 00:16:36.428 --> 00:16:39.805 - baked in HTTP client that is baked into angular as a 00:16:39.805 --> 00:16:42.875 - whole, and we're getting any here when you're not using 00:16:42.875 --> 00:16:46.252 - any kind of type. Generally you'd want to pass in your 00:16:46.252 --> 00:16:49.936 - type if you had it available to you. Here is just passing 00:16:49.936 --> 00:16:53.313 - it any type, just as a generic to get back anything 00:16:53.313 --> 00:16:56.690 - that we want. And then your first argument is your URL 00:16:56.690 --> 00:16:59.760 - and then your object of programs which we just built 00:16:59.760 --> 00:17:00.988 - here with this statement. 00:17:03.140 --> 00:17:07.760 - And then as soon as you hit subscribe on your git, you're 00:17:07.760 --> 00:17:11.225 - basically instantiating your observable. So as soon as we 00:17:11.225 --> 00:17:15.845 - call get an were subscribing, we get that nice observable an. We 00:17:15.845 --> 00:17:18.155 - know that as like a promise. 00:17:19.490 --> 00:17:23.153 - And you know current angular JS and subscribe is literally the 00:17:23.153 --> 00:17:27.149 - same kind of nice promise, just with a little bit of syntactic 00:17:27.149 --> 00:17:30.812 - sugar. It just grabbing that observable for us. And we don't 00:17:30.812 --> 00:17:34.142 - have to worry about memory leaks or anything like that, 00:17:34.142 --> 00:17:37.472 - because as soon as the component dies then this is 00:17:37.472 --> 00:17:41.468 - just all scrubs. So we're not opening up any kind of memory 00:17:41.468 --> 00:17:42.800 - leaks within our application. 00:17:44.350 --> 00:17:48.858 - So you don't. You can you know, call the the method to hang up 00:17:48.858 --> 00:17:52.078 - on that subscription. If you really would like to for 00:17:52.078 --> 00:17:55.942 - whichever reasons, but a lot of times it will just live through 00:17:55.942 --> 00:17:59.806 - the lifecycle of the component that it's based out of where the 00:17:59.806 --> 00:18:03.670 - call was made, and we can see that you know we're pretty 00:18:03.670 --> 00:18:06.890 - familiar with this pattern and stuff. Sometimes you'll see a 00:18:06.890 --> 00:18:11.398 - catch you can do a catch here as well, but in this case we're 00:18:11.398 --> 00:18:14.618 - just passing in the second function, so the first function. 00:18:14.970 --> 00:18:19.542 - That we see getting past your subscribe is, uh, if if the 00:18:19.542 --> 00:18:22.971 - result comes back successful, right? If the promise resolves 00:18:22.971 --> 00:18:27.543 - correctly then this is what we want to happen. So we're setting 00:18:27.543 --> 00:18:31.353 - the length of the Paginator. We're setting the index, we're 00:18:31.353 --> 00:18:35.163 - setting the page size, and then finally we're assigning our 00:18:35.163 --> 00:18:39.354 - cities to the result dot data, and we're instantiating a new 00:18:39.354 --> 00:18:44.307 - object here to pass into our HTML will see a little bit later 00:18:44.307 --> 00:18:49.744 - on. And we're saying it's a new object of Matt Table data source 00:18:49.744 --> 00:18:54.328 - with the type city and it's going to be that result data. 00:18:54.328 --> 00:18:59.676 - And then we saw at the top cities was just an array of type 00:18:59.676 --> 00:19:03.706 - city. An and then again, here's our nice little air 00:19:03.706 --> 00:19:07.380 - handling, so if anything goes wrong on this rejection of the 00:19:07.380 --> 00:19:10.386 - observable, then, uh, we're just going to console dot 00:19:10.386 --> 00:19:14.394 - error that error and then that will give us a nice little. 00:19:15.840 --> 00:19:19.680 - Red passion, the console that will kind of list out 00:19:19.680 --> 00:19:23.136 - specifically with angular nine. It tells you specifically where 00:19:23.136 --> 00:19:28.128 - in the code and what module, an what component and what line of 00:19:28.128 --> 00:19:32.736 - code went wrong. Where an angular JS, a lot of the times 00:19:32.736 --> 00:19:37.344 - it will just tell you in the angular code what happened, so 00:19:37.344 --> 00:19:41.568 - it'll kind of balance over to like the nitty gritty like 00:19:41.568 --> 00:19:45.792 - internal angular code, so you won't know exactly what line it. 00:19:45.880 --> 00:19:50.080 - Broken, but sometimes in angular JS will tell you where in the 00:19:50.080 --> 00:19:53.930 - code it broke on, but with angular nine and angular eight 00:19:53.930 --> 00:19:58.130 - really and up it'll give you a nice understanding of where in 00:19:58.130 --> 00:19:59.530 - the typescript it broke. 00:20:00.290 --> 00:20:03.170 - So it's really traceable. Uhm, so now that we know 00:20:03.170 --> 00:20:05.186 - that you know we're instantiating are nice 00:20:05.186 --> 00:20:08.066 - cities component, we have it here. We know what the 00:20:08.066 --> 00:20:10.658 - typescript looks like. Let's go ahead and take a 00:20:10.658 --> 00:20:11.810 - look at the HTML. 00:20:13.070 --> 00:20:16.151 - And then after that I will kind of jump into any questions on 00:20:16.151 --> 00:20:18.995 - this component. Uhm, so if you could just hold those off just 00:20:18.995 --> 00:20:20.654 - for a moment if you have them. 00:20:22.880 --> 00:20:27.920 - So as we know with components this is being injected into a 00:20:27.920 --> 00:20:32.120 - component above it. So wherever router is being injected, this 00:20:32.120 --> 00:20:37.580 - is going to inject inside of it. So with angular JS you'll see 00:20:37.580 --> 00:20:42.200 - back when we had only directives and didn't have the component 00:20:42.200 --> 00:20:46.820 - directive which is brought in an angular 1.5 sometimes and stuff 00:20:46.820 --> 00:20:52.280 - you might see a directive that has like a property on it called 00:20:52.280 --> 00:20:56.640 - replaced true. Anna, nice little note or a comment on that kind 00:20:56.640 --> 00:21:00.105 - of says why we have that turned on in the directive. 00:21:01.020 --> 00:21:05.262 - And a lot of the times it's so the styling will appear to be 00:21:05.262 --> 00:21:08.595 - correct or it could have something to do with the scope 00:21:08.595 --> 00:21:11.322 - for that particular component or something like that, but. 00:21:12.170 --> 00:21:17.045 - Uh, as far as angular nine and really angular 2 plus goes is 00:21:17.045 --> 00:21:21.545 - all of your you know, there's a couple of different things that 00:21:21.545 --> 00:21:24.920 - happen with your components compared to directives. All of 00:21:24.920 --> 00:21:27.920 - your scope variables are directly bound to your 00:21:27.920 --> 00:21:31.295 - component, whereas they aren't. Unless you specifically say two, 00:21:31.295 --> 00:21:35.420 - bind them and you'll see that manuals, directives or says bind 00:21:35.420 --> 00:21:39.920 - true or bind two directive true or something like that. I can't 00:21:39.920 --> 00:21:41.420 - remember the exact syntax. 00:21:41.930 --> 00:21:46.382 - Uhm, but here they are always bound to the component out of 00:21:46.382 --> 00:21:50.463 - the box and then we don't have the replace property anymore. 00:21:50.463 --> 00:21:53.802 - And angular. It's just implicit that everything's, you know, 00:21:53.802 --> 00:21:57.883 - bound to it, so we don't have that replaced true thing 00:21:57.883 --> 00:22:02.335 - anymore, because if you had like a Divit would replace the actual 00:22:02.335 --> 00:22:06.416 - element at runtime. If we inspect here, we should just see 00:22:06.416 --> 00:22:07.529 - are nice little. 00:22:09.010 --> 00:22:12.420 - Component just kind of injected, uh, so you can see 00:22:12.420 --> 00:22:15.830 - that app cities here that component. It's not doing it 00:22:15.830 --> 00:22:18.217 - replace. This is just legitimately the component 00:22:18.217 --> 00:22:20.263 - that's being injected into the Dom. 00:22:21.890 --> 00:22:26.138 - Alright, so uh, just kind of rolling down the list. We're all 00:22:26.138 --> 00:22:30.032 - familiar, you know. I'm sure even back end, uh, seen these 00:22:30.032 --> 00:22:33.926 - before. Nice little H1. Nice little paragraph tag and then we 00:22:33.926 --> 00:22:37.466 - have our Ng if statement in slightly different syntax and 00:22:37.466 --> 00:22:42.068 - what we're used to on angular. Just you know, if you're doing a 00:22:42.068 --> 00:22:46.670 - for loop or if or anything like that, it's just a asterisk and 00:22:46.670 --> 00:22:50.564 - then it's camel case instead of being hyphenated or kebab case. 00:22:50.564 --> 00:22:52.688 - So basically saying if we don't 00:22:52.688 --> 00:22:56.740 - have cities. I just show that were loading and again we use 00:22:56.740 --> 00:23:01.108 - this in step with a nice little gear turning thing. Uhm so if we 00:23:01.108 --> 00:23:05.476 - have a nice state in the Dom that app wide so if you know. 00:23:06.440 --> 00:23:10.054 - If, uh, if you know anything in the back ends like running or 00:23:10.054 --> 00:23:13.112 - the back end of the front end application is running for 00:23:13.112 --> 00:23:16.726 - whichever reason we want to show that gear spinning so to the you 00:23:16.726 --> 00:23:19.506 - know the user they know something's going on and nothing 00:23:19.506 --> 00:23:23.120 - is broken. So if we refresh the page we should see that nice 00:23:23.120 --> 00:23:26.178 - thing because as soon as this gets instantiated it's going to 00:23:26.178 --> 00:23:30.989 - do a call. And then, uh, as soon as we get that call back 00:23:30.989 --> 00:23:33.948 - to the front. Uh, it should resolve and update the state. 00:23:33.948 --> 00:23:36.907 - But as you can see again, I'm hitting. You know, I'm 00:23:36.907 --> 00:23:39.866 - refreshing the page. I'm doing that, get call again and you 00:23:39.866 --> 00:23:44.170 - can see it for a second. So not only is it up in the left hand 00:23:44.170 --> 00:23:47.129 - corner, but this bit is actually right here as well for 00:23:47.129 --> 00:23:50.895 - the grid so we can see it at the top. And we're doing it 00:23:50.895 --> 00:23:51.971 - another place as well. 00:23:54.110 --> 00:23:56.210 - So, uh, this is just kind of 00:23:56.210 --> 00:23:59.939 - like, uh? Uh, AngularJS material design of the Kindle 00:23:59.939 --> 00:24:04.060 - grid that we use. It kind of has the same kind of feel. 00:24:04.060 --> 00:24:07.547 - Again, I don't have a whole lot of experience with this, 00:24:07.547 --> 00:24:10.717 - so I couldn't go into really meticulous detail with you 00:24:10.717 --> 00:24:13.253 - guys on exactly how all of this works. 00:24:14.730 --> 00:24:19.350 - But it's kind of in in the same thing with Kindle, right, uh, we 00:24:19.350 --> 00:24:23.970 - or the CD grid? That's based off of, you know, kinda kind of, but 00:24:23.970 --> 00:24:28.590 - you just feed it the data source so we know that our data sources 00:24:28.590 --> 00:24:32.220 - its cities, right? So we're just feeding it the scope variable 00:24:32.220 --> 00:24:35.520 - that we have bound to our component. Easy enough cities. 00:24:35.520 --> 00:24:39.810 - And then as the data source. And then these are just nice classes 00:24:39.810 --> 00:24:44.100 - for making it look nice and so you can use angular material as 00:24:44.100 --> 00:24:45.750 - a replacement for bootstrap as 00:24:45.750 --> 00:24:49.320 - well. So you'll see you know different classes of Matt Dash 00:24:49.320 --> 00:24:52.872 - and it's just like same thing with, you know call dash or 00:24:52.872 --> 00:24:55.832 - anything like that. You can have nice prefix for material. 00:24:56.560 --> 00:25:00.486 - Uhm, and then this is not, uh, material. This is just what we 00:25:00.486 --> 00:25:04.714 - get with angular, so we want it to be hidden. If there's not any 00:25:04.714 --> 00:25:08.338 - cities, right? So if there's not cities, we want that to be 00:25:08.338 --> 00:25:11.660 - hidden, and then we're going to see that that loading symbol 00:25:11.660 --> 00:25:15.586 - here and then on this form field as well for our nice little 00:25:15.586 --> 00:25:19.814 - input at the top of our grid, we can see that there's some nice 00:25:19.814 --> 00:25:23.438 - CSS happening if we click into it, and if it's active again, 00:25:23.438 --> 00:25:26.458 - you get it with built into material, just like you. 00:25:26.550 --> 00:25:31.464 - Would with you know bootstrap so you don't have to do any of this 00:25:31.464 --> 00:25:36.378 - stuff. Kind of out of the box. It just comes along with it and 00:25:36.378 --> 00:25:39.537 - we're all used to the placeholder attribute for our 00:25:39.537 --> 00:25:43.749 - inputs and then we get this nice little keyup function which is 00:25:43.749 --> 00:25:47.610 - built into angular as just a nice little event listener. So 00:25:47.610 --> 00:25:52.173 - with jQuery I'm sure we're all used to the old school jQuery on 00:25:52.173 --> 00:25:55.683 - Kia Poranki, down or onclick or whichever. Well you know 00:25:55.683 --> 00:25:56.736 - obviously as you. 00:25:56.850 --> 00:26:01.803 - Well, most of your where some of you might not be, but angular 00:26:01.803 --> 00:26:06.375 - brings in it's a own lightweight version of jQuery and less you 00:26:06.375 --> 00:26:09.804 - specifically inject the full jQuery Library into angular. It 00:26:09.804 --> 00:26:13.995 - doesn't have like its own version of light jQuery, so all 00:26:13.995 --> 00:26:18.186 - these like Keyup and keydown events will be very familiar to 00:26:18.186 --> 00:26:20.472 - you. Just kind of, you know. 00:26:21.900 --> 00:26:25.167 - Three of those, and then as soon as we hit that 00:26:25.167 --> 00:26:27.840 - event, we're hitting our load data method and R. 00:26:29.650 --> 00:26:32.730 - Uh, in our controller and then we're just passing that event 00:26:32.730 --> 00:26:35.810 - target value right? So? And that's going to be whatever is 00:26:35.810 --> 00:26:36.930 - tide to this input? 00:26:38.100 --> 00:26:43.860 - Cool all right? Uh? And then just kinda scrolling down. Um is 00:26:43.860 --> 00:26:49.140 - pretty basic things here. Um is were just interpolating our city 00:26:49.140 --> 00:26:51.540 - ID city name Latin long. 00:26:52.980 --> 00:26:56.800 - And again, not super familiar with this syntax or these 00:26:56.800 --> 00:27:00.238 - directives, but you know, looks like they're doing something 00:27:00.238 --> 00:27:04.058 - here in the background and giving us you know something 00:27:04.058 --> 00:27:09.788 - that we'd be used to in CV grid or Kindo. Just kind of giving it 00:27:09.788 --> 00:27:14.372 - a header and then giving it that header definition and then kind 00:27:14.372 --> 00:27:18.956 - of giving it a variable, right? So we're saying This is, you 00:27:18.956 --> 00:27:23.158 - know, let city and then giving it that definition and then 00:27:23.158 --> 00:27:27.773 - interpolating that. City dot name here. So will have all the 00:27:27.773 --> 00:27:31.076 - city names, latitude and longitude and it looks like 00:27:31.076 --> 00:27:35.480 - we're doing that for quite a bit. And then here's our nice 00:27:35.480 --> 00:27:38.783 - little cool paginator, which unfortunately I don't know a 00:27:38.783 --> 00:27:42.453 - whole lot about either, so my apologies there, but the 00:27:42.453 --> 00:27:45.389 - material library is quite massive for angular. They've 00:27:45.389 --> 00:27:47.224 - been working on it for. 00:27:48.430 --> 00:27:52.364 - Wanna say two years now so you kind of have a whole lot of 00:27:52.364 --> 00:27:55.736 - stuff just built into angular out of the box that you don't 00:27:55.736 --> 00:27:58.827 - really need to bring in like other libraries or plugins and 00:27:58.827 --> 00:28:02.199 - that's the big thing. I would say to as the takeaway 4. 00:28:03.850 --> 00:28:07.240 - You know angular compared to like reactor, jQuery or anything 00:28:07.240 --> 00:28:11.308 - like that word. Those are you know more or less libraries and 00:28:11.308 --> 00:28:15.376 - to get something like this you have to plug in another suburb, 00:28:15.376 --> 00:28:18.766 - library or other kind of JavaScript module and bring it 00:28:18.766 --> 00:28:22.495 - in and anglers really enterprise because it has all this already 00:28:22.495 --> 00:28:27.919 - baked into it. So all we need to do to get this is just to bring 00:28:27.919 --> 00:28:32.780 - in the. Um the the module for material right? And then last 00:28:32.780 --> 00:28:36.388 - thing we're going to cover is just how that's being brought 00:28:36.388 --> 00:28:40.652 - in. And then we'll open up the floor to any kind of questions. 00:28:40.652 --> 00:28:44.588 - So we're just going to pop over to our app module, TS. 00:28:45.640 --> 00:28:48.950 - And we can see that we're bringing that Angel angular 00:28:48.950 --> 00:28:52.591 - material module from, you know, just the a node module package 00:28:52.591 --> 00:28:56.563 - that we brought in. So that's just coming in. It's not built 00:28:56.563 --> 00:29:00.535 - into at angular, it's just it's own. A separate thing that we 00:29:00.535 --> 00:29:04.838 - can just bring in, and then we can see that we're importing it 00:29:04.838 --> 00:29:06.493 - here as its own module. 00:29:07.370 --> 00:29:11.882 - And we're also bring in our nice little router module here from 00:29:11.882 --> 00:29:16.394 - core and giving it are nice little paths for our router so 00:29:16.394 --> 00:29:20.906 - we know for hitting cities. It's feeding that or it's getting fed 00:29:20.906 --> 00:29:22.034 - that cities component. 00:29:23.610 --> 00:29:27.653 - And that's basically it. So I'm not going to jump into too much 00:29:27.653 --> 00:29:31.074 - boilerplate code detail, since we've kind of covered that in a 00:29:31.074 --> 00:29:34.495 - previous previous trainings. But if anybody has any code over the 00:29:34.495 --> 00:29:37.294 - boilerplate or any questions over the component we just 00:29:37.294 --> 00:29:38.538 - covered, please ask away. 00:29:39.610 --> 00:29:42.694 - Cool all right? Uh? And then since you guys don't have any 00:29:42.694 --> 00:29:45.778 - questions, I'm just going to kind of poke around and ask a 00:29:45.778 --> 00:29:47.320 - few people questions we have about. 00:29:48.860 --> 00:29:52.626 - 10 minutes or so before we jump over to James a section or Chris 00:29:52.626 --> 00:29:56.661 - if you want to kind of, do you want to cover the back end up 00:29:56.661 --> 00:29:59.620 - going to say yeah, there's some very interesting things on the 00:29:59.620 --> 00:30:01.335 - back end. If you want, I'd love 00:30:01.335 --> 00:30:04.960 - to go over those. Anne, OK. 00:30:05.600 --> 00:30:09.786 - And feel free if you guys have questions still, uhm, uh, so a 00:30:09.786 --> 00:30:13.650 - couple of things. I just wanted to do a quick little follow-up 00:30:13.650 --> 00:30:17.514 - and thanks again CD. This is just a quick follow up from 00:30:17.514 --> 00:30:21.378 - last week and then I'll dive right into this weeks code so 00:30:21.378 --> 00:30:25.564 - we went over the database last time in quite a bit of detail. 00:30:25.564 --> 00:30:29.750 - It wasn't seated yet and in that in that set of code, if 00:30:29.750 --> 00:30:33.614 - you want to follow along you have this world cities dot XLSX 00:30:33.614 --> 00:30:34.902 - that you can use. 00:30:36.250 --> 00:30:40.078 - I thought this might be helpful for some people. Probably most 00:30:40.078 --> 00:30:43.906 - people won't need this, but this was the raw data here. 00:30:44.510 --> 00:30:48.982 - And it wasn't didn't have some of these things done to it yet. 00:30:49.780 --> 00:30:53.980 - So I'll just hide this for now. This is what it looked like. So 00:30:53.980 --> 00:30:58.480 - what I did was I went and to see this pretty quickly and this you 00:30:58.480 --> 00:31:02.680 - know it's not always going to be this easy, but I looked at the 00:31:02.680 --> 00:31:06.899 - table structure. And you can do this a lot of different 00:31:06.899 --> 00:31:10.209 - ways, but if you're trying to get something done pretty 00:31:10.209 --> 00:31:14.181 - fast, you can kind of take data and copy it into into 00:31:14.181 --> 00:31:15.505 - SQL Server pretty easily. 00:31:16.570 --> 00:31:21.330 - And when you have an ID column, if you just leave a blank there, 00:31:21.330 --> 00:31:25.750 - you can literally go into edit mode and Drop it in into edit 00:31:25.750 --> 00:31:30.170 - mode into a new row, which is kind of cool, so you can 00:31:30.170 --> 00:31:34.250 - literally paste. That's what I did a lot of times. Also, just 00:31:34.250 --> 00:31:37.990 - make a little statement so you can say insert into country. 00:31:39.010 --> 00:31:44.374 - Uhm, and then you would just say, uh, like I don't. I 00:31:44.374 --> 00:31:49.738 - don't know what the columns are, but name ISO two. I so 00:31:49.738 --> 00:31:51.526 - three I said 3. 00:31:53.280 --> 00:31:58.776 - Values. And then kind of build up a little in line SQL query 00:31:58.776 --> 00:32:02.780 - that you can use and then you can just add in these data 00:32:02.780 --> 00:32:07.092 - values. I do this all the time with data import and so you can 00:32:07.092 --> 00:32:11.096 - just kind of use this to build up and I'll just kind of. 00:32:12.000 --> 00:32:16.172 - Put something simple here so you can see it, but you can use this 00:32:16.172 --> 00:32:20.940 - if you need to go get a bunch of data and pull it in. It's kind 00:32:20.940 --> 00:32:24.814 - of a nice way to just quickly get something done, and you can 00:32:24.814 --> 00:32:28.092 - also use Redgate as well. This isn't a complete statement, but 00:32:28.092 --> 00:32:32.562 - it would work if I built it out. Then once I got all that data 00:32:32.562 --> 00:32:35.542 - since we had a foreign key relationship as Chris is 00:32:35.542 --> 00:32:39.416 - pointing out here, what I would do is get the import the cities 00:32:39.416 --> 00:32:41.502 - you have to you get the foreign 00:32:41.502 --> 00:32:46.040 - key constraint. I ideally, uh, so the city is related to the 00:32:46.040 --> 00:32:50.402 - country. And so I just grabbed all these values, 00:32:50.402 --> 00:32:55.011 - toss them into Excel here. Uhm, and I and I basically 00:32:55.011 --> 00:32:57.525 - made a named range in Excel. 00:32:58.950 --> 00:33:01.740 - And you can do that by selecting the records and 00:33:01.740 --> 00:33:05.088 - saying to find name an. You can modify the range if you 00:33:05.088 --> 00:33:07.041 - want. You can see the range here. 00:33:08.200 --> 00:33:13.272 - And then you can use that in a V look up, which is kind of nice, 00:33:13.272 --> 00:33:18.027 - so I just did a little V look up if you haven't done this before, 00:33:18.027 --> 00:33:21.197 - it's very helpful if you're doing some data manipulation. So 00:33:21.197 --> 00:33:23.416 - just said V, look up on the 00:33:23.416 --> 00:33:28.606 - country right here. Um, based on the countries table, that's what 00:33:28.606 --> 00:33:30.866 - I named this range here. 00:33:31.720 --> 00:33:35.794 - And it's looking at column 4, so it's going to see if the the 00:33:35.794 --> 00:33:39.868 - first row. The way we look up works is look at the first row. 00:33:41.370 --> 00:33:44.682 - Column rather looks at the first column and see if there's any 00:33:44.682 --> 00:33:48.270 - value that matches. If so, then it grabs the column with in that 00:33:48.270 --> 00:33:52.134 - table that you tell it to grab, so it's going to see all right. 00:33:52.134 --> 00:33:55.722 - do I find Kosovo? Yes, and it's want me to grab column for, 00:33:55.722 --> 00:33:59.586 - which is an ID and then whether or not it's an exact match. So 00:33:59.586 --> 00:34:04.002 - then I got all of my country IDs by doing that v look up so you 00:34:04.002 --> 00:34:07.590 - can just kind of see it just dynamically look set up for me, 00:34:07.590 --> 00:34:11.178 - and then I was able to again just do a little paced action. 00:34:11.780 --> 00:34:16.204 - By adding an extra column up and then that's how I got all the 00:34:16.204 --> 00:34:19.996 - data in there pretty fast. There other good ways, better ways of 00:34:19.996 --> 00:34:24.104 - doing it. I just thought that might be kind of handy for folks 00:34:24.104 --> 00:34:27.896 - that do data stuff and might want to know some of those 00:34:27.896 --> 00:34:31.372 - little tips and tricks when you're dealing with a lot of 00:34:31.372 --> 00:34:34.848 - data. This can be really handy. This model doing something like 00:34:34.848 --> 00:34:38.956 - this. And then of course you can do things like using an import 00:34:38.956 --> 00:34:40.852 - processor data import tool if it 00:34:40.852 --> 00:34:43.935 - gets really significant. Uh, the other thing from 00:34:43.935 --> 00:34:47.305 - last week that we went over was this SQL profiler 00:34:47.305 --> 00:34:49.664 - so I did get this to work. 00:34:51.460 --> 00:34:54.008 - I cried a little bit last night because it's such a cool tool 00:34:54.008 --> 00:34:56.556 - and I wasn't able to show it very well. So let me just 00:34:56.556 --> 00:35:00.664 - quickly show that. So here we are, with our little um sample 00:35:00.664 --> 00:35:06.372 - application. Annum. You can go to the different parts of the 00:35:06.372 --> 00:35:10.548 - application, so I'm just going to look up Austin. Um, an I'll 00:35:10.548 --> 00:35:15.072 - just start by looking up AUS here and you can see it's doing 00:35:15.072 --> 00:35:19.944 - things as I type. So if we wanted to look up the 28th of 00:35:19.944 --> 00:35:23.424 - November, which is an actual city apparently so thanks for 00:35:23.424 --> 00:35:27.600 - that. So you can actually see what it's doing in the database. 00:35:27.600 --> 00:35:31.428 - Is getting account from the table and then it's also going 00:35:31.428 --> 00:35:33.168 - in running its search command. 00:35:33.620 --> 00:35:38.702 - On the name, a column and so you will be able to expand this 00:35:38.702 --> 00:35:41.969 - searching and filtering later, but this is pretty interesting 00:35:41.969 --> 00:35:45.962 - because I'll show you here in a minute where it's actually 00:35:45.962 --> 00:35:49.592 - building up the query using entity framework inside of the 00:35:49.592 --> 00:35:52.496 - code and what's happening physically in the application 00:35:52.496 --> 00:35:56.126 - now is the SQL commands are coming from entity framework. 00:35:56.126 --> 00:36:00.482 - It's building those up for us and sending them to the SQL 00:36:00.482 --> 00:36:05.321 - Server. And so you can see with this profile are you get the raw 00:36:05.321 --> 00:36:08.291 - data. What's actually going across the wire? And as you'll 00:36:08.291 --> 00:36:11.855 - see as we get further into the chapters, these can get pretty 00:36:11.855 --> 00:36:14.825 - gnarly and they need to be optimized. So it's really 00:36:14.825 --> 00:36:18.983 - helpful for you to see how to do that. And just as a friendly 00:36:18.983 --> 00:36:21.953 - reminder, if you don't know how to turn this on. 00:36:23.140 --> 00:36:27.652 - You can just go from your SQL Server Management Studio, go to 00:36:27.652 --> 00:36:32.540 - tools SQL profiler, bam your end and then I like to select this 00:36:32.540 --> 00:36:36.676 - little bad boy down here. It's called tuning. That seems good, 00:36:36.676 --> 00:36:40.812 - pretty obvious, and then you can go to event selection, column 00:36:40.812 --> 00:36:44.572 - filters, database name and then put in your database name. 00:36:45.430 --> 00:36:47.887 - So in our case, I did cities 00:36:47.887 --> 00:36:51.912 - like that. And then boom away you go and it's so let you start 00:36:51.912 --> 00:36:56.464 - tracking everything. So then if we make a command here. 00:36:59.140 --> 00:37:02.280 - You can see it's tracking everything so that that might 00:37:02.280 --> 00:37:06.362 - be helpful for everyone to see that in action and then just a 00:37:06.362 --> 00:37:09.816 - couple of other things that I thought were yeah, go ahead, 00:37:09.816 --> 00:37:10.444 - sorry, sorry. 00:37:12.180 --> 00:37:17.922 - So is that available on every a SQL Studio Management Software? 00:37:18.620 --> 00:37:21.722 - Where is my knowledge? It is. Yeah, I think even SQL 00:37:21.722 --> 00:37:22.286 - Server express. 00:37:24.350 --> 00:37:27.340 - Alright, that's pretty cool. So yeah, it's pretty cool. It's 00:37:27.340 --> 00:37:31.227 - really helpful and you can use it to see why things are, you 00:37:31.227 --> 00:37:34.516 - know, going slow that that's just a tiny sliver. You know, 00:37:34.516 --> 00:37:37.805 - seeing the actual SQL commands, it can do some pretty detailed 00:37:37.805 --> 00:37:41.393 - profiling of whether or not you should turn on indexes and make 00:37:41.393 --> 00:37:44.529 - recommendations and. You can, it's uh, it's it's own 00:37:44.529 --> 00:37:46.752 - practice in and of itself, so it's pretty cool. 00:37:48.280 --> 00:37:51.668 - Yeah, uh, so this is another really interesting thing. OK, so 00:37:51.668 --> 00:37:55.364 - let me just give some context here. So I'm on Chapter 5. 00:37:55.364 --> 00:37:59.368 - There's a link in the channel if you guys want to go download 00:37:59.368 --> 00:38:03.680 - this so you can actually look at the code with me here in the 00:38:03.680 --> 00:38:07.376 - link in the channel for this meeting and you'll see that I'm 00:38:07.376 --> 00:38:11.380 - basically going to dig in on the controllers and the data side of 00:38:11.380 --> 00:38:14.768 - things, so this is kind of the end that's receiving the 00:38:14.768 --> 00:38:19.664 - request. From this this type of route and in the book it 00:38:19.664 --> 00:38:24.006 - actually kind of shows you you can go play with this. This is 00:38:24.006 --> 00:38:28.348 - the raw JSON the CB was talking about earlier, so you can come 00:38:28.348 --> 00:38:33.358 - in and kind of see that the way that we built this is just using 00:38:33.358 --> 00:38:36.364 - these little querystring parameters that get passed in to 00:38:36.364 --> 00:38:40.038 - this route and this is really, really interesting the way they 00:38:40.038 --> 00:38:43.712 - did this. So they actually use generics here, so we'll see 00:38:43.712 --> 00:38:46.050 - later that we can change out the 00:38:46.050 --> 00:38:50.060 - cities. And the countries here and it's actually going to use 00:38:50.060 --> 00:38:53.680 - this, impasse it into the methods and pass along the 00:38:53.680 --> 00:38:57.662 - context through through to kind of a generic method. So I'll 00:38:57.662 --> 00:39:02.368 - show you that in a minute, so we're not having to rewrite the 00:39:02.368 --> 00:39:06.712 - same paging code over and over, but you can see the parameters 00:39:06.712 --> 00:39:11.418 - here in the URL. Pretty basic. You got like what page are you 00:39:11.418 --> 00:39:15.038 - on? How many records do you want to come back? 00:39:16.290 --> 00:39:19.080 - What's your sorting column and sort order and then 00:39:19.080 --> 00:39:21.870 - what's your filter column and then what's your filter 00:39:21.870 --> 00:39:25.590 - query? I'm not sure if this is implemented to do this or 00:39:25.590 --> 00:39:29.620 - not, but we can kind of try playing with this in the next 00:39:29.620 --> 00:39:33.650 - chapter. I know for sure it is, but if we wanted to type 00:39:33.650 --> 00:39:36.440 - in like a different parameter, we might try that 00:39:36.440 --> 00:39:39.540 - really fast in just one second. Let me try this. 00:39:40.710 --> 00:39:44.087 - Just because it seems like a fun, good idea to break 00:39:44.087 --> 00:39:45.008 - everything, why not? 00:39:46.430 --> 00:39:48.250 - See if that works, woo. 00:39:49.860 --> 00:39:52.610 - It doesn't like that. So, uh, we'll be dealing with 00:39:52.610 --> 00:39:53.160 - that later. 00:39:54.480 --> 00:39:58.172 - But it's kind of fun to break stuff. Uh, but anyway, so you 00:39:58.172 --> 00:40:00.160 - can just see if I change this. 00:40:00.350 --> 00:40:04.310 - Value bam then it's going to actually pull up 100 records 00:40:04.310 --> 00:40:09.350 - here, so this kind of cool to see the raw data and at the 00:40:09.350 --> 00:40:13.310 - bottom of all of these records is the all important. Really 00:40:13.310 --> 00:40:17.630 - this paging information. And for those of you on the back end 00:40:17.630 --> 00:40:21.950 - side of things, you know this is not necessarily the most trivial 00:40:21.950 --> 00:40:26.630 - thing to make. I mean, it's a pretty kind of wrote kind of 00:40:26.630 --> 00:40:29.870 - standard thing, you know, but it's not necessarily like 00:40:29.870 --> 00:40:32.750 - something you're just gonna go right really quickly. 00:40:32.900 --> 00:40:36.932 - And and have it work really well. Uh, you know, it's going 00:40:36.932 --> 00:40:41.300 - to take some thought, and these guys did a really good job with 00:40:41.300 --> 00:40:44.660 - it is a pretty interesting implementation that they did so 00:40:44.660 --> 00:40:49.364 - the first thing I want to show you is this API result class and 00:40:49.364 --> 00:40:52.724 - basically this is conceptually the way that I would suggest 00:40:52.724 --> 00:40:56.756 - thinking about it is this is giving you the page data and 00:40:56.756 --> 00:41:00.788 - it's been kind of added to to include sorting and filtering so 00:41:00.788 --> 00:41:03.140 - you can kind of see that here. 00:41:03.390 --> 00:41:09.030 - Um, an essentially what we're doing is we're taking data in an 00:41:09.030 --> 00:41:14.200 - were just literally passing that data back, so we're not really 00:41:14.200 --> 00:41:20.310 - doing a whole lot with the data itself, but we're kind of coming 00:41:20.310 --> 00:41:25.480 - in here in doing some basics with the calculating the total 00:41:25.480 --> 00:41:30.180 - pages, and there's some really interesting things that they did 00:41:30.180 --> 00:41:33.940 - with this overall method, so here we're running. 00:41:34.100 --> 00:41:38.792 - An async method, and, um, you can see that this is using 00:41:38.792 --> 00:41:41.920 - generics, and the main idea behind the generics. 00:41:42.620 --> 00:41:46.130 - If you're not familiar with generics, uh, basically the 00:41:46.130 --> 00:41:50.810 - concept is that you can use the same method and pass different 00:41:50.810 --> 00:41:53.540 - different types of data, different data types. 00:41:55.010 --> 00:41:58.960 - And utilized that same method, and that is a gross 00:41:58.960 --> 00:42:02.910 - oversimplification of generics. It's useful in a lot of other 00:42:02.910 --> 00:42:07.255 - ways, but in this particular case we're passing a list of 00:42:07.255 --> 00:42:11.600 - cities or countries and their their past in is this data. 00:42:13.400 --> 00:42:18.870 - Variable name and so we're gonna do some things inside of this, 00:42:18.870 --> 00:42:23.680 - create a sink that I think are pretty interesting. So if you go 00:42:23.680 --> 00:42:27.380 - through the book they kind of add to this incrementally. 00:42:28.120 --> 00:42:32.670 - So let me kind of start by going to the actual controller so you 00:42:32.670 --> 00:42:36.570 - can kind of follow the flow. So whenever I make this command. 00:42:38.010 --> 00:42:43.666 - Here. You can see we're going to slash API slash cities and then 00:42:43.666 --> 00:42:46.410 - we have some querystring variables parameters. So let's 00:42:46.410 --> 00:42:50.869 - go back to our code and just kind of see how this is 00:42:50.869 --> 00:42:54.299 - mechanically working. So the routing is bringing us to hear. 00:42:55.820 --> 00:43:00.916 - So you can see that were coming into this section of the code. 00:43:00.916 --> 00:43:04.836 - Uh, this get CDs and it's literally taking those parameter 00:43:04.836 --> 00:43:09.148 - values and it's giving them default values, so if you don't 00:43:09.148 --> 00:43:13.852 - pass them in, it's OK. It's going to set those values for 00:43:13.852 --> 00:43:18.556 - you, so this is very helpful if you're not super familiar with 00:43:18.556 --> 00:43:23.260 - this, it's a really good idea if you're going to do something 00:43:23.260 --> 00:43:25.612 - that's breakable by an end user. 00:43:26.270 --> 00:43:30.278 - Come to just put some default values in so that they can't 00:43:30.278 --> 00:43:33.952 - break it by not including that data. That's just the best 00:43:33.952 --> 00:43:38.628 - practice. Overall, we do that a lot with Seth where we add a new 00:43:38.628 --> 00:43:42.636 - config setting an instead of making it to where you have to 00:43:42.636 --> 00:43:46.310 - have that config setting in order for stuff to work. It 00:43:46.310 --> 00:43:49.650 - gracefully will continue on if you don't have the config 00:43:49.650 --> 00:43:53.985 - setting there. And so anyway, that's the same idea here and 00:43:53.985 --> 00:43:57.670 - then. This is literally just calling that create a sink. So 00:43:57.670 --> 00:44:02.025 - if we can have drill down on this, you'll see it goes right 00:44:02.025 -->00:44:05.710 - to that. Create a sink. So before we dive into that 00:44:05.710 --> 00:44:08.725 - something that I thought was really interesting about how 00:44:08.725 --> 00:44:09.730 - they did this. 00:44:10.410 --> 00:44:16.062 - They are using this context in this context, is really this is 00:44:16.062 --> 00:44:20.772 - the going to the database, so this context cities is 00:44:20.772 --> 00:44:26.424 - essentially giving us all of the it's starting at query on I 00:44:26.424 --> 00:44:31.605 - queryable that gives us all of the cities, so it's basically 00:44:31.605 --> 00:44:34.650 - saying. I haven't run this SQL 00:44:34.650 --> 00:44:39.520 - command yet. I haven't built a SQL command yet because just as 00:44:39.520 --> 00:44:42.634 - a friendly reminder with entity framework, it doesn't. It 00:44:42.634 --> 00:44:46.440 - doesn't actually execute on the SQL Command until you until you 00:44:46.440 --> 00:44:50.938 - to list it or do something that's going to tell it to go 00:44:50.938 --> 00:44:56.128 - execute. So at this point it's a TV set an we're going to be if 00:44:56.128 --> 00:45:00.972 - you go pull if you go over to here, you'll see that it's it's 00:45:00.972 --> 00:45:05.816 - coming in as an I queryable and so we're just going to use that 00:45:05.816 --> 00:45:08.584 - to then build on and add to our. 00:45:08.910 --> 00:45:12.018 - Query of that um, of that 00:45:12.018 --> 00:45:16.388 - context. So with any framework were doing something pretty 00:45:16.388 --> 00:45:19.276 - interesting because we're basically using generics to pass 00:45:19.276 --> 00:45:23.969 - in a DB set that were then casting as this I queryable, and 00:45:23.969 --> 00:45:28.301 - then we're going to extend on this so the beauty behind this 00:45:28.301 --> 00:45:32.994 - is if you had cities and then we'll go look at countries and 00:45:32.994 --> 00:45:37.326 - you can see that it's doing the same pattern is calling the 00:45:37.326 --> 00:45:40.936 - exact same method and it's passing in the same everything 00:45:40.936 --> 00:45:44.546 - except for its context countries instead. So it's a really 00:45:44.546 --> 00:45:48.290 - powerful. Concept because now you could. You could make 20 00:45:48.290 --> 00:45:51.990 - different tables and have 20 different end points that all 00:45:51.990 --> 00:45:55.690 - get to take advantage of the same thing with minimal 00:45:55.690 --> 00:46:00.603 - additional code. So anyway, going back in um, there are also 00:46:00.603 --> 00:46:04.640 - some really interesting thing. So in this case, if you just 00:46:04.640 --> 00:46:06.108 - take the the cities. 00:46:06.750 --> 00:46:11.586 - We're basically passing in our. If you want to think of it 00:46:11.586 --> 00:46:16.019 - visually, our table for passing that in an it's essentially kind 00:46:16.019 --> 00:46:20.452 - of. Conceptually it's what query are we going to build against 00:46:20.452 --> 00:46:24.885 - that table. Right now it's just raw form. Whenever we do. 00:46:24.885 --> 00:46:28.915 - Whenever we do this, context cities it select star from 00:46:28.915 --> 00:46:35.014 - cities. But whenever we add to that, I queryable where kind of 00:46:35.014 --> 00:46:36.376 - further refining it. 00:46:36.940 --> 00:46:41.128 - So the first thing that we're doing is we're checking to see 00:46:41.128 --> 00:46:45.665 - if our filter data is null, and we're also checking to see if 00:46:45.665 --> 00:46:47.061 - we're getting SQL injection 00:46:47.061 --> 00:46:52.276 - attacks. Which is what this guy right here is doing and I won't 00:46:52.276 --> 00:46:56.938 - go into detail on that quite yet. We can look at that in just 00:46:56.938 --> 00:47:00.934 - a minute, but essentially it's just seeing if it's good data or 00:47:00.934 --> 00:47:04.930 - not, and if it is, if this filter column and filter query 00:47:04.930 --> 00:47:08.926 - is good data, then it's going to literally append to the source 00:47:08.926 --> 00:47:13.255 - and you guys have probably seen this a lot in stuff and you're 00:47:13.255 --> 00:47:16.918 - basically just kind of adding A with link where adding a 00:47:16.918 --> 00:47:21.004 - statement aware statement. To our query are I queryable, so in 00:47:21.004 --> 00:47:24.880 - this case we're just doing a filter and this is kind of 00:47:24.880 --> 00:47:28.756 - clever how they did this, so I thought I thought this was 00:47:28.756 --> 00:47:31.986 - pretty interesting, so they're doing a string dot format and 00:47:31.986 --> 00:47:35.216 - then there are also passing in this filter query. So 00:47:35.216 --> 00:47:39.092 - mechanically how this works. I think it's helpful to look at it 00:47:39.092 --> 00:47:44.794 - like this. Um, so you can kind of see what's going on so that 00:47:44.794 --> 00:47:50.406 - at 0. Is this parameter and it's getting passed into here? 00:47:51.950 --> 00:47:53.180 - And then the. 00:47:54.580 --> 00:48:00.800 - Uh, the braces 0 is this filter column right here? 00:48:01.570 --> 00:48:06.708 - And so whenever you do a string format and you do the UM, braces 00:48:06.708 --> 00:48:11.479 - like that, it just passes in values that are in order with a 00:48:11.479 --> 00:48:15.516 - 0 based index and then whenever you're doing these these where 00:48:15.516 --> 00:48:19.186 - commands, there's this nice syntactic sugar that you can use 00:48:19.186 --> 00:48:21.388 - that also let's you pass in. 00:48:23.710 --> 00:48:27.478 - Variables, so essentially this you could rewrite this 00:48:27.478 --> 00:48:34.543 - if you were doing it in a way that was not dry up then you 00:48:34.543 --> 00:48:35.956 - would say where. 00:48:42.230 --> 00:48:45.596 - I guess it's going to be named that contains. 00:48:51.540 --> 00:48:53.328 - Sorry my spelling is not there. 00:49:05.690 --> 00:49:08.530 - And feel free to correct me if anyone sees the. 00:49:09.780 --> 00:49:11.388 - That is being off. 00:49:22.650 --> 00:49:23.618 - Just gonna do this. 00:49:34.740 --> 00:49:38.579 - And that technically it's going to convert this so that it's 00:49:38.579 --> 00:49:43.465 - it's actually using in it, and I don't know that I like. I love 00:49:43.465 --> 00:49:47.653 - this, but it's basically gonna cat, you know, use this so that 00:49:47.653 --> 00:49:50.794 - we can pass in different different filter parameters as 00:49:50.794 --> 00:49:55.680 - we go. So right now we're just using name but will be able to 00:49:55.680 --> 00:49:58.821 - filter on other columns dynamically based on what gets 00:49:58.821 --> 00:50:00.217 - passed in and it's. 00:50:00.390 --> 00:50:04.470 - Going to build it up dynamically for the column name and then 00:50:04.470 --> 00:50:08.550 - also the the query. Uhm, so whether or not it's like the 00:50:08.550 --> 00:50:12.970 - city, or you know some other column it's going to pass in a 00:50:12.970 --> 00:50:16.710 - dynamically. so I thought that was kind of interesting. I don't 00:50:16.710 --> 00:50:20.790 - know that I would want to necessarily do it this way. It 00:50:20.790 --> 00:50:21.810 - seems a little. 00:50:22.750 --> 00:50:23.480 - Um? 00:50:24.550 --> 00:50:28.928 - Not so strongly typed, but it it's interesting, uh, so I 00:50:28.928 --> 00:50:34.102 - thought that was kind of clever. At least, you know as a minimum. 00:50:34.102 --> 00:50:38.480 - And then the other thing that that they're doing is whenever 00:50:38.480 --> 00:50:43.256 - you do clever things like this with data that's coming from a 00:50:43.256 --> 00:50:47.634 - URL. I mean this basically this information. Some of this data 00:50:47.634 --> 00:50:50.818 - is coming straight from these query string parameters. 00:50:51.670 --> 00:50:53.700 - You have to watch out for SQL 00:50:53.700 --> 00:50:58.128 - injection attacks. So like this filter query in the column are 00:50:58.128 --> 00:50:59.576 - what we're passing in 00:50:59.576 --> 00:51:04.637 - ultimately. And this value could be like drop all tables or you 00:51:04.637 --> 00:51:09.408 - know drop tables or what have you um, and so that's what this 00:51:09.408 --> 00:51:13.445 - is valid property is doing. So we're just basically making sure 00:51:13.445 --> 00:51:14.546 - that it's sanitized. 00:51:16.150 --> 00:51:19.707 - So it's. That's kind of the summary, and I don't want 00:51:19.707 --> 00:51:22.863 - to, you know, waste too much of your time looking at it 00:51:22.863 --> 00:51:26.019 - in detail, but it is kind of interesting. You can see how 00:51:26.019 --> 00:51:27.334 - we're trying to cast it. 00:51:28.720 --> 00:51:30.730 - And make sure that it's like. 00:51:31.310 --> 00:51:34.208 - Meeting these certain properties, which is kind of a 00:51:34.208 --> 00:51:38.072 - cool thing to check out and kind of see how it's working. 00:51:38.650 --> 00:51:42.758 - And then as long as it's not, you know, going to throw an 00:51:42.758 --> 00:51:46.866 - exception or be null then will send it back through and let it 00:51:46.866 --> 00:51:48.762 - let it go on and continue. 00:51:50.350 --> 00:51:54.382 - And then the rest of this is pretty trivial, I think, but 00:51:54.382 --> 00:51:57.406 - we're basically doing um somewhat similar thing with our 00:51:57.406 --> 00:52:01.438 - sorting. Uhm, so you can see that we're, you know, we're just 00:52:01.438 --> 00:52:05.134 - doing some basic logic here to determine if it's ascending or 00:52:05.134 --> 00:52:08.158 - descending, and then we're sorting. And we're also doing 00:52:08.158 --> 00:52:10.174 - this kind of fancy little string 00:52:10.174 --> 00:52:14.692 - format concept. Come here, you can see it's using two values, 00:52:14.692 --> 00:52:16.432 - its passing into their uhm? 00:52:17.920 --> 00:52:22.683 - And then finally, um, it's doing the logic needed to properly 00:52:22.683 --> 00:52:28.312 - page the the actual data itself, so not a whole lot of craziness 00:52:28.312 --> 00:52:32.642 - there. This is actually where we're hitting the database now, 00:52:32.642 --> 00:52:37.838 - so this is physically telling it to go execute, and that's where 00:52:37.838 --> 00:52:43.034 - in the code. If we attach, and that might be pretty interesting 00:52:43.034 --> 00:52:47.797 - to do actually, so we can attach, and we can see. 00:52:48.470 --> 00:52:48.970 - Hum. 00:52:50.870 --> 00:52:53.521 - And let's just go with this step through this really fast. 00:52:55.150 --> 00:52:57.831 - OK, so up until that point let 00:52:57.831 --> 00:53:02.164 - me. I'm probably going to have to do this again, but I'm going 00:53:02.164 --> 00:53:05.944 - to clear this just so you can see it. It's OK, I'm going to go 00:53:05.944 --> 00:53:07.204 - through this one more time. 00:53:08.650 --> 00:53:11.220 - So we should have our commands there that hit now 00:53:11.220 --> 00:53:14.304 - I'm going to clear it one more time and we can see. 00:53:17.990 --> 00:53:20.879 - And it looks like we may have account that's 00:53:20.879 --> 00:53:24.089 - happening elsewhere, but OK, so you can see that that 00:53:24.089 --> 00:53:25.373 - trace window is clear. 00:53:26.520 --> 00:53:29.090 - But now if I go in and I've run this. 00:53:30.960 --> 00:53:34.288 - I'm just going to let it run through and I'm, I'm just kind 00:53:34.288 --> 00:53:35.312 - of stepping through here. 00:53:36.210 --> 00:53:36.900 - Um? 00:53:38.320 --> 00:53:40.056 - OK, so you can see that I think 00:53:40.056 --> 00:53:45.386 - it did the count. So we got our count. Uh, but it didn't run our 00:53:45.386 --> 00:53:49.418 - full query. Um, is a very clean query that ran so far. 00:53:50.050 --> 00:53:50.700 - Um? 00:53:51.820 --> 00:53:53.328 - And then come on. 00:53:54.190 --> 00:53:57.172 - I'm just going to have 10 and then you can see right there. It 00:53:57.172 --> 00:53:58.237 - actually ran our full query. 00:53:58.880 --> 00:54:01.870 - So we have account query and then we have our full query and 00:54:01.870 --> 00:54:04.630 - this would be the one that's getting all the the actual data. 00:54:06.650 --> 00:54:11.844 - And you can actually take this and go run it in SQL two and 00:54:11.844 --> 00:54:17.038 - kind of see you know what it does and how long it takes, but 00:54:17.038 --> 00:54:20.377 - that's a really helpful resource for dealing with entity 00:54:20.377 --> 00:54:23.716 - framework and trying to see how optimal it is. 00:54:24.650 --> 00:54:29.785 - Or not OK, can you take the offset command as well? I don't 00:54:29.785 --> 00:54:32.155 - know. First time I've seen it. 00:54:32.790 --> 00:54:36.354 - Oh yeah, I kind of, uh, definitely ignored that 00:54:36.354 --> 00:54:39.918 - because I wasn't sure. I don't know the answer. 00:54:41.250 --> 00:54:42.470 - One yeah. 00:54:44.100 --> 00:54:47.292 - Said I don't know where it went. Let me see if I can get 00:54:47.292 --> 00:54:48.432 - I think it's right here. 00:54:49.930 --> 00:54:51.559 - Thank you Sir. 00:54:53.190 --> 00:54:53.980 - Interesting. 00:54:56.280 --> 00:55:00.636 - I'd have to look and see what that does. UM, I don't 00:55:00.636 --> 00:55:04.266 - know offhand, but and then, of course, if we actually 00:55:04.266 --> 00:55:05.718 - passed in like a. 00:55:08.950 --> 00:55:10.450 - Something useful here. 00:55:11.600 --> 00:55:12.688 - And I'm attached ill. 00:55:21.410 --> 00:55:24.998 - Then it should have changed the query so that it's doing that. 00:55:24.998 --> 00:55:28.586 - Yeah, you can see now it's got our little where clause in 00:55:28.586 --> 00:55:33.060 - there. Hi, can you see the record below there where it 00:55:33.060 --> 00:55:38.400 - says? Uh, so it's doing dynamic and this one will probably. 00:55:39.000 --> 00:55:43.565 - I work, yes, it is probably a variable. There is probably 00:55:43.565 --> 00:55:46.055 - using some kind of dynamic SQL. 00:55:48.250 --> 00:55:51.390 - Yeah, you're right, that's exactly what it was. Thank you. 00:55:51.390 --> 00:55:55.158 - Yeah, so this is actually what it's using to get the data. 00:55:55.730 --> 00:55:56.450 - Um? 00:55:57.490 --> 00:56:01.131 - That's interesting, so 'cause you can see it also has the 00:56:01.131 --> 00:56:02.786 - paging on it now, um. 00:56:03.580 --> 00:56:05.086 - So that's what that's being used 00:56:05.086 --> 00:56:09.379 - for. But yeah, so that's a good example, because that's 00:56:09.379 --> 00:56:12.538 - it's building that up. It's using something special there 00:56:12.538 --> 00:56:16.048 - inside of the entity framework is kind of what I'm 00:56:16.048 --> 00:56:17.452 - taking from that too. 00:56:18.830 --> 00:56:21.710 - To build that up so if we go back. 00:56:26.270 --> 00:56:29.645 - So the skipping the take whenever those are executed. 00:56:29.645 --> 00:56:33.020 - It's that's how those are executed in the entity 00:56:33.020 --> 00:56:37.895 - framework. So this is a perfect example of like I had no idea 00:56:37.895 --> 00:56:40.145 - that that's what that was, so 00:56:40.145 --> 00:56:44.852 - it's actually. I doing this and then, um, actually executing it. 00:56:44.852 --> 00:56:49.148 - Here is what it looks like now. You can actually see the 00:56:49.148 --> 00:56:54.160 - duration, so I think it may be running both of these if I'm not 00:56:54.160 --> 00:56:58.428 - mistaken. And there are some things that you can do with any 00:56:58.428 --> 00:56:59.868 - framework to improve on the 00:56:59.868 --> 00:57:03.853 - caching. Um, and make sure that you know is intelligently 00:57:03.853 --> 00:57:08.234 - cashing all the data. Like in this case, we might want to cash 00:57:08.234 --> 00:57:12.615 - all of the cities in memory you know or something like that. I 00:57:12.615 --> 00:57:16.659 - don't know, that would be a great idea, but we might and 00:57:16.659 --> 00:57:20.366 - then that way we could just call that there's some really 00:57:20.366 --> 00:57:23.742 - powerful capabilities. But anyway, let me let me just stop 00:57:23.742 --> 00:57:26.550 - talking for a minute and see if anyone has any questions or 00:57:26.550 --> 00:57:31.484 - comments. So I have a question. So it's uh, so as far as like 00:57:31.484 --> 00:57:33.212 - what we use in Corsa, Uhm. 00:57:34.900 --> 00:57:38.572 - Is it possible to kind of go back through an update like 00:57:38.572 --> 00:57:42.550 - all the SQL statements to kind of? I mean not that we would 00:57:42.550 --> 00:57:45.610 - have time currently, but to kind of make them more. 00:57:47.070 --> 00:57:48.960 - Uh, a little bit more performant. 00:57:50.460 --> 00:57:54.992 - Absolutely yeah. And it's really kind of an ongoing thing. Uhm, 00:57:54.992 --> 00:57:59.112 - but yeah, that's definitely something that we can do, and 00:57:59.112 --> 00:58:02.408 - there's always an opportunity to make them better. 00:58:03.030 --> 00:58:07.250 - Ann Uh James, you're welcome. They're kind of speak to 00:58:07.250 --> 00:58:10.440 - anything there or you know others on the team have worked 00:58:10.440 --> 00:58:14.210 - on that. What you've done to kind of dig into that 'cause I 00:58:14.210 --> 00:58:17.690 - know Eric. He did some work on this recently as well, yeah? 00:58:18.540 --> 00:58:21.777 - I mean, there's things you can do that will make a SQL query 00:58:21.777 --> 00:58:24.267 - more performant, but just saying blindly. Can we just go 00:58:24.267 --> 00:58:27.255 - out, update everything in order to do that? That's not like a 00:58:27.255 --> 00:58:29.994 - sensible thing to just give me go, turn around and do. 00:58:31.610 --> 00:58:35.570 - Uh, you know. So I it's kind of a you gotta focus on where are 00:58:35.570 --> 00:58:37.946 - the areas actually end up happening. Like most recently 00:58:37.946 --> 00:58:41.378 - it's been a cart all that's been taking a long time, but then 00:58:41.378 --> 00:58:45.338 - when I looked at it, it turned out it was because of a delay in 00:58:45.338 --> 00:58:48.770 - the Oracle tax with provider. So it was in the car call itself. 00:58:48.770 --> 00:58:51.674 - It was, you know part trying to get taxes for itself. 00:58:53.020 --> 00:58:57.094 - Um kind of thing and it was just able to delay on the API 00:58:57.094 --> 00:59:00.004 - end of the fax call that happening outside of our 00:59:00.004 --> 00:59:02.914 - control. So there was really nothing we could really do 00:59:02.914 --> 00:59:05.533 - about that other than possibly implementing some more caching 00:59:05.533 --> 00:59:09.025 - and caching of our results that we don't have to ask it 00:59:09.025 --> 00:59:10.771 - as often for the same information. 00:59:12.250 --> 00:59:15.610 - But you know things like the the like getting a product product 00:59:15.610 --> 00:59:18.970 - is probably one of the more expensive calls that we have is 00:59:18.970 --> 00:59:23.050 - getting a product. Uh, which is why in so many places we have 00:59:23.050 --> 00:59:25.987 - all these extra things are now using like CD product service 00:59:25.987 --> 00:59:30.350 - too. To separately pool for the information and cash it locally 00:59:30.350 --> 00:59:32.080 - in memory on the JavaScript 00:59:32.080 --> 00:59:35.660 - side. Uh, so that you know it's multiple things to ask 00:59:35.660 --> 00:59:38.399 - the same product to servile times. They can just ask that 00:59:38.399 --> 00:59:39.146 - one memory cache. 00:59:40.290 --> 00:59:43.380 - Uh, for UM, similarly with, you know, there's information that 00:59:43.380 --> 00:59:47.397 - we need to start splitting out like for a long time now I've 00:59:47.397 --> 00:59:50.487 - wanted to separate off the pricing and the inventory data 00:59:50.487 --> 00:59:53.886 - from that product call for that week and heavily cash the 00:59:53.886 --> 00:59:56.976 - product itself, but then have the pricing and inventory data 00:59:56.976 --> 01:00:00.375 - called live for the user. The price would be able to. 01:00:00.460 --> 01:00:04.006 - I'm thinking. Cash it for that user, but then the 01:00:04.006 --> 01:00:06.634 - inventory data just called live every time, because then 01:00:06.634 --> 01:00:08.678 - Tori data constantly changing, especially if I'm 01:00:08.678 --> 01:00:11.014 - busy like highly scaled websites where lots of 01:00:11.014 --> 01:00:12.474 - transactions are happening every day. 01:00:14.000 --> 01:00:17.300 - No, that would be a place where we could make an improvement. 01:00:17.300 --> 01:00:21.425 - But to do that I would have to make changes in a lot of places 01:00:21.425 --> 01:00:24.175 - to make sure that the pricing is still referenced correctly 01:00:24.175 --> 01:00:27.200 - throughout the front end and that it's not really on the 01:00:27.200 --> 01:00:30.500 - product itself or it's going to be attended to the product data 01:00:30.500 --> 01:00:34.350 - after the fact. That kind of thing. So we need to be able to 01:00:34.350 --> 01:00:36.825 - check for that throughout the front end, evaluating where 01:00:36.825 --> 01:00:39.300 - every single piece of the product is being displayed 01:00:39.300 --> 01:00:42.050 - inside cevs front end is cumbersome, as you can imagine 01:00:42.050 --> 01:00:43.975 - to make sure that all of those 01:00:43.975 --> 01:00:46.534 - pieces are respected. And making sure that itself they 01:00:46.534 --> 01:00:49.274 - perform it individually and all that stuff. That's a lot 01:00:49.274 --> 01:00:50.918 - of people log into that box. 01:00:52.290 --> 01:00:54.478 - Specially model times, uhm? 01:00:55.390 --> 01:00:58.190 - So I mean, there's there's places that need to be 01:00:58.190 --> 01:01:01.270 - reviewed and there's things that we can do, but you know 01:01:01.270 --> 01:01:04.070 - how much time I could spend 100 hours on performance 01:01:04.070 --> 01:01:06.590 - doing a whole bunch of different things and then 01:01:06.590 --> 01:01:09.670 - somebody comes up and change is one thing, and now I've 01:01:09.670 --> 01:01:12.750 - got to deal with it. Another 10 hours worth of performance 01:01:12.750 --> 01:01:14.990 - analysis because they needed this one thing changed. 01:01:16.180 --> 01:01:17.896 - I mean, there's there's a lot 01:01:17.896 --> 01:01:22.365 - of, uh? ROI on it. Basically where you know I could go in 01:01:22.365 --> 01:01:25.940 - and I'll. I'll do as much as I can with a particular problem 01:01:25.940 --> 01:01:29.790 - area, but then I need to leave it alone, because if I try to 01:01:29.790 --> 01:01:32.815 - overdo it or try to over analyze and stuff, I'm just 01:01:32.815 --> 01:01:35.565 - basically burning hours at that point when I could be 01:01:35.565 --> 01:01:36.940 - working on more critical tasks. 01:01:38.210 --> 01:01:40.280 - Hey James, are you sharing your screen right now? 01:01:41.800 --> 01:01:42.478 - I am not. 01:01:43.590 --> 01:01:47.070 - So basically those along the Long story short is absolutely 01:01:47.070 --> 01:01:50.898 - yes, and it's a constant never ending. Can I constant never 01:01:50.898 --> 01:01:54.030 - ending improvement area, but it's absolutely critical and you 01:01:54.030 --> 01:01:57.510 - can tell that James is thought it through a lot. 01:01:59.850 --> 01:02:03.702 - Um, so which is great? That's what we want, and so thanks, 01:02:03.702 --> 01:02:06.912 - James. And I'm certainly, uh, thanks for asking the question. 01:02:06.912 --> 01:02:10.443 - I mean, it's it's kind of an obvious question, but it's 01:02:10.443 --> 01:02:13.653 - something that we need to constantly work on and improve 01:02:13.653 --> 01:02:15.258 - on, right? Very fundamental, so. 01:02:16.160 --> 01:02:19.064 - Feel free if anyone else has questions and then will switch 01:02:19.064 --> 01:02:21.968 - over to you James next just to make sure you're ready. 01:02:23.480 --> 01:02:27.810 - Baby, did you mean that there is a universal, uh? 01:02:28.770 --> 01:02:33.174 - Solution for every query is that what you thought when you asked 01:02:33.174 --> 01:02:36.477 - the question? Because there is no universal solution. It 01:02:36.477 --> 01:02:40.514 - depends for each query what kind of adjustments we could make. 01:02:41.940 --> 01:02:46.040 - No, I was I was just referring to changing a 01:02:46.040 --> 01:02:49.730 - particular query instead of like universally. UM, I. I 01:02:49.730 --> 01:02:53.830 - do have a question. It's not, uh, uh, on this 01:02:53.830 --> 01:02:57.520 - specific topic, but we're talking about cash. Any kind 01:02:57.520 --> 01:03:01.620 - of reminded me that for the current stuff we are. 01:03:03.270 --> 01:03:06.897 - Sort of, quote Unquote. I don't know how it's doing it, but it's 01:03:06.897 --> 01:03:08.571 - it's sort of caching the demon 01:03:08.571 --> 01:03:14.422 - files. Uh, it it it it? It makes it to where life is not cashing 01:03:14.422 --> 01:03:15.794 - TNN files at all. 01:03:16.600 --> 01:03:21.832 - Is I I would not in itself yeah OK got it. Got it? Yes Sir, that 01:03:21.832 --> 01:03:26.410 - would be something we can maybe have a later on to have a quick 01:03:26.410 --> 01:03:31.315 - training on how to turn off. and I it's just so that we can do 01:03:31.315 --> 01:03:35.239 - that. I think if you turn off dynamic compression in IIS that 01:03:35.239 --> 01:03:37.201 - would probably fix most of those 01:03:37.201 --> 01:03:42.520 - issues. If you do that on a on like the QA site or whatever, 01:03:42.520 --> 01:03:46.040 - it's going to cause it to be running ridiculously slow. I 01:03:46.040 --> 01:03:50.840 - tried to do that on the root of IS we started off on every site 01:03:50.840 --> 01:03:54.040 - and then the entire next day everyone was complaining that 01:03:54.040 --> 01:03:55.640 - every site was running slow. 01:03:56.960 --> 01:04:03.304 - You could do it on the DN application and turn it on on 01:04:03.304 --> 01:04:07.120 - the API. Application or virtual application? 01:04:08.330 --> 01:04:11.915 - How is it? Is it only on the? I was thinking it was on the 01:04:11.915 --> 01:04:13.588 - website, but you can do it for 01:04:13.588 --> 01:04:16.788 - the individual apples too. Really, I'm just thinking of the 01:04:16.788 --> 01:04:21.414 - completely wrong OK. That's cool. I mean I say that, but I 01:04:21.414 --> 01:04:25.206 - I'm fairly certain of that. Let me just confirm it's it's not 01:04:25.206 --> 01:04:28.682 - the app pool, it's the site level. And then, uh, each 01:04:28.682 --> 01:04:32.474 - virtual application can do it. Yeah, I'm just going to like the 01:04:32.474 --> 01:04:35.950 - API to do it, but like virtual directory can't shouldn't do 01:04:35.950 --> 01:04:37.214 - that on that site. 01:04:39.690 --> 01:04:41.358 - No, it's like come on dude. 01:04:43.700 --> 01:04:47.946 - Yeah, I'm not gonna change this. Please please don't worry. Uhm, 01:04:47.946 --> 01:04:52.964 - let's see. Let me know if you see it impression. There you go. 01:04:53.810 --> 01:04:57.946 - Yeah, so you could just uncheck the uncheck it for the 01:04:57.946 --> 01:05:01.706 - website, but then turn it on for this particular sub 01:05:01.706 --> 01:05:02.834 - application virtual application. 01:05:03.930 --> 01:05:08.660 - That was part of what that doing? Is it going here? 01:05:11.890 --> 01:05:15.267 - So if you've got your stuff API, sorry yourself JavaScript file 01:05:15.267 --> 01:05:18.951 - that's like 12 megabytes is not going to be. Jeez, that's over 01:05:18.951 --> 01:05:22.328 - the wire. Download every bite instead of living at first, so 01:05:22.328 --> 01:05:26.319 - that's one of the things that causes the type to be slow with 01:05:26.319 --> 01:05:30.003 - it taking forever to load those that full size file every time 01:05:30.003 --> 01:05:31.231 - rather than zip it. 01:05:32.700 --> 01:05:36.536 - Small which you know I told back about file could become a one MB 01:05:36.536 --> 01:05:41.504 - in that case. Um, and I've never seen that actually 01:05:41.504 --> 01:05:46.324 - impact in in cash, so I guess it's much better. 01:05:47.440 --> 01:05:47.850 - Yeah. 01:05:48.970 --> 01:05:52.941 - Yeah, I think you can do compression James on the virtual 01:05:52.941 --> 01:05:54.746 - directory, so we could probably 01:05:54.746 --> 01:05:56.850 - do that. Um? 01:05:57.800 --> 01:06:00.824 - For the UI folder as well, looks like. 01:06:02.420 --> 01:06:03.506 - Oh, there was already one there. 01:06:05.870 --> 01:06:09.710 - So OK can OK. Yeah, so that that's a great question that 01:06:09.710 --> 01:06:13.230 - might save some folks some time. So thanks for asking that.