Sree Charan Ryali

Yeah. Hi. Um, my name is Charan, and, uh, I have a total of five and a half years experience, uh, in front end. Right? So and, uh, uh, throughout my career, I have, uh, used I have learned most of the commonly used, uh, UI frameworks, JavaScript frameworks and libraries such as Angular, React, Vue. Js, Nuxt. Js, etcetera. And, Yeah. So, uh, I have as well as the career, I have, uh, been worked, uh, in, uh, multiple startups, which, uh, made the working environment more competitive and, uh, where I had to learn things from the globe on the go. Um, and there are many pretty interesting things which, I got to work on and integrate, uh, in the web applications that I have developed, um, and, Um, in order in order of tag managing timelines and stuff, also, I've got a pretty good, uh, experience, I could say. You know, in a way such as handling the stress, handling the Timelines of a very, uh, thin deadline project and stuff. So I think I'll be a good fit for our plus, uh, considering all the, uh, and all the requirements for the job. Right? Thank you.

What steps would I take to ensure high performances in responsiveness of Angular applications? Okay. Uh, well, so I would, uh, uh, there are multiple things to approach. Right? Uh, the some of them would be, uh, lazy loading, which, You know, uh, which which, uh, which helps the module to only load, uh, um, the necessary components, And then not all just just don't, uh, it it doesn't load all the component at at the same time. Right? And optimize change detection is, uh, is another thing. And, um, I could say optimize the images and assets that we were we are using throughout the project. We'll we'll need to, uh, much more optimization, uh, in the to the end project. And And, uh, if there if if it is an option, we could, uh, we could use a SSR, which is server side rendering for angular projects. Right? Uh, which will, uh, um, reduce the, uh, weight on the client side. Right? That will ultimately optimize the application, and, uh, we can optimize the the angular templates, and we have we can, Do the code fitting according to the components and, I don't know. Kind of, uh, uh, what we are doing with the

Um, how could I leverage TypeScript's features to improve JavaScript code quality in high stakes enterprise project? Okay. So I could, uh, do that, uh, basically by, uh, using TypeScript features like such as, uh, static typing, uh, which is basically, uh, typing to cache type related errors during development and which reduces the run time issues, uh, in return? And and, uh, we can use, uh, code navigation and intelligence for, for the I, uh, ID's whatever ID is set for being used for development, code development, uh, which which can, uh, you know, improve the quality and as well as the time, uh, it is taken for the development as well. Right? And, uh, we can use interfaces and type definitions for the in the code, uh, for the and also for the data we are series from the APIs? And encapsulations and access modifies are also a different approach we can, uh, which, uh, to which we can leverage, uh, to improve, uh, the, overall quality of the code and, uh, security of the code? Right? And, yeah. I mean, um, the custom types and type guards, uh, which will, uh, we basically, we will create custom types and type guards to handle complex scenarios and improve the robustness of our call? Yeah. Thank you.

Can you give a practical scenario where automated testing and code review improved the quality of an application front end? Um, Yeah. So, Uh, imagine a scenario in which a an e commerce company is developing a new feature for their online store, uh, to allow customers to track the deliveries of delivery status of their orders in real time. Right? So here's how I, uh, automated testing and code reviews improve the quality the, uh, the front end application. And then, right, which will, uh, automate in in-depth of automated testing, uh, we can do, The development team implemented a sort of, uh, automated tests using, uh, tools like, uh, Jasmine or, uh, just to cover various aspects of the delivery, uh, tagging feature. Unit tests were written to verify individual components and functions, since, uh, ensuring the each point part of the front end, uh, is behave as as expected. And end to end tests were set up to, uh, validate the entire, uh, delivery tracking workflow, uh, including real time updates, error handling, and the user interface response, etcetera. So that come that that is in, uh, in terms of, uh, automated testing, uh, when it comes and also, we can, uh, ensure the continuous integration approach, CI, uh, which, The team integrated automated tests into their CICD pipeline, triggering these tests where when whenever changes were published to, uh, the Russian control system. Right? So automated builds and tests helped, uh, help, uh, or catch the issue early in the development process, preventing the integration, the faulty code, or breaking the feature or etcetera. So, um, yeah. Uh, there are many other, but, uh, these are a couple of them.

