🌐 AIæœçŽą & 代理 䞻饔
11 octobre 2020

Ninja code

Apprendre sans réfléchir est vain. Réfléchir sans apprendre est dangereux.

Confucius (Entretiens)

Les programmeurs ninjas du passĂ© ont utilisĂ© ces astuces pour aiguiser l’esprit des mainteneurs de code.

Les gourous de la révision de code les recherchent dans les tùches de test.

Les développeurs novices les utilisent parfois encore mieux que les programmeurs ninjas.

Lisez-les attentivement et dĂ©couvrez qui vous ĂȘtes: un ninja, un novice ou peut-ĂȘtre un critique de code ?

Ironie detectée

Beaucoup essaient de suivre les chemins des ninjas. Peu réussissent.

La concision est l’ñme de l’esprit

Faites le code aussi court que possible. Montrez Ă  quel point vous ĂȘtes intelligent.

Laissez les fonctionnalités du langage subtiles vous guider.

Par exemple, jetez un oeil à cet opérateur ternaire '?' :

// tiré d'une bibliothÚque javascript bien connue
i = i ? i < 0 ? Math.max(0, len + i) : i : 0;

Cool, non ? Si vous écrivez comme ça, le développeur qui arrive à cette ligne et essaie de comprendre quelle est la valeur de i va passer un bon moment. Ensuite vient votre tour, cherchant une réponse.

Dites-leur que le plus court est toujours mieux. Initiez-les dans les chemins du ninja.

Variables Ă  une lettre

Le Dao se cache sans mots. Seul le Dao est bien commencé et bien terminé.

Laozi (Tao Te Ching)

Une autre façon de coder plus rapidement consiste à utiliser des noms de variable d’une seule lettre partout. Comme a, b ou c.

Une petite variable disparaĂźt dans le code comme un vrai ninja dans la forĂȘt. Personne ne pourra la trouver en utilisant la “recherche” de l’éditeur. Et mĂȘme si quelqu’un le fait, il ne pourra pas “dĂ©chiffrer” la signification du nom a ou b.


 Mais il y a une exception. Un vrai ninja n’utilisera jamais i comme compteur dans une boucle "for". N’importe oĂč, mais pas ici. Regardez autour de vous, il y a beaucoup plus de lettres exotiques. Par exemple, x ou y.

Une variable exotique en tant que compteur de boucle est particuliĂšrement intĂ©ressante si le corps de la boucle nĂ©cessite 1 Ă  2 pages (rallongez-la si vous le pouvez). Ensuite, si quelqu’un regarde au fond de la boucle, il ne sera pas en mesure de comprendre rapidement que la variable nommĂ©e x est le compteur de boucles.

Utiliser des abréviations

Si les rĂšgles de l’équipe interdisent l’utilisation de noms d’une seule lettre et de noms vagues, abrĂ©gez-les, faites des abrĂ©viations.

Comme ceci :

  • list → lst.
  • userAgent → ua.
  • browser → brsr.
  • 
etc

Seul celui qui a vraiment une bonne intuition sera capable de comprendre de tels noms. Essayez de tout raccourcir. Seule une personne digne de ce nom devrait ĂȘtre capable de soutenir le dĂ©veloppement de votre code.

Prenez de la hauteur. Soyez abstrait.

The great square is cornerless
The great vessel is last complete,
The great note is rarified sound,
The great image has no form.

Laozi (Tao Te Ching)

En choisissant un nom, essayez d’utiliser le mot le plus abstrait. Comme obj, data, value, item, elem etc.

  • Le nom idĂ©al pour une variable est data. Utilisez-le partout oĂč vous le pouvez. En effet, chaque variable contient des donnĂ©es, non ?

    
 Mais que faire si data est déjà pris ? Essayez value, elle est aussi universelle. AprÚs tout, une variable obtient finalement une valeur.

  • Nommez une variable par son type : str, num


    Accordez-leur une chance. Un jeune initié peut se demander : de tels noms sont-ils vraiment utiles à un ninja ? En effet, ils le sont !

    Bien sĂ»r, le nom de la variable signifie toujours quelque chose. Il indique ce qui est Ă  l’intĂ©rieur de la variable: une chaĂźne de caractĂšres, un nombre ou autre chose. Mais quand une personne essaiera de comprendre le code, elle sera surprise de constater qu’il n’y a en rĂ©alitĂ© aucune information ! Et finalement, elle ne pourra pas modifier votre code bien pensĂ©.

    Le type de valeur est facile à déterminer par le débogage. Mais quel est le sens de la variable ? Quelle chaßne de caractÚres/nombre est-il stocké ?

    Il n’est pas possible de comprendre sans une bonne mĂ©ditation !

  • 
 Mais s’il n’y a plus de tels noms disponibles ? Il suffit d’ajouter un numĂ©ro : data1, item2, elem5


