A few tips from 1 year of experience in software development | by Gaurav Sharma | April 2022

picture by Ian Schneider on Unsplash

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

During my year of software development career, I learned a lot about refactoring and structuring code for enterprise products. Today I’m going to share all of these tips and practices with you, so let’s get started.

This article will mainly focus on JavaScript and React.

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

Here I am attaching some templates for you to get used to.

React

Angular

Import management is an important feature of an application

  1. First, remove all unnecessary imports from your package-lock.json
  2. You don’t need to import the whole package for 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 the screen, the system must browse the entire 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. Utilize React.useEffect and React.useState and any other hooks like this as it helps us reduce imports as we are only importing React and not hooks.
  4. Sort all your imports in a particular order, which helps any other developer to find a particular dependency. We can automate this thing using ESLint instead of doing it manually. Here is a good blog dedicated to this subject
    https://dev.to/otamnitram/sorting-your-imports-correctly-in-react-213m

Use prettier as much as possible because it’s always best to debug and review formatted code. You can even define your own set of prettier styles. Find out how to create your configuration file in the article below.
https://prettier.io/docs/en/configuration.html

Here we can see that the src folder is divided into several parts, let’s see them one by one

assets:

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

Components:

This folder contains all components that have indirect access/subscription to application state. They are only used to display the information transmitted via the accessories and cannot directly trigger a change of state. These components can trigger a state change indirectly and for that we pass the function that triggers the state changes as sustain from the container and calls the function inside the presentation component.

containers:

This folder contains components that have a direct subscription to the application state, probably a store. These components have access to state values ​​and can trigger state changes. These components are usually the parent components of stateless/presentational components. This folder contains subfolders that also contain actions, styles, and other items related to the particular container.

Container folder structure

routes:

The routes folder contains all the files concerning the react router and will help us separate routing functionality from others.

a service:

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

shop:

We kept the redux store in a different folder as this store is available throughout the app and it’s always a good idea to keep your store separate from other things so functionality isn’t messed up.

tests:

The test folder contains files related to the application’s test purposes.

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

1. Use the arrow functions:

If we use arrow functions, braces, parentheses, function and return keywords become optional. More importantly, our code becomes more understandable and clear.

2. Literal models:

We can use template literals for string operations instead of using concatenation, insert value into string and many other operations. Using them can make our code much more readable and clean.

3. Broadcast Operator:

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

4. Async/Await instead of Callbacks:

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

5. JavaScript shortcuts for conditionals:

JavaScript provides us with many shortcuts to check conditional values, for example.

  1. null = false
  2. undefined = false
  3. “”(empty string) = false
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = "new";
}

shortcut for this is

const variable2 = variable1  || 'new';

CSS tips

Always reset your default CSS:

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

Rem is always better than px values:

By sizing while rem will help you a lot to make your design responsive. This will give you the power to scale everything just by changing the font size of the root element. Rem is easy to debug and even better than em because it takes the size of the root font. To convert px values ​​to rem just divide the pixel values ​​by 16 and you will have your rem value.

CSS preprocessors:

CSS preprocessors help automate repetitive tasks, reduce errors and code bloat, create reusable code snippets, and ensure backwards compatibility.
ex. TOUPET

Using Flex and Grids:

Always learn how to position elements using flex and grids as they are better than all other layout techniques and they will always save you time in positioning elements.

No inline style:

We should always keep our styles separate because

  1. It is easier to debug the style.
  2. It’s easier to keep the styles in a separate file.
  3. CSS files will be cached in your browser, which will ultimately reduce loading time and improve user experience.

Software development or programming in general is not just about writing code, it is more about writing clean code that 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 an avid traveler. He is trying to live a more meaningful and meaningful life by spreading his knowledge and life experiences! Follow him on this new journey of balancing digital and physical life. He lives in Uttarakhand, India. He’s on Instagram at @golf._.sierra

Comments are closed.