独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

How To Build Scalable Code Style in a JavaScript Codebase

Have you ever needed to develop in a messy codebase? Have you ever switched projects and felt lost because of the different standards?

Everyone has probably been through one of those scenarios. We have been too, but we have found ways to improve code style consistency across the company.

These are the main challenges that led to an inconsistent code base that we had to deal with:

First, let me start with a story…

(I was part of that team, it was an amazing experience! I’ll tell it in another post someday)

One year after the release, we now have about 10 PWAs. All of them using the same stack: React + Redux and reusing code between projects.

We already had a glimpse of how bad things could get on our legacy website if things weren’t kept in check, and we definitely didn’t want our shiny new project to go the same route.

As everybody knows, JavaScript is an amazing programming language with thousands of libraries and different projects around the world. However, JS world is not really perfect! But if I had to summarise the main point of contention:

We have so much “freedom” with JS, which is amazing because we can create a lot of things. However, it’s dangerous too! Just imagine many developers being able to do whatever they want in a single project without any kind of standard /consistency.

It can turn into a mess as it was our old project. Messy code is difficult to read, test and maintain. This makes the project more “buggy” and harder for the new developers to onboard.

As a developer, I would prefer not to give that kind of “freedom” as we can get a bit too much creative!

So... How did we avoid making the same mistakes of the old project in the new ones? How did we prevent messy code?

We set boundaries to our own “freedom”! We put constraints on the project in order to make the code clean and consistent. It helps developers to be creative in solutions for the problems not for code style.

How did we set boundaries?

First of all, we enforced at least one code-reviewer in each pull-request! Unfortunately, this is not automated because it depends on humans, so it can’t scale as well and some errors and inconsistencies will pass!

For the task of automating we used code linters to check the code style and best practices. Thus, we can ensure that all JS files in a project will be consistent.

This leads to improved readability and maintainability of the code. It also helps to find syntax errors and have fewer bugs. Making this process part of CI is key to ensure that standards are kept during the entire development cycle.

Now you may think:

We had to scale this solution to several projects and repositories and this can become a growing pain. As companies grow, so does the number of projects in JS, including back-end in NodeJS.

So, how to maintain the same code style and code quality for the entire codebase?

As I told before, we have 10 PWAs and an internal components' library too. On top of that, we have several micro-services in NodeJS. As we can see in the image below:

Thus, we truly understand the pain to try to maintain the same code style and code quality in the entire codebase.

Still, you might think that is not a huge pain because we can just copy and paste the eslint config and rules in ALL our projects.

It’s a solution, but obviously, it’s not the best one!

Every new config or new rule you want to put, you should go through all the projects replicating the same thing.

The real danger here is that you may forget to apply some change in one and when you see it, we’re not following the same code style again => inconsistent codebase 😑

For that, the best way to fix it is using a cool feature of Eslint called Shareable Configs.

All the eslint configurations of a project are in a file named .eslintrc.This file is an important part of your project and sometimes you may want to share it with other projects or people.

All you need to do is add it as a dev-dependency in your project and extend it in the eslint resource file.

Feel free to use our packages, and we’re also open to contributions. Everything is documented. If you want to create your own, you may also use as a reference.

At QuintoAndar, we’re still working on those packages and the usage of them. But the results are visible, with this tool you can maintain the same code quality and application quality because we could use rules that help to find bugs and improve performance.

For example, one simple rule that helps us to avoid unnecessary loss of performance, forcing not to use arrow functions or bind inside the render of React components, like this (line 8):

The code above would not pass in our eslint and, consequently, break the build (CI) forcing the developer to fix it.

The example above is a rule that already exists on the package provided by Airbnb. In case you feel the need, like we did, to create rules for your specific scenarios you can create custom rules.

It’s really easy and simple to create a new rule.

Rules that are applicable to every project of every company, for example:

Rules that are applicable only for QuintoAndar, for example:

A rule to deprecate a file in your project is the simplest rule that you could make. You just need to assert the import like this:

As you can see, it's really easy to customize lint rules to comply with new necessities of your team or company maintaining consistency and code quality across the codebase.

So, the final solution for consistent code quality across the company was:

Still, these steps won't solve the whole problem, because it now means that every new rule needs to be applied to all files in all repositories at the same time.

It doesn't scale and it's dangerous because we can break the apps. So, we need to figure how to apply the rule continually using a progressive way to apply them.

I've already broken some apps trying to enforce a new rule everywhere in one shot. However, I found a better approach. Do you want to learn about that?

See the next article that explains what and how we to use Progressive Lint and why you must start doing in this way.

Tks for reading! I’m always open to receive feedback, recommendations or questions, feel free to contact me!!

Add a comment

What is your view?

Send

Related posts:

How to tell if you are defending the truth or are just obsessed with a false idea

We often find ourselves holding a different position from the people around us. In such situations, we often need to process the situation to figure out what is the correct thing to do. Usually…

Ensemble Learning and Random forest

Ensemble learning is the process by which multiple models, such as classifiers or experts, are strategically generated and combined to solve a particular computational intelligence problem. Ensemble…

Working in Banking While the Industry Burns

You must have been hiding under a rock if you hadn’t heard about the problems at Silicon Valley Bank, Signature Bank, First Republic, and Credit Suisse. Yes, it’s been a strange few weeks. It was the…