Shreshtha Srivastava

I have a total of 9 years of experience in IT, and in front end is around 7 years. I've been working with React, JavaScript, HTML, CSS, and Redux. Currently, I'm working with IBM for the last 3 years. Before that, I was working with Gofoge as a front end developer. And before that, I was working with Tech Mahindra as a core fusion developer. So, in front end development, I have around 7 years of experience, of which around 5 years is in React and Redux. The current project I'm working on is an insurance domain project. We're creating a portal for the agents responsible for creating policies for their customers. So we're creating the portal where they can keep track of all the policies they have created for their clients. This is built using HTML, CSS, JavaScript, React, and Redux. We're using Redux for state management of the application. My roles and responsibilities are to get the requirements. We're following the agile methodology. There's a requirement gathering session in which we directly interact with the clients to get the requirements. If there are any doubts, we get the acceptance criteria for the user stories. If there are any doubts, we can verify that in these meetings. Once the user stories are finalized, we work for 2 weeks on that particular requirement. The designs are provided to us through Figma. We're responsible for reading the Figma and getting the designs, and creating the UI as per those. We use Jira to keep track of certain tickets and Confluence to get any API specifications or those kind of requirements. All these requirements are kept in Confluence.

So strategies to ensure the stability of front-end features in SaaS applications with high traffic are like load balancing. We can have two different servers for load balancing. So, if one server is going down, we can have a backup kind of setup or the user is redirected to the other load-balancing server so that the application is never down and the user is always fetched with some data. Other than that, as a front-end developer, we should be enabling caching mechanisms where if the application is strong, we can fetch them some fallback or default UI.

So in a React application, state management, if it's a complex React application, for state management, we can always use Redux. So, we have certain other methodologies to maintain the application state, like context APIs. But if it is a complex application, we should be using Redux. So with Redux, we get the application level store. We get certain functions, we can create actions. We can create a reducer function, and we can dispatch actions on certain actions or rendering of the component. And once the action is dispatched, the reducer function is called, and then we can update the state. And to access the state in an application, we can use the connect method that we have. So we can connect our component with the Redux connect method and fetch the values from the Redux store into our component. The connect method uses two arguments, map state to props and map dispatch to props. Map state to props is like a map. There, we define what props we want our component to have. Whatever props we are defining in map state to props, those props will be available in our component, and we can map them with the value that we want from the Redux store. The other one is the map dispatch to props, wherein we can define the dispatch functions that we are needing to dispatch certain actions. And yeah. So on click, let's say, I have a button and I click on that, I need to make an API call. I'll make the API call. I'll get the data. I'll update the Redux store and yeah, and connect the Redux and get the data. With the context API, we can also manage this application level state. But for complex applications, I would prefer Redux.

For React applications to be responsive and adaptive, we can use certain libraries like React Bootstrap to make the application responsive. If it's about styling, we can use Bootstrap or media queries to make it responsive. To ensure the application remains responsive and updates without compromising performance, we can use performance enhancement techniques, such as not rerendering the application unnecessarily. We can use memo, callback hooks, and pure components as much as required. Additionally, using keys for list values will make it more responsive. Avoiding unnecessary re-renders with these techniques will make it performant.

Technique to consolidate. Okay. So for validation logic, let's say I'm creating a form in a React application. I have multiple elements in the form, like text boxes, check text boxes, and radio buttons. I can apply validations on the front end as well as whatever value I'm sending to the back end. There are also validations that can be applied. So, like, on the front end side, if I don't, there are certain things that I can do. Let's say if I have a simple text box and I'm expecting some numbers inside, I can tell if it is a number input box. If it is, I can apply some logic like on change of the input box. I can apply some logic that if the entered value is not a number, I can restrict the user from entering non-numerical values and show an error below the text box that this is not a valid value for this particular field. Apart from that, I can also apply some regex to match what I'm entering and what is expected in that particular box. This is one kind of logic. If I'm having some checkboxes, I can apply whether they are mandatory or not. Or if they are not checked, I can prevent the form from submitting on button click. I can call a function and apply some logic that validates the input values whether they are required or not and what values I'm entering. And then only if everything passes, I can submit the form. Otherwise, I can show some error to the user. On the back end side also, I think whatever value we are receiving in the payload, we can check whether they match the expected keys and values. If not, then we can throw some error in the API response.

So one thing that I can think of is frequent meetings. So whenever we are working on any new requirement, we should first discuss it with the whole team, the front end and the back end. Whatever we are finalizing, whether that is achievable on both the sides or not. And then documenting all the requirements from the front end and the back end side. And then keeping a log or keeping a record of the requirements so that anyone can refer to them anytime. The most important thing is the meetings, since most of the people are now following the agile methodologies, so that in a way contributes to this very much. So having agile methodology is one thing. We are in a requirement gathering session. Both the teams are there, and the requirement can be clarified then and there. The first thing, if during development, anything comes up, there is a scrum call, and we can always clear our doubts there. And then whatever data the back end needs, the format in which I'll be receiving the response from the back end should be finalized, keeping things clear between both the front end and the back end. So they can discuss and then finalize the things as whatever is convenient for both of them. And having a requirement manager or a technical architect would help, being the bridge between the two.

Instead of if, and else if we can use the set statements. That would be more performant in this case, I think. So based on the data type, we can apply different switch conditions and yeah. And call whatever function is required for that particular type.

So to update the state, we are directly accessing the state inside the test inside the set state method. So, it will not update the state instantly. So what we can do is inside of this dot set state, instead of passing the object, we can pass in a callback function and then update the state.

So to handle error tracking and reporting in React applications, we can create a global function that accesses a React error boundary, and display any fallback UI if any error is occurring and log that value in a globally created function. So if any error, we can log it there. Or on application level, there is one component lifecycle method that is there to catch any error in a component and log it. Apart from that, error tracking and logging. One thing we can do is create a function at the root level and use memoization techniques to memoize whatever error we are getting and log it in a file or something.