Shripati Vijayaraghavan

I'm Shripati, a MERN and MEAN stack developer. I've primarily worked on frameworks like Next.js, React, and Angular. These frameworks have essentially helped me develop the front-end applications. I've also worked on various back-end applications, including frameworks such as SGS, Django, and Express with Core Express.

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

Okay. So, let's say you have a service with a defined service, and in that service, you have an API call. What I would do is ensure that the input I'm receiving is defined via an interface or a type. The type lets you define the kind of input you will be receiving. For example, let's say I have a user form with only three inputs: first name, last name, and email ID. Conventionally, when we use JavaScript, we wouldn't have the flexibility to define the type of inputs we would be receiving from the front end. What we can do here using TypeScript is create an interface. By defining that interface, we can simply make sure that whatever input we're receiving is up to the mark and also make sure there's no discrepancy in the data being received. You can use the interface and within that interface, define the key and object you need. You'll also have to make sure that whatever key, whatever type you're specifying must be entered that way. Otherwise, the TypeScript compiler will throw an error.

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

So this is quite an interesting question, actually. So, 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, I have developed a login form for version 1. And, that login form will now be changed in the second version. So what I will do in that case is I will use Git to define the branches of specific versions. And then, we can simply make the changes in that particular version and push it to the respective version branch. 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, we'll work together, obviously. So I'll make sure that whatever changes that developer has made, regardless of when those changes were made. So I'll prioritize that developer's changes. And I'll also consider my changes, along with that. So that, when we merge the code, there is no conflict of such sort.

When an app makes an Ajax call or an API call to the server, we can define the variables first, which will be used to fetch the data. This will be tied up with TypeScript interfaces to ensure a seamless integration. Secondly, there is an event called ngOnInit, which means whenever the component is initialized, we can make an API call. We can make an API call during that time. And whatever response the server returns, our interface must follow the same kind of response that is being returned by the server, so that there is a seamless integration between the data that is being made as a state. This way, states can be managed pretty easily in Angular. You can also define a service, which fetches the data from the server, and that returns the data. With that data, it can later be initialized to the variable that we defined along with the interface.

Okay. Yeah. Yes. So, obviously, if you use any, you cannot identify what kind of data you will be receiving here. This data could either be a 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 we can change the type of ID to integer. And then, this HTTP request will obviously return a JSON object. Right? Which will then be converted into a JavaScript object. So what we can do here is we can ensure that this data that we have here has a certain type. Let's say I have created a type named User. Now the User will have an ID, the first name, the last name, the email. This will all be defined in a type, and that type will then 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 if we still choose to use any, then whatever response we get from the server will automatically be used here, which will then indirectly create a bug. Because we are getting more than what we are expecting. So this way, if we would implement types to ensure type safety.

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

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

So, a stored procedure actually helps in optimizing the queries that we make to the server. It happens by making a call to the stored procedure instead of making a query multiple times to the server. What I suggest here is, if we are implementing stored procedures, we can have the MySQL service, which is natively run in JavaScript, and attach that with the stored procedure. The stored procedure can then make an insertion call or an updation call to the MySQL table. This ensures a seamless integration. Alternatively, if we are making use of an API, then we can make sure that the API we are developing has a call to the stored procedure inside of it. We can then make a call to that API from the Angular's HTTP client, which will take care of the stored procedure injection.