Kaushik Parmar

Hello. My name is Koushi, and I'm from Ahmedabad, Gujarat in India location. And I have total 8 years of experience in front end development, Where for past 3 year, I have worked for a product based company on Angular and Node. Js. And, uh, then I moved in a service based company where I worked with DLTS and the related libraries framework and Node. Js as well. So in total, 8 years of experience, I have 3 years as a technical lead, and I was leading a team of 7 developers, including front end and back end. And my role was to develop modules, features, and defining the technologies, uh, project architecture, and then guiding the people how to, uh, achieve the features and how to complete on time. And that that was my lead role. So we were working, um, in distributed team remotely. And since COVID, uh, we have been working, uh, as a remote developer. So that is my introduction.

So, uh, in real case, if we want to implement a form without using any library, if we want to use them, uh, definitely people are using for me, which provides in built features. But in my scenario, when whenever, uh, I'm implementing any form, I think first, if the library is required or not. Uh, if we have only 2 fields or 3 fields or maximum 5 fields, why don't we require external library? It it increases the burden on the bundles when final production build, uh, is happening on React or Angular. So, uh, save, uh, to increase the performance. Let's say, do not prefer library all the time. That is my, uh, approach for implementing the form. And if you want to implement the form efficiently, then inbuilt methods we can use. Uh, let's say, we can use, uh, onSubBuilderForm and the type, uh, whether it is a post or get method. And in the, uh, elements input elements, we can utilize the methods like on change detection with whenever people is typing. And when status is changing of the input, we can, uh, uh, define our function for validating that input. Or we can use regex for specific, uh, type of text validation if you want. Uh, for example, phone number format. If you want to implement, we can utilize, uh, regex pattern for implementing that format. So that is the approach from my end. How to, uh, utilize, uh, how to implement the form efficiently directly, uh, the account for that. And if you want to bind it with this state, then definitely we need to bind, uh, the on change method with some, uh, function, predefined sorry. On change is a predefined method, and we have to bind it with our custom function. So we have to use that, uh, useCallback method to to catch the function definition, to memorize the function definition using the, uh, useCallback method. We can pass their dependency, uh, in the area, and it will guess that memorize that, uh, values. So it will increase the performance. And in another way, uh, all the input on chain will be run with that methods, and we will use use all that method. And if we have a state bound with the input value, then the state also, uh, should be, uh, managed to re to minimize the rerendering of the component using usemammel, or we have to wrap our entire component with the mammel, uh, u3.mammo, and they will increase the performance of that component for specifically a form component. So there are lots of way using step management as well. We can do a lot of thing. Uh, this is only for real how to implement form efficiently.

So, uh, for unit testing, uh, in a stateful component, we can use real testing library where some, uh, inbuilt functions are provided for testing the components. We can even test the, uh, separate function of the component. And in in the list, we can write our test case, and we can access that function by importing the component. And we can provide our input For that purpose, uh, all the function which we are providing, uh, or which we are defining in the component should be independent or loosely coupled, not tightly coupled, uh, with the dependency. So we can provide external dependencies, or we can we can mimic the input for that function for testing purpose. And if we are defining the component for testing purpose, then we have to take care that component is also loosely coupled. And, uh, props are, uh, means if we are defining props, uh, for that component, then it should not be dependent with with each other. We have to manage it that we can test it in a unit testing, and it it should handle the single responsibility. Otherwise, it will be hectic to write these cases. In that case, if it is taking lots of props and multiple, uh, dependencies, then we have to, uh, find a complex way to test it. So we have to define a proper way for testing purpose.

But in React, if you want to build a reusable library, uh, of components, then definitely, let's say we have a component folder and where we are, uh, building the shared component or component where we'll be which will be used throughout the application and reused throughout the application. And those component will be inside a shared component folder. And, uh, we will manage we will develop the component. Like, it will take the as possible props. And based on the props, it will change the behavior instead of just, uh, implementing the static features and static behaviors, uh, based on the props. So it should behave based on the props, not, uh, directly, uh, just handling everything internally. So that is the main, uh, thing, how to implement the component, and, uh, we should take care of the performance as well for that component. Uh, that will be the first scenario, and it should be reusable and testable. So we should take care of some, uh, principles like solid principles and, uh, dry principles for do not repeat, uh, the code for reducing the detail redundancy of the code. And some other, uh, design principles where, uh, are also brought there, and we need to take care, like, keys, key, I s s, and, uh, Yagney is also there. So if any feature is not required, we should not implement. It should be implemented only when, uh, it is required in the product. So that is the design principles we need to take care. And the structures should be, like, uh, outside, uh, in the in the main, uh, what we can say, not in the nested format, but it should be on the, uh, highest level of the directory in SRC in project where we will, uh, build a folder for implementing all the shared code shared components. And all those, uh, codes will be implemented there. Component will be added there. Uh, one more thing is to export those components. So every time we have to import 1 component 1 component, we can include index dot ts5 in that folder, and we can input all the components and export as a module and where all we are importing as a library. So in in a single database, we can import it with a single path instead of importing every file, every component file, uh, uh, 1 by 1 in the life. Otherwise, in that file, it will show a bunch of imports for thousands of hundreds of components. So better to export it with this index file and just import in in curly basis.

