Taherali Sonkachwala

Hi. My name is Tayeil Ralyshunkachwala, and I started my career as a web developer in Techsperia. Later, I switched to another company, Neosoft Technology, and I'm currently working here. I've worked on many projects, such as BOGS and Laravel. My last project was an appointment software that confirmed our application in WebSockets, with live broadcasting and live chat features. I have 7 years of experience in Vue.js, and I've handled both Laravel and Vue.js. My education background includes a BCA in computer application and a diploma in software engineering. I also have a certificate in Java and system management design.

How would you refactor up your HES application that currently consumes the REST API without GST to be its VX. Going through UX. So we will integrate Vuex in which we call API in the action sector of the view in the action module in Vuex. And in that, we will commit the response. And if API calls are too frequent, we will use a cache type. Like if the response is already cached, then we will not call the same response. And the same response we will use in our component. And we can avoid many things, like property passing from parent to child and emitting from child back to parent, so we will avoid this kind of thing. We will use actions for calling API.

For CSS rendering, we use scoped CSS data. And for JavaScript execution, we have to avoid things like memory leaks, if our third-party application is using some kind of events and we listen to those events in our component. So we have to clean up that component to avoid memory leaks. Also, if we are using any interval or a timeout process, we have to clean up that process as well. This will help us avoid memory leaks, and CSS rendering is using scopes so that when a component is destroyed, the scoped CSS is automatically removed. Additionally, we can optimize JavaScript execution time by specifying a time for this process to be a little bit. And it's done.

How do you manage component life cycle in VueGIS in a way that it aligns with data refresh cycle from REST API? Component life cycle. We will use the lifecycle hook if you want to show users on a page or display some kind of data and that data comes from the API. We will call that API on the view lifecycle, that is, mounted or created. Created is called at the time component is created, and mounted is called at the time component is rendered on the browser, which means it draws the picture on the browser. It's called after render. We could use created for API calling, and it aligns with the view component's life cycle. Data refresh cycle. If you want to use data refresh cycle, we have to use on update, in which you view update cycle calls when any data is changed. That cycle is called on update. If you want only a one-time API call, like fetching the data at the time of component load, we can use created or mounted. Thank you.

What steps do you follow when adding a new feature to Vue.js application that involves changing both templates and corresponding SDK endpoints? What steps do you follow when adding a new feature to Vue.js application that involves changing both templates and corresponding SDK endpoints? We will create a new component file and in which we will write all the HTML, save the HTML, if you have to change the section or add the section, we will use that component in that section and we will create the normal component we create and call that component outside, wherever we want that feature. Adding a new feature, if you want to create an existing, then we have to change the code and you have to implement new methods so that it can't conflict with existing files, with the existing code.

Can you detail a method for creating a Vue.js directive that can manipulate the tome based? Can you detail a method for creating a Vue.js directive that can manipulate the tome based? Okay, for a previous version like Vue 2, in which we can create a directive component like a normal component in which we will use directive elements. From that, we will directly access to the JavaScript DOM elements like in HTML or styles or text content, which we will manipulate or modify the content. For example, if we are creating a billing software and we have to show amount which is less than 0 in red color and for element in green color which is more than 0. So, we will use the directive and in directive we will use the element of used and directly we will change the color.

The style changes might not be getting applied because the JavaScript code is not visible here, it's just a back end strip.

In this JavaScript function yes. Now the asset code is visible. In this JavaScript function, a common design pattern is used. What is it, and how does it come to go to cleaner? In this JavaScript function, a common design pattern is used. What is it? And how does it contribute to a cleaner code? First, it returns data in an object so that it can be structured and we can use it in a cleaner way. And whenever we call the function, it returns a console log written by the design pattern is used to I don't know.

When deploying frequent updates to a view from APIs, I would take the following approach to manage browser cache: To manage browser cache, at the time of deployment, all the existing JavaScript files will be renamed to their new versions. This will ensure that the browser always fetches the new JavaScript module every time a deployment occurs. For RESTful APIs, we can implement versioning by adding a version string to the cache key at the time of response caching in the browser. This can be done by using a version prefix or suffix with the key. When a new Vue JS application is loaded, it checks the version. If the version is not found, it retrieves the latest version from the APIs.

We can create our own events, in for example, global view events, or we can use document events. But if we see view-oriented, then we can use a view global emitting events, like view emit. So anywhere in our application, we can create an event bus that has the same class as the view class, we can listen to that. It's a kind of view-oriented event. Another method is using document browser event or custom browser event.

Okay, refactoring, first we have to understand the project and need knowledge about the project and later we have to start with understanding the code and we have to look for common factors like some people do very wrongly compute, most people do not use computed but they write all the verbose like unmanaged code in the HTML template. We will extract that HTML, remove that code from the HTML and use either a function or the computed method. I have seen many different codes like those where they do not use map but instead use foreach for logic execution, and I have seen codes where some developers modify directly in the computed method, which should not be done in the computed method. Another thing I saw is that people use common conditions in methods, not computed conditions, some execution in methods and use some heavy conditions in methods and use that method in a bif, and every time the templates load it re-renders that whole function-heavy function. Instead, we can store it in the computed so every time it returns the already evaluated method like memoized. There are many things we need to consider, like people do not create components, component-wise. For example, they write whole things on the same view component, sorry, same view page, instead they should create small components which are easily manageable at the time new features are asked by the client. Then we have to understand the unclean code which is hard to manage. So it's a better idea to create small components, check Vuex and API response, all this needs to be considered.