Suraj Patil

Hello. Uh, my name is Suresh Patel. Uh, I've been working as a front end engineer since last, uh, 6 years. My total experience in, uh, professional as a professional developer is, like, 8 years. Um, so in last 6 years, I mostly worked with, uh, the front end development, uh, specifically, uh, with the React JS. I've also used TypeScript, uh, in my last two projects. I have experience developing the applications, uh, from the scratch. Uh, right now, I'm working with a start up company, FunnelStory. So I have a really good experience, uh, developing the application using React and TypeScript. I have also experience, um, like, communicating with the stakeholders, gathering the requirement, uh, building the complex, uh, your applications. Yes. So I have a really good experience, uh, in React. I have a good experience, uh, good, um, basic knowledge of the JavaScript, like the fundamentals. I have experience working with the, um, the versioning tools like Git, um, the project plannings, uh, like the Jira and all those steps. Uh, so, yeah, that's all from my side.

Uh, one of the, uh, instance that I can, uh, give as example where I've used the Webpack configuration. In one of the application, uh, we are supposed to use the micro front end. So in that case, the Webpack configuration was modified to accommodate the bundling and loading of the, uh, micro front end. So, yeah, in that case, uh, the web configuration was modified.

There are, uh, different categories, uh, with which, uh, we can ensure, uh, if the React components are accessible or not. So we mainly have, uh, like, the current criteria as, um, like, uh, how the users can the screen readers can read the screenings. Uh, for example, image of the old text and all those things. So that defines one thing. We can use the, uh, different tools that gives us, uh, the impression. Like, okay, which color combinations, uh, can be used so that the contents are easily visible? Another, uh, accessible criteria that we can check is for how we navigate between the different components. For example, how easy accessible different components, like a drop down when we click on the tab or, um, or without using the mouse, with the with the use of keys, how will we can interact with the, uh, the different, uh, rare components? So, yeah, using these guidelines, we can show you that, okay, components. I'd say, uh, we have these ARIA attributes, um, that can be applied to, uh, different HTML elements. Uh, Yeah. So we can use off those things, and we can follow the guidelines provided in the official docs. And, uh, yeah, we can incorporate those to, uh, make the rare components more accessible.

So the TypeScript really helps us to ensure, uh, to ensure fix the bugs at the time of development. It provides more strictness, uh, to our application in terms of how we define our objects. It provides us a way how we can defend the interfaces. Yeah. So this gives us a more robust application, uh, where our different team members can collaborate, and, uh, it actually makes us easy to find the bugs upfront, like, if there are missing, uh, properties or not. So, yeah, that's about the TypeScript. Uh, in terms of unit testing, uh, it helps us, uh, like, to find the bugs. So whenever we make changes, uh, the unit test ensures us, okay, all the different characters are are being met or not even if we make the changes. So that helps us, uh, to make our application more robust. So both TypeScript and unit test helps us to detect the bugs upfront and, uh, yeah, uh, to work on those things even before we push our codes to the production.

So in React application, um, there is there there is a React, uh, a lazy, uh, approach we can use. So that helps us, um, in order to split the code, uh, in the webpack. Also, we can configure, uh, those things so that instead of putting all the code in 1 JS files, the, uh, the different files can be, uh, files can be, uh, like, bundled at this tone, let's say, route. So if we have the single page application, so far, let's say, each route, we can have the different bundling And React lazy, uh, approach with the React suspense makes us, um, like, configure, uh, the application in such a way that the course split happens when we build our application.

So the granularity of React components, uh, depends on the complexity of the business requirement of the, uh, feature requirement. So, uh, it also, um, uh, depends upon, like, how often we need to reuse, uh, those components. So based on that, we can define how granular components can be made. For example, if we have, uh, like, the core components that is being reused in our food application, for example, buttons, uh, drop downs, let's say cards, uh, sidebar nav sidebar nav items. So all those things can be, uh, upfront, uh, defining a different components and can be reused, uh, and can be used to all the application. That's the one thing. Another one is, uh, the the components which are very business specific, but those can still be reused at various. So we can have those components also defined, but with the behavior. So that's the diff second level of granularity. And third one is, uh, we can have a higher level feature, uh, that can be reused at multiple places or maybe at one places. But if the code is, uh, growing and yeah, in that case, it also becomes, uh, important to break down the React components and split it into the different components.

So in this component, do something, uh, is defined inside, uh, the function components. So every time this component renders, uh, the function do something, gets initialized every time. And if we pass it as a prop to, let's say, child component and the child component, uh, uses that as a dependency in use of it, So this causes, like, unnecessary re renders, uh, in the child component or even if we use this do something method, uh, in the parent component without wrapping around the use callback. So this dependency inside the useEffect can cause the multiple view renders. So, yeah, it becomes, uh, important to analyze the code and, uh, if required, wrap this method inside the use callback and then optimize the reentals.

So in the given snippet, uh, the gate part is defined as function, and in side that, uh, we are checking the bird type. So instead instead of that, uh, we can directly define a bird and And the the bird category itself, uh, doesn't seems to be, uh, capturing the basic interface methods. For example, we have penguin that may not implement the fly method. So, basically, that should, uh, that should not be the mandatory part of the, uh, base interface. So the base interface, uh, should not include this file methods, but, um, yeah, the delay x should be the the only method that it should exist. The file should be, uh, the very specific to that category type of word.

Uh, so it's, uh, important to identify the use cases of the React component that can be reused across multiple projects because, uh, when we extract that React component, it should not have, uh, the type dependency, uh, to the parent application. And we need to make sure that if we pass the generic properties to it, it should adhere to, uh, the core interfaces and work accordingly. So it depends, uh, like, how that component can be reused, uh, based upon the business requirement and mostly, like, the reusability thing. So even if it is a business case, the most important thing that we need to, uh, find out is, uh, how, uh, how tightly it is dependent on the parent application. So once we find this loose coupling loose coupling between, uh, the react components, so it becomes easy to, uh, make it as a reusable component, and that can be reused across the projects. Also, it becomes important, uh, to not to use, uh, any third party, uh, libraries inside it. And, uh, it it just have only the core APIs that is used as a peer dependency, uh, from the React. So, yeah, the business dependency, uh, the package dependency are important things, uh, to find out which components can be made, uh, made as a reusable, um, and that can be used, like, across multiple projects.

So in TDD approach, it's important to list down the acceptance criteria, like a bird view, and then to drill down, uh, the further. For example, if you are developing any, uh, feature. So in that case, uh, it's important, uh, to, uh, it's important to, uh, find out those, uh, like, the acceptance criteria and to list down those. And once we start writing the test cases, we can make it as a, uh, release.

So one of the, uh, principles that is, uh, being applied by me, uh, is to make, uh, React core less dependent on the parent component and to have to have the components, uh, as less dependent as possible. So this way, it becomes a bit easy to manage the code and even to, uh, kind of, uh, update those codes according to the new features and announcements. Uh, most importantly, uh, in React application, using the custom hooks and, uh, extracting the business logic to different components and having UI and the different components, it makes it bit easier to manage the code.