Alok mishra

My name is Alok Mishra. I have been in the information technology industry for about 3 years. I started working in July 2021. Since then, I worked with 2 major companies. 1 was Epicero Global Integrations. Here, I was working with international clients like Panasonic. It was a service based company. I started my Java, uh, my software engineering career with JavaScript based technologies like React, JavaScript, TypeScript, and other, uh, front end based technologies. I was working with the UI team developing front end features. We're also building different kinds of dashboard and ending integrating APIs using Node and Express. When moving on to my second company, I work I'm working I which is my current company as well. It's called IG Ecosystem, uh, Private Limited. Here, I was working in a on a SaaS based product with the same technology stack, which is Next. Js, React. Js, Node. Js, Express. Js, which is full stack JavaScript technology stack. Here, I was working along with a team of 5 people, and here, we were developing a SaaS based applications for big institutions like universities and college colleges to make sure that their employee and payroll data, marks management, student data management, all of them is done in the single dashboard. We were also responsible for a different EdTech product where we were selling courses for extracurricular activities for children aged 5 to 15. These were the 2 major projects that I've been working in the in my current organization. All of these projects were based in current technology stack, which is Next. Js, React. Js, and JavaScript based frameworks and tools.

JavaScript technologies the JavaScript tech JavaScript engine is basically synchronous. It's a single threaded system. So to counter that, uh, single threadedness, uh, we want we want it to, uh, offload some task, like, let's say, the calling of API. Uh, we want this task since this task can take time and can create a non blocking operation in the event loop, We make sure that some of these tasks are asynchronous in JavaScript. Promises are a good example of asynchronous. We write some, uh, all of our API calls in the asynchronous promises so that they don't block our, uh, codes, uh, offloaded to the asynchronous part of the JavaScript. Just like I mentioned for, like, promises and other stuff, which we can offload to sub certain web APIs, which are present in the browser, uh, which browser also, like, we at engine offers us.

In JavaScript, the event loop concept is a core concept where we see our JavaScript, uh, engine starts executing our code line by line. And then all of these functions which are declared are put into a callback queue. Each of these events are then then taken 1 by 1 from callback queue and put into the put into the call stack by event loop. Event loop makes sure the, uh, runtime, uh, of JavaScript is maintained, and it's properly executing each of the callback functions that we have in our JavaScript, which is a very common practice. We all event loop also has, uh, another micro task queues, which have certain priority functions, uh, which has a priority over the the set callback queue that we have. Uh, like, for example, if there is a asynchronous, uh, function and it has done its processing, then we will prioritize it from the microtask queue, and the event will event loop will shift into the call stack, and that, uh, particular function will be used, uh, executed immediately, and then it will be called off of the call stack. So event loop is responsible for putting any kind of callback function. May it be synchronous or synchronous on the call call stack so that the execution of execution flow of the code is maintained.

The benefits of using functional components over class components in React is the number one benefit is hooks. With the availability of hooks, the JavaScript has, uh, uh, with JavaScript and writing JSX in React has been very easy. FX like useEffect, uh, hooks like useEffect, useState, make it very easy to make variable and perform all the rendering functions and make make the component composition very easy. We can also use powerful hooks like use reducer along with context API, uh, which also uses a use context hook to make sure that all of our state management is done efficiently. Making all of these hooks makes the life of the developer very easy, and the life cycle also is preserved. Because behind the scenes, the hooks are already managing the life cycle components of our UI state. So as as long as we are managing the hooks in the right manner and following all the hooks that all the rules that hooks provide, we are not disturbing any of the, uh, uh, state management process in a in a typical class based component, but we are leveraging a lot of, uh, developer friendly user application, uh, development by using hooks. Uh, certain hooks also give a lot of features. Uh, like, for example, we can make custom hooks, uh, for to make sure that any custom feature which is not available in our, uh, typical JavaScript modules, we can make them ourselves. For example, I have personally made a a hook called use local storage to make sure that whatever cookies are being used in my application are use uh, using local storage to get stored. So local store use local storage is typically a hook which can be custom made if an application if an application it is required.

