Pooja Sharma

K. So, uh, yeah. I have 6 plus years of experience in, uh, web development and enhancement. So currently, I'm working in DXC technology as a software engineer. And, um, here, uh, I'm working in, uh, a project called Alarm Codes, and I'm using Vue. Js, uh, version 3 with script setup method, composition API, as well as, um, HTML, CSS, TypeScript. And I have also crafted test cases for the same, uh, using vi test. And, um, additional to this, I'm also involved to, uh, deployment activities as well. So for example, uh, I'm currently, I'm doing, uh, deployment through Azure app services, CICD pipelines. And, um, here in Alam course, uh, we have also integrated SonarQube for code code quality analysis and, uh, code quality analysis report. So there we are checking how much is the code coverage and code smell and all these things. Plus in addition to this, in my previous organization, I have worked in a project by utilizing view 2 version And, um, they also have used features like mixins, uh, UX for state management. And then, there's this library called I18 for the multilingual support then view router. All these features I have utilized in that project. And, uh, so apart from development, I am also involved in all the phases of the, uh, software development, like, from requirement analysis to, uh, deployment. And, uh, um, I'm also involved in, um, training sessions I'm also involved in, um, training sessions. So I'm giving, uh, I'm mentoring my junior resources. Plus I'm also, uh, I've also I was also involved with the, Vue. Js trainings. So like that's that's most of my related to my technical skills. So currently currently in Alam course project, uh, I was working I was working in, um, uh, a little in back end also. So in the back end, we are using Java, Spring Boot, Hibernate. And, um, so I have the ability to work on the multiple projects as well parallelly. So, like, as, uh, I was working in the alarm course, there was 1 more project called, uh, guiding star. So, parallelly, I was working with guiding star as well as with the, uh, alarm course project. So, uh, I have the flexibility to work with the panel with the different different projects and as I'm like I have I have experience with both the build tools like with Webpack as well as with the white because in the alarm course I'm using white as a build tool. So, uh, plus in my previous project, I have used, uh, webpack as a build tool, so I have experience with both of them. And apart from this, uh, currently, I am, uh, learning Nuxt.js, which is used for, server side rendering and for good SEO optimizations. So that is it and uh I think that covers uh little brief about my introduction as well as uh

How would you handle from input validation for data that is also being verified to a REST API? Okay. So, uh, um, in view there, uh, like, there are multiple ways to do it. Uh, 1 is, like, through manual way we can do it. Like, for example, uh, if we are doing it for email or for some, uh, a text field. Right? So there is one thing that we can do manually by checking the length of the character by using the regex expressions. So through regex, for example, some email. Right? Email, we are validating. So through regex expression, we can check if that pattern is matching or not. And then text length, we can check we can check if the type is correct. Like, if we are expecting string, so it should be string. So with that type also, we can check. And there is 1 library also in the front end of you validate, through that also. Like, it's easy to integrate and, like, I have used that in a project. So there is this library view validate we can use to, uh, you know, uh, check the check all the all of the inputs. So there is this directive which we can add and uh, the messages we want to show. Right? If, uh, if there is any error in the input field through that library, we can show that also. So there are like 2 ways through which we can, um, uh, validate before sending it to rest APIs. So when we are making the call to the rest API, right, uh, uh, from that, uh, uh, uh, we get before that rest API call, we can check and sanitize all our input validation. And, um, yeah. So that's how we do it. Like, uh, 2 ways manually and otherwise we can make some use of the library as well.

Uh, share how how you would set up a communication channel between that are not directly related but need to exchange restful API data. Okay. So, for example, if we are, uh, using something in multiple components, right, For that, we it's recommended to use Vuex if like the that property we are using in multiple components, it's better to use Vuex for this Vuex as a library for state management. That property we can keep in our state. And then, um, after keeping it in the state, uh, we can make the use of mutations, actions and, um, getters. So, uh, mutations and actions. Right? So actions are basically used for a synchronous call. So here as we're talking about restate restful API data. Right? So probably, uh, we'll be using, uh, actions here. And through that actions, we'll committing mutations, and mutations will mutate our property and will give you the, uh, updated data. And that updated data, we can use in our different different different different components. So that's how we use it. And um, there is one more way to communicate between the components that is provide and inject. So we can provide any property to and then we can inject that property in any of the uh

That we maintain state consistency across different routes and fetching data from, uh, how to ensure that Vue. Js spa maintains state consist consistency across different routes when fetching data from a REST API. Uh, state consistency, we can, uh, like, whenever we are making any update in any state, right, it's recommended to use, uh, to update that state property every time, uh, whenever, whenever we are using that state property in any of the component. So for example there is some specific router. Right and we are updating that state. So that state should be updated in that particular component before we make the use of the property. Like, it should we have to ensure that every time whenever there's a property change or it's recommended to um, update that state. Right? So it's, uh, so we have to update that state every time in all the components, and then we have to make the use of that state. So that's how we can do it.

