Visal Yadav

Hello? Yeah. Hi. My name is Vishal. I am listening from. Currently working as a software engineer in Kotak Interactive Private Limited. I have a total of 5.5 years of experience, and in that time, I have experience of 5 years. I am working with a project called Williams. So, Mine. It is basically an ecommerce domain. It is a ecommerce site where I have my responsibilities. I am involved from the design in Figma, I need to create the same UI using VJ and Tailwind CSS, and also create unit test pieces for that company and integrate with the backend API, right, in the frontend. I also work on store management using UX. And for unit test cases for the components we have created, we use Jest as a unit test framework. I also worked on another ecommerce domain, an ecommerce website called Molekule. It is also a Air Purifier. You will see users can go to the website, and they can check all the models of the Air Purifier. And they can order, add their address, create the order, and make the payment, and it will be delivered like that. I was involved in both projects in my current organization. I worked as a content developer in that. Other than that, I have only very little experience in the past, which is 3 months.

Yeah. For that, we need to check the dependency. We like what are in the dependency? What are the things we can keep? It is without third-party libraries. If we can create that component, we'll create it. Otherwise, we'll install the library in our project. And based on the dependency, it means how much it is taking space, how the page performance is. If it is affecting the page performance, also response time, then we'll try to find the solution for that. And for API calls, normally, in our project, we use the library Axios. So with Axios, we make all API calls and take all data from the backend.

So for that feature, we need to, first, we'll create the view component. And if it's a new page, then that page will have the feature. So we'll create the component for the feature, and we'll add the means for API call in store management. We'll use UX to get through the store, and take the data. For Vue.js, we create the component, we create the HTML part. And for CSS, we'll try to create a common CSS template. In that, we'll keep all the CSS for that component. And for API calls, we'll use.

For user performance, we optimize performance by using lazy loading. This means, based on our requirements, we can load data as needed. If the user needs only the data and also the component, we'll load them at once, not all components. If the user performs a particular action, we can populate the components accordingly. For a REST API, we can use async await calls. This means, simultaneously, when the page loads, an API call also happens. We'll also manage all the error handling. If any error occurs, we can show proper errors and for data in that page. We can use Vuex so we don't need to pass all the data to props in the component. From the centralized store, we can take the data in the component. For CSS rendering, we can use the minified version of CSS. We can remove all unnecessary CSS.

Yeah. So in the Vue.js, you're managing the state, we use Vuex. So Vuex is a centralized store from where we can take all the data, where all the data in the components or on the page. So, like, if we need some data, directly, we can click from the UX code. We don't need to pass through props in the component, or we need to get from the child component, if we need to pass something to the parent component. So we can directly get it, and we can take the data in the component through the store. So it will be helpful, meaning with no need to it will reduce the same similar code or similar API call, right in the same API call multiple times. At one time, if we need, we'll just call the API to the store, and we'll get the data.

So in Vue.js, there are eight lifecycle hooks. Before create, created, before update, updated, before mount, mounted, and before destroy, destroyed. Most importantly in the mount, we call all the API calls in the mounted lifecycle hook. So based on the main page load at the mounting state, we'll call all the API needed. All the data needed, we'll add that in the mounted lifecycle hook. And other than that, if anything we need to load before the mounted process, so we need to write in the before mounted lifecycle hook.

I'm not able to see any this is very only flat background.

Sorry. I'm not able to understand this question. Means here in the function get book, we are passing in the parenthesis, title and author in the in the read variable. We are just adding the function of reading title, whatever the algorithm is we are passing and the offset by, Paulo Coelho. And in the, in the return, we are determining object defining object title, author, and read. And here, down there that we are passing means we are creating. Okay. We are assigning the value, and here we are calling

In large-scale projects, if we need to migrate from a general JavaScript application to a view-based one, so we can create a step-by-step plan where we can take pages one by one. We first need to set up the store where all the APIs will be located. And based on that, we can take the pages one by one, and migrate all the pages and all the code from there to here.

Yes. So for the progressive web app technique, we need to view this application as responsive. Like, in mobile, it will be and the UI should not break. So we need to work on media queries for the CSS, or if we are using a library like Tailwind CSS. So when writing, we need to first create the design for mobile first, then move on to tablet and then desktop.