Saikul shaikh

Yes, sir. So I have over 11 years of experience in front-end technology, and I have worked on React.js, Redux, Vue.js, Vuex, JavaScript, and TypeScript, HTML, CSS, and JSON. So, all of the front-end technologies I have worked on, and I have worked on multiple projects, from India to overseas experience, including Riyadh, Saudi Arabia. So, I have worked on several projects, which are similar to this. One is an e-learning platform, where the study materials for students have a few drag-and-drop options. These are the types of study materials I have developed. Then, I worked on an e-ticketing system where users can purchase online tickets for events, and an email with a PDF will be sent upon successful purchase. I have also worked on employee management systems where employees' attendance, latencies, or other KPIs or appraisals are monitored. Their performance is also based on these metrics. Additionally, I have worked on supply chain and optimization forecasting in various products, which track retailing or retail store records. So, yeah, this is my 11-year journey in front-end technology.

So tree shaking is in Webex. So this will improve how the application works. Tree syncing is in Webex. It's like kind of a structurization of the entire Webex application, where we'll use bevels and other JS files for the entire system to be configured. So if I give you an example, like the start point of the application or the end point of the application to be defined there. And in a specific JSON or dot JSON file, or if we have kind of ENV files over there in the config management for the entire application, it is also there. So in Webpack, what will happen is that if anything is missing or it is not there, we can manually configure those and update those things in the web page to execute the entire product. But mostly, once we'll install the NPM package through the package manager, these things will be taken care of. If anything is not available, we can do that by manual config through Webpack.

So side effect, which we can handle, in the React component. So for the component, the effect has the component rerendering. I have been using, I will tell you from my experience. I've been using a functional component. So we mostly use the useState hook, and there will be the useEffect hook. To maintain the dependency or any kind of side effect for the component rerendering or this dependency injection inside the useEffect array. You can put it down one by one if the dependencies or any API calls are there, external API calls are there to be held the data or anything else to be worked on in the dependency. It can be done through the useEffect hook. And also, once it is done, if you want to destroy, all of the work is done inside the useEffect. Then we can write a new code, which is a return to destroy the entire created component. We can add that over there.

We should use TypeScript interfaces because, yes, the TypeScript interfaces should be used in most of the product, especially in enterprise level or highly scalable or big product. This is a very organized way to write code, better than JavaScript, the traditional one. What happens here is that the types are predefined, and if any kind of manipulation is going on, if multiple developers are working on the same file or using the same scope or variables or anything, it will reduce the chance of conflict and overlapping. Also, because of this type declaration, it will reduce the chances of conflict or any kind of data overlapping in runtime or while developing the entire application. Type aliases are more appropriate because they have meaningful naming conventions. So users can easily understand and declare any type aliases. These things are really good new features for TypeScript, and we should upgrade to TypeScript instead of vanilla JavaScript.

JavaScript to NC function. 1 c. Yeah. So, the technique in JavaScript to ensure a function can call only once is to call the anonymous function. If you call through the anonymous function, the function will invoke immediately and call once when the application runs. And if you use an arrow function, instead, if the reference is called once, it will call once. If the reference is used in multiple places, then it will call more than once. So, if it is a direct execution of a function, an anonymous function will be a better approach, like, whenever it is invoked and called. That's it. And it will call once forever.

so let's implement lazy loading in the React app which is very good use for performance and optimization let me explain a little bit so if you are loading let's suppose you have a lot of images or a lot of blocks of data or there so the entire page while loading the page so it might get you know a lot of load on the first initial load so what will happen if we use the lazy loading for the components or blocks so what will happen is that slowly maybe a limited time a limited number of components or blocks will be loaded at a time so in that case what will happen the entire page performance will be increased or if there are kind of heavy images to be loaded so this is also a very good way to load entire content because using the lazy load it will enhance the performance of the entire application so the browser won't get crushed or the entire application won't be held up for loading that time will be reduced as per the content yeah so these are the advantages of lazy loading.

Looking at the following react code step, and we explain why the component may not updating as expected to see data function is called. Cost data. Same data. Instead, null. Use it at which data response. I think the data used in the use state, we have added as initial data as null. Then useEffect hook. We are adding the dependency of the data. And this dependency will be a hold on after the fetch data will be called. So at the beginning, it was waiting for the data use state, which is null. And later, it is trying to update the data. So here, some syntax need to be manipulated from the useEffect dependency. Then the setData will work correctly.

Given this TypeScript function, explain why it might throw a type error when being used and how you might correct it without changing the function's image. Number, by the moment will go to 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0. So here is the issue, this TypeScript function might throw an error because the same get length function is, TypeScript function is calling with the array of first one, 1, 2, 3 which is number, we have decided here in the get length signature that all has to be number, so first one will run and it will return the length, for second one we are sending the get length hello world, hello, world, the syntactical error will be there, so for that reason it will not work correctly over there.

how do you refactor area application to replace class component with function component without sacrificing performance so I did it practically in my previous product it was written on the class component and basically a class component has its own state and can share the state with other class components but function components don't have their own state management for that we need to use hooks so now without sacrificing performance we can use the hooks like use state use effect and use reference instead of the entire life cycle of the class component in hooks sorry function components we will use the hooks like use state use effect and use reference and other multiple hooks are there so we can easily do the state management and declare the global variables and the data to be stored and once any API data is coming we will use the use effect and its dependencies and in that case it will work without any kind of performance lagging it will be absolutely fine and syntax or code readability wise or maintainability will be increased multiple times better than class components so the performance of the product will definitely get impacted and it will be much more faster or much more optimized

What metrics do you consider important when writing unit tests for front-end code? So for me, for the unit test writing, there is a library called React unit test cases or there are other external libraries which is Jest for the unit test cases. And for end-to-end, there is Cypress, I have used, I am familiar with those as well. So for the metrics, we will use, I think, the common one with the React. So once we will, any component has been deployed, sorry, built for the first site and we will test first as a developer site unit testing. Once test is done, so we will write for the same component, we will write a unit test case against the component and we will have some expected return if it is, you know, data string value or a specific number or anything. So based on this, we will write down the test cases and we will run the test case and we will see if the component is behaving the same way or it is returning or not. So then the test cases will be done and it will be written for entire component. So I will choose the way, I will choose the way of, you know, designing the test cases after the component building is done and expected return will be there.

Strategies for test-driven deploy development in the Yext project is simple. First, we need to clarify if the requirement is in this unit test case, or as I said, Cypress is another tool for end-to-end product testing. So where do we need to write down the unit test cases. I will use the Jest internal plugin for unit test case writing. After each component is built, or if any component has been computed, and the testing is done locally, then we should write down the test case again against the component. And we will start testing on that if the component is working correctly or not. We can do that similarly.