5 Core Principles of Good Front-End Code

Dan Gold

Written by Dan

Readability

The code should be easy to read and understand. This means using clear naming conventions, commenting where appropriate as well as formatting your outputs so that they’re easier for you or others who may come across them in the future!

You can use something like Prettier to help with your code formatting.

Maintainability

Code should be easy to maintain and modify. You, or someone else, might see the code you write at a later time and you want to make sure it’s written in a way that you can continue to add new features.

Sometimes a product manager or someone else requests new features to be written. You want to make sure that your code is set up to quickly iterate on those new features to help move the project along.

Efficiency and performance

You want to write your code so that it loads fast on users browsers and devices. There are quick things you can do, like optimize images and other things that you can do, like improve latency.

You can make sure your content is gzipped and served from a CDN.

Computers are fast these days, but it’s still possible to slow down the user experience by using large JS libraries inefficiently. Make sure you understand your code and do benchmark testing to ensure the fastest code possible.

Reusability

You want to write your code in a way that you can reuse aspects of it later. This type of code is more commonly known as components. Components are commonly known in React and other JS libraries.

However, you can use “components” in any front-end capacity to reuse different pieces of code. The core concept is the same, where you want to limit the amount of code you need to write from scratch.

Scalability

Code should be able to scale easily as project requirements change. Scalability can have two meaning.

  • Your code can scale in terms of its features as the project scales.
  • Your code should handle 1 user or 1 million users.

Don’t make decisions that limit your ability to scale the project.

This can mean relying on library that doesn’t have a lot of features. It can also mean using hosting plans that have bandwidth limits.

Last updated

November 10th, 2022