Jagadeesh J

My name is Jagdish, and I'm from India. I have close to 13 years of experience. And in terms of front end, I have around, um, Um, 11 years of experience. Uh, for the past 6 years, I have been working in remote, and I have worked with your distributor team across, um, lot of time zones. Um, I started my career with, uh, data center service where I was a back end developer, and then I moved to front end because I I'm quite good in JavaScript. Um, later I worked with gaming, and then I moved to A marketing company where I was working on product information pages and campaign pages. And then I joined Freshworks, which is a SaaS company, And I was working in a product called Fresh Color. Uh, it is based on Amber and Ruby on Railsstack. So I was the only front end developer in the team, and then I, uh, when we launched, I become the front end lead, and there were around 6 front end developers who worked with me. I was in Freshworks for around 4 years and a few months, and, uh, we launched Freshcaller, and we also scaled, uh, the team as well as the customer base. At one point of time, we are making 2,000,000, uh, ARR. After Freshworks, I joined which is a US based company. That was my 1st remote company, and I was working with people from, um, a lot of places, including Brazil, Poland and US. Um, I was in Northern create creation of, which is a file sharing and chat platform. Uh, so I it was a Vue JS based project, and I also implemented, uh, the desktop version using electron JS. After that, I have done, um, small contract jobs. So some of them includes a A product based company from Sydney, which is, uh, Zoom to You, uh, where I worked on, um, helping the team to build their Map Google map tracking. And, um, later, I also worked with the Japanese SaaS company called Otify, where I implemented a lot of features in the React product, and I also moved the Chrome extension version 2, manifest 3. And then I started in a contract work with, uh, Turing, uh, where I worked for Marshland Brand, which is a US based Company. It's a tablet manufacturing company with a lot of sister Companies close to 13 websites. So I worked with the brand site and marketing team where I helped, uh, creating a lot of features in their websites and unifying the code base. Um, my contract ended on December 31, and I am looking for my next

Okay. Um, we can, um, split that in multiple approaches. The first approach is to obviously introduce a code splitting mechanism, not just for images, but for pages or conference in general. And the second, uh, we used to adding, um, um, a lazy loading where we will not load the image at the beginning, but We will load it on demand. Uh, so that, uh, let's say we have lot of images, um, and they are below the viewport. We don't have to make the application wait, which we can just load the application then at least load the images with proper skeleton and placeholders. And since we are talking about high resolution images, one way is to have a server side rendering of image where, uh, we can use, um, libraries, Uh, or, uh, we can use utility tools like tiny PNG or tiny GPG where we can optimize the image in the back end when we are. We also can have multiple versions of images. For example, uh, we can have a server say rendered, images in terms of sizes so that, um, when we are displaying it in desktop, um, we can use a different size, Then we are using in mobile. For example, um, we can have a API which will say, uh, you know, Image, uh, question mark with equal, uh, some width. Let's say, um, 100, uh, which will be optimized for mobile, Uh, on our end time. So we can do it, uh, if if the server is good enough, uh, we can do it run time, or we can, Do a cast version. Uh, these high resolution images, um, can be optimized. The reason is, uh, we don't have to show, uh, the high resolution image in client if Unless it it is something that is very detail oriented. Let's say I want to load my avatar. It it don't have to be data oriented. Right? So we can, uh, um, save a optimized version in server and then we can load it. Let's say I'm I'm opening it, uh, or maximizing it. In that case, then we can go for

Okay. Um, I think one issue that I see here is the fact that we are binding on the image even to the button on click, which May happen again and again when the component re renders. For example, I mean, a component is always subjected to rerendering. Right? So this is one issue that I see. And, I I see another possible issue, which is, uh, we we are using, uh, Emmet, which is not really scalable. For example, uh, today, I'm having parent component, a j l component. And tomorrow, I might have another component that will come in between this. So In that case, we may have to add 1 more, uh, AMET event, and this is going to bubble up all to all all to the top. So that that is a lot of computation with the CPU. So how, um, I will personally resolve is, uh, we can go for a centralized, uh, state Or, uh, dispatcher action dispatcher management, which, uh, will not only make the code, uh, simpler, but we can use it, uh, in any place. And it will be, it will not be dependent on the parent component. So if we want to make any changes, then we have to, go all the way up, uh, to the pan component and then make changes. But in case of case of centralized, uh, action dispatcher, we just have to do it in one place and we can use

