Clean Code JavaScript - Comment écrire du code dont vous n'avez pas honte de montrer à vos collègues

Connaissez-vous cette sensation quand vous ouvrez un ancien code et que vous ne comprenez plus ce que vous vouliez dire ? Ou quand un collègue vous demande de l'aide avec son script, et que vous passez des heures à essayer de le déchiffrer ? Le dépôt Clean Code JavaScript est une collection de règles pratiques qui vous aideront à rendre votre code compréhensible, maintenable et professionnel.

Pourquoi le code propre est-il si important ?

Après plus de 15 ans de travail avec JavaScript, j'ai vu des centaines de projets. Et le problème principal de la plupart d'entre eux n'est pas la complexité algorithmique, mais l'illisibilité du code. Nous passons 10 fois plus de temps à lire du code qu'à en écrire. Clean Code JavaScript est une adaptation du célèbre livre de Robert Martin "Clean Code" pour le monde JavaScript.

Comme le dit l'auteur du dépôt, Ryan McDermott :

"Chaque morceau de code commence comme un brouillon brut, comme de l'argile humide prenant sa forme finale. Nous sculptons les imperfections lors de la relecture avec nos collègues."

5 principes clés du dépôt

1. Des noms de variables significatifs

La première étape du code propre est une bonne nomenclature. Ils doivent être :

• Prononçables
• Recherchables (pour les trouver via Ctrl+F)
• Ne nécessitant pas de traduction mentale

Mauvais :

const yyyymmdstr = moment().format('YYYY/MM/DD');

Bon :

const currentDate = moment().format('YYYY/MM/DD');

2. Les fonctions ne doivent faire qu'une seule chose

Cette erreur apparaît dans 90 % des projets. Une fonction n'est pas un roman, mais un court poème.

Mauvais :

function emailClients(clients) {
  clients.forEach(client => {
    const record = database.lookup(client);
    if (record.isActive()) email(client);
  });
}

Bon :

function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}

function isActiveClient(client) {
  const record = database.lookup(client);
  return record.isActive();
}

3. Éviter les effets secondaires

Une fonction ne doit rien modifier en dehors de son domaine de responsabilité. C'est particulièrement important lors du travail avec des tableaux et des objets.

Mauvais :

const addItemToCart = (cart, item) => {
  cart.push({ item, date: Date.now() });
};

Bon :

const addItemToCart = (cart, item) => {
  return [...cart, { item, date: Date.now() }];
};

4. SOLID pour JavaScript

Les principes SOLID ne fonctionnent pas seulement en Java et en C#. Voici à quoi ressemble l'Inversion de Dépendance en JS :

Mauvais :

class InventoryTracker {
  constructor(items) {
    this.items = items;
    this.requester = new InventoryRequester();
  }
}

Bon :

class InventoryTracker {
  constructor(items, requester) {
    this.items = items;
    this.requester = requester;
  }
}

5. Testabilité

Un code propre est un code testable. Chaque fonction doit avoir une seule responsabilité et un résultat prévisible.

Mauvais :

describe('MomentJS', () => {
  it('handles all cases', () => {
    // 20 строк теста разных сценариев
  });
});

Bon :

describe('MomentJS', () => {
  it('handles 30-day months', () => {
    // один четкий сценарий
  });
  
  it('handles leap year', () => {
    // другой сценарий
  });
});

Qui bénéficiera de ce dépôt ?

• Développeurs juniors : Vous comprendrez la différence entre un code qui fonctionne et un bon code
• Chefs d'équipe : Vous pouvez utiliser ces principes pour la revue de code
• Instructeurs : Vous disposerez d'excellents exemples pour les cours JavaScript
• Freelances : Les clients apprécient un code propre et maintenable

Mon expérience personnelle de mise en œuvre

Dans ma pratique, il y a eu un projet avec 50 fichiers de plus de 500 lignes de code chacun. Après la mise en œuvre des principes du Clean Code :

• Le temps d'ajout de nouvelles fonctionnalités a diminué de 40 %
• Le nombre de bugs en production a chuté de 3 fois
• Les nouveaux développeurs se sont intégrés 2 fois plus vite

Comment commencer à l'utiliser ?

1. Marquez le dépôt en favori
2. Choisissez 2 à 3 règles que vous violez le plus souvent
3. Commencez à les appliquer dans le nouveau code
4. Refactorisez progressivement les anciennes sections

Comme le dit l'auteur : "Ces règles ne sont pas des dogmes, mais un guide. Notre profession est jeune, et nous apprenons encore."

Liens :

• Dépôt Clean Code JavaScript
• Livre "Clean Code" de Robert Martin