Shripati Vijayaraghavan

Okay. Uh, so I so, yeah, my name is Shripati. I am a MERN and MEAN stack developer. Uh, I've primarily worked on frameworks like Next. Js, React, and Angular 50. These frameworks have essentially helped me develop, uh, the front end applications. I've also worked on, uh, various back end application, uh, back end frameworks such as in SGS, Django, uh, and, uh, Express, uh, with Core Express.

Operating best practices also. Okay. So, uh, one of the best practices to implement or to decrease the load time is to implement lazy loading. So what happens is when we load app when we load an application in the first place, what happens is we load all the components altogether and all the images, uh, together. So what that does is it takes time to, uh, load all the assets over the network. Uh, it takes a lot of time. So what we can do is whenever we require that, uh, uh, that set of, uh, assets or whenever we require a particular amount of CSS to be displayed, we can simply load at the run time, uh, or whenever it whenever the CSS or the JavaScript or the asset, uh, for that particular matter is required. We can load it then and there without even loading it initially.

Okay. So, uh, let's say you have service you have a service defined, and in that service, you have an API call. So what what I would do is I would ensure that, uh, the input that I'm receiving is defined via an interface. So or a type. So what the type does is it lets you, uh, it lets you define the kind of input that you will be receiving. So for example, let's say I have a user form. And in that user form, I have only 3 inputs, first name, last name, and the email ID. Now conventionally, uh, when the when we use JavaScript, we wouldn't have the flexibility to define the type of inputs that you would be receiving from the front end. What we can do here using TypeScript is we can create an interface. And by defining that interface, we can just simply make sure that whatever input we are receiving is up to the mark and is also and we also can make sure that, uh, there is no discrepancy in the data that is being received. So you can use the interface, and, uh, within that interface, you can define the key and object that you need. Uh, you'll also have to make sure that whatever key, whatever type you're specifying must be entered that way. Otherwise, the tie, uh, otherwise, the typescript compiler will throw.

Okay. Uh, so this is, uh, so this is actually something I have been talking about. Uh, TypeScript has 2 ways through which you can, uh, you can define what type of data can be that you can expect. So you can define interfaces. And the other thing you can do is define types. If you are defining types, you, uh, you are ensuring that you you are you will be ensuring that you are getting the specified amount of data that you are that you require from the from either the API or or or if you are sending the data to the API, you are ensuring that, uh, you are sending the right amount of data to the API. If you are defining the interfaces, you can also you can ensure that, uh, the the right amount of data along, uh, and if you need function and if you need, uh, functions that are just, uh, just declared. You can ensure, uh, you can you can declare the functions in the interface and the data that you need. Uh, so these are the 2 ways you can define you can define the types using the type system, and you can also validate the amount. Uh, you can also validate the data that you will be receiving.

Okay. Uh, so this is quite an interesting question, actually. So, uh, versioning is a concept through which you define what kind of features or what set of features you will be needing for that particular version. So let's say, uh, I have developed a login form, uh, for version 1. And, uh, that login form will now, uh, will now be changed in the second version. So what I will do in that case is I I will, uh, use, uh, I'll use Git to define the branches, uh, of specific versions. And then, uh, and then we can, uh, simply just, uh, make the changes in that particular version for and push it to and push it to that push it to the respective version branch. Now, uh, now when we are developing angular components and let's say I'm working along with another developer on that same component, what I'll make sure is, uh, what I'll make sure is, uh, we'll work together, obviously. So I'll make sure that whatever changes that what that concern developer has made And regardless of how regardless of when that when those changes were made. So I'll prioritize this, that developers changes. And I'll also consider my changes, uh, along with that. So that, uh, when when we merge the code, there is no conflict of such sort.

Okay. So, uh, when an app when when an Ajax call or the when an API call is made to the server, what we can what we can do is we can define the we can define the variables, uh, in, uh, we can define the variables at first, uh, which which will be used to fetch, uh, which will be used to fetch the data. This will obviously be, uh, tied up with typescript interfaces so that, uh, we can ensure a seamless, uh, integration. Yeah. Secondly, there is an event called n g on in it, which means whenever the component is initialized, we can make an API call. Uh, we can API we can make an API call during that time. And, uh, whatever whatever response the server returns, we'll have to ensure that our interface follows the same kind of, response that is being returned by the server. So that way there is a seamless integration between the data that is being made as a state. And this way, uh, states can be managed pretty easily in Angular. You can also you can also, uh, define a service, uh, which fetches the data from the which defines, uh, which fetches the data from the server, and that returns the and with that, it returns the data as well. With and that data can later on be initialized to the variable that we defined along with the interface.

