Priyam Chhabra

Hi. My name is Priyam. So I have total 5 plus years of experience. So I have worked on technologies like React, Node, JavaScript, CSS, bundlers, like Webpack. And apart from them, uh, that I have also have an experience on cloud. So I've worked recently, I've worked on a company which this, uh, design SaaS based products in the construction industry. So I worked on one of the product which helps companies gather feedback from the customers before starting a construction project, and that feedback is sent through a data pipeline, which categorizes into various sentiments, like positive, neutral, etcetera, using AI. And so my role was designing the public based Mac portal where users can give their feedback. Apart from that, I designed micro front ends using React, Webpack, module federation plugins, and so on, using which that was a generic micro fronted, which can be used by any container application in our company if they want to hire some if you want to give customers trial version of the products or they want customers to pay for their products, so it was it provided a generic functionality. Apart from that, I worked on an async uploader, which allowed customers to upload the files in the background way without hampering the user experience. So these are this is a brief introduction about me.

So to leverage Webpack to improve the load time of a web web application, there are several ways. So so one of the ways, dynamic bundling. So dynamic bundling ensures that, uh, you load the you create bundles, multiple bundles, and you load the bundles on demand whenever they are required. For example, if there is 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, so this basically reduces the critical rendering path and ensures that the our first major edge the major client side or HTML file is minimal. So other ways, like, to improve the load time, there are various ways like minification. So minification, what it ensures is, like so the code original code is pretty formatted, etcetera, but the user doesn't user wants the load time to be faster. So that minification compresses the code, and so that improves the load time of the application. Apart from that, we can do code of obfuscation, for example. So that basically, for example, you have made variable names as quite long function names. So code obfuscation can reduce the variable name and etcetera. So this will improve the load time of web application. Apart from that, instead of creating a single bundle, we can create multiple chunks. So that also improves the load time of the web application. And other ways is like, uh, 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 the JavaScript files into zip files brought like, 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 build static files, static sites, static web pages, which are basically cached. So that also improves the load time of the web application. Also, Webpack can also help to like, uh, so Webpack and also so, yeah, these are the major ways to improve the load time of the web application.

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

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

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 whatever whether something is equal to that or not. And apart from that, we we can use React Testing Library. So React Testing Library, what it does is, so React testing library helps to ins, uh, 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, uh, yeah, so using TypeScript, we can as we are using TypeScript, we can assert where it were the data types, what are the data types which are occurring while, yeah, while testing unit using Jest and React testing library.

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

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

So one of the process for ensuring that React components are reusable, are ensuring that React components have a single responsibility only. So single responsibility means that it performs only a single responsibility. It's responsible for only one thing. And if a component is using if has multiple embedded components, that thing should not be done instead. Separate components should be ensured for that. And so and if a component so these components so starting from the bottom point, there would be atoms. Atoms are components which cannot be which aren't composed of other components, which there are some atoms. And then there is a molecules like structure which are composed of multiple atoms. So, for example, a text is a single atom. So and text is a single atom, and card is a sorry. Text is a single item and the card is a molecule. So I ensured something like that. Like, molecules are composed of multiple atoms and then so on. And then there are molecules and atoms. So these ensures that the react components are reusable. If we want to make them reusable across multiple projects, then this in design shows that these items can be bundled as an NPM library, which can be used across multiple projects. This thing ensures that, and these items have just a basic responsibility, which is generic for every project and so on. So and also to we can to improve the documentability, we can use things like storybook, which tells us what all props this atom requires and so on, and that we can use in storybooks. So in our one of the project, we created a storybook based library with these atoms, and the main project only had the molecules or the main main components, which are composed of these atoms here.

So progressive enhancement, like, uh, one of the things which we use was service worker and to improve the progressive enhancement. So service worker is acts like a proxy between our network layer and the cache, and we put some things in the cache and fetched from the cache instead of fetching from the network layer. So service worker ensured that progressive enhancement. It helps. So that was one of the principle of progressive enhancement. Yeah. And, uh, also, we can we used IndexedDB for offline experiences. So in IndexedDB, we can have a history of things and so on.

So to keep abreast of the best practices in front end, uh, so, basically, we do various courses and continuously upscale ourselves. So that is one of the way. So reading research papers and articles of what various companies are doing to improve the front end of the US UX experience of people. So that's one thing. Also, in our companies, we have local meetups. Sorry. Local internal meetups, and people show what they are doing new and so on. Also, connecting with like minded people on platforms like LinkedIn, etcetera, can help to keep abreast of best practices. Also, doing a sort of playing online with new websites and exploring new features and doing a reverse engineering sort of way also help.