So in traditional approach, we were, uh, implementing each and every, uh, CSS, uh, for, um, for the components of React or building the HTML UI. So in in this, Tailwind follows utility first approach means it provides inbuilt utility functions. So utility first approach is, uh, pre predefined. Right? You utilizing the predefined classes and minimizing the redevelopment of CSS. So, uh, while while using such libraries like Tailwind CSS or Bootstrap, we have, uh, pretty predefined prebuilt classes, CSS classes, which we can utilize it. And, uh, we can we do not need to build, uh, from scratch. We we do not need to write our CSS from scratch. Almost everything, like, 90% of, uh, CSS, uh, have been covered in that. And those libraries, like the Tailwind CSS is very minimized, recompiled, and minified, uh, library, which takes, uh, less time for loading, uh, while, uh, while loading the app in the browser and use the request. So, uh, this is the first approach. You can do the first approach for uh, the for using the Terrace on CSS. So, uh, we we have these 10 minute CSS first. It will be first for, uh, using the inbuilt classes for defining our, uh, UI pages using HTML and CSS.

So, um, in my project, I have used style component and tailwind CSS as well both. And let's say let's talk about tailwind CSS. If I'm writing any CSS in Tailwind, uh, using a pretty different class. So we can use mixing where we can create our class, which will be used later for extending the existing class as well. And, uh, whenever we are following the tailwind CSS, let's say they have already predefined classes for everything for, uh, let's say, height, width, and, uh, some card related to CSS or drop down related to CSS. They have already built it. So it it it provides better reusability and scalability. And we can use the in build classes for extending as per our requirement. So we can build a custom theme as well, predefined global themes for customizing the predefined classes. And those, uh, custom classes will be used every year in the app. So we can define it through, uh, common CSS file built, uh, on the top in the top of the src folder. And, uh, that is the way for implementing our CSS reusable CSS with Tell Me.

So, uh, in solid principle, this is, uh, the principle one of the solid principle said, open, close principle, which means, uh, the class would be open for extension and closed for modification. So in this, uh, goal, I can see that it is in there is 2 classes, rectangle and area calculator. So in rectangle, let's say we have 2 properties, width and height. And in area calculator, we have calculate method rectangle, which is modifying it. Okay? So in area calculator class, which is modifying it, so we should restrict this part. Like, it is a rectangle. Uh, area calculator is modifying rectangle plus, and principle says that that close principle, it says, uh, modification should not happen with the existing class. We can extend it. So we have to implement abstract class, and that abstract class will implement that method in another while extending extending in the another class. So we have to define the structure of, uh, rectangle in a way that it is abstract class, and that abstract class will have, uh, method like calculate, uh, height b to something. Right? And that abstract method will be implemented, uh, for the extension purpose in, uh, area calculator. So that is the, uh, way we can implement this open close principle.

So, uh, in this call, I can see that API is being called, and, uh, API just handling the response, and the failure case is not being handled. So we have to manage it, and we have to take care of success and failure, both. So we can add a catch method after then. So anytime if it is failing, then definitely, catch method will trigger some, uh, error. Uh, like, it it will show in Toast, like, uh, that something went wrong, and we can handle the error in that way. Or we can implement the error at the interceptor level. Let's say we have a we are using Axios library for HTTP request purpose, for GET request or post request or any HTTP request. Uh, and XEO has a request and response interceptor, uh, feature available, and we can implement it for, uh, intercepting the responses. So when response comes from the server, and we can say that we can check whether it is a success or a failure, or we can check the, uh, status code whether it is failure because of the authorization and or or, uh, token has expired. In that case, we we will show, uh, some specific error, like, you don't have authorization for this thing and our token has expired. And we we have to, uh, redirect the user on the login page. So he he will log in again and come to the page. Another status code will also can, yeah, can be implemented there in interceptor for, uh, response purpose. So every time we do not need to implement catch method for handling the responses until and unless there is a specific case. For all the common case, it should be handled in the, uh, HTTP interceptor. That is the best way. And we can even, uh, handle the request as well. So when our request goes from the application, then we can modify that request. For for example, adding the bearer token, uh, in every request, which is going after log in.