Okay. Yeah. Yes. So, obviously so, uh, if you use any, you cannot identify what kind of data you will be receiving here. This data could either be string or an integer. But the requirement that we have is we need to send an integer to the server. Right? So what we can do is, uh, we can change the type of ID to any. Uh, sorry. From I from any to integer. And then, uh, this http.git, this obviously will return an in uh, this obviously will return a JSON object. Right? Which will then be converted into JavaScript object. So what we can do here is we can ensure that this data that we have here has a is of a certain type. Let's say I have created a type named, uh, user. Now the user will have an ID, the first name, the last name, the email. This will all be defined in an in a type, and that type will then as will be assigned to the return type of the TypeScript function here that is of any. So this way we can ensure that our data is being received in the right way. And, uh, if we if we still choose to use any, then whatever response we get from the server will automatically be used here, which will then which will then indirectly create a bug. Because we are we are getting more than what we are expecting. So this way so this way, if it it would it would be better if we implement types to ensure type safety.

Okay. So, uh, in my early days, uh, of development, uh, I, uh, let's say about a year and a half ago, what had happened was I wanted to what had happened was we, uh, we were improving the performance of our Angular component. The component was responsible for rendering a canvas, uh, along with the lines and dots, uh, that that were plotted on that particular canvas. So, uh, to improve the concurrency of that particular page, what we did was we lazy loaded the image that was loading inside the canvas. The canvas was loaded after the view was getting initial initialized. That is after the n g after view in that function. Uh, so, uh, the canvas was loaded after after the view was initialized. And then, uh, once that was done, uh, uh, we loaded the image once the canvas was loaded. So, uh, and then, uh, that that was thanks to, uh, that was thanks to, uh, lazy loading. And then what we did was, uh, we, uh, we split the API calls, which which was leading to, uh, call the coordinates, uh, that we needed to display the dots and lines. So, uh, we split the API, uh, calls to first, uh, to first load the points, then, uh, the lines that were being initialized between, uh, the points. Because this was this was being calculated, uh, when when the, uh, when the Canvas was being general when the Canvas Canvas was getting generated. So this calculation took, uh, so this calculation took place when we were, uh, loading the when we were making the Canvas look pretty. And then once that canvas was submitted, uh, we would ensure that all the data that was loaded inside the canvas was stored separately. And then, uh, while loading these, uh, data points, what we did was, uh, we split the API calls and we used promise dot all, uh, to ensure concurrent API calls. So this way, uh, when all the API calls are successful, we would get the response in the right amount of time, uh, without any jitters. And that way that's how we optimize that's how I help optimize the, uh, the API, uh, sorry, the components in the angle, the the component.

Recommended way to utilize Ajax along with TypeScript decorators in Angular to enhance usability. Okay. So a good way to utilize Ajax along with along with typescript decorators is to is to create a decorator, uh, is to create a decorator, and that decorator would ensure, uh, the service that is being called before the, uh, before the component is initialized. This way, uh, if we so let's suppose if we have an API, uh, which lets the user know whether that concerned user can access, uh, the screen, uh, the the given screen or not, Uh, we can, uh, we can we can create a decorator, uh, which can act as a guard. Then this decorator that acts as a guard can then be utilized further, uh, to ensure uh, whether the current user that is logging into the system can actually access all the screens or not. So, yeah, that that one that is one thing which we can use the guards, uh, the decorator as a guard for.

So, a stored procedure actually helps in optimizing the queries that we make to the server. How that happens is, instead of making a query multiple times to the server, what we can do is we can make a call to the stored procedure and that stored procedure will make an SQL query to fetch the data. What I suggest here is, if we are implementing stored procedures, what we can do here is we can have the MySQL service, which is natively run in JavaScript, we can have the MySQL service here and attach that with the stored procedure that we have. And that stored procedure can then be helpful, that stored procedure can then make an insertion call or an updation call to the MySQL table. And that way we can ensure a seamless integration or else if we are making use of an API, then we can make sure that the API that we are developing has the call to the stored procedure inside of it. And then we can make a call to that API from the Angular's HTTP client. And then that will take care of the stored procedure injection.