Do you manage component life cycle in in a way that it aligns with the data refresh cycle from, uh, the data refresh cycle from, uh, REST API? Okay. Uh, so, uh, like, there are different different, um, uh, life cycle hooks we have, like, created, mounted, and then now we have, updated and destroyed. So what we can do is we can make the call of the REST API in our mounted method. So whenever the component is loading, right, or there is a okay. Data refresh cycles, uh, lines with data refresh cycles from our rest API. Like, I have called rest APIs in mounted method. So uh, loading right and, uh, then we can, um, use that mounted property. Uh, so if there is any property which is changing continuously, in that case, we can make the use of watchers. Uh, if I'm not wrong, yeah, we can make the use of watchers, and we can see that property is changing. Again, we can make a call to the rest API that we can

What step would you take to integrate a third party JavaScript library into a usage spec while ensuring does not affect the performance of API calls? Yeah. To integrate a third party JavaScript library, we just install them, and we we create the instance of like, we have to make sure that we are destroying the instance of that particular, uh, third party library after making the use of, uh, that, uh, library instance. So, for example, if in a component we are using some, uh, library. Right? So we have to make sure that we are destroying the instance of that library after making the, that way, like, it will be it will increase the performance because it will, uh, click, uh, it will release that memory, right, memory of that instance. So yeah.

It's been why the data test might not be displayed as expected in the view JS component. Yeah. Because we are making the API call, but we are not waiting for the result here. Like, uh, await is missing here. So, uh, it will not wait. Right? It will move to the next next uh, step. So it will show the component without, uh, setting this item's property. And, uh, after that API yeah. So that's the reason, like, uh, we are not waiting for the API response

Common design pattern is used. What is it and how does it contribute to cleaner? Good. Uh, in this one, the JavaScript function or common design pattern is used. What is it? Okay. We are. I think singleton design pattern we are using, like, Once my work create book Then it will return data, and then we are again making the call. Closures. I guess closure, we are using here because, uh, yeah. Closures. Uh, I think this concept is called closures because we are making the use of that, uh, like, we are calling that create book function parent method. So after executing that itself, uh, it will return us, uh, Then we are again calling the internal method, my book dot read, and it will I'm not sure. Maybe closures are singleton design pattern we are using or I think this is composable also. Not sure about that.

time-efficient strategy to migrate a large-scale vanilla JavaScript application to Vue.js considering consistent interaction with existing okay so suppose we have an application right large-scale application in vanilla JavaScript so what we can do is we can analyze the code first and for CSS and JS we can create a separate file okay where we will keep our CSS and styling everything so we'll try to common link the common things right we'll try to fetch out and we'll try to keep that in a separate file like we'll create CSS variables and all those things only when CSS variables will make the changes of those colors and all and then in other classes and selector site we can use those properties and you're asking Vue.js considering interaction with existing so yeah the first thing which we will do is we'll create components there okay different different components for example if you're using any pattern input or if you're using any selector so we can create separate separate separate separate components for example and then we'll import those so first thing which we will do is like we will considering consistent interaction with existing listfull apps so yeah what we will do is we will create components and we will install like we will add Vue.js in the application we will install we will install Vue.js and we'll create separate separate components we'll try to import those components routing and all also we will take care and UI through CSS and we common functionality will try to keep it in a separate file and if there is a parent child component will make the use of props if there is child to parent communication will make the use of emit events so for restful APIs will try if there is some common data right so that we will do through restful APIs will call through actions and if we are only calling those components as specific component then we'll call those APIs in a separate component XDS library will all so XDS library configuration will keep in a separate file and routing also will define all the routes in a separate file like we use Vue router there so all the paths and everything will define there and if there is any there is any authorization authentication involved so that also we have to take care like our back-end should be authenticated so for that we can use the JWT token or something that so that the JWT token we will send from the front-end to the back-end and in the back-end we will check that if that is it will fetch out all the user groups and rules from that token and it will check for the access if it is okay or not so that's how we do it

When creating custom events in the UJS that synchronize and with updates from our I think there is, um, 1 sync sync attribute which we attached with the elements. Uh, so it will automatically sync and, uh, custom events in the JS tab synchronize with updates. Or else we can make the we can also use the, um, what do we say? Like, if there is any property, right, which is updating, first of all, there is that sync attribute which we attached attach in the elements and, uh, synchronize with the updates. So if there is any property which is updating, so we can keep a track on that property. Um, like, we can watch for that property, and then we can make the

The third party version custom component development consuming this from APIs. 3rd party plug in, we will just install them and we'll use them, those plugins. And once that is done, we will destroy the instance of that plugin. Um, custom component development, uh, we can import that component custom component in our actual parent component. And then in that parent component, we can, um, for example, we have a input select. Right? And that select box we are loading through the through some data. So what we will do where that child like, in the parent component that, uh, we will import that, uh, select, uh, component. And in that select component, we have that, uh, some data we are loading. Right? There are some there are some options to select So that we can do in the mounted option. Um, so in the mounted, we will wait for the API to return us the response. Once that is done, And we will load the data of that selected, uh, component with our, uh, the data which we fetched from the RESTful API. That's how we use it. In fact, third party, uh, plug ins, we import them, we use them, and then we destroy the, uh, instance of those plug ins.