Rahul Ajrekar

Yeah. Uh, uh, myself, Rahul Azrikar. I am working as a front end engineer. Uh, like, I'm I'm currently not working in it right now, but I was working as a front end engineer in my last company. It's been, like, 6.5 years. I've I'm into front end tool itself. Um, I'm I've worked on, like, multiple, uh, frameworks, basically, Vue JS, uh, React, HTML, CSS, JavaScript, TypeScript, GraphQL, uh, testing unit test cases also. Uh, so, yeah, basically, um, I worked on, like, multiple domains also. Basically, like, marketing domain, retail domain, banking, product based companies also. Like, they are data products and everything. I work from, like, uh, I have I have experience from working from, like, startups to, like, MNCs also. So yeah um basically uh I feel pretty much confident on this role also

And most critical factors to consider when choosing NPM, different packages for project. So, uh, basically, when you choose an NPM package, definitely, the version, uh, comes into picture of whether, like, that package supports your current node version, uh, going forward if you want to, like, scale that component specifically. For example, if you are using any kind of data table, uh, data table, uh, might need some changes going forward as per, like, uh, our requirements. So we, uh, we should see, like, what what, um, uh, how much can you extend that package? Like, how much modifications can you do, customizations you can make into that project, uh, package? And, uh, yeah, these are the things, basically. Uh, also, if your if your if your application is in React or Vue or whatever, you should also check, like, how what version Maxi can support your, uh, framework also, like, the application you're using. Um, Yeah. Basically, that's what you want to look after. Like and yeah, the the more important part is, like, how much can you customize your package? Because most of the times, there itself comes the challenges going forward. That's and that's what I've I've faced in my earlier experiences. So that's it. That is what you want to consider.

Yeah. Um, using TypeScript for unit testing is the best, uh, thing I've experienced in my last project. So we were deaf, uh, we were kind of using, um, so first, we in our project, we had a lot of components that were use that were we were using from some other library, basically. And we decided later on going forward, like, we should be creating our own, uh, component library. And there we should, uh, like, develop our own components and also write a storybook for that. But along with the storybook, we decided to also, uh, write some unit testing for each of those components, uh, with TypeScript. So basically, all of our components which were earlier in the project were, right, written in JavaScript, and those who are being, uh, like, transformed into, uh, TypeScript again. So while developing these things, I found out, like, we, uh, implement the component in very, uh, strict, but still, uh, unbreakable way, basically. Because even if you were trying to pass any kind of uh, other prop to it, like, uh, instead of string, you're passing in null object or or an object itself and or an array. Uh, we definitely will have the control in the compo at the component level. Uh, like, decide if you want to accept these props or no. This would prevent our component to, like, uh, reduce the, uh, like, uh, reduce a lot of bugs, basically, and showing a lot of, uh, prevented a lot of errors in our component. Yeah. That was the best idea, um, of, like, best decision they've made, and I was, uh, like, could have, um, lucky enough, I can say, to, uh, get a chance to work on those, uh, things also, uh, recently.

In a component process, how do you decide on the granularity of the comp okay. So, uh, for example, in your whole application, you have divided the components, like, uh, describe define the components and, uh, you have used that in your whole application. Um, suppose we can consider an example of, uh, data table itself. Data table would have a lot of things basically into it. We can, um, modularize it or granularize it, uh, at different levels. Basically, we can, uh, make a different header component in it. We can make actions, like, if we have if we'll have an actions component basically or column, uh, so that we can have actions like button items into it. We can create that separately. We can have pagination component separately, we maybe we if you want to show some nested level of data into our columns, our rows, uh, we can have that particular component separately and with this with props we can, like, decide if we want to, uh, show that component or not. So, yeah, definitely, we can modularize these kind of components easily. I've done this already, uh, like, in my recent project, uh, one of my pet projects basically. Uh, so I had to, like, uh, I didn't had any specific, uh, headers defined because we if you're using a data table, you won't have any headers defined specifically. You cannot define it basically. So you have to make it dynamic. Uh, what I did implemented was, like, to send a JSON data itself and we will choose, like, what columns should we show and what cannot be shown. So I had given that prop to it, and we are we were showing only those specific columns and, uh, like, data, basically, what which you want to show into the data table. So, yeah, I had done this, uh, recently, and it it works very well, basically.

Should we approach creating an efficient webpack build process for a React and TypeScript project? Should we approach creating an efficient webpack build process for a React and TypeScript project? Okay, for webpack, basically you can, you should start with like, so suppose if your application needs to have TypeScript, SCSS, SAS or SCSS, linters, maybe some other plugins you want to include in your application, you should define, definitely define that in the webpack itself at the initial, like beginning of the project. You can, you can define your, define your needed loaders basically, because if you are, if you're using CSS like libraries in your, any kind of libraries like that in your application, you need to define some loaders or maybe plugins if you want to use, you need to use those. So you can define those basically. After this, to make that build process efficient, you can use some, so I'm not getting the name of that library right now, but, but there's a library, which if suppose you're using a lodash kind of library and you're using only maybe three or four methods from it. So what that does is like it only takes out those specific methods from your library and builds the bundle and negates like everything else. So to just to reduce the bundle size, we can use this. We can use obfuscation definitely in your application like webpack. We can use minifying of CSS to like, again, reduce the size. Code splitting is also that, that you can use at code level. But yeah, you can define it here. Like if you have any customizations to make. And yeah, this is all I can remember so far.