One thing that I will not use is to have a lot of properties in, drill down to the child. But, um, I guess we can use use context, uh, so We don't have to worry about having multiple, uh, uh, drill down drill down of, uh, properties. And, uh, this, uh, is actually in build, so we don't have to use any external libraries like Redux.

Side effects. Uh, in general, hooks, uh, the major problem that we face is when Later when that is happening, um, then, uh, the, um, hoax may be called again and again. So one way to handle this, We can use, Okay. What we can what we can do is, um, properly passing the Properties or. Or properties that that will trigger Uh, the usage of folks. And the second thing is, like, we have to make sure that we are not calling without any conditions. We are we are calling it based on certain conditions.

The first thing that I will do is, uh, make sure that, uh, the design is based on a design system. So I will first, uh, create the basic components. For example, um, the boxes in which the conference will be fitted and then the elements or the basic elements, like it could be a form element or it could be the typography or it could be, uh, the elements that will have some uh, features like chords or accordion. So I will identify all the common elements, and I will create all these common things. So that will be my first uh, step. And 2nd step is to make sure that I have a proper teaming so that in the future, if we have changes in the color. I can easily implement it. So a lot of plugins are available for Figma where we can extract the colors and and themes, which I'm I'm sure Figma the Figma developer would have used, um, variables. So I will collect all the variables, and I will make sure that, uh, it is applied to the top level classes. And then later, I'll start building, um, the, uh, the basic component based, uh, the element based component. For example, if there are, uh, cards used in multiple places. I will build those single card. If there are lot of forms used in multiple places, I will, um, build the, uh, components input components first and then the the general form. And once it is done, um, all I need to do is just just input the components into the code and and, um, build the

Okay. Um, I I don't know what, uh, the what What is the meaning of state groceries? But I can see the problem here where because, um, the set state is actually not synchronous. It it is. Sorry. It's asynchronous. So, uh, the we cannot honestly expect on the value of, uh, input value, uh, to be the target value, uh, on the next line itself. So, What we can do is make sure that, uh, we enable the submit button once the input value is set, Or, uh, we can use the second argument of, uh, set state, which is the function required for calling. So, Yeah. That that's one way of

I think the easiest way to do is, uh, enclose The function in I enclose the method and try catch And, uh, make sure if there are any, uh, issues, we'll catch the error and also display it in the front end so that the user know that something is wrong. We can proactively, uh, cast the error even before it is it is being passed into the, uh, method. For example, if the types are not matching, we can just uh

I think this is about traffic because the server might not be be able to serve everything. Uh, so, uh, since this is happening from a lot of, Um, people logged in. Uh, so what I we can do is we can separate, uh, the concerns, and we can distribute them in in into, And into different, uh, servers. For example, um, I can let let's say, uh, the, We we are sending we will, uh, like We'll be using a lot of, responses from server. For example, if I'm logging in, I'll be having information about myself, my cart, or information about the product or the pay that I'm listing. So, Uh, instead of sending, uh, everything, uh, we can cache a lot of this information which are static, uh, and we can have a flag that whether they are changed or not. So We don't have to transfer everything from back end to front end. Some of them can be cached in the front end or stored in the local storage. And second thing is, uh, we can split the services, And, uh, if there is a particular service that, uh, is being, um, used by a lot of, uh, people at the same time, we can, See if we can split those services, uh, and make sure that the server is not loaded overloaded. So, generally, Front end being slow, um, uh, is honestly, it happens because of, uh, the, Services, the the API calls are being are taking long time. So, um, we can fix this, Effectively, um, from a from a server side by by segregation of concern, so the front end will look um

Uh

So I have done this. Um, I worked for FileClord, which is a file sharing software, and it was it was a monolithic architecture. So, uh, when we transformed it, uh, first, we sat with the architect on the back end people, and then we, uh, agreed on the, uh, APIs that we'll be having. So first, we created a storybook. And then from the front end, we started writing microservices, uh, that will be consuming, um, various, um, main feature. For example, uh, there is a feature that will list the files, uh, in that there there there is another feature that will handle the permissions and then, uh, something which is about this information. So first thing is to agree with the back end team, um, and split the, uh, AP and create a storybook. Uh, and then, uh, let's say there are major routes. For example, a route for a user and then a route for a particular feature. Um, so, uh, we can split the front end team into those routes, and they can work independently. This way, uh, uh, the code base, uh, will not have a lot of conflicts when the users are working, uh, as well as it will be easy to integrate. Uh, and second thing is, uh, to write unit test cases so that when we're developing faster, uh, we don't file, uh, like, by mistake, we won't form any anything like a regression issues. So I'll do that.