Can you explain how you utilize angular components directly? I'm sorry. Uh, what is it? How to utilize Angular Components, directives, and services in a complex project. Okay? So, um, uh, components, they basically, uh, based, uh, components, uh, in general, are used to, uh, divide our whole, uh, code logic into into bits and pieces. Uh, bits and pieces which are reusable, uh, for, uh, throughout the code so that you don't have to repeat the same amount of code, uh, multiple times. Right? That that's where the components come into the picture. And directives are basically, um, uh, to encapsulate, uh, and reuse DOM or man, uh, or, Uh, you know, my dom do the dom manipulation for, uh, view other related, uh, view your related logic view related logic. So in angular, basically, there is logic and view and and, uh, and and styling part. Right? So the view related logic. So, yeah, uh, directives will they they they they can create custom directives, uh, and and, uh, specify their behavior, uh, upon apply I know how how they should behave upon upon applying them as well. When it comes to services, Excuse me. Uh, services is, uh, uh, it's, uh, it it is used to encapsulate business logic, data fetching, and other shared functionalities. Basically, uh, using dependency injection to inject services into a component and another service, etcetera. So that's how, uh, we can we'll use, uh, uh, these 3 in a complex project, in a any angular

What are the measures taken when ensuring a high performance front end web application on slower networks. Yeah. So, basically, uh, one of them would be, um, minimizing HTTP requests. So, uh, reduce the number of HTTP requests by combining CSS and JavaScript files, uh, using the image tries to combine multiple images into single file, reducing that that reduces the number of, uh, image requests to the server and optimizing measures like I mentioned earlier. And lazy loading is another feature which which, uh, doesn't, uh, fetch all the content of the website at the same time. Uh, instead, it will it will fetch only the required components and required modules, uh, which are being accessed and used in at that particular time. And, um, yeah, asynchronous loading is another very, very, uh, infamous, uh, concept which is being used, which basically, uh, prevent blocking the rendering of the page. For example, any API call is waiting for the server to respond. And, uh, meanwhile, the other the other rendering of pages, uh, blocked because of the daily call. That that would not happen if we use the asynchronous loading and, um, uh, caching, leveraging browser cache by setting, uh, appropriate cache headers or for static effects, etcetera. And, uh, responsive design is something which we would, uh, I was respond personally responsible to ensure, responsive design mobile first approach, right, it was called. So, yeah, um, that's something we've, uh, we have used very thoroughly. And, uh, again, server side rendering is something that we can use also in network friendly fonts, etcetera.

What will be the output of this code in life? Okay. The output of this code will be fifteen. Right? Of course, it's a pure function, which has, uh, only one written value, which includes the, uh

Um, for the angular port component, but angular material is being used. Okay? If any other identify that. I don't think there's any errors. So as we are using Angular material, we need to import, uh, the particular component which we are using. So an import statement has to be included in this component, and then we can import that particular component in the template. And, uh, we are also having to specify some style that that that also has to be mentioned accordingly. Yeah. I think that's something which is missing in this call.

Would you handle, um, how would you handle clashes between NGINX and Bootstrap layout? Okay. So So I think NGINX and, uh, uh, Bootstrap are generally not in direct conflict. Um, so if at all, uh, conflicts arise? So I think, uh, we can, uh, the so the the type of conflicts we can encounter our file path conflicts that we can ensure, uh, that are Nginx server is configured correctly, uh, like, currently server static files, including bootstrap CSS and JavaScript files, etcetera? And, uh, corrupt, uh, correcting the MiMe MIME types? So which basically, verify, uh, Nginx is, uh, set up to the server CSS or, uh, and JavaScript files with the current MIME types, etcetera? And, uh, basically, avoiding duplicate, uh, bootstrap includes? So, uh, that also might, uh, uh, arise a clash? Um, and also a generic call location configuration can also be checked for that.

Considering CICD tools and platforms such as Jenkins, GitHub Actions, or Azure DevOps, which one would I choose for a front end project and why? Okay. So, basically, here's a brief of comparison for me, uh, for, uh, for you. Right? So, basically, Uh, Jenkins has a highly customizable, actionable suitable, uh, for, uh, building complex, uh, complex builds and deployment workflows, but it it does require manual configuration and maintenance. Uh, right? Uh, when it comes to GitHub actions, it is actually structured, uh, it is limited to GitHub repositories only. Uh, we can't use a Bitbucket, for example. Uh, right? So, uh, ultimately, the best choice actually depends upon specific project requirements and preferences and the level of integration we are looking for. Many modern CICD tools provide excellent support for their front end projects, and the decision often comes down to our, uh, team's, uh, familiarity and workflow references. So, yeah, that's