Test d’attention

Seul un programmeur vraiment attentif devrait ĂȘtre capable de comprendre votre code. Mais comment vĂ©rifier ça ?

Une des façons – utilisez des noms de variables similaires, comme date et data.

MĂ©langez-les oĂč vous pouvez.

Une lecture rapide de ce code devient impossible. Et quand il ya une faute de frappe
 Humm
 Nous sommes coincés longtemps, le temps de boire du thé.

Des synonymes intelligents

L’une des chose les plus difficiles est de trouver un chat noir dans une piùce sombre, surtout s’il n’y a pas de chat.

Confucius

Utiliser des noms similaires pour les mĂȘmes choses rend la vie plus intĂ©ressante et montre votre crĂ©ativitĂ© au public.

Par exemple, considĂ©rons les prĂ©fixes de fonction. Si une fonction affiche un message Ă  l’écran, lancez-la avec display
, comme displayMessage. Et puis, si une autre fonction affiche Ă  l’écran quelque chose d’autre, comme un nom d’utilisateur, lancez-le avec show
 (comme showName).

Insinuez qu’il existe une diffĂ©rence subtile entre ces fonctions, alors qu’il n’en existe aucune.

Faites un pacte avec les autres ninjas de l’équipe: si John commence Ă  “afficher” des fonctions avec display 
 dans son code, Peter pourra utiliser render 
, et Ann – paint 
 Notez Ă  quel point le code est devenu plus intĂ©ressant et diversifiĂ©.


 Et maintenant le tour de magie !

Pour deux fonctions prĂ©sentant des diffĂ©rences importantes, utilisez le mĂȘme prĂ©fixe !

Par exemple, la fonction printPage(page) utilisera une imprimante. Et la fonction printText(text) mettra le texte Ă  l’écran. Laissez un lecteur inconnu rĂ©flĂ©chir Ă  la fonction printMessage, qui porte le mĂȘme nom: “OĂč place-t-il le message ? Pour une imprimante ou Ă  l’écran ?”. Pour le rendre vraiment brillant, printMessage(message) devrait l’extraire dans la nouvelle fenĂȘtre!

Réutiliser des noms

Une fois que le tout est divisé, les parties
ont besoin de noms.
Il y a déjà assez de noms.
Il faut savoir quand s’arrĂȘter.

Laozi (Tao Te Ching)

Ajoutez une nouvelle variable uniquement lorsque cela est absolument nécessaire.

Au lieu de cela, rĂ©utilisez les noms existants. Il suffit d’écrire de nouvelles valeurs en eux.

Dans une fonction, n’utilisez que des variables passĂ©es en paramĂštres.

Cela va rendre vraiment difficile d’identifier ce qui est exactement dans la variable maintenant. Et aussi d’oĂč ça vient. Le but est de dĂ©velopper l’intuition et la mĂ©moire de la personne qui lit le code. Une personne ayant une faible intuition devrait analyser le code ligne par ligne et suivre les modifications dans chaque branche de code.

Une variante avancĂ©e de l’approche consiste Ă  remplacer secrĂštement (!) La valeur par quelque chose de similaire au milieu d’une boucle ou d’une fonction.

Par exemple :

function ninjaFunction(elem) {
  // 20 lignes de code fonctionnant avec elem

  elem = clone(elem);

  // 20 lignes supplémentaires, fonctionnant maintenant avec le clone de elem !
}

Un collĂšgue programmeur qui veut travailler avec elem dans la seconde moitiĂ© de la fonction sera surpris
 Seulement lors du dĂ©bogage, aprĂšs avoir examinĂ© le code, ils dĂ©couvrira qu’il travaille avec un clone !

MVu dans du code rĂ©guliĂšrement. Mortellement efficace mĂȘme contre un ninja expĂ©rimentĂ©.

Underscores for fun

Placez les underscores _ et __ avant les noms de variables. Comme _name ou __value. Ce serait génial si seulement vous connaissiez leur signification. Ou, mieux, ajoutez-les juste pour le plaisir, sans signification particuliÚre. Ou différentes significations dans différents endroits.

Vous faites d’une pierre deux coups. PremiĂšrement, le code devient plus long et moins lisible, et deuxiĂšmement, un autre dĂ©veloppeur peut passer beaucoup de temps Ă  essayer de comprendre ce que signifient les soulignements.

Un ninja intelligent place les traits de soulignement Ă  un endroit du code et les Ă©vite Ă  d’autres endroits. Cela rend le code encore plus fragile et augmente la probabilitĂ© d’erreurs futures.

Montrez votre amour

Laissez tout le monde voir à quel point vos entités sont magnifiques! Des noms comme superElement, megaFrame et niceItem illumineront définitivement le lecteur.

