Priyam Chhabra

Hi. My name is Priyam. I have a total of 5 plus years of experience. I have worked on technologies like React, Node, JavaScript, CSS, bundlers, such as Webpack. Apart from these, I also have experience with cloud. I've worked recently at a company that designs SaaS-based products in the construction industry. I worked on one of the products that helps companies gather feedback from customers before starting a construction project, and that feedback is sent through a data pipeline, which categorizes it into various sentiments, like positive, neutral, etc., using AI. My role was designing the public-facing Mac portal where users can give their feedback. Apart from that, I designed micro frontends using React, Webpack, and module federation plugins, which provided a generic micro frontend that can be used by any container application in our company if they want to offer a trial version of their products or customers have to pay for their products. I also worked on an async uploader, which allowed customers to upload files in the background without hampering the user experience. These are the key points about me.

So to leverage Webpack to improve the load time of a web application, there are several ways. So, one of the ways is dynamic bundling. So dynamic bundling ensures that you load the bundles you create, multiple bundles, and you load the bundles on demand whenever they are required. For example, if there's a shopping Amazon-like web application and there's a cart functionality, which is required after some time only. So in the initial bundle, we will not include that bundle, and we will load that bundle on demand. Apart from that, this basically reduces the critical rendering path and ensures that our first major edge, the major client-side or HTML file, is minimal. So, other ways to improve the load time include minification. So minification ensures that the original code is pretty formatted, etcetera, but the user doesn't want to load the formatted code. Minification compresses the code, and this improves the load time of the application. Apart from that, we can do code obfuscation, for example. So, code obfuscation can reduce variable names and function names. This will improve the load time of the web application. Apart from that, instead of creating a single bundle, we can create multiple chunks. This also improves the load time of the web application. And other ways is tree shaking, removing the dead code in the application. Apart from that, to improve the load time, there are several other ways like using compression engines that convert JavaScript files into zip files broadly, etcetera. And other ways is like, for example, Webpack can also help in doing static site generation. For example, in Next.js, Webpack bundlers can help to build static files, static sites, static web pages, which are basically cached. So, this also improves the load time of the web application. Also, Webpack can also help to improve the load time of the web application in these major ways.

So the various types of features we use for entertaining a large code base. For example, TypeScript provides types like enums, etcetera. So that enums ensure if developers, instead of using random strings, they require only particular types of fields or particular types of values only, which ensures a common standard for all developers. This is apart from that, TypeScript provides very good functionality, such as interfaces, and interfaces can also help improve code maintenance in large code bases. Apart from that, we can use generic types in TypeScript. And also, some of the other TypeScript features are creating your own object types and so on. So that helps when you want to map one data to another data, and you have particular types for that, which makes a common standard. These types of features basically make sure that code is maintained at compile time, which ensures a lot of standards and reduces a lot of bugs that can happen at runtime. These are one of the major features of TypeScript.

So to use Webpack with NPM scripts for the production and development environment is that in Webpack, we can have separate ENV files. For example, dev ENV, prod ENV, and we can have separate scripts for that. So separate ENV files, we can maintain for that. And for example, ENV would point to development and ENV would point to prod. And yeah, these things can help in NPM scripts.

So TypeScript and unit testing is first we would require various packages like Jest and React Testing Library. So Jest provides some utility methods from which we can assert whether something is equal to that or not. And apart from that, we can use React Testing Library. So React Testing Library helps to inspect, like, it creates a sort of a temporary version of a DOM, which does not run on the browser. But using that React testing library, you can assert if something is showing correctly on the screen or not, and you can use match them to various test cases. So this is yeah. So using TypeScript, we can assert where it were the data types, what are the data types which are occurring while, yes, while testing units using Jest and React testing library.

And explain. So the items are many items linked. 3. So the error which is occurring is as we had made the length as 3, so that the index 3 does not exist. The maximum index would be 2. So it would give a runtime error, like memory error. And yeah. So one of the ways you can increase the length to 4, and then you can access the item at index 3. Or as this would be the last element of that 4-size array. Instead of 3, you can lose items towards length minus 1 and make items towards length as 4.

So the issue is one of the issues, the bird type should not be a string, it should be an enum. That's one of the issues. And instead of if else, we can use switch statements for the bird types.

So one of the processes for ensuring that React components are reusable is ensuring that React components have a single responsibility only. This means that a component should only perform one task. If a component uses multiple embedded components, that task should be handled by separate components. And so, starting from the bottom up, there would be atoms. Atoms are components that cannot be composed of other components. There are some atoms. Then, there is a molecular structure, which are composed of multiple atoms. For example, a text is a single atom, and a card is a molecule. I ensured something like that. Like, molecules are composed of multiple atoms, and then there are organizations composed of molecules. This ensures that React components are reusable. If we want to make them reusable across multiple projects, this design shows that these items can be bundled as an NPM library, which can be used across multiple projects. This ensures that the items have a basic responsibility, which is generic for every project. Also, to improve documentability, we can use things like storybook, which tells us what all props this atom requires, and we can use that in storybooks. In one of our projects, we created a storybook-based library with these atoms, and the main project only had the molecules or the main components, which are composed of these atoms.

So progressive enhancement, one of the things we use is service worker, to improve progressive enhancement. Service worker acts like a proxy between our network layer and the cache, and we put some things in the cache and fetch them from the cache instead of fetching from the network layer. Service worker ensures progressive enhancement, which helps. This was one of the principles of progressive enhancement. Yeah. And also, we used IndexedDB for offline experiences. In IndexedDB, we can have a history of things and so on.

So to keep abreast of the best practices in front-end development, we do various courses and continuously upscale ourselves. So that is one way. Reading research papers and articles on what various companies are doing to improve the front-end UX experience of people is also one thing. Also, in our company, we have internal meetups where people show what they are doing new and so on. Also, connecting with like-minded people on platforms like LinkedIn can help keep abreast of best practices. Doing online research and exploring new features, including reverse engineering, also helps.