A Vue JS is, uh, reactive system can impact the performance of a large application. Uh, basically, we can, uh, you know, uh, the a lot there's a lot of performance issues when it comes to the typical reactivity and over rendering of the components in any kind of front end library, may be it be Vue. Js or React. Js. The strategies we can potentially employ to mitigate these kind of issues is performance optimization. All of these things like code splitting or dynamic imports and making sure that all of our code is extremely optimized and no, uh, render is no no component is being rendered unnecessarily. We should always also use memoized functions and callbacks so that all of no unnecessary callbacks are being created in the code base. And, also, we should make sure all the best practices are followed to mitigate any potential rerenders so that no memory leaks or any kind of situation is happening over the app, which is causing the application to do certain performance intensive tasks.

In case of a CSS variable, we can make, uh, in case of CSS, we might have we might be using certain, uh, color or background image or maybe some certain elements of CSS all around the app, making it into a variable, make sure that of all all our app have the similar similar code structure, uh, for CSS, and we do it becomes very developer friendly to remember all of these CSS properties instead of managing individual CSS properties. The variables remember the name, uh, of the variables that, uh, is being created by them. And then on the basis of that, they can make a large scale React app, uh, remembering each and every, uh, operation and state that they have made. Similarly, uh, in different components, we might need different sizes, like excel, large, or different components of different sizes of the same components. That that becomes very easy if we use some things like CSS variable. CSS variable also provide us, uh, methods of doing certain, uh, back making certain background colors and their versions, uh, so that whenever we want to use some lighter, darker, or different versions of the same color in different components, we can easily do that through a simple variable tweaking, and we don't have to write hexadecimal code codes for each and every, uh, color changes that we are doing. Through this CSS variable can make, uh, the development process of a large scale React application very easy. And in terms of maintainability also, it makes sure that the user, uh, does not a user or the developer does not have to think a lot about in terms of color, in terms of individual sizes, and in terms of individual properties. But, also, it can he or she can remember it easily on the basis of, uh, uh, the variables that are being declared. And the variable name should be so intuitive that they should not, uh, make make any confusion, uh, in terms of, uh, whenever we are chain whenever we require to change them to address all the needs for a for of a developer.

This is an update message method, which we can see. The potential pit pitfall method that I can see here is at the this, uh, keyword of this particular function the this keyword of this particular function might, uh, might create certain undefined errors that we can, uh, probably mitigate that can affect the component rendering behavior. The ideal way of, uh, declaring this is not correct, and we should always call the function using the object, uh, that we are creating method, uh, in that manner so that this keyword is assigned promptly, and it does not create any any potential invoking errors.

Here in the JavaScript code snippet, we are actually fetching the fetching through the URL, but we are not using any kind of promises or any kind of async call to make sure that the, uh, the promise is to make sure to check whether this, uh, promise is actually being performed or not, we need to use something like await or promise method so that we can actually check, uh, that dot then method is, uh, basically attached on a promise. But here, I cannot see any await or promise method that is being applied. This can this can this can potentially call, uh, call an unexpected behavior and might API call might not happen. We need to put something like async await here so that, uh, the API call is finally done and the dot then method can be used then, uh, then used to, uh, fetch that to fetch the response of the await after awaiting that URL. And then that response can be converted into JSON. And then then JSON can be converted into, uh, to a data object. Here, the lack of await or the lack of promise might create certain errors, uh, which we need to tackle by addressing them.