En effet, d’une part, quelque chose s’écrit: super .., mega .., nice ... Mais de l’autre – cela n’apporte aucun dĂ©tail. Un lecteur peut dĂ©cider de chercher un sens cachĂ© et de mĂ©diter pendant une heure ou deux de leur temps de travail rĂ©munĂ©rĂ©.

Chevaucher des variables externes

Lorsqu’on est dans la lumiĂšre, on ne peut rien voir dans l’obscuritĂ©.
Lorsqu’on est dans l’obscuritĂ©, on peut tout voir dans la lumiĂšre.

Guan Yin Zi

Utilisez les mĂȘmes noms pour les variables Ă  l’intĂ©rieur et Ă  l’extĂ©rieur d’une fonction. Aussi simple que cela. Pas besoin de faire des efforts pour inventer de nouveaux noms.

let user = authenticateUser();

function render() {
  let user = anotherValue();
  ...
  ...beaucoup de lignes...
  ...
  ... // <-- un programmeur veut travailler avec l'utilisateur ici et 

  ...
}

Un programmeur qui saute dans le render ne remarquera probablement pas qu’il ya un user local qui masque celui de l’extĂ©rieur.

Ensuite, il essaiera de travailler avec l’user en supposant que c’est la variable externe, le rĂ©sultat de authenticateUser()
 Le piĂšge est dĂ©clenchĂ© ! Bonjour debugger


Effets secondaires partout !

Certaines fonctions donnent l’impression de ne rien changer. Comme isReady(), checkPermission(), findTags()
 Elles sont supposĂ©s effectuer des calculs, trouver et renvoyer les donnĂ©es, sans rien changer en dehors d’eux. En d’autres termes, sans “effets secondaires”.

Une trùs belle astuce consiste à leur ajouter une action “utile”, en plus de la tñche principale.

L’expression de surprise hĂ©bĂ©tĂ©e sur le visage de vos collĂšgues quand ils voient une fonction nommĂ©e is.., check.. ou find... changer quelque chose – va certainement Ă©largir vos limites de la raison.

Une autre façon de surprendre est de renvoyer un résultat non standard.

Montrez votre pensĂ©e originale ! Laissez l’appel de checkPermission renvoyer non pas true/false, mais un objet complexe avec les rĂ©sultats de la vĂ©rification.

Les dĂ©veloppeurs qui essaient d’écrire if(checkPermission(..)) se demanderont pourquoi cela ne fonctionne pas. Dites-leur : “Lisez la documentation!”. Et donnez cet article.

Fonctions puissantes !

The great Tao flows everywhere,
both to the left and to the right.

Laozi (Tao Te Ching)

Ne limitez pas la fonction à ce qui est écrit dans son nom. Soyez plus large.

Par exemple, une fonction validateEmail(email) pourrait (en plus de vĂ©rifier l’exactitude de l’email) afficher un message d’erreur et demander Ă  ressaisir l’email.

Les actions supplĂ©mentaires ne doivent pas ĂȘtre Ă©videntes Ă  partir du nom de la fonction. Un vrai codeur ninja ne les rendra pas Ă©vidents Ă  partir du code non plus.

La jonction de plusieurs actions en une seule protÚge votre code de la réutilisation.

Imaginez, un autre développeur souhaitant uniquement vérifier le courrier électronique et ne pas générer de message. Votre fonction validateEmail(email) qui fait les deux ne leur conviendra pas. Donc, ils ne briseront pas votre méditation en posant des questions à ce sujet.

Résumé

Tous les “conseils” ci-dessus sont tirĂ©s de code rĂ©el 
 Parfois Ă©crits par des dĂ©veloppeurs expĂ©rimentĂ©s. Peut-ĂȘtre mĂȘme plus expĂ©rimentĂ© que vous ;)

  • Suivez certains d’entre eux et votre code deviendra plein de surprises.
  • Suivez beaucoup d’entre eux, et votre code deviendra vraiment le vĂŽtre, personne ne voudra le changer.
  • Suivez tout et votre code deviendra une leçon prĂ©cieuse pour les jeunes dĂ©veloppeurs Ă  la recherche d’illumination.
Carte du tutoriel

Commentaires

lire ceci avant de commenter

  • Si vous avez des amĂ©liorations Ă  suggĂ©rer, merci de soumettre une issue GitHub ou une pull request au lieu de commenter.
  • Si vous ne comprenez pas quelque chose dans l'article, merci de prĂ©ciser.
  • Pour insĂ©rer quelques bouts de code, utilisez la balise <code>, pour plusieurs lignes – enveloppez-les avec la balise <pre>, pour plus de 10 lignes - utilisez une sandbox (plnkr, jsbin, codepen
)