Manish Parui

Hi. My name is Manish Paravi, and I'm a senior software engineer currently working in a Calcutta based IT company with, uh, 5 years of experience. And previous to that, I used to work in a Jaipur based IT company as well. So in my day to day work is look like, uh, closely working with the stakeholder and understand their requirement, uh, fully and eventually suggest them with a solution. Once the solution get approved, I generally, uh, do the coding with my team and all and eventually, uh, deliver that coding, which which meet the client expectation. And if I talk about the technology stack, which I have worked with, I mostly worked with the front end technology, but I do have a little bit experience on the back end and the cloud as well. So front end, I'm currently working with React and Microfront end, uh, mostly. And previous to that, I I worked with Angular, and, definitely, I have worked with HTML, CSS, Typekit, and JavaScript. And on the back end side, I I mostly work with Node. Js, and I have a little bit experience on the Laravel as well. And on the database side, I have worked with the DynamoDB, MySQL. And, also, on the cloud side, I mostly worked with AWS and have a little bit experience on the Azure. And, also, do I do have experience on the agile methodology, uh, tools like Jira and, uh, other stuff as well as your board. And, also, I do have a quote management tool experience like GitHub or Bitbucket. And this is all about, um, me and yeah. That's all.

Okay. So we can we can use, uh, CMD environment. What it will do is, like, when we are building any application or, let's say, we are running it on a local environment, we have a option to mention in particular script comment that if it what is the environment? So let's say we have a environment called develop stage and, uh, production. So if we mention in the script that it is a develop environment or the production environment, it will eventually going to pick up the environment file based on that. Uh, yes. Also, we can mention the environment file name as well. Let's say, environment dot development, uh, dot something or maybe development dot the environment file. So if we do the skip running that way, we eventually going pick up the different environment file, which is named as a development dot environment or production dot environment, and which will going to hold a different environment, uh, variable, let's say, for for API, uh, signature, there there will be some token or maybe some API based URL will be there. And, eventually, if we do that, we will end up using, uh, multiple environment using Webpack or NPM.

So if you seem to effect build process for React and TypeScript project, we'll, uh, definitely going to I'll I'll I'll always, uh, try to include, uh, code security or code reliability kind of stuff using SonarCloud. So or SonarCloud or maybe ESLint or something like that. So I'll going to use the ESLint and Prettier for, uh, uh, for checking any any any linting problem or or make the codes, uh, formatted properly. Once the code is formatted properly, I'll try to run the unit test cases to understand how many code is getting passed and and how is our code is getting performed. And after that, we can also integrate the SonarCloud to understand if there is any anomaly inside the code or or any other major or minor bug inside the code. Once that is done, we can we can go for building the application using using Webex internal function. And once the building app building is done, we will eventually have the deployable files, which we can we can deploy as well. And if it is a TypeScript project, definitely, we need to compile that TypeScript project to, uh, JavaScript. Once we've done with this on our cloud script, we can we can do that before before building the application.

So to, uh, achieve a lady losing for a real application, what we can do is, like, we can, first of all, import the component. And, also, we can we can mention it as, uh, lazy, uh, in terms of, like, a routing or maybe if we are using a tab, we can also make it lazy. Like, we if we are using chakra tab inside that, we can we can make a particular component lazy until and unless that particular tab is getting visible. We don't have to load that component. So in that way, we can we can make a particular component lazy. And if I talk about the benefit of being lazy, it's like, let's say, your, uh, JavaScript, uh, component take much time to execute, or it should not be execute simultaneously along along with your other components. So to prevent that scenario, we can use the lazy loading. So let's say we have a page which, uh, we'll going to do a heavy calculation based on something. So instead of loading it upfront, uh, which user may or may not visit the visit that page which which, uh, containing that particular component. We can restrict user, uh, restrict restrict the application to load that particular component by using lazy lazy loading. And once user visit that particular page or particular component, we can just, uh, load that, uh, component. So by doing that, what we can do is, like, we can we can free up the computation space on the first place. And, eventually, our application will going to be much more responsive on the first place. And on the second hand, we are not using the resource which is not at all required. As because we might not know, user might not visit the particular page which contain the lazy, uh, lazy component handle.

So what we generally do is, like, we create a separate CSS file for, uh, for separate component. And that separate component, as in CSS, we have a option in nesting. So what we can do is, like, for a particular component, we can we can use a particular class, uh, with the with the CSS. And inside that class as a child, we can we can add other styling. So in that way, let's say we have a div element, and that is inside a login component. And, also, we have a div element that is inside a register component. So now in a general scenario, if we just, uh, style that div, that will going to effect on that login component as well as the, uh, register component as well. But if we just wrap that div as a as a child with a parent of login and a register, that will going to, uh, act differently because the deep component style will going to reside inside the login component, and, also, same goes for register as well. But to do that, we have to mention, uh, we have to mention a parent component, which will going to reside on on each top level component, now which will going to have a CSS class. And inside that class, we will going to write our own, uh, logic for, uh, other CSS, uh, design, like like, for div or something.

Uh, to modifying our application by using its, uh, way to configuration as far as I remember is, like, we can we can, like, previously, I have modified the loading of the CSS file or the static static images file. Uh, by doing that, we will be able to achieve a great load time on the on the, uh, on the application by using Webex size. And, also, using the Webex size, we can we can maintain our, uh, actual files file size, which is going to get deployed eventually. So by doing that, we can keep a check on on on our file size. And if we try to compass our file size, which will going to force us to, uh, use the reusability of our application, so eventually, we'll we'll going to write less code, and I'll going to reuse the code for proper application.