So, using lazy loading of components in an application breaks down your component bundle size into chunks and request those chunks only when needed, instead of like prefetching those the whole bundle itself. This would, this would, this would make your application like page loading faster itself, because you're not, it won't take much time to load the whole bundle js at the like in your every routing. So basically, yeah, that's what you want to do by using lazy loading. We can use this in its best to use at the routing or the component like pages, pages level, and then you can go on like defining the nested components or whatever components you're using in your app, like parent components, you can use lazy loading there itself. There's no harm in that. But you can avoid like very smaller components if there if it's like any static pop up module, maybe something like that. But yeah, definitely lazy loading would help you to like break down your whole application into applications bundle size into chunks.

Okay. First of all, um, there are no props or anything being okay. I'm considering this component as a, like, kind of boilerplate and, um, we might do something in these in this component and it might go into rerendering phase. Uh, I would explain like how we can optimize any component basically. So you're you're not using any useEffect here with, like, uh, the empty array, first of all. Uh, and if at all you are passing some props to it or maybe some, um, changes, like, props are being passed to the component, but it's it's like, uh, not not controlled in any way. For example, we are not implementing this component in a pure component form. Uh, this might cause, uh, re renders again. You may use, uh, use memo hook for this to, like, uh, prevent rerendering, uh, of this component. Um, you can yeah. Definitely. You can use you can use, um, like, uh, callbacks. Like, we can we if suppose we are using, uh, a a comp an element HTML element with, like, uh, no and that that's a button come button element. You're clicking on that button, but there's no callback added to that. It would cause again the rerendering parts again, uh, even before clicking or triggering that. So, yeah, these are the few things you can implement.

Okay. Um, first, we're defining the interface bird here with fly and lay eggs as the properties in it. Um, I think we should not define this, uh, in such a way, uh, we should be using the either the parenthesis and the return, uh, type of that function. And, uh, yeah, and not definitely I mean, in this way. Um, apart from that,

This is your experience with your test Internet applications and how Okay. So, um, suppose you have, uh, you're writing, uh, there's a component already existing that is a login page, and you're writing some unit test cases for the login component. Um, definitely, you might have described few of the types, uh, in your login, uh, component itself, But when you're writing the unit tests for that, uh, you may you may do, like, definitely if it's a small component, you can just go on and and grab pure d, um, like, interfaces or types, whatever you're defining in your component. And just grab those and copy paste those but suppose going forward, um, if you are making some changes or adding some types again to your login component cell it's better to like export that the same types or interface from the component itself and, uh, you can use the same thing in your testing file. Uh, usually, it's better idea to keep the types, uh, file separate along with your component, uh, at the same level, and, uh, then it's very easy to, like, uh, import, uh, import it anywhere elsewhere, like, in your, uh, whole application, basically. Um, this would definitely prevent the interference of the types, uh, in your retesting file and the component file but also if you make any enhancements to your login component itself it would also make or give some errors again in your application because, uh, the same type is being referred over there and to some of the test case may fail or it won't run, uh, the coverage might not come entirely. So, yeah, this might help you.

Which will process front end testing and development and deliver your project. So, I usually follow, in my initial days the style of my working with TDD was a bit different. I was not so much into test driven development basically. It was like, I just used to get some task and continue with that. Just get started on the coding part and then come back with test cases. But as I grew up and understood few things, I understood like we should, whenever we get a task, we should discuss over it, find all the use cases of that, suppose you are developing the login page itself, you should discuss all the scenarios with someone or like you can go through the component itself, like the login page itself and note down few points. Once you have these points, you should definitely first write the unit tests, like empty unit tests, like what could be the cases where we have to cover the code and everything. Once you have all the test cases ready, then you might go to the code actually and then write everything. Those might handle these scenarios again in your code. Once that is complete, then you might come back to your test file and write, complete those unit test cases. So this way, this is the way I follow usually from my, like in my development style.

So, um, there was a there was a There was a component, basically. We this was a page, basically, we I had to develop. This whole page had, like, everything, tiles on the at the top, accordion, um, like, tabs tab component, basically. And within tab you also had some accordions, uh, and everything had to be developed dynamically based on one single API's response so that every API would return a used data, uh, with lot of, like, JSON fields and but but everything was this categorized in 4 categories and those 4 categories we had to show in 2 different tabs. One tab component would have 4, another tab would have 4. So, uh, that was a bit challenging because, uh, we had to take care of the optimization part, the performance and also the consistency of the data which we are showing because those datas were changing only on the basis of single flag of from one of the keys in that in that JSON. So, yeah, this was a bit challenging. Uh, I think I used I first what I did was, like, whenever I get the response of the data, uh, I wrote a snippet of code, like, to categorize the data and store it in the JSON object. Oh, sorry. The j store basically in our application using Redux. Uh, once that is done, I had to, like, uh, render the tabs based on the categories available from in that response. Suppose instead of 4 there are 3 only coming, I have to show only 3 of them. So, yeah, this, uh, had to, uh, categorize it at the initial response itself then I had to display it in the in the UI. As the data was huge I had to, like, optimize the loops basically and add, uh, and then dispatch the action to, like, uh, in the reducts to make these changes happening, uh, in the UI. Uh, that was a bit challenging.