So in my application still now, I have worked with enterprise scale applications still now and and even small applications as well. But in in any case where there is a large application, then we can utilize the, uh, state management libraries existing state management libraries, which are proven for managing the states. Like, the toolkit is available for managing the state. MobX is also an option. And, uh, in in recent, uh, scenario, we can see, like, to start, recoil, and, uh, some other libraries also available. And we have to select based on our requirement. So most of the projects utilizing Redux and the Redux toolkit for, uh, recent enterprise grid applications, and MobX is also a second preference because they handles, uh, the state management internally, like, uh, handling the in mutation. So in the act as well, when we are, uh, operating on any existing state, it should be operated on a draft, not on the existing, uh, direct state. Uh, and we should operate on on draft, and draft will be updated on the main state. So we can even, uh, utilize, uh, Emer JS or immutable JS for that purpose for handling the mutations. So in background, it is not affecting the performance. So that is the case. And I have good knowledge on both the, uh, sorry, Redux Toolkit and MobX. And in one project, I have used, uh, Require, which was the large project for ops and steering with, uh, with the Fintech company. And required was also a successful state management tool at that time. And there are a lot of features and less learning code where in Redux or Redux Saga, there are a lot of learning code for any developer to understand all the features, all the scenario, how it works, and the data flow as well. So as simple the flow is, the developers can understand easily, and a simple bug cannot take more time for fixing it. Otherwise, in I have seen that in Redux, when any bug come, developers take more and more time for fixing it because of the, uh, debugging capability. They are providing their inbuilt tools. Still, it it takes a lot of time for, uh, debugging the application. So my approach always goes for a simple tool which use statement as well, better statement management, and provides a debugging tool when whenever we are getting any, uh, bug, whether it is in production or in development. But it should be open for debugging purpose, And we have to configure our application in that way that any kind of bug is coming. We have to fix it, and this way should be, uh, predefined for debugging. So I would prefer that kind of state management tool.

In, uh, my projects, uh, I have, uh, worked till now. All the projects we have, Node. Js and, uh, React. Js or Angular. Js. Okay? Uh, I have not worked with any other project having Python in background, uh, in the backend, so I cannot answer. But a few things I can mention is whether it is the Node. Js or Python, they are they we can implement a server side technology using any, uh, framework or any programming language, and the method will remain same by, uh, the predefined endpoints with Python or Node. Js, and those endpoint will be utilizing the application for following the API purpose. And server we have server we handle that, uh, big case in that way and give us the response on front end side to bind the to integrate the data in our React application. So that is the way we can utilize the API, and we can integrate the API, whether it is Python or whether it is Node. Js or dotnet.

So in a risk pool APIs, when we are building, we have to take care of some features like, encryption. We have to implement the encryption. In in our front end side, we can send the HTTP request through a compression method like gzip, and it will encrypt the, uh, request. And, uh, in the entry platform, we will receive it in the compressed form as well. So we we have to use a compressed middle wire there, express less comparison middleware. And, uh, we can, uh, use that part, uh, in the bill in building the API for securing the endpoints and data. We can implement the access RF, uh, cross site with this for Zari. Uh, and we can we can we can mention which URL will be whitelisted, and whitelisted URLs only will be able to follow our application. So we can secure our, uh, this tool APIs in that way. And another is the implementing, uh, using the helmet. We can one do that, uh, to the it provides a lot of features for, uh, implementing the security of our uh, APIs, whether it is in Node. Js or, uh, React application. Okay? So that is the one thing we can configure our server, uh, for rate limiting purpose. So number of, uh, number of calls happening on the server. So it it reaches the limit. Like, uh, for example, we have implemented rate limiting, like, 1,000,000 API calls. So it will, uh, handle those request only. If it reaches the limit, then server will stop handling those those requests because of the daily meeting. So if anyone is at at attacking with the multiple request, we can save our server to to be down. And one more thing we can secure our React application is we can deploy a login page on a specific server on the login page, not entire application. And once login is success with the API, then we can navigate on the original application. That is the one way in, uh, in my application I have done. So we can secure the front end application in that way because human you human cannot read that code directly, transparent JavaScript code, but it is machine and it's understandable. So that is the reason we have to, uh, secure our application code that, uh, machine cannot understand it. On the we can authorize the people after logging. So that is the security principles we can implement on React and the methods on securing the risk pool APIs as well.