There's a weird course in physics. Why this might cause unnecessary. So in this component, I can see, first of all, the do something which is a function, which is a arrow function, which, uh, which is does not appear inside inside any other block like a useEffect or something. So if we call that function and, uh, we'll call that function without the useEffect, effect that we're going to rerender the application for, uh, for for for unnecessary times. And, also, we are going to hold a empty return function that can also cause the unnecessary, uh, unnecessary, uh, rerender and, uh, return like like, I I I believe it should not be, uh, empty, uh, return. It should should contain something, uh, j six element. And, mhmm, I yeah. So if we if we just wanted to wanted to make this component, uh, optimized and then make this component less, uh, redundant, we can wrap up the function inside useEffect. And, yeah, I think I think that would be it. And I don't find there's much issue with the component.

You know, from the issue in the task of interface and permission implementation, remote, and this really can see. So this box, We won't be fixed. Bot type. Still, I'll update. Bot type. I'm going to just try it. We can apply it. I want to find I do it. There is Okay. So, uh, first of all first of all, the interface bird, which is having a fly with a void. And so, uh, but supposed to be, uh, supposed to be expect something, which is which is not returning anything. And that is I can see that is fine. But if you ask me, I'd I'd mention it, like, fly colon, then, uh, open and close bracket, which is going to arrow, uh, void, which which can make us see that that is a arrow function and which is going to expect no other argument, and it will eventually going to, uh, return a void. And same goes for the legs. Legs would be something like legs, uh, colon, back it open close, arrow, void, which will make sure that it will not going to take any sorts of argument and eventually return, uh, void, which is which is nothing. And, also, also, on the function gate bard, uh, there is I can see that the return type mentioned is as a bard, but we are not always, uh, returning the bug. Uh, that is, like, we are also throwing throwing the, uh, throwing new error, like, an unknown bug. We are not we supposed not to do that if we want to maintain the return type as a part, or maybe what we can do is, like, uh, we can, uh, we can also mention that there will be a void as well. Like, we should going to we should going to expect that our return type can be, uh, frozen. So if we wanted to avoid, what we can do is, like, if the bar type is equal to and also else, the bar type equals to penguin. Also, we can put another condition like else, which is going to eventually send a bar object or maybe a true error. But, again, if you want to, uh, include a true error that we have to mention, uh, void as a function, uh, written type as well instead of only bird.

What is your preference for answering that we have component to be able to use for not cross multiple project? So if you want to make a usable component which is across multiple project. So first of all, if we just just wanted to reusable component for a single project, we have to make a pure component. It's in a in a generic scenario or in a proper scenario. It should not rely on state, uh, which is not not being passed as a prop. It should be rely on the internal state only. So and and it should be a pure component. Means, whatever, uh, input you gave, if it is the same input given twice and two time, it will going to produce same output. That way, we can make that component pure. And now come to the part of if it is usable through the multiple project, probably, we can we can make it as a micro fontent microfountain, uh, type, uh, thing so that we can we can eventually import that component into a multiple, uh, child application as well, uh, multiple parent application as well, and that component can be reusable. So, uh, to make it usable, uh, couple of things we have to keep in mind that com that component should be in a pure form, and, yeah, it's a return type. And I definitely wanted to use TypeScript if it is available so that I can make the return type and the props input, uh, more, uh, typed so that, uh, it does not get any on type input while we are using that particular component in a in a in any other component. So in that way, we can we can make sure that component is reusable across, uh, multiple project. Yes.

Okay. So I would like to mention my correct project. Uh, that is a that is a marketing simulation plot from for a beverage company, which name is AB InBev. And in in in their particular section, we have a section called adjustment, which basically let user to adjustment on a vehicle level. Let's say, it's a traditional vehicle like cinema, TV, and also on the digital vehicle like, uh, Facebook, WhatsApp, Instagram. So it it help, uh, user to, uh, adjust, uh, their cost for a particular marketing stuff, marketing for a brand. And that adjustment kind of look like a fee structure where we have a region, like, epic region or the EU region. Instead that, we can have a country. Instead that, we can have multiple brand. Also, we can have multiple country as well, multiple brand. Instead, multiple brand, we will have a multiple vehicle with their vehicle type. And that need to be as for the application requirement, that need to be late rendered and also generated on the client's side based on the user selection. And to generate that that, uh, eventually, uh, we ended up with, uh, like, 50 thousands of, uh, data or, like, 50 thousands of object inside a single array. And to generate real time in user application and to make it more performant and and make it, like, uh, make it more renderable without stalking the user user application. What we can, uh, what we have done is, like, first of all, we move the entire app enter calculation to the back end. But, eventually, we find that is, like, that is not suitable because we have to do a real time calculation. So we again move back the calculation in the front end. And now what we have done is, like let's say JavaScript does not have any multi threading operation or or, like, concurrent situation. To do anything concurrently, what we have done is, like, we have implement our worker function, which will run behind the scenes to generate our, uh, all those, uh, 50,000, uh, records and and and data. Uh, by doing that, we make sure that our main thread is, uh, free while while we are doing the calculation on the on the worker thread. And, also, once the worker is done, we can just, uh, simply send to a message, uh, to the main thread, and, eventually, we can make it displayed. So by doing that, uh, you're able to achieve the performance and also maintainability. We as we separate the code from our main app place and put it on the worker, that is a entirely, uh, different section. And by doing that, our code get more modularity and, hence, uh, maintainability. And now, still, this thing is getting a little bit issue, so we are also exploring the, uh, like, WebGL, uh, kind of stuff, which Google sits implemented recently. So we are looking forward to that to implement into our application to get more performance in future.