The steps that I would take to, uh, debug a memory leak in a JavaScript application, uh, uh, requires multiple techniques. For example, we we can check whether there is a lag, uh, in even delegation. If if there is, uh, unnecessary event delegation and event bubbling, it might result in, uh, memory leak. Also, if there are unnecessary, uh, event listeners which are being attached constantly, but they're not being removed on, uh, after with the the component is unmounted or the component is not in use, they might, uh, cause unnecessary memory memory leaks. So that would be my first approach to find out the memory leak, uh, memory leak in the JavaScript application. The debugging process can be started by a typical tool like react, uh, reactive tools or, uh, any kind of Chrome extension, which makes sure that we can render each and com each and every component step by step. And we can also put certain console logs to see where which events are being fired at what time, uh, after getting an getting to understand that which events are being unmounted, but their even listeners are not, we can address those issues. We can make sure that we have all the cleanup logic in our useEffect hook, for example. In case we are using React, we should always have that return function to make sure that there is no memory leak that is created by useEffect. These are the some of the steps that I can take to make sure there is no memory leak in a JavaScript application that uses React.

In our checkout form, it might be possible that we might need to handle multiple countries with various tax tax rules. What we can do is we can make a drop down menu and let the user select, uh, which country he or she or the user belongs to. Once they select, uh, the country that she they belong to, we can up set we can set the state of that particular country and fetch the rules, uh, As soon as they set the state of this country, the the particular variable of the state will change. And then we can make an API call, uh, in our use effect, and we can keep the dependency as that particular variable, which is being changed on the click of the countries. This particular variable, as soon as it is changed, the e use effect call will be made. And then this particular call will call all the various tax rules irrespective to that part that particular country, and then that can be displayed on the, uh, like, the last checkout menu that we have in the in our Vue JS com component. And then, uh, we we can ensure that user always sees the updated tax rules according to the country they are, uh, currently in. So to I reiterate everything, I would say that we can set we can make a drop down menu. We can ask the user to select the country. Or if we have selected the country on the basis of the time zone, as soon as, uh, the country is selected in our, uh, app app wide state, we can also trigger a state which can make the respective API call, uh, on the similar basis. As soon as that variable changes, we can make that use effect call and bring up the various tax rules of that particular country and show it in that component of the checkout page.

It depends on, uh, the particular complex UI layout that we need to do for dev desktop applications. Uh, I think, uh, my particular choice of elect will be electron JS. That because I am little familiar with it. Uh, I I have lesser idea about pi side and pi q t, but, uh, listen, uh, seeing that it, uh, the p y quotation, I can see that there they might be responsible for more of a Python based they might have more Python based packages and libraries in their name. Uh, in their integration might be easier with Python based libraries. So if there's a complex UI layout, since, uh, JavaScript has always been known for building complex layouts, and we can, uh, generate easily the JavaScript based applications on our desktop using Electron. I would probably go for, uh, understanding the code base and the UI layout using using the Electron JS framework, uh, for a high performance desk desktop application. But Python is also known for, uh, high performance applications. So I will have to review on the basis of the layout and whether, uh, the state changes and the layout changes are happening frequently or not. If they are not happening that frequently, we can also go with Python. But my personal preference will always be electron JS.

The benefits of implementing a continuous integration and continuous deployment workflow in a React project is essential. As we know that in today's modern world, we need to do unit testing as well as different kinds of testing. CICD ensures that all the test coverage cases are covered. We make sure that all of these checks are done in our pipeline. Also, continuous integration, continuous, uh, deployment makes sure that the whenever we are shipping a feature, uh, we don't have to think too much about about deployment because it is already managed through our pipelines. Uh, all of the deployment, uh, will be delivered to the server immediately. And as soon as we are up updating our pipeline and it is approved, all the tests are passed, then we can easily ensure that on our staging environment or depending on our production environment where wherever we are launching our react app, we can see the changes instantly. Apart from, if we don't implement CICD, we probably need to, uh, push the code from GitHub and ask, uh, our DevOps guy to make a build and then run that build on by putting out commands in the mash in the server machine itself, which can be cumbersome at times. But setting up a simple CID, CICD pipeline can automate this entire process and make sure that our, uh, best practices, like, uh, attaching test coverage, attach attaching, uh, whether the unit test pass or not, attaching the style the style test, which which, uh, of the of the code are passed or not, may maintaining making sure that all the best practices are followed or not can be done easily in with this continuous integration and continuous deployment method. It is also a very import important method in the agile methodology.