Few tips from 1 year of my software development experience | by Gaurav Sharma | Apr, 2022

Primarily, I work as a software developer in a product company where we deliver high-quality software. To deliver good software you must always have your code clean, easily readable, and structured well so that we the developers can implement any new feature easily without getting lost in the bad structure. It also helps a new hire to get started quickly with the team.

In my one year of software development career, I learned many things regarding refactoring and code structuring for enterprise-level products. Today, I’m going to share all that advice and practices with you, So let’s get started.

This article will be focusing on JavaScript and React primarily.

Suppose you are trying to set up a react js project which is going to scale in the future there are going to be many developers that are going to work simultaneously on that project with you then npx create-react-app might not be the best way to start for you however, you can start with a react project template that is made specifically for starting with a new enterprise-level project. There are n number of project templates that are available on GitHub for this purpose

Here I’m attaching some templates so that you can get a hang of it.

React

Angular

Managing imports is an important feature of an application

1. First of all, remove all the unnecessary imports from your package-lock.json
2. You don’t need to import the whole package for just a single dependency. import ArrowForwardIosIcon from “@mui/icons-material/ArrowForwardIos
import ArrowBackIosIcon from “@mui/icons-material/ArrowBackIos
   instead of
   import {ArrowForwardIosIcon ,ArrowBackIosIcon} from “@mui”
   because when this component loads on screen then the system has to traverse the whole mui directory to find these two icons. Instead of increasing the load on the system we directly give the path to the specified folder.
3. Use React.useEffect and React.useState and any other hook like this because it helps us to reduce imports because we only import React and not hooks.
4. Sort all your imports in a particular order which helps any other developer to check for a particular dependency. We can automate this thing using ESLint instead of doing it manually. Here is a good blog dedicated to this topic
   https://dev.to/otamnitram/sorting-your-imports-correctly-in-react-213m

Use prettier as much as possible because formatted code is always better to debug and review. You can even define your own set of styles in prettier. See how to make your configuration file in the below article.
https://prettier.io/docs/en/configuration.html

Here we can see the src folder is subdivided into many parts let’s see them one by one

assets:

This folder contains all the media assets, such as images, videos, JSON files, and all the other files that are available throughout the project.

components:

This folder contains all the components that have an indirect access/subscription to the state of the app. They are used only to display information passed through props and cannot trigger any change to the state directly. These components can trigger state change indirectly and for that, we pass the function that triggers the state changes as a prop from the container and calls the function inside the Presentational Component.

containers:

This folder contains the components which have a direct subscription to the state of the app, likely a store. These components have access to the values in the state and can trigger changes to the state. These components are generally the parent components of stateless/presentational components. This folder contains subfolders that also contain actions, styles, and other things relating to the particular container.

routes:

The routes folder contains all the files regarding the react-router and will help us to segregate the routing functionality from others.

service:

The service folder contains all the API-related files which will be useful for defining all the API calls functions with Axios and this API can be called from anywhere through the app.

store:

We have kept the redux store in a different folder because this store is available throughout the app and it’s always a good idea to keep your store away from the other things so that the functionalities don’t get messed up.

tests:

The test folder contains the files related to the testing purposes of the app.

All the other folders may or may not be present depending on your case. The whole purpose of having folders is to divide the directories on the basis of functionality so the code doesn’t get messed up.

1. Use Arrow Functions :

If we use arrow functions curly braces, parenthesis, function, and return keywords become optional. Most importantly, our code becomes more understandable and clearer.

2. Template Literals :

We can use template literals for string operations instead of using concatenation, inserting a value in a string, and many many more operations. Their usage can make our code much more readable and clean.

3. Spread operator :

This operator is really useful when we need to put an array or object into a new array or object or to combine multiple parameters in the array.

4. Async/Await instead of Callbacks :

Promises and Async/Await are there to handle asynchronous functions, and they are much easier to use and make your code easily understandable to others.

5. JavaScript shorthands for conditionals :

JavaScript provides us with many shorthands for checking conditional values ex.

1. null = false
2. undefined = false
3. “”(empty string) = false

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = "new";
}

shorthand for this is

const variable2 = variable1  || 'new';

CSS related tips

Always reset your default CSS :

Our browsers have default CSS that will be applied to all HTML elements which leads to inconsistencies in web applications to remove them we have to create a CSS file and we have to override all the default styling. Here is a resource that will help you save time.

Rem is always better than px values :

By sizing everything in rem will help you a lot in making your design responsive. It will give you the power to scale everything just by changing the root element font size. Rem is easy to debug and even better than em because it takes root font size. For converting values from px to rem just divide the pixel values by 16 and you’ll have your rem value.

CSS preprocessors :

CSS preprocessors make it easy to automate repetitive tasks, reduce the number of errors and code bloat, create reusable code snippets, and ensure backward compatibility.
ex. SASS

Use Flex and Grids :

Always learn to position elements using flex and grids because they are better than any other layout techniques and they’ll always save your time in positioning elements.

No inline styling :

We should always keep our styles separate because

1. It’s easier to debug style.
2. It’s easier to maintain styles in a separate file.
3. Css files will be cached in your browser that’s is eventually lessen the load time and will make the user experience better.

Software development or programming, in general, isn’t only about writing code it is more about writing clean code that both humans and computers understand.

Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler

Gaurav sharma is an avid reader and a passionate traveller. He is trying to live a more meaningful and purposeful life by spreading his knowledge and his life experiences! Follow him on this new journey of balancing digital and physical life. He is living in Uttarakhand, India. He is on Instagram at @golf._.sierra