Taherali Sonkachwala

Uh, could you help me understand more about your background by giving a brief introduction? Okay. Hi. My name is Tayeil Ralyshunkachwala, and I started my career as a web developer in Techsperia. And later, I, uh, switched to another company, Neosoft Technology, and currently, I'm working here. And I did many projects, like, um, in the b u BOGS and Laravel. And, uh, I, uh, last my last project was appointment software that is confirmed in which we we, uh, we created application in WebSockets and, uh, live broadcasting and live chat application. And, uh, my total, uh, total relevant experience is 7 years in Vue. Js, and both I handled both Laravel and Vue. And, uh, my, uh, if if we see all my, um, education background, I complete I completed BCA in computer application, and and I did I did diploma in software engineer. I have a certificate in course in Java and, uh, said, uh, system management design The and, uh, that's it.

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

Describe a Vue JS performance optimization technique that consider both CSS handling concerns and JavaScript execution time for REST API data manipulation. Okay. For, uh, CSS rendering, we use a scope, uh, scope CSS data. And, uh, for JavaScript executions, we we we have to avoid things like, uh, like, uh, memory leaks, like, uh, if our third party application is using some kind of events and we you we we listen that events in our component. So we have to clean up that components to avoid memory leaks. And, also, if we are using any, um, interval or a time out process, so we have to clean up that process also. So we will avoid, um, memory leaks, and, uh, CSS rendering is using scopes so that, uh, component is, uh, component will component is destroyed, then it will automatically remove that scope CSS also. Specification time for this to be a little bit. And, yeah, it's done, sir.

How do you manage component life cycle in Vuegis in a way that it aligns with data refresh cycle from REST API? Okay. Uh, component life cycle. Okay. We will you if you want to show, uh, users on page or some kind of data and that data comes from the API, we will call that API on, uh, on a v on, uh, view life cycle that is mounted or created. Created is called created is called at the time, uh, at the time component is created, and the mounted is called at the at the time component is, uh, draw the picture on the browser. Means, it, um, render the, uh, HTMLs on the browser. It called after or later we could use created for API calling. So it, uh, align with align with the view component, uh, view components' life cycles. Data refresh cycle. Uh, if you if you want to use data refresh cycle, we we have to use on update in which, uh, you view update cycle calls when any data was, uh, data is changed. That cycle is called on update. If you want only a one time, uh, one time API call, like, fetching the data at the time of component load, we can use created or, uh, 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.

Look at this JavaScript code using the Vue JS framework. Adding to the issue why the style changes might not getting uh, I can't see any code. It's just, uh, just a back strip. Where is the JavaScript code? JavaScript code is not visible here.

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? Okay. In this JavaScript function, a common design pattern is used. What is it? And how does it contribute to a cleaner code? First thing, it returns data in object so that, uh, it can be letter d structure and you, um, in a cleaner way, we can use. And whenever we call the function, it it returns a console log written written by the for design pattern is used to I don't know.

What approach would you take to manage in a browser cache when deploying frequent updates to a view? From APIs. Actually, at the time of, uh, build, uh, um, building, uh, at the time of deploying the code, all the GS will, uh, GS will be renamed to renamed new. So the so so it will always, um, fetch new JS module every time if you deploy. And for restful APIs, we can we can give version, like thing, that, uh, we can add, uh, some some, uh, version string at the time of doing cache, uh, at the at the time of doing, uh, response caching in browser, we'll use version version prefix or, uh, suffix with the key. And, uh, and when new new Vue JS application is, uh, load, it checks where, uh, it it, uh, checks with the version. If it not found, then it, uh, retrieve from the, uh, APIs.

Which code progress would you follow? We can we can create our own events, uh, in for example, global view events, or we can, uh, use document event. But if we if we if we see, uh, view oriented, then we can use a view, um, view global emitting events, like, uh, view view emit. So anywhere in our application, uh, like, event bus we create The that, uh, that view, uh, that view class same class, we can, uh, listen to that. It's a a kind of view oriented event. Other method is we can using, uh, uh, document browser browser event browser custom event.

Okay, refactoring, first we have to understand the project and need knowledge, need knowledge about the project and later we have to start with understanding the code and we have to look the common factor like some people do very wrongfully computed, 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 function or either computed method and some I have seen many different codes like the like for like they do not they used map instead of foreach at the time some logic execution they used map instead of foreach and I have seen like code in which some developers modify directly in the computed method which should not be do in computed method, another thing I saw that people use common condition in method, not common condition, some execution in method and used some heavy condition in method and use that method in bif and every time the templates load it re-rendered that whole function heavy function instead we can store in the computed so every time it returns that already evaluated method like mmoized and there are many things we need to consider like people do not create component, component wise for example they write whole things on same view component sorry same view page instead they should create a small small component which which which is easy easily manageable at the time new feature at a time when new feature is a new feature is asked by client then we have to understand the unclean code which is hard to manage so it's it's it is better idea to small create a small components check Vuex and API response all this